Javascript Where to


Where to place JavaScript code?

Typically, JavaScript code is used in conjunction with HTML code, which can be placed anywhere in the HTML document. But placed in place, the normal implementation of JavaScript code will have an impact, as described below.


Placed between <head> tag.

It is common practice to place JavaScript code between the <head> tags of an HTML document. Since the HTML document is loaded from top to bottom in the browser, placing the JavaScript code between the <head> tags ensures that the script is loaded before it needs to be used:

<html>
   <head>
      <script type="text/javascript">
      ……
      JavaScript Code
      ……
      </script>
   </head>
....

Placed between <body> tag

There are cases where JavaScript code is placed between <body> tag. Consider the following scenario: We have a piece of JavaScript that needs to manipulate HTML elements. However, because the HTML document is loaded from top to bottom, in order to avoid JavaScript code operation HTML elements, HTML elements have not loaded and error (object does not exist), so need to write this code to HTML elements Later, examples are as follows:

<html>
   <head>
   </head>
   <body>
   </body>
   <div id="div1"></div>
   <script type="text/javascript">
      document.getElementById("div1").innerHTML="Sample Text";
   </script>
</html>

But usually, we operate the page elements are generally driven by the event, so the above situation is rare. In addition, we do not recommend writing JavaScript code outside <html> tag.

Note

If the HTML document is declared as XHTML, the <script> tag must be declared in the CDATA section, or XHTML will parse the <script> tag into another XML tag, and the JavaScript code may not execute properly. Therefore, the use of JavaScript in strict XHTML should be declared as in the following example:

<html>
   <head>
   <script type="text/javascript">
   <![CDATA[
      JavaScript Code
   ]]>
   </script>
   </head>
....

The above two ways to write JavaScript code to HTML documents, HTML documents are the way the internal reference JavaScript code. In addition to internal references, you can use external references.


External reference JavaScript code

Separate the JavaScript code (not including the <script> tag) into a document named after the js suffix, such as myscript.js, and use the src attribute in the HTML <script> tag to refer to the file:

<html>
   <head>
      <script type="text/javascript" src="myscript.js"></script>
   </head>
....

After using the external reference JavaScript code, the benefits are obvious:

  1. Avoid using <! - ... // -> in your JavaScript code
  2. Avoid the ugly CDATA
  3. Common JavaScript code can be reused for other HTML documents, as well as for the consistent maintenance of JavaScript code
  4. HTML documents smaller, conducive to search engines included
  5. You can compress and encrypt individual JavaScript files
  6. Browsers can cache JavaScript files and reduce bandwidth usage (when multiple pages use a JavaScript file at the same time, usually only need to download once)
  7. Avoid using complex HTML entities, such as document.write (2> 1) without writing document.write (2 < 1)

Forming JavaScript code as an external file also increases the burden on the server's HTTP requests, which is not a good strategy in hyper-concurrent requests. In addition, when referring to external js file, pay attention to the correct file path.




Copyright 2014-2017 by DeveloperTut.com. All Rights Reserved.
TwitterGoogle+Facebook