一、HTML中使用JavaScript的兩種方式
1、在<script></script>中包含JavaScript代碼。
2、使用<script>標簽的src屬性引入外部javaScript文件,JavaScript文件可以來自外域也可以是同域。如果script標簽包含src屬性,那么script標簽中的內容會被忽律。
二、html文檔中JavaScript執行順序。
html文檔中JavaScript執行順序是按照他們在文檔中的順序執行的。
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Document</title>
6 <script>
7 console.log("aaa"); 8 </script>
9 <script>
10 console.log("hello world"); 11 </script>
12 </head>
13 <body>
14
15 </body>
16 </html>
控制台中會先輸出aaa,在輸出hello world.
html文檔中script標簽的位置可以在head標簽中,也可以在body標簽中。當script標簽在head中時,會先執行JavaScript代碼,再加載文檔的內容,如果script標簽在body標簽中,會先加載文檔內容,再執行JavaScript代碼。
三、script標簽的defer和aynsc屬性
script標簽的defer和aynsc屬性只對外部腳本有效。
<script>標簽定義了defer屬性。這個屬性的用途是表明腳本在執行時不會影響頁面的構造。腳本會被延遲到整個頁面都解析完畢后再運行。
1 <!DOCTYPE html>
2 <html> 3 <head> 4 <title>Example HTML Page</title> 5 <script type="text/javascript" defer="defer" src="example1.js"></script>
6 7 <script type="text/javascript" defer="defer" src="example2.js"></script>
8 9 </head>
10 <body> 11 <!-- 這里放內容 --> </body>
12 </html>
我們把<script>元素放在了文檔的<head>元素中,但其中包含的腳本將延遲到瀏覽器遇到</html>標簽后再執行。HTML5規范要求腳本按照它們出現的先后順序執行,因此第一個延遲腳本會先於第二個延遲腳本執行,而這兩個腳本會先於DOMContentLoaded事件執行。
<script>標簽定義了aysnc屬性。腳本執行和文檔內容渲染之間異步(同時)執行,所以不要在腳本中修改dom。腳本會在Load時間之前執行,在DOMContentLoaded之前或者之后執行。腳本之間的順序不可保證,所以腳本之間不要有依賴關系.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="example1.js" async="async"></script>
<script src="example2.js" async="async"></script>
</head>
<body>
</body>
</html>
三、使用外部腳本的好處
1.代碼可維護性好。html和JavaScript代碼分離,內容清晰,如果需要修改JavaScript,只需要在單獨的文件中修改即可。
2.瀏覽器緩存,同一個頁面多次加載時,外部的JavaScript文件會在瀏覽器緩存。
四、noscript標簽
該標簽可以出現在body標簽中的任何位置,包含在<noscript>元素中的內容只有在下列情況下才會顯示出來:
1.瀏覽器不支持腳本;
2.瀏覽器支持腳本,但腳本被禁用。
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Title</title>
6 <script src="example1.js" async="async"></script>
7 <script src="example2.html" async="async"></script>
8 </head>
9 <body>
10 <noscript>
11 <p>當前瀏覽不支持或者禁用了javascript</p>
12 </noscript>
13 </body>
14 </html>
需要在瀏覽器中禁用JavaScript,然后在運行代碼。