在網頁編寫JavaScript時,可以通過嵌入式、外鏈式和行內式

發布時間:2022年12月28日 閱讀:1996 次

在網頁編寫JavaScript時,可以通過嵌入式、外鏈式和行內式

網頁編寫JavaScript時,可以通過嵌入式、外鏈式和行內式這3種方式來引入JavaScript代碼,下面針對這3種方式分別進行講解。

1嵌入式

    嵌入式就是使用<script>標簽包裹JavaScript代碼,直接編寫到HTML文件中,具體實例如下:

 

<script>

        JavaScript語句

</script>

 


 

<script  type="text/javascript">

         JavaScript語句

</script>


上述示例演示了兩種書寫方式,其中<script>標簽的type屬性用于告知瀏覽器腳本的類型,由于HTML5中該屬性默認值為"text/javascript",因此在編寫時可以省略。

2.外鏈式

    外鏈式是指將JavaScript代碼保存到一個單獨的文件中,通常使用“js”作為文件的擴展名,然后使用<script>標簽的src屬性引入文件,具體示例如下:

              HTML文件

……

<script  src="js/demo.js"></script>

…… 


 

         js/demo.js 文件

……

alert("Hello World");

 ……


通過示例可以看出,src屬性是一個文件路徑或URL地址,可以指定為如下形式。

在實際開發中,當需編寫大量、邏輯復雜、特有功能的JavaScript代碼時,推薦大家使用外鏈式。相比嵌入式,外鏈式的優勢可以總結為以下3點。

    為了降低JavaScript阻塞問題對頁面造成的影響,可以使用HTML5為<script>標簽新增的兩個可選屬性:async和defer,下面分別介紹其作用。

  1. 1)   async

    async用于異步加載,即先下載文件,不阻塞其他代碼執行,下載完成后再執行。

 

<script src="//js.test/demo.js" async></script>

 
  1. 2)   defer

    defer用于延后執行,即先下載文件,知道網頁加載完成后再執行。

 

<script src="//js.test/demo.js" defer></script>

 

    添加async或defer屬性后,即使文件下載失敗,也不會阻塞后面的JavaScript代碼執行。

3行內式

    行內式是將JavaScript代碼作為HTML標簽的屬性值使用。例如,單擊“test”按鈕時,彈出一個警告框提示“Hello World”,具體示例如下。

 

<a href="javascript:alert('Hello  World');">test</a>

 

    JavaScript還可以寫在HTML標簽的實際屬性中,事件是JavaScript中的一種機制。例如,單擊網頁中的一個按鈕時,就會觸發按鈕的單擊事件,具體示例如下。

 

<input type="button"  onclick="alert('Hello World');" value="test">

 

上述代碼實現了單擊“test”按鈕時,彈出一個警告框提示“Hello World”。

由于現代網頁開發提倡結構、樣式、行為的分離,即分離HTML、CSS、JavaScript三部分的代碼,避免直接寫在HTML標簽的屬性中,從而更有利于維護。因此在實際開發中不推薦使用行內式。


Tag:網頁編寫 JavaScript 嵌入式 外鏈式 行內式
相關文章

發表評論:

性中国熟女毛耸耸性视频,办公室沙发口爆12P,在车上玩弄我的美艳搜子