Where is the JavaScript code best placed in the HTML code?

  • 2020-03-30 04:06:46
  • OfStack

Where to put the JavaScript code?

Typically, JavaScript code is used with HTML code and can be placed anywhere in the HTML document. However, where you put it can have an impact on the normal execution of your JavaScript code, as described below.

Placed in < Head> < / head> between

Placing JavaScript code in HTML documents Head> < / head> Between tags is a common practice. Since HTML documents are loaded by the browser from top to bottom, place JavaScript code in < Head> < / head> Between tags, you can ensure that the script has been loaded before you need to use it:


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

Placed in < Body> < / body> between

There are also cases where JavaScript code is placed in < Body> < / body> Between the two. Imagine that we have a piece of JavaScript code that needs to manipulate an HTML element. However, since the HTML document is loaded by the browser from top to bottom, in order to avoid the JavaScript code operating on the HTML element, the HTML element has not been loaded and the error is reported (the object does not exist), so we need to write this code to the HTML element after the following example:


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

But in general, we operate on page elements through events, so that's not often the case. Also, we do not recommend writing JavaScript code to. Html> < / html> Outside.

prompt

If the HTML document is declared XHTML. Script> < / script> The tag must be declared in the CDATA section, otherwise XHTML will put Script> < / script> The tag is parsed into another XML tag, and the JavaScript code inside may not execute properly. Therefore, using JavaScript in strict XHTML should be declared as in the following example:


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

Both of these ways of writing JavaScript code to an HTML document are ways of referencing JavaScript code within an HTML document. In addition to internal references, you can use external references.

External reference JavaScript code

JavaScript code (excluding < Script> < / script> Tag) forms a separate document, and is named after the js suffix, such as myscript.js, and in the HTML document < Script> < / script> The SRC attribute is used in the tag to refer to the file:


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

With the use of external reference JavaScript code, the benefits are obvious:
1. Avoid using < in JavaScript code. ! -... / / - >
2. Avoid ugly CDATA
3. Common JavaScript code can be reused for other HTML documents, which is also conducive to the unified maintenance of JavaScript code
4.HTML documents are smaller and easier for search engines to include
5. You can compress and encrypt a single JavaScript file
6. Browsers can cache JavaScript files to reduce broadband usage (when multiple pages use a single JavaScript file, it is usually downloaded only once)
7. Avoid using complex HTML entities, such as document.write directly. 1) without having to write document.write(2< 1)


Related articles: