Put script src tags at top of body vs put script src tags at bottom of body

script tag
embedded javascript
javascript in head or body difference
how to include external javascript in html
multiple script tags in html
javascript in separate file
where to code javascript
which attribute is used to link to an external javascript file?

I heard that I should place the script tags right before the closing body tag. However, when I do this, my angularJS expressions do not seem to compute correctly for some reason. When I place the script tags right before the closing body tag, "{{value}}" displays on the page which I do not want. However, when I move the script tags to right after the opening body tag, the page works correctly to display "2". Can anyone explain what happened?

Put script right before closing body tags and page incorrectly displays "{{value}}"

<!DOCTYPE html>
  <html>

  <head>
      <meta chrset="UTF 8">
      <title>Event Registration</title>
      <link rel="stylesheet" href="css/bootstrap.css">

  </head>

  <body>

      <div ng-app="sampleApp" ng-controller="AngularController">
          <h1> Guru99 Global Event</h1>
          {{value}}
      </div>
      <script>
          var sampleApp = angular.module('sampleApp', []);
          sampleApp.controller('AngularController', function($scope) {
              $scope.a = 1;
              $scope.b = 1;
              $scope.value = $scope.$eval('a+b');
          })
      </script>

      <script src="lib/angular.js"></script>
      <script src="lib/bootstrap.js"></script>
      <script src="lib/jquery-1.11.3.min.js"></script>
      <script src="lib/app.js"></script>

  </body>

  </html>

Put script right after opening body tags and page correctly displays "2"

<!DOCTYPE html>
  <html>

  <head>
      <meta chrset="UTF 8">
      <title>Event Registration</title>
      <link rel="stylesheet" href="css/bootstrap.css">

  </head>

  <body>
      <script src="lib/angular.js"></script>
      <script src="lib/bootstrap.js"></script>
      <script src="lib/jquery-1.11.3.min.js"></script>
      <script src="lib/app.js"></script>

      <div ng-app="sampleApp" ng-controller="AngularController">
          <h1> Guru99 Global Event</h1>
          {{value}}
      </div>
      <script>
          var sampleApp = angular.module('sampleApp', []);
          sampleApp.controller('AngularController', function($scope) {
              $scope.a = 1;
              $scope.b = 1;
              $scope.value = $scope.$eval('a+b');
          })
      </script>

  </body>

  </html>

Put your script tag in the header.

That recommendation of putting it just before the closing tag, is so that the browser downloads the content of the page first, then the user can see something while the javascript is being downloaded. If the script tag is at the top, then the user will stare at a white page for a little bit longer, until the javascript finishes downloading, then the content will start rendering.

In your case, it seems you don't want the user to see any content before the javascript runs (the {{value}} raw html), so it makes total sense to ignore that recommendation.

Where to put your script tags in Javascript, Some advocate putting the SCRIPT tags in the BODY section, right at the end. Your SCRIPT tags then include a SRC attribute that points to the location of your​  Place script that impacts the render of the page at the end of the body (before the body closure). do NOT place script in the markup such as <input onclick="myfunction()"/> - better to put it in event handlers in your script body instead. If you cannot decide, put it in the head until you have a reason not to such as page blocking issues.

Very simple. All of the angular functions,handlers,components & directives are initialized in angulatjs script. When you load the angularjs at the bottom. The browser will load the script after load the HTML. So at the beginning there is no angular so It will not capture {{value}} so it just a plain text for browser, Browser will show {{value}} directly.

When you load at the top. The angular will be loaded. So angular knows how to handle {{value}}. So it will bind the value for {{value}}.

Where should JS <script> tags be linked in HTML documents , It is a best practice to put JavaScript. It is a best practice to put JavaScript <​script> tags just before the closing </body> tag rather than in the <head> section of your HTML. The reason for this is that HTML loads from top to bottom. The head loads first, then the body, and then everything inside the body. Regarding the script having a 'ready' portion. Putting that script at the bottom of the body guarantees the DOM is ready to be manipulated, if you put it in the head, you have to wrap it so that it waits for the DOMReady(or similar) event – Juan Mendes Nov 23 '10 at 19:17

The browser "reads" your html from top to bottom and when it encounters javascript or css it will stop rendering until it processes it entirely. This is why in many cases it is suggested that scripts be placed at the bottom. Usually the script is unable to do its "job" until the entire page renders, anyway, so why block the initial render?

That being said, this is only tangentially the reason for the behavior you are seeing. The general answer for your question is that javascript, as well, is "read" top to bottom, so any variable not declared before it is used is undefined (there is a concept called "hoisting" which affects this as well, but of no relevance at the moment). In your case, specifically, the angular object is not yet declared (had you opened your console tools you would have seen that as an error) and therefore you cannot call any of the methods associated with that object. angular is declared in angular.js, which is included after your script in the first example, and (correctly) before in the second.

If you simply move your script to the bottom of the included scripts in the first example you will see that your application should run as expected

"Always put your script tag(s) at the end of the HTML file to ensure it , I assume it's probably not something as simple as the computer starts at the top of the file and works its way down to the bottom. Or is it? Or put  @SalmanA Thank you! Yes, I fall in that 99%. I first need jquery lib to load, then my remaining .js scripts. When I declare async or defer on the jquery lib script tag, my .js scripts don't work.

How To Add JavaScript to HTML, The <script> tag can be placed in the <head> section of your HTML, with putting the script either inside or outside the <body> tags and reload  Well organized and easy to understand Web building tutorials with lots of examples of how to use HTML, CSS, JavaScript, SQL, PHP, Python, Bootstrap, Java and XML.

JavaScript Where To, You can place an external script reference in <head> or <body> as you like. The script will behave as if it was located exactly where the <script> tag is located. The src attribute specifies the URL of an external script file. If you want to run the same JavaScript on several pages in a web site, you should create an external JavaScript file, instead of writing the same script over and over again. Save the script file with a .js extension, and then refer to it using the src attribute in the <script> tag.

Extending Your Business to Mobile Devices with IBM Worklight, The difference between the new JavaScript file and the one in the repository is that the at the top of the <head> tag head-bottom.wlfragment: Injects the snippet at the bottom of To add the barcodescanner.js file to the body-top.​wlfragment fragment file, use these steps: 1. <script src="js/barcodescanner.js"​></script> 4. You can place an external script reference in <head> or <body> as you like. The script will behave as if it was located exactly where the <script> tag is located. External scripts cannot contain <script> tags.