好程式設計師web前端分享在HTML中使用JavaScript例項程式碼

好程式設計師IT發表於2019-07-31
程式設計師Web前端HTMLJavaScript

好程式設計師 web 前端分享 在 HTML 中使用 JavaScript 例項程式碼，本 篇文章主要介紹了在 HTML 中使用 JavaScript 例項程式碼 , 需要的朋友可以參考下 。

<script>標籤

　　在 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引用的外部指令碼檔案，表中內嵌入的程式碼將會被忽略。

 <script>標籤的位置

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

　　但是在解析過程中一旦遇到多個 JavaScript外部檔案，就要等到所有的外部檔案載入完成後，頁面才能完全顯示，所以通常我們會把它放在<body>標籤裡的底部 。


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

  引用外部檔案的優點

  • 利於維護：把所有的 JavaScript的檔案放在一起，不僅可以不觸及HTML程式碼，而且更有利於開發者進行程式碼的編寫和維護。
  • 加速瀏覽：如果有多個 HTML頁面引用了同一個JavaScript外部檔案，這個檔案只會載入一次（快取），也就是說可以加快頁面的載入速度。
  • 安全性：引用外部檔案，如果使用者檢視 HTML程式碼，將不會看到JavaScript的程式碼，比寫在標籤內安全性更高一些。 
     

<noscript>標籤

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

  • 瀏覽器不支援指令碼；
  • 瀏覽器支援指令碼，但是 JavaScript被禁用；

　　以上兩條符合任何一個， <noscript>標籤內的內容都會被顯示。


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


來自 “ ITPUB部落格 ” ，連結：http://blog.itpub.net/69913892/viewspace-2652357/，如需轉載，請註明出處，否則將追究法律責任。

相關文章