JavaScript在HTML中的使用程式碼實例

這篇文章主要介紹了在HTML中使用JavaScript實例程式碼,需要的朋友可以參考下

#3f1c4e4b6b16bbbd69b2ee476dc4f83a標籤

　　在HTML5中script主要有以下幾個屬性：async，defer，charset，src，type，

• async（可選）：

#　　　　關鍵字：非同步腳本，外部文件，立即下載；

　　　　當標籤中包含這個屬性時會立即下載腳本（外部文件），只對外部腳本文件有效，下載的同時可以進行頁面的其他操作，下載完成後停止解析並執行，執行後繼續進行解析，但無法保證執行順序。

<script src="js/index2.js" async="async"></script> 　

• defer（可選）：

　　　　關鍵字：延遲腳本，外部文件，延遲載入；

　　　　當標籤中包含這個屬性時，腳本可以再等到頁面完全被解析或顯示之後執行，只對外部文件有效，如果同時存在兩個帶有defer的腳本，由於延遲的原因，前者將會限於後者執行。

<script src="js/index1.js" defer="defer"></script>

• charset（選用）：

##　　　　關鍵字：字元集

　　　　大多數瀏覽器已經忽略它的值了，所以很少人使用。

• src（可選）：

　　　　關鍵字：外部參考

　　　　表示需要引用的外部檔案的位址。

• type（可選）：

　　　　關鍵字：MIME（腳本語言的內容類型）

#　　　　為保證最大限度的瀏覽器相容，type的屬性值主要時候用的依舊是text/javascript，如果沒有寫這個屬性，其預設值仍然為text/javascript。

　

注意：在引用外部文件，標籤中不要加入其它JS程式碼，瀏覽器在解析時，只會下載src引用的外部腳本文件，表中內嵌入的程式碼將會被忽略。

 3f1c4e4b6b16bbbd69b2ee476dc4f83a標籤的位置

　　通常，我們會把有外部文件的標籤（包括CSS文件，JavaScript檔案）的引用放在相同的位置，一般是在93f0f5c25f18dab9d176bd4f6de5d30e標籤裡面。

　　但是在解析過程中一旦遇到多個JavaScript外部文件，就要等到所有的外部文件加載完成後，頁面才能完全顯示，所以通常我們會把它放在6c04bd5ca3fcae76e30b72ad730ca86d標籤裡的底部，如下所示：

　　在上面中提到過3f1c4e4b6b16bbbd69b2ee476dc4f83a中有defer這個屬性，但是由於在HTML5中提到過，HTML5會忽略嵌入腳本設定defer屬性，目前只有IE4~IE7還支援defer屬性，IE8以後完全遵循HTML5的標準，所以把3f1c4e4b6b16bbbd69b2ee476dc4f83a放在6c04bd5ca3fcae76e30b72ad730ca86d標籤裡的底部依舊是最佳選擇。

 引用外部檔案的優點

• #利於維護：把所有的JavaScript的檔案放在一起，不只可以不觸及HTML程式碼，而且更有利於開發者進行程式碼的編寫和維護。

• 加速瀏覽：如果有多個HTML頁面引用了同一個JavaScript外部文件，這個文件只會載入一次（快取），也就是說可以加快頁面的載入速度。

• 安全性：引用外部文件，如果使用者檢視HTML程式碼，將不會看到JavaScript的程式碼，比寫在標籤內安全性更高。

  
  

2b0b25ff593c5b6c03403dd6234ffb2c標籤

　　字面意思，NO-script，沒有script，也就是瀏覽器不支援JavaScript時，2b0b25ff593c5b6c03403dd6234ffb2c標籤中內容才會被顯示，

• #瀏覽器不支援腳本;

##瀏覽器支援腳本，但是JavaScript被停用；
　　以上兩個符合任何一個，2b0b25ff593c5b6c03403dd6234ffb2c標籤內的內容都會被顯示。

　　上圖頁面，給使用者了一個訊息，當瀏覽器不支援或停用JavaScript是才會被顯示，否則使用者將永遠不會看到，並且不會影響頁面其他元素的顯示。

以上是JavaScript在HTML中的使用程式碼實例的詳細內容。更多資訊請關注PHP中文網其他相關文章！