重看Javascript高階程式設計，第2章:在HTML中使用Javascript
阿新 • • 發佈：2019-01-12
本章知識點：
- 怎樣使用<script>元素
- 嵌入指令碼和外部指令碼
- 文件模式對Javascript的影響
- 考慮禁用Javascript的場景
2.1 <script>元素
HTML中插入Javascript的主要方式就是script標籤。script有下列屬性：
- async：表示立即下載該指令碼，但不妨礙頁面中的其他操作。比如下載其他資源或者等待載入其他指令碼。只對外部指令碼檔案有效。
- charset：表示通過src屬性指定程式碼的字元編碼。
- defer：表示指令碼可以延遲到文件完全被解析和顯示之後才執行。
- language：用來表示編寫程式碼使用的指令碼語言。已廢棄
- src：表示包含要執行的程式碼的外部檔案，也就是路徑。
- type：表示編寫程式碼使用的指令碼語言的內容型別。大多數值為"text/javascript"。預設值也是它。
以下便是在HTML頁面中插入一段Javascript程式碼：
<script type="text/javascript">
function hi(){
alert('hello world')
}
</script>儘量不要在程式碼中任何地方出現</script>字串。程式會認為那是結束的</script>標籤。可以通過轉義符"/"來解決問題。例如:
<script type="text/javascript">
function hi(){
alert("<\/script>")
}
</script>
如果通過<Script>元素來包含外部js檔案。那麼src屬性就是必須的。這個屬性指向外部JS檔案的連結。例如：
<script type="text/javascript" src="http://www.baidu.com"></script>
注意：帶有src屬性的<Script>元素在其中間不能在包含額外的JS程式碼。否則該額外程式碼將被忽略只執行外部指令碼檔案。
如果不存在defer和async屬性的話script的執行順序是從上到下。
2.1.1 標籤的位置
現代瀏覽器一般把script元素放在body元素中頁面內容的後面。如下所示：
<!DOCTYPE html>
<html lang="zh">
<head>
<title>Document</title>
</head>
<body>
<!--html內容-->
<script type="text/javascript" src="http://www.baidu.com"></script>
</body>
</html>2.2 嵌入JS程式碼與外部JS檔案的優缺點
可維護性：所有的js檔案放在一個資料夾中，維護起來就相對輕鬆。可以在不觸碰html的情況下直接修改js程式碼。
可快取：瀏覽器可以根據具體的設定快取連結的所有外部js檔案。如果兩個頁面用1個js檔案，那該檔案只需要下載一次。能加快頁面的開啟速度。