前言
本文主要介紹如何在HTML中使用JavaScript，很適合上手JavaScript的一篇文章。
<scripy>元素
向 HTML 頁面中插入 JavaScript 的主要方法，就是使用<script>元素。
HTML爲<script>定義了下列6個屬性：
- async：可選。表示應該立即下載腳本，但不應妨礙頁面中的其他操作，比如下載其他資源或等待加載其他腳本。只對外部腳本文件有效。
- charset：可選。表示通過 src 屬性指定的代碼的字符集。由於大多數瀏覽器會忽略它的值，因此這個屬性很少有人用。
- defer：可選。表示腳本可以延遲到文檔完全被解析和顯示之後再執行。只對外部腳本文件有效。 IE7 及更早版本對嵌入腳本也支持這個屬性。
- language：已廢棄。原來用於表示編寫代碼使用的腳本語言（如 JavaScript、 JavaScript1.2或 VBScript）。大多數瀏覽器會忽略這個屬性，因此也沒有必要再用了。
- src：可選。表示包含要執行代碼的外部文件。
- type：可選。可以看成是 language 的替代屬性。
<script>元素的使用方式
使用<script>元素的方式有兩種：
- 直接在頁面中嵌入JavaScript代碼
只須爲<script>指定 type 屬性。然後，像下面這樣把 JavaScript 代碼直接放在元素內部即可：
<script type="text/javascript">
function sayHi(){
alert("Hi!");
}
</script>
在使用<script>嵌入 JavaScript 代碼時，記住不要在代碼中的任何地方出現"</script>"字符串。
例如，瀏覽器在加載下面所示的代碼時就會產生一個錯誤：
<script type="text/javascript">
function sayScript(){
alert("</script>");
}
</script>
因爲按照解析嵌入式代碼的規則，當瀏覽器遇到字符串"</script>"時，就會認爲那是結束的</script>標籤。而通過轉義字符“\”可以解決這個問題，例如：
<script type="text/javascript">
function sayScript(){
alert("<\/script>");
}
</script>
- 包含外部JavaScript文件
如果要通過<script>元素來包含外部 JavaScript 文件，那麼 src 屬性就是必需的。這個屬性的值是一個指向外部 JavaScript 文件的鏈接，例如：
<script type="text/javascript" src="example.js"></script>
需要注意的是，帶有 src 屬性的<script>元素不應該在其<script>和</script>標籤之間再包含額外的 JavaScript 代碼。如果包含了嵌入的代碼，則只會下載並執行外部腳本文件，嵌入的代碼會被忽略。
另外，通過<script>元素的 src 屬性還可以包含來自外部域的 JavaScript 文件。這裏的用法和<img>元素十分相似，但是會存在安全性問題，所以要小心使用。
<script type="text/javascript" src="http://www.somewhere.com/afile.js"></script>
標籤的位置
按照傳統的做法，所有<script>元素都應該放在頁面的<head>元素中，例如：
<!DOCTYPE html>
<html>
<head>
<title>Example HTML Page</title>
<script type="text/javascript" src="example1.js"></script>
<script type="text/javascript" src="example2.js"></script>
</head>
<body>
<!-- 這裏放內容 -->
</body>
</html>
這種做法的目的就是把所有外部文件（包括 CSS 文件和 JavaScript 文件）的引用都放在相同的地方。可是，在文檔的<head>元素中包含所有 JavaScript 文件，意味着必須等到全部 JavaScript 代碼都被下載、解析和執行完成以後，才能開始呈現頁面的內容（瀏覽器在遇到<body>標籤時纔開始呈現內容）。對於那些需要很多 JavaScript 代碼的頁面來說，這無疑會導致瀏覽器在呈現頁面時出現明顯的延遲，而延遲期間的瀏覽器窗口中將是一片空白。
爲了避免這種問題，現在一般把JavaScript的引用放在<body>標籤的最後：
<!DOCTYPE html>
<html>
<head>
<title>Example HTML Page</title>
</head>
<body>
<!-- 這裏放內容 -->
<script type="text/javascript" src="example1.js"></script>
<script type="text/javascript" src="example2.js"></script>
</body>
</html>
這樣，在解析包含的 JavaScript 代碼之前，頁面的內容將完全呈現在瀏覽器中。而用戶也會因爲瀏覽器窗口顯示空白頁面的時間縮短而感到打開頁面的速度加快了。
延遲腳本
HTML 4.01 爲<script>標籤定義了 defer 屬性。這個屬性的用途是表明腳本在執行時不會影響頁面的構造。也就是說，腳本會被延遲到整個頁面都解析完畢後再運行。因此，在<script>元素中設置defer 屬性，相當於告訴瀏覽器立即下載，但延遲執行。
<!DOCTYPE html>
<html>
<head>
<title>Example HTML Page</title>
<script type="text/javascript" defer="defer" src="example1.js"></script>
<script type="text/javascript" defer="defer" src="example2.js"></script>
</head>
<body>
<!-- 這裏放內容 -->
</body>
</html>
雖然我們把<script>元素放在了文檔的<head>元素中，但其中包含的腳本將延遲
到瀏覽器遇到</html>標籤後再執行。
異步腳本
同樣與 defer 類似， async 只適用於外部腳本文件，並告訴瀏覽器立即下載文件。但與 defer不同的是，標記爲 async 的腳本並不保證按照指定它們的先後順序執行。例如：
<!DOCTYPE html>
<html>
<head>
<title>Example HTML Page</title>
<script type="text/javascript" async src="example1.js"></script>
<script type="text/javascript" async src="example2.js"></script>
</head>
<body>
<!-- 這裏放內容 -->
</body>
</html>
在以上代碼中，第二個腳本文件可能會在第一個腳本文件之前執行。因此，確保兩者之間互不依賴非常重要。指定 async 屬性的目的是不讓頁面等待兩個腳本下載和執行，從而異步加載頁面其他內容。爲此，建議異步腳本不要在加載期間修改 DOM。
嵌入代碼與外部文件
在 HTML 中嵌入 JavaScript 代碼雖然沒有問題，但一般認爲最好的做法還是儘可能使用外部文件來包含 JavaScript 代碼。不過，並不存在必須使用外部文件的硬性規定，但支持使用外部文件的人多會強調如下優點。
- 可維護性：遍及不同 HTML 頁面的 JavaScript 會造成維護問題。但把所有JavaScript 文件都放在一個文件夾中，維護起來就輕鬆多了。而且開發人員因此也能夠在不觸及 HTML 標記的情況下，集中精力編輯 JavaScript 代碼。
- 可緩存：瀏覽器能夠根據具體的設置緩存鏈接的所有外部 JavaScript 文件。也就是說，如果有兩個頁面都使用同一個文件，那麼這個文件只需下載一次。因此，最終結果就是能夠加快頁面加載的速度。
- 適應未來：通過外部文件來包含 JavaScript 無須使用前面提到 XHTML 或註釋 hack。 HTML 和XHTML 包含外部文件的語法是相同的。
<noscript>元素
早期瀏覽器都面臨一個特殊的問題，即當瀏覽器不支持 JavaScript 時如何讓頁面平穩地退化。對這個問題的最終解決方案就是創造一個<noscript>元素，用以在不支持 JavaScript 的瀏覽器中顯示替代的內容。這個元素可以包含能夠出現在文檔<body>中的任何 HTML 元素——<script>元素除外。包含在<noscript>元素中的內容只有在下列情況下才會顯示出來：
- 瀏覽器不支持腳本；
- 瀏覽器支持腳本，但腳本被禁用。
符合上述任何一個條件，瀏覽器都會顯示中的內容。而在除此之外的其他情況下，瀏覽器不會呈現<noscript>中的內容。
請看下面這個簡單的例子：
<html>
<head>
<title>Example HTML Page</title>
<script type="text/javascript" defer="defer" src="example1.js"></script>
<script type="text/javascript" defer="defer" src="example2.js"></script>
</head>
<body>
<noscript>
<p>本頁面需要瀏覽器支持（啓用） JavaScript。
</noscript>
</body>
</html>
這個頁面會在腳本無效的情況下向用戶顯示一條消息。而在啓用了腳本的瀏覽器中，用戶永遠也不會看到它——儘管它是頁面的一部分
小結
把 JavaScript 插入到 HTML 頁面中要使用<script>元素。使用這個元素可以把 JavaScript 嵌入到HTML 頁面中，讓腳本與標記混合在一起；也可以包含外部的 JavaScript 文件。而我們需要注意的地方有：
- 在包含外部 JavaScript 文件時，必須將 src 屬性設置爲指向相應文件的 URL。而這個文件既可以是與包含它的頁面位於同一個服務器上的文件，也可以是其他任何域中的文件。
- 所有<script>元素都會按照它們在頁面中出現的先後順序依次被解析。在不使用 defer 和async 屬性的情況下，只有在解析完前面<script>元素中的代碼之後，纔會開始解析後面<script>元素中的代碼。
- 由於瀏覽器會先解析完不使用 defer 屬性的<script>元素中的代碼，然後再解析後面的內容，所以一般應該把<script>元素放在頁面最後，即主要內容後面， </body>標籤前面。
- 使用 defer 屬性可以讓腳本在文檔完全呈現之後再執行。延遲腳本總是按照指定它們的順序執行。
- 使用 async 屬性可以表示當前腳本不必等待其他腳本，也不必阻塞文檔呈現。不能保證異步腳本按照它們在頁面中出現的順序執行。
另外，使用<noscript>元素可以指定在不支持腳本的瀏覽器中顯示的替代內容。但在啓用了腳本的情況下，瀏覽器不會顯示<noscript>元素中的任何內容。