Why do we need to insert js code in a document?

S

Sergey Melnikov2015-10-17 14:51:06

JavaScript

Sergey Melnikov, 2015-10-17 14:51:06

Greetings.
I don’t understand js, well, you need to understand why some parts of the js code are taken out to an external file, for example, to the document ready function, and some parts are left on the page itself. There is a template, why are there pieces of code in the html page taken out of the common file? After all, everything can be inserted into document ready?

<script type="text/javascript" src="js/move-top.js"></script>
<script type="text/javascript" src="js/easing.js"></script>	
<script type="text/javascript" src="js/modernizr.custom.53451.js"></script>
<script type="text/javascript">
    jQuery(document).ready(function($) {
      $(".scroll").click(function(event){		
        event.preventDefault();
        $('html,body').animate({scrollTop:$(this.hash).offset().top},1000);
      });
    });
</script>
<!--//end-smoth-scrolling-->
</head>
<body>
  <!--header-->
  <div class="header">
    <div class="container">
      <div class="top-middle">
        <a href="index.html">
          <h3>Hospice</h3>
        </a>	
      </div>
      <div class="top-nav">
        <span class="menu"><img src="images/menu-icon.png" alt=""/></span>		
        <ul class="nav1">
          <li><a href="index.html">Home</a></li>
          <li><a href="about.html" class="active">About Us</a></li>
          <li><a href="features.html">Features</a></li>
          <li><a href="blog.html">Blog</a></li>
          <li><a href="portfolio.html">Portfolio</a></li>
          <li><a href="contact.html" >Contact Us</a></li>
        </ul>
        <!-- script-for-menu -->
         <script>
           $( "span.menu" ).click(function() {
           $( "ul.nav1" ).slideToggle( 300, function() {
           // Animation complete.
            });
           });
        </script>

Reply

Answer the question

In order to leave comments, you need to log in

1 answer(s)

I

Ivan Antonov, 2015-10-17
@azazel_live

jQuery(document).ready(); is the document ready event binding.
When the document is fully loaded, this event will call the function written in .ready( ... )
In this example, it will smoothly scroll the page to the anchor specified in the sheh:
example.com/posts#post1 - the hash in the link is #post1
When you follow it and the document is fully loaded, the page will scroll to the element with id="post1".
If this code is removed, the page will still scroll, but not smoothly, but sharply to the specified anchor, also after the page is loaded.
As for the code below.
This code does not wait for the page to fully load and is executed as soon as the browser reads it.
In this case, the script binds a click event to the menu icon, when clicked, it smoothly opens or closes the menu.