Home >Web Front-end >JS Tutorial >How to place JS script in HTML document

How to place JS script in HTML document

清浅Original: 2019-01-11 09:55:164733browse

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.

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>

Rendering:

How to place JS script in HTML document

##In

.. . sectionIf 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>

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>

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>

External js file

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

Rendering:

Summary: The above is the entire content of this article. I hope it will be helpful to everyone learning JavaScript. Image 6.jpg

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!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：How to implement parallel processing using JavaScriptNext article：How to implement parallel processing using JavaScript

See more

How to place JS script in HTML document

Related articles