JavaScript高級程序設計（2）在HTML中使用JavaScript
本章內容：使用<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