Where to put JavaScript?

Where to put JavaScript

Just now we wrote the first JavaScript program, and we emphasized that JavaScript code must be placed in <script>……< /script> tag.

We put the <script>...</script> tags containing the code inside the <body>...</body> tags. In fact, not only can this be done, we have two other ways to use JavaScript in HTML.

JavaScript in head

In addition to placing the <script> tag containing the code in the <body>...</body> tag, we can also put it in <head>...</head> tag, for example:

<html>
<head>
<h1> JavaScript in head. </h1>
<script>
alert("hello word!");
</script>
</head>
<body></body>
</html>

The execution result of this program is no different from the previous one, but in fact, the JavaScript code is placed in <head></head> There is a difference between ; and putting it in <body></body>:

Simply put, putting it in <head></head> will be better than putting it in <body> </body> is executed first. The code in the head tag will be parsed before the page starts drawing, while the code in the body will be executed when this code is read while the page is rendering.

External JavaScript

In addition to writing JavaScript code directly in HTML, we can also write JavaScript code in a js file , call this js file in HTML. Let’s take “hello world” as an example.

In the laboratory environment, save the following code and name it "out.js" and put it on the desktop:

alert("hello word!");

Save the following code and name it "test2.html" and put it on the desktop:

<html>
<head>
<h1> my JavaScript code in "out.js" </h1>
</head>
<body>
<script src="out.js"></script>
</body>
</html>

Similarly, double-click the "test2.html" file on the desktop, call the browser to run, you will find that running The effect is no different from the previous two procedures.

In fact, the first two methods place the JavaScript code directly in HTML. When the page is loaded, the JavaScript code is parsed. If you place the JavaScript code in an external file, it will only be called and executed when the event is triggered and the JavaScript code is needed.

There is an advantage to this. When the page is relatively complex, putting a large amount of JavaScript code in an external file and only executing it when needed will significantly speed up the page loading speed.

In an HTML file, add different JavaScript codes at different locations, run and observe the order in which the JavaScript codes at different locations are executed.

Reference is as follows, observe the order of pop-up boxes:

<html>
<head>
<script>
alert("in head");
</script>
</head>
<body>
<script>
alert("in body");
</script>
</body>
</html>

Continuing Learning

new file

<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title> RunJS 演示代码 </title> <script> var ck = function(){ var x = prompt ("输入数据: ", ""); alert(x); } </script> </head> <body> <button onclick="ck();"> 输入按钮 </button> </body> </html>

submit Reset Code

Automatic operation

Where to put JavaScript?

ElementaryImperial CMS enterprise imitation website tutorial

ElementaryNewbies with zero foundation in WordPress build personal blogs and corporate websites

ElementaryUltimate CMS zero-based website building instruction video

ElementaryFront-end project-Shangyou [HTML/CSS/JS technology comprehensive practice]

IntermediateVue3.0 from 0 to build a universal backend management system project practice

ElementaryZero-based front-end course [Vue advanced learning and practical application]

ElementaryWEB front-end tutorial [HTML5+CSS3+JS]

ElementaryQuick introduction to apipost

IntermediateVue3+TypeScript practical tutorial-enterprise-level project practice

ElementaryLet's briefly talk about starting a business in PHP

IntermediateVUE e-commerce project (front-end & back-end dual project actual combat)

ElementaryApipost practical application [api, interface, automated testing, mock]