（一）JavaScript簡介
1. JavaScript的實現
JavaScript 是一種專為與網頁交互而設計的腳本語言，由下列三個不同的部分組成：
(1) 核心（ECMAScript），由 ECMA-262 定義，提供核心語言功能，描述了該語言的語法和基本對象；
規定了該語言的以下組成部分：
- 語法
- 類型
- 語句
- 關鍵字
- 保留字
- 操作符
- 對象
(2) 文檔對象模型（DOM），提供訪問和操作網頁內容的方法和接口；
DOM 將把整個頁面規劃成由節點層級構成的文檔。HTML 或 XML 頁面的每個部分都是一個節點的衍生物。DOM通過創建樹來表示文檔，從而使開發者對文檔的內容和結構具有空前的控制力。用 DOM API 可以輕松地刪除、添加和替換節點。
(3) 瀏覽器對象模型（BOM），提供與瀏覽器交互的方法和接口。
BOM 主要處理瀏覽器窗口和框架，不過通常瀏覽器特定的 JavaScript 擴展都被看做 BOM 的一部分。這些擴展包括：
- 彈出新瀏覽器窗口的功能；
- 移動、縮放和關閉瀏覽器窗口的功能；
- 提供瀏覽器詳細信息的
navigator對象； - 提供瀏覽器所加載頁面的詳細信息的
location對象； - 提供用戶顯示器分辨率詳細信息的
screen對象； - 對
cookies的支持； - 像
XMLHttpRequest和IE的ActiveXObject這樣的自定義對象。
2. ECMAScript與JavaScript的關系
ECMAScript是JavaScript語言的國際標準，為JavaScript提供核心語言功能；JavaScript是ECMAScript的實現。
（二）在HTML中使用JavaScript
1. 使用<script>元素
(1) <script>的屬性
-
async：（可選）表示應該立即下載腳本，但不應妨礙頁面中的其他操作，比如下載其他資源或等待加載其他腳本。只對外部腳本文件有效。 -
src：（可選）表示包含要執行代碼的外部文件。 -
charset：（可選）表示通過src屬性指定的代碼的字符集。由于大多數瀏覽器會忽略它的值，因此這個屬性很少有人用。 -
defer：（可選）表示腳本可以延遲到文檔完全被解析顯示之后再執行。只對外部腳本文件有效。 -
language（已廢棄）用于表示編寫代碼使用的腳本語言。 -
type：（可選）可以看作是language的替代屬性：表示編寫代碼使用的腳本語言的內容類型（也稱MIME類型）。
(2) 使用<script>元素的方式
- 直接在頁面中頁面中嵌入
JavaScript代碼
在使用<script>元素嵌入JavaScript時，只須為<script>指定type屬性。然后把JavaScript代碼直接放在元素內部即可。
<script type="text/javascript">//此為type屬性的一個默認值
function sayHi(){
alert("Hi!");
// alert("</script>");
// 代碼中不能出現"</script>"字符串，否則為錯誤；
alert("<\/script>");
// 若遇到可通過轉義字符"\"解決這個問題。
}
</script>
- 包含外部
JavaScript文件
如果要通過<script>元素來包含外部JavaScript文件，那么src屬性是必需的。其屬性值是一個指向外部JavaScript文件的URL，這個文件既可 以是與包含它的頁面位于同一個服務器上的文件，也可以是其他任何域中的文件。。
<script type="text/javascript" src="example.js"></script>
帶有
src屬性的<script>元素不應該在其<script>和</script>標簽之間再包含額外的JavaScript代碼。如果包含，則只會下載并執行外部腳本文件，嵌入的代碼會被忽略。
(3) 延遲腳本(defer屬性)
在<script>元素中設置defer屬性，腳本會被延遲到整個頁面都解析完畢后再運行，相當于告訴瀏覽器立即下載，但延遲執行。
<!DOCTYPE html>
<html>
<head>
<title>Example HTML Page</title>
<!--雖然放在了<head>中，但將延遲到瀏覽器遇到</html>后再執行-->
<!--第一個延遲腳本會先于第二個延遲腳本執行-->
<script type="text/javascript" defer="defer" src="example1.js"></script>
<script type="text/jaavascript" defer="defer" src="example2.js"></script>
</head>
<body>
<!--這里放頁面內容-->
</body>
</html>
把延遲腳本放在頁面底部是最佳選擇
(4) 異步腳本(async屬性)
async屬性告訴瀏覽器立即下載文件，且標記為async的腳本并不保證按照指定它們的先后順序執行。
<!DOCTYPE html>
<html>
<head>
<title>Example HTML Page</title>
<!--第二個腳本文件可能會在第一個腳本文件之前執行-->
<script type="text/javascript" async src="example1.js"></script>
<script type="text/jaavascript" async src="example2.js"></script>
</head>
<body>
<!--這里放頁面內容-->
</body>
</html>
指定
async屬性的目的是不讓頁面等待兩個腳本下載和執行，從而異步加載頁面其他內容。
JavaScript解析順序
- 所有
<script>元素都會按照它們在頁面中出現的先后順序依次被解析。在不使用defer和async屬性的情況下，只有在解析完前面<script>元素中的代碼之后，才會開始解析后面<script>元素中的代碼。 - 由于瀏覽器會先解析完不使用
defer屬性的<script>元素中的代碼，然后再解析后面的內容， 所以一般應該把<script>元素放在頁面最后，即主要內容后面，</body>標簽前面。
- 嵌入代碼和外部文件
推薦使用外部文件來包含 JavaScript 代碼，有以下優點：
-
可維護性：把所有
JavaScript文件都放在一個文件夾中，更易于維護。 -
可緩存：瀏覽器能夠根據具體的設置緩存鏈接的所有外部
JavaScript文件。也就是說，如果有兩個頁面都使用同一個文件，那么這個文件只需下載一次。因此，最終結果就是能夠加快頁面加載的速度。 - 適應未來
