JavaScript進階程式設計（2）在HTML中使用JavaScript

標籤：沒有   情況   url   包含   阻塞   解決方案   插入   那是   求值   

本章內容：使用<script>元素、嵌入指令碼與外部指令碼、文檔模式對JavaScript的影響、考慮禁用JavaScript的情境。

    1.<script>元素

向HTML頁面中插入JavaScript的主要方法，就是使用<script>元素。HTML4.01為<script>定義了下列屬性：

    async：可選。表示應該立即下載指令碼，但不應妨礙頁面中的其他動作，比如下載其他資源或等待載入其他指令碼。只對外部指令檔有效。

    charset：可選。表示應該通過src屬性指定的代碼的字元集。

    defer：可選。表示指令碼可以延遲到文檔完全被解析和顯示之後再執行。只對外部指令檔有效。

    language：已廢棄。

    src：可選。表示包含要執行代碼的外部條件。

    type：可選。可以看成是language的替代屬性；表示編寫代碼使用的指令碼語言的內容類型。這個屬性不是必需的，如果不指定這個屬性，預設值為text/javascript。

   使用<script>元素的方式有兩種：直接在頁面嵌入JavaScript代碼和包含外部JavaScript檔案。

 嵌入式：在使用<script>元素嵌入JavaScript代碼時，只須為<script>指定type屬性。下面這樣把JavaScript代碼直接放在元素內部即可：

<script type="text/javascript">function sayScript(){  alert("Hi!");}</script>

包含在<script>元素內部的JavaScript代碼將從上至下依次解釋。就拿前面這個例子來說，解譯器會解釋一個函數的定義，然後將該定義儲存在自己的環境當中。在解譯器對<script>元素內部的所有代碼求值完畢以前。頁面中的其餘內容都不會被瀏覽器載入或顯示。

  在使用<script>嵌入JavaScript代碼時，記住不要在代碼中任何的地方出現"</script>"字串。因為按照解析嵌入式代碼的規則，當瀏覽器遇到字串"</script>"，就會認為那是結束的</script>標籤。而通過逸出字元 "/" 來解決這個問題。

外部式：使用<script>元素來包含外部JavaScript檔案，那麼src屬性就是必需的。這個屬性指向外部JavaScript檔案的連結。例如： 

<script type="text/javascript" src="example.js"></script>

在這個例子中。外部檔案example.js將被載入到當前頁面中。外部條件只須包含通常要放在開始的<script>和結束的</script>之間的那些JavaScript代碼即可。

      2.標籤的位置

 按照傳統的做法，所有<script>元素都應該放在頁面的<head>元素中，例如:

        <title>Example HTML Page</title>        <script type="text/javascript"  src="exmpale1.js"></script>        <script type="text/javascript" src="example2.js"></script>    </head>    <body>        <!-- 這裡放內容 -->    </body>    </html>

這樣做法的目的就是把所有外部檔案（包括CSS檔案和JavaScript檔案）的引用都放在相同的地方。可是這樣，在文檔的<head>元素中包含所有JavaScript檔案，意味著必須等到全部JavaScript代碼都被下載解析和執行完成以後，才能開始呈現頁面的內容（瀏覽器在遇到<body>標籤時才開始顯示內容）對於有很多JavaScript代碼的頁面來說，會導致瀏覽器在呈現頁面時出現明顯的延遲，而延遲期間的瀏覽器視窗將是一片空白。這將給使用者一個不好的體驗。

所以，現在Web應用程式一般都把全部JavaScript引用放在<body>元素中頁面內容的後面，以下例子所示：

    <!DOCTYPE html>    <html>    <head>        <title>Example HTML Page</title>    </head>    <body>        <!-- 這裡放內容 -->        <script src="jquery.min.js"></script>        <script src="example.js"></script>    </body>    </html>

 在解析包含的JavaScript代碼之前，頁面的內容將完全呈現在瀏覽器中。使用者也會因為瀏覽器視窗顯示空白頁面的時間縮短而感到開啟頁面速度加快了。

    3.延遲指令碼 

  defer：表明指令碼在執行時不會影響頁面的構造。也就是說指令碼會被延遲到整個頁面都解析完畢後再運行。因此，在<script>元素中設定defer屬性，相當於告訴瀏覽器立即下載，但順延強制。

 

   <!DOCTYPE html>    <html>    <head>        <title>Example HTML Page</title>        <script type="text/javascript" defer="defer" src="jquery.min.js"></script>        <script type="text/javascript" defer="defer" src="example.js"></script>    </head>    <body>        <!-- 這裡放內容 -->    </body>    </html>

 

 

 

  在這個例子中，雖然我們把<script>元素放在了文檔的<head>元素中，但其中包含的指令碼將延遲到瀏覽器遇到</html>標籤後再執行。

最好只包含一個延遲指令碼，defer屬性只適用於外部指令檔。把延遲指令碼放在頁面底部任然是最佳選擇。

   4.非同步指令碼

  async：與defer屬性相似，都用於改變處理指令碼的行為。async只適用於外部指令檔，並告訴瀏覽器立即下載檔案。標記為async的指令碼並不保證按照指定它們的先後順序執行。例如：

   <!DOCTYPE html>    <html>    <head>        <title>Example HTML Page</title>        <script type="text/javascript" async src="jquery.min.js"></script>        <script type="text/javascript" async  src="example.js"></script>    </head>    <body>        <!-- 這裡放內容 -->    </body>    </html>

 

在以上代碼中，第二個指令檔可能會在第一個指令檔之前執行。因此，確保兩者之間互不依賴非常重要。指定async屬性的目的是不讓頁面等待兩個指令碼下載和執行，從而非同步載入頁面其他內容。為此，建議非同步指令碼不要在載入期間修改DOM。

內嵌程式碼與外部檔案

 在HTML中嵌入JavaScript代碼雖然沒有問題，但是一般認為最好的做法還是儘可能使用外部檔案包含JavaScript代碼。它有如下有點：

   可維護性：遍及不同HTML頁面的JavaScript會造成維護問題。但把所有JavaScript檔案都放在一個檔案夾中，維護起來就輕鬆多了。開發人員可以不觸及HTML標記情況下，集中精力編輯JavaScript代碼。

   可緩衝：瀏覽器能夠根據具體的設定緩衝連結的所有外部JavaScript檔案。如果頁面都使用同一個檔案，那麼這個檔案只需要下載一次。最終結果可以加快頁面載入的速度。

<noscript>元素

   當瀏覽器不支援JavaScript時如何讓頁面平穩退化。解決方案就是創造一個<noscript>元素，用以在不支援JavaScript的瀏覽器顯示替代的內容。只有下列情況才會顯示出來：

  瀏覽器不支援指令碼；

  瀏覽器支援指令碼，但指令碼被禁用。

  符合上述任何一個條件，瀏覽器都會顯示<noscript>中的內容。而在除此之外的其他情況下，瀏覽器不會呈現<noscript>中的內容。看下面這個例子：

 

   <!DOCTYPE html>    <html>    <head>        <title>Example HTML Page</title>        <script type="text/javascript" defer="defer" src="jquery.min.js"></script>        <script type="text/javascript" defer="defer" src="example.js"></script>    </head>    <body>       <noscript>          <p>本頁面需要瀏覽器支援（啟用）JavaScript       </noscript>    </body>    </html>

 

 這個頁面會在指令碼無效的情況下向使用者顯示一條訊息。而在啟用了指令碼的瀏覽器中，使用者永遠無法看到它，儘管它是頁面的一部分。

 小結：

  把JavaScript插入到HTML頁面中要使用<script>元素。使用這個元素可以把JavaScript嵌入到HTML頁面中，讓指令碼與標記混合在一起；也可以包含外部的JavaScript檔案。需要注意的是：

    1.在包含外部JavaScript檔案時，必須將src屬性設定為指向相應檔案的URL。而這個檔案既可以是包含它的頁面位於同一個伺服器上的檔案，也可以是其他任何域中的檔案。

    2.所有<script>元素都會按照它們在頁面中出現的先後順序依次被解析，在不使用defer和async屬性的情況下，只有在解析完前面<script>元素中的代碼之後，才會開始解析後面<script>元素中的代碼。

    3.由於瀏覽器會先解析完不使用defer屬性的<script>元素中的代碼，然後再解析後面的內容，所以一般應該把<script>元素放在頁面最後，主要內容後面，</body>標籤前面。

    4.使用defer屬性可以讓指令碼在文檔完全呈現之後再執行。延遲指令碼總是按照指定它們的順序執行。

    5.使用async屬性可以表示當前指令碼不必等待其他指令碼，也不必阻塞文檔呈現。不能保證非同步指令碼按照它們在頁面中出現的順序執行。

    6.使用<noscript>元素可以指定在不支援指令碼的瀏覽器中顯示的替代內容。但在啟用了指令碼的情況下，瀏覽器不會顯示<noscript>元素中的任何內容。

JavaScript進階程式設計（2）在HTML中使用JavaScript