在HTML中使用JavaScript


一、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,然后在運行代碼。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM