<script>元素
想HTML頁面插入JavaScript的主要方法就是使用<script>元素。
HTML 4.01為<script>定義了下列5個屬性。
-
src: 可選。表示包含要執行代碼的外部文件。 -
type： 可選。表示編寫代碼使用的腳本語言的內容類型（也稱為MIME類型）。 -
async: 可選。表示應該立即下載腳本，但不應妨礙頁面中的其他操作，比如下載其他資源或等待加載其他腳本。只對外部腳本文件有效。 -
defer: 可選。表示腳本可以延遲到文檔完全唄解析和顯示之后再執行。只對外部腳本文件有效。IE7及更早版本對嵌入腳本也支持這個屬性。 -
charset：可選。表示通過src屬性指定代碼的字符集。由于大多數瀏覽器會忽略它的值，因此這個屬性很少有人用。
使用<script>元素的方式有兩種：
- 直接在頁面中嵌入JavaScript的代碼
- 包含外部JavaScript文件
使用<script>嵌入JavaScript代碼時，只需為<script>指定type屬性。然后把JavaScript直接放在元素內部即可。
例如：
<script tyoe="text/javascript">
function sayHi(){
alert("Hi !");
}
</script>
使用<script>元素包含外部JavaScript文件，src屬性是必需的。src屬性的值指向外部JavaScript文件的鏈接。
例如：
<script type="text/javascript" src="example.js"></script>
這個例子，外部文件example.js將被加載到當前頁面中。
另外，通過<script>元素的src屬性還可以包含來自外部域的JavaScript文件。這一點，<script>和<img>元素非常相似，即他的src屬性可以是指向當前HTML頁面所在域之外的某個域中的完整URL。
例如：
<script type="text/javascript" src="http://www.somewhere.cm/afile.js"></script>
這樣，位于外部域中的代碼也會被加載和解析，就像這些代碼位于加載它們的頁面中一樣。利用這一點可以在必要時通過不同域來提供JavaScript文件。不過存在風險。
只要不存在defer和async屬性，瀏覽器都會按照<script>元素在頁面中出現的先后順序對它們依次進行解析。
標簽的位置
安裝傳統做法<script>元素都應該放在頁面的<head>元素中。
例如：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript" src="example1.js"></script>
<script type="text/javascript" src="example2.js"></script>
</head>
<body>
<!-- 這里是內容 -->
</body>
</html>
這種做法的目的就是把所有外部文件（包括CSS和JavaScript）的引用都放在相同的地方。但這將出現明顯的延時，會影響性能，為避免這一問題，現代Web應用程序一般都把全部JavaScript引用放在<body>元素中頁面內容的后面。
例如：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</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 lang="en">
<head>
<meta charset="UTF-8">
<title>Document</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>
其中包含的腳本將延遲到瀏覽器遇到</html>標簽后再執行。
異步腳本
HTML5為<script>元素定義了async屬性。這個屬性與defer屬性類似，都用于改變處理腳本的行為。async只適用于外部腳本，并告訴瀏覽器立即下載文件。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript" async="async" src="example1.js"></script>
<script type="text/javascript" async="async" src="example2.js"></script>
</head>
<body>
<!-- 這里是內容 -->
</body>
</html>
async屬性的目的是不讓頁面等待腳本下載和執行，從而異步加載頁面其他內容。為此，建議異步腳本不要在加載期間修改DOM。
嵌入代碼與外部文件
在HTML中嵌入JavaScript代碼雖然沒有問題，但一般認為最好的做法是盡可能使用外部文件來包含JabaScript代碼。使用外部文件有如下優點：
- 可維護性：遍及不同HTML頁面的JavaScript會造成維護問題。但把所有JavaScript文件都放在一個文件夾中，更易維護。能夠在不觸及HTML標記的情況下，專注于編輯JavaScript代碼。
- 可緩存：瀏覽器能夠根據具體的設置緩存鏈接的所有外部JavaScript文件。也就是說，如果兩個頁面都使用同一個文件，那么這個文件只需下載一次。因此，最終結果就是能夠加快頁面加載的速度。
文檔模式
文檔模式這個概念是通過使用文檔類型（doctype）切換實現的。
最初的兩種文檔模式是：
- 混雜模式
- 標準模式
這兩種模式主要影響CSS內容的呈現，但某些情況下也會影響JavaScript的解釋執行。
如果在文檔開始處沒有發現文檔類型聲明，則所有瀏覽器都會默認開啟混雜模式。但采用混在模式不值得推薦，因為不同瀏覽器在這種模式下的行為差異非常大，如果不使用某些hack技術，跨瀏覽器的行為根本沒有一致性可言。
對于標準模式可以通道聲明doctype來開啟，如HTML5標準模式聲明
<!DOCTYPE html>
<noscript>元素
<noscript>元素用于當瀏覽器不支持JavaScript時讓頁面平穩退化。用以在不支持JavaScript的瀏覽器中顯示替代內容。這個元素可以包含能后在<body>中的任何HTML元素---<script>元素除外。包含<noscript>元素中的內容只有在下列情況下才會顯示出來：
- 瀏覽器不支持腳本
- 瀏覽器支持腳本，但腳本被禁用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript" async="async" src="example1.js"></script>
<script type="text/javascript" async="async" src="example2.js"></script>
</head>
<body>
<noscript>
<p>本頁面需要瀏覽器支持（啟用）JavaScript。</p>
</noscript>
</body>
</html>
