How to place JS script in HTML document-JS Tutorial-php.cn

How to place JS script in HTML document

清浅

Release： 2021-04-18 14:56:07

Original

4696 people have browsed it

Methods to place JS scripts in HTML documents: 1. Place the JS script in the
tag; 2. Place the JS script in the tag; 3. Place the JS script in the and Place JS script in the tag; 4. Import js script externally.

How to place JS script in HTML document

The operating environment of this article: Windows 7 system, Dell G3 computer, html5&&javascript version 1.8.5.

The places where js scripts are placed are in the

tag, in the tag, in the and tags, as well as in the external introduction of js scripts

We can place JavaScript code anywhere in the HTML document. However, the best way to place JavaScript code in an HTML file is as follows

1. In the

... head> section

.. . Place code

in the body> section 3. Place code in the

... body> and ... head> sections

4. Write a script in an external file, and then introduce it in the

... head> section

These four methods will be explained in detail in the article

How to place JS script in HTML document

【Recommended course: JavaScript course】

In the ... head> section

If you want to run a script on a certain event, such as an event that is triggered when the user clicks a certain location, At this time we can put the script in the head

<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script type = "text/javascript">
            function Hello() {
               alert("Hello World")
            }
      </script>  
</head>

Copy after login

Rendering:

How to place JS script in HTML document

##In .. . section

If you need to run a script when the page loads so that the script generates content in the page, the script will go into the section of the document. In this case, no functions will be defined using JavaScript

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
 
<body>
<script type = "text/javascript">
            document.write("Hello World")
      </script>
<p>页面加载时脚本就会生成内容</p>
</body>
</html>

Copy after login

Rendering:

How to place JS script in HTML document

##In and JavaScript code in the section

<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script type = "text/javascript">
            function Hello() {
               alert("Hello World")
            }
  
      </script>
</head>
 
<body>
	<script type = "text/javascript">
      
        document.write("Hello World")

      </script>

Copy after login

Rendering:

How to place JS script in HTML document ##JavaScript in external file

When we need to reuse the same JavaScript code on multiple pages on the website, we can achieve this by introducing js files externally. To facilitate maintaining the same code, the script tag provides a mechanism that allows JavaScript to be stored in an external file and then included into the HTML file.

HTML code

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="111.js"></script>
</head>
<body>
  <input type = "button" onclick = "Hello()" value = "点击" />
</body>
</html>

Copy after login

External js file

   function Hello() {
 document.write("hello world")
            }

Copy after login

Rendering:

Summary: The above is the entire content of this article. I hope it will be helpful to everyone learning JavaScript.
The above is the detailed content of How to place JS script in HTML document. For more information, please follow other related articles on the PHP Chinese website!