在HTML中使用JavaScript

時間 2019-11-11

標籤 html 使用 javascript 欄目 HTML 简体版

原文原文鏈接

1、HTML中使用JavaScript的兩種方式

　　一、在<script></script>中包含JavaScript代碼。javascript

　　二、使用<script>標籤的src屬性引入外部javaScript文件，JavaScript文件能夠來自外域也能夠是同域。若是script標籤包含src屬性，那麼script標籤中的內容會被忽律。html

2、html文檔中JavaScript執行順序。

　　html文檔中JavaScript執行順序是按照他們在文檔中的順序執行的。java

 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代碼。緩存

3、script標籤的defer和aynsc屬性

　　script標籤的defer和aynsc屬性只對外部腳本有效。dom

　　<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事件執行。async

　　<script>標籤訂義了aysnc屬性。腳本執行和文檔內容渲染之間異步（同時）執行，因此不要在腳本中修改dom。腳本會在Load時間以前執行，在DOMContentLoaded以前或者以後執行。腳本之間的順序不可保證，因此腳本之間不要有依賴關係.spa

<!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>

3、使用外部腳本的好處

　　1.代碼可維護性好。html和JavaScript代碼分離，內容清晰，若是須要修改JavaScript，只須要在單獨的文件中修改便可。code

　　2.瀏覽器緩存，同一個頁面屢次加載時，外部的JavaScript文件會在瀏覽器緩存。

4、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>