《JavaScript高級程序設計（第3版）》閱讀總結記錄第二章之在HTML中使用JavaScript

時間 2019-11-12

標籤 javascript 高級程序設計閱讀總結記錄第二之在 html 使用欄目 JavaScript 简体版

原文原文鏈接

本章目錄：javascript

　　2.1 <script> 元素
　　　　2.1.1 標籤的位置
　　　　2.1.2 延遲腳本
　　　　2.1.3 異步腳本
　　　　2.1.4 在XHTML 中的用法
　　　　2.1.5 不推薦使用的語法
　　2.2 嵌入代碼與外部文件
　　2.3 文檔模式
　　2.4 <noscript> 元素
　　2.5 總結html

本章主要內容：前端

　　使用 <script> 元素java

　　嵌入腳本與外部腳本jquery

　　文檔模式對 JavaScript 的影響瀏覽器

　　考慮禁用 JavaScript 的場景緩存

2.1　　<script> 元素框架

可選元素：async 、charset 、defer 、src 、type異步

已廢棄元素：language async

<script type="text/javascript" charset="UTF-8" language="javascript"></script>

　　有 charset ，表示經過 src 屬性指定的代碼的字符，（因爲此屬性被大多瀏覽器忽略，所以不多用）；
　　有 language ，已廢棄；
　　有 type ，可看是 language 的替代屬性；表示編寫代碼的腳本語言的內容類型（也稱爲MIME類型）。

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

　　有 src ，表示包含要執行代碼的外部文件；
　　沒有 async 或 defer ，瀏覽器會當即加載並執行指定的腳本，「當即」指的是在渲染該 script 標籤之下的文檔元素以前，也就是說不等待後續載入的文檔元素，讀到就加載並執行。
　　

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

　　有 async ，加載和渲染後續加載文檔的過程將和 script.js 的加載與執行並行進行（異步）。

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

　　有 defer ，加載後續文檔元素的過程將和 script.js 的加載並行進行（異步），可是 script.js 的執行要在全部元素解析完成以後，DOMContentLoaded 事件觸發以前完成。

注：

1）：在使用 <script> 嵌入JavaScript代碼時，不可在代碼中的任何地方出現「</script>」字符串，由於按照解析嵌入式代碼的規則，當瀏覽器遇到字符串「</script>」的時候會認爲是結束的 </script>標籤。

解決方法：經過轉義字符「/」

2）：<script src="index.js"> 此寫法只是在 XHTML 文檔中有效，不可在 HTML 文檔中使用，因這種語法不符合 HTML 規範，並且也得不到有些瀏覽器的正確解析（尤爲是 IE ）。

3）：帶有 src 屬性的 <script> 元素不該在其 <script> 和 </script> 標籤之間再包含額外的 JavaScript 代碼。不然只會下載並執行外部腳本文件，嵌入的代碼會被忽略。

2.2.1 標籤的位置

按照傳統作法應將全部的 <script> 元素都應該放在 <head> 元素中，如：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta http-equiv="content-type" content="text/html;charset=utf-8">
 5     <title>javaScript test</title>
 6     <script src="index.js"></script>
 7     <script src="main.js"></script>
 8 </head>
 9 <body>
10 <!-- 這裏是內容 -->
11 </body>
12 </html>

這種作法的目的是把全部的外部文件（包括 CSS 文件和 JavaScript 文件）的引用都放在相同的地方。但若是有多個 JavaScript 代碼的頁面時會致使瀏覽器在呈現頁面時出現明顯的延遲，在此期間瀏覽器窗口將是一片空白顯示。爲避免此問題現代 Web 應用程序通常會把所有 JavaScript 引用放在 <body> 元素中頁面內容的後面，如：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta http-equiv="content-type" content="text/html;charset=utf-8">
 5     <title>javaScript test</title>
 6 </head>
 7 <body>
 8 　　 <!-- 這裏是內容 -->
 9     <script src="index.js"></script>
10     <script src="main.js"></script>
11 </body>
12 </html>

這樣在解析包含 JavaScript 代碼以前頁面將會徹底呈如今瀏覽器中，用戶打開頁面的速度也會加快。

2.1.2 延遲腳本

HTML 4.0 爲 <script> 標籤訂義了 defer 屬性，這個屬性的用途是代表腳本在執行時不會影響頁面的構造，即便咱們按照傳統的寫法將 <script> 元素放在了文檔的 <head> 元素中，其包含的腳本延遲到瀏覽器遇到 </html> 標籤以後再執行，也就是說，腳本會被延遲到整個頁面都解析完畢後再運行。

注：

defer 只適用於外部腳本文件。

2.1.3 異步腳本

HTML5 爲 <script> 標籤訂義了 async 屬性，這個屬性與 defer 屬性相似，都用於改變處理腳本的行爲。與 defer 不一樣的是，標記爲 async 的腳本並不保證按照指定它們的前後順序執行。如：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta http-equiv="content-type" content="text/html;charset=utf-8">
 5     <title>javaScript test</title>
 6     <script src="index.js" async="async" type="text/javascript"></script>
 7     <script src="main.js"  async="async" type="text/javascript"></script>
 8 </head>
 9 <body>
10 <!-- 這裏是內容 -->
11 </body>
12 </html>

以上使用了 async 的代碼中，main.js 文件有可能會在 index.js 文件以前執行。

2.1.4 在XHTML中的用法

可擴展超文本標記語言，即 XHTML （Extensible HyperText Markup Language），是將 HTML 做爲 XML 的應用從新定義的一個標準。編寫 XHTML 代碼的規則要比編寫 HTML 嚴格得多。在 HTML 中，有特殊的規則用以肯定 <script> 元素中的哪些內容能夠被解析，但這些特殊的規則在 XHTML 中不適用。做爲一名前端開發人員，HTML5正在快速地被使用，建議在學習開發中遵循 HTML5 標準。

2.1.5 不推薦使用的寫法

不推薦使用語法是針對早期<script> 元素與傳統元素 HTML 的解析規則有衝突而編寫的語法。如：

以上寫法是針對 Mosaic 對 JavaScript 的不支持而編寫的方案。

2.2　　嵌入代碼與外部文件

在 HTML 中嵌入 JavaScript 代碼雖然沒有問題，但最好的作法仍是儘量的使用外部文件來包含 JavaScript 代碼。

使用外部文件的優勢：
（1）可維護性
（2）可緩存
（3）適應將來

2.3　　文檔模式

IE5.5 經過使用文檔類型（docutype）引入了文檔模式的概念。最初的兩種文檔模式是：混雜模式（quirks mode）和標準模式（standards mode）。
混雜模式會讓 IE 的行爲與（包含非標準特性的）IE5 相同，而標準模式則讓 IE 的行爲更接近標準模式行爲。
兩種模式主要影響 CSS 內容的呈現，在某些狀況下也會影響到 JavaScript 的解釋執行。

然後期，IE又提出一種準標準模式（almost standards mode）。除了在處理圖片間隙的的時候有些不標準其餘模式下的瀏覽器特性都是符合標準的。

對於標準模式，可經過下面任意一種文檔類型來開啓：

<!--HTML 4.01 嚴格型 -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
        "http://www.w3.org/TR/html4/strict.dtd">


<!--XHTML 1.0 嚴格型 -->
<!DOCTYPE html PUBLIC
        "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">


<!-- HTML 5  -->
<!DOCTYPE html>

對於準標準模式，可經過文檔類型來開啓：

<!--HTML 4.01 過渡型 -->
<!DOCTYPE HTML PUBLIC
        "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">


<!--HTML 4.01 框架集型 -->
<!DOCTYPE HTML PUBLIC
        "-//W3C//DTD HTML 4.01 Frameset//EN"
        "http://www.w3.org/TR/html4/frameset.dtd">


<!-- XHTML 1.0 過渡型  -->
<!DOCTYPE html PUBLIC
        "-//W3C//DTD XHTML 1.0 Frameset//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">


<!-- XHTML 1.0 框架集型  -->
<!DOCTYPE html PUBLIC
        "-//W3C//DTD XHTML 1.0 Frameset//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

總之，準標準模式和標準模式很接近，當咱們提到「標準模式的時候」，也有多是其中的一種，檢測文檔模式的時候也不會發現什麼不一樣。

2.4　　<noscript>元素

包含在 <noscript> 元素中的內容只有在如下兩種狀況纔會顯示出來：

（1）：瀏覽器不支持腳本；

（2）：瀏覽器支持腳本，但腳本被禁用。

<html>
<head>
    <title>noscript age</title>
    <script type="text/javascript" defer="defer" src="js/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" defer="defer" src="js/jquery-1.11.1.min.js"></script>
</head>
<body>
<noscript>
    <p>此頁面須要瀏覽器支持（啓用）JavaScript 。</p>
</noscript>
</body>
</html>