Where to place JavaScript code?
Normally, JavaScript code is used with HTML code, and JavaScript code can be placed anywhere in an HTML document. However, the place where it is placed will have a certain impact on the normal execution of JavaScript code, as described below.
Placed between <head></head>
It is common practice to place JavaScript code between <head></head> tags in HTML documents. Since HTML documents are loaded by the browser from top to bottom, placing JavaScript code between the <head></head> tags ensures that it has been loaded before you need to use the script:
The code copy is as follows:
<html>
<head>
<script type="text/javascript">
...
JavaScript Code
...
</script>
</head>
....
Placed between <body></body>
There are also some cases where JavaScript code is placed between <body></body>. Imagine the following situation: We have a piece of JavaScript code that needs to manipulate HTML elements. However, since the HTML document is loaded by the browser from top to bottom, to avoid the HTML element being not loaded and an error (the object does not exist) is reported by the JavaScript code when operating HTML elements. Therefore, this code needs to be written behind the HTML element. The example is as follows:
The code copy is as follows:
<html>
<head>
</head>
<body>
</body>
<div id="div1"></div>
<script type="text/javascript">
document.getElementById("div1").innerHTML="test text";
</script>
</html>
But usually, our operation of page elements is usually driven by events, so this situation is rare. In addition, we do not recommend writing JavaScript code outside <html></html>.
hint
If the HTML document is declared as XHTML, the <script></script> tag must be declared within the CDATA section, otherwise XHTML will parse the <script></script> tag into another XML tag, and the JavaScript code inside may not be executed normally. Therefore, using JavaScript in strict XHTML should be declared like the following example:
The code copy is as follows:
<html>
<head>
<script type="text/javascript">
<![CDATA[
JavaScript Code
]]>
</script>
</head>
....
The above two ways to write JavaScript code into HTML documents are both ways to reference JavaScript code within the HTML document. In addition to internal references, external references can also be used.
External reference to JavaScript code
Make JavaScript code (excluding <script></script> tags) a separate document, named with a js suffix, such as myscript.js, and use the src attribute in the HTML document <script></script> tag to reference the file:
The code copy is as follows:
<html>
<head>
<script type="text/javascript" src="myscript.js"></script>
</head>
....
The benefits are obvious after using external referenced JavaScript code:
1. Avoid using <!-- ... //--> in JavaScript code
2. Avoid using ugly CDATAs
3. Public JavaScript code can be replicated in other HTML documents, which is also conducive to the unified maintenance of JavaScript code.
4. The HTML document is smaller, which is conducive to search engine collection
5. Can compress and encrypt a single JavaScript file
6. The browser can cache JavaScript files to reduce broadband use (when multiple pages use a JavaScript file at the same time, it usually only needs to be downloaded once)
7. Avoid using complex HTML entities, such as document.write(2>1) can be used directly without writing document.write(2<1)
Forming JavaScript code into external files will also increase the burden of HTTP requests on the server. In an environment of super high concurrent requests, this is not a good strategy. In addition, when referring to external js files, you need to pay attention to the correct path of the file.