2.1 <script> 標簽
<script> 標簽定義了 6 個屬性：
| 屬性 | 說明 |
|---|---|
async |
異步加載腳本，即加載腳本的同時加載頁面其他內容。只對外部腳本有效。 |
charset |
忽略 |
defer |
延遲腳本執行，直到文檔全部被解析和顯示之后再執行腳本 |
language |
已廢棄 |
src |
引用外部腳本 |
type |
MIME 類型，一般為 text/javascript 可以省略 |
注意：正常情況下，解釋器需要將所有腳本解釋完畢后，才會加載頁面其他內容。
三種加載腳本的方式：
- 內嵌腳本
<script type="text/javascript">
function sayHi(){
alert("Hi!");
}
</script>
- 引用外部腳本
<script type="text/javascript" src="example.js"></script>
- 引用域外腳本，但是要注意安全：
<script type="text/javascript" src="http://www.somewhere.com/afile.js"></script>
2.1.1 標簽位置
按照慣例，腳本都應該放在 <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>
在 <head> 元素中引入外部腳本，必須要等腳本全部解析完成后才會解析頁面其他內容，這樣會導致頁面出現卡頓和顯示空白。為了避免這個問題，可以將腳本放在<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>
2.1.2 延遲腳本
使用 defer 屬性后，腳本就會延遲到整個頁面加載完畢后再執行。
<!DOCTYPE html>
<html>
<head>
<title>Example HTML Page</title>
<script type=”text/javascript” defer src=”example1.js”></script>
<script type=”text/javascript” defer src=”example2.js”></script>
</head>
<body>
<!-- content here -->
</body>
</html>
正常情況下，腳本是按照在頁面中出現的順序執行的；如果使用多個延遲腳本，多個腳本執行順序并不確定，因此一個頁面中最好只有一個 defer 腳本。
2.1.3 異步腳本
瀏覽器在加載異步腳本的同時也會加載文檔內容，因此要確保腳本與頁面內容之間、異步腳本之間不存在相互依賴。
<!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>
<!-- content here -->
</body>
</html>
2.1.4 在 XHTML 中的用法
HTML5 已經成熟，該小節可以跳過
2.1.5 不推薦使用的語法
瀏覽器已經成熟，該小節可以跳過
2.2 嵌入代碼與外部文件
盡可能使用外部腳本，使用外部腳本有更多地優點
2.3 文檔模式
不同的文檔模式下，瀏覽器有不同的解析行為。下面是幾種文檔模式。現在一般都使用 HTML 5 模式
<!-- HTML 4.01 嚴格 -->
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN”
“http://www.w3.org/TR/html4/strict.dtd”>
<!-- 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 Strict//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<!-- XHTML 1.0 過渡 -->
<!DOCTYPE html PUBLIC
“-//W3C//DTD XHTML 1.0 Transitional//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<!-- XHTML 1.0 框架集 -->
<!DOCTYPE html PUBLIC
“-//W3C//DTD XHTML 1.0 Frameset//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd”>
<!-- HTML5 -->
<!DOCTYPE html>
2.4 <noscript> 元素
如果瀏覽器不支持 Javascript ，將顯示一條消息；如果瀏覽器支持，則什么也不做
<!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>
<noscript>
<p>瀏覽器不支持 Javascript</p>
</noscript>
</body>
</html>
