一、Script標(biāo)簽
向 HTML 頁面中插入 JavaScript 的主要方法，就是使用<script>元素。 通常我們剛開始學(xué)習(xí)的時(shí)候一般都知道script標(biāo)簽可能只有兩個(gè)作用：
1、在其內(nèi)寫js代碼
2、使用它的src屬性引入外部的js文件。
其實(shí)它有6個(gè)屬性，這里我們只需要了解如下幾個(gè)屬性：
- async:表示應(yīng)該立即下載腳本，但不應(yīng)妨礙頁面中的其他操作，比如下載其他資源或等待加載其他腳本。只對外部腳本文件有效
- defer：可選。表示腳本可以延遲到文檔完全被解析和顯示之后再執(zhí)行。只對外部腳本文件有效。 IE7 及更早版本對嵌入腳本也支持這個(gè)屬性。
- src
- type
二、引入JS的兩種方式
1、在HTML中的script中嵌入js代碼
注意：
- 在使用<script>嵌入 JavaScript 代碼時(shí)，記住不要在代碼中的任何地方出現(xiàn)"</script>"字符串，因?yàn)橛龅?lt;/script>瀏覽器解析就會認(rèn)為是js代碼結(jié)束的位置
2、在HTML中引入外部的js文件
注意：
- 帶有 src 屬性的<script>元素不應(yīng)該在其<script>和</script>標(biāo)簽之間再包含額外的 JavaScript 代碼，如果包含了嵌入的代碼，則只會下載并執(zhí)行外部腳本文件，嵌入的代碼會被忽略。
- 通過<script>元素的 src 屬性還可以包含來自外部域的 JavaScript 文件
三、標(biāo)簽的位置
傳統(tǒng)的做法，會把script標(biāo)簽放到head標(biāo)簽中?？墒?，在文檔的<head>元素中包含所有 JavaScript 文件，意味著必須等到全部 JavaScript 代碼都被下載、解析和執(zhí)行完成以后，才能開始呈現(xiàn)頁面的內(nèi)容（瀏覽器在遇到<body>標(biāo)簽時(shí)才開始呈現(xiàn)內(nèi)容）。所以建議放到</body>標(biāo)簽前，等整個(gè)的DOM結(jié)構(gòu)加載完再加載js文件。
例子：
html：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="1.js"></script>
</head>
<body>
<button id="btn">按鈕</button>
</body>
</html>
js:
var oBtn = document.getElementById("btn");
oBtn.onclick = function(){
alert(1);
}
上述代碼如果點(diǎn)擊頁面中的button按鈕，是不會彈出對話框的，因?yàn)閔tml頁面的代碼是自上而下執(zhí)行的，在head標(biāo)簽中遇到script，會引入js并解析，但是因?yàn)镈OM結(jié)構(gòu)還沒有加載，所以js中找不到id為btn的元素，因而點(diǎn)擊沒有反應(yīng)。
解決辦法：
1、在script中加入延遲屬性（defer）,加入這個(gè)屬性后，外部js代碼會下載，但會延遲到文檔完全被解析和顯示之后再執(zhí)行
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="1.js" defer="defer"></script>
</head>
<body>
<button id="btn">按鈕</button>
</body>
</html>
2、把script放到</body>標(biāo)簽前面，這樣會等到DOM文檔加載完后執(zhí)行
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<button id="btn">按鈕</button>
<script src="1.js"></script>
</body>
</html>
綜合上述兩種方法，如果考慮用戶體驗(yàn)的話，因?yàn)榈谝环N方法還是會加載js,然后顯示DOM.所以把<script>放在</body>前更好。
四、noscript標(biāo)簽
使用情形：
- 瀏覽器不支持腳本；
- 瀏覽器支持腳本，但腳本被禁用。
