This time I will bring you the methods of introducing js into the page, and the precautions for introducing js into the page. The following is a practical case, let's take a look.
There are two basic ways to introduce js into the page: embedding js in the page, referencing external js files.
1. Embed js
in the page This is the simplest way to use js on the page. I usually use this method when writing a small test.
Write the script element in front of
<script>
// 在这里写js
function test(){
alert('说点什么呢');
}
test();
</script>2. Reference external js files
Referring to external js files can separate js files and HTML files, one js file can be used by multiple HTML files, and it is more convenient to maintain, etc.
The usage is to set the src attribute of the script element to the URL of the js file, such as:
<script src="js/test.js"></script>
3. The position of the script element in the HTML file
If you put the script element inside the head element, it would look like this:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <script src="xxx.js"></script> </head> <body> <!--页面内容--> </body> </html>
In this case, the page content will not be rendered until the browser downloads, parses, and executes the js file. If a page requires many js files, the browser may have a short "whiteboard" and the user experience is not good.
Therefore, we should put the js file in front of , so that the browser will display the page to the user first.
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <!--<script src="xxx.js"></script>--> </head> <body> <!--页面内容--> <script src="xxx.js"></script> </body> </html>
I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!
Recommended reading:
Combining HTML tags with DOM nodes
js prohibits browser back events
JS click to cycle and switch to play pictures
The above is the detailed content of What are the methods to introduce js into the page?. For more information, please follow other related articles on the PHP Chinese website!
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
