JavaScript簡介 · JavaScript半知半解

## JavaScript簡介 JavaScript誕生于1995年，它的主要目的是處理以前由服務器端語言負責的一些輸入驗證操作。完整的JavaScript實現由下列三個不同的部分組成： - 核心（ECMAScript） - 文檔對象模型（DOM） - 瀏覽器對象模型（BOM） **一、JavaScript簡介** **1.1 ECMAScript** `ECMAScript`是由ECMA-262定義的，它提供了核心語言功能。 Web瀏覽器只是ECMAScript實現可能的宿主環境之一。宿主環境不僅提供基本的ECMAScript實現，同時也會提供該語言的擴展，以便語言與環境之間對接交互。 ECMA-262規定這門語言的下列組成部分：語法、類型、語句、關鍵字、保留字、操作符、對象 ECMAScript就是對實現該標準規定的各個方面內容的語言的描述。 ECMAScript的不同版本又稱為版次，以第x版表示。目前最新的是ECMAScript 6.0（簡稱：ES6） **1.2 文檔對象模型（DOM）** 文檔對象模型（**DOM**，Document Object Model）是針對XML但經過拓展用于HTML的應用程序接口（**API**，Application Programming Interface）。 **DOM**把整個頁面映射為一個多層節點的結構（結構樹）。HTML或XML頁面中的每個組成部分都是某種類型的節點，這些節點又包含著不同類型的數據。 **DOM**提供訪問和操作網頁內容的方法和接口。 **1.3 瀏覽器對象模型（BOM）** 瀏覽器對象模型（BOM，Browser Object Model）是指可以訪問和操作瀏覽器窗口的應用程序接口（API） **BOM**提供與瀏覽器交互的方法和接口。 **二、在HTML中使用JavaScript** **2.1 `<script>`元素** 向HTML頁面中插入JavaScript的主要方法，就是使用`<script>`元素。 `<script>`中定義了下列6個屬性： - `async`：可選，表示應該立即下載腳本，但不應妨礙頁面中的其他操作。只對外部腳本文件有效 - `charset`：可選，表示通過src屬性指定的代碼的字符集，比較少用。 - `defer`：可選，表示腳本可以延遲到文檔完全被解析和顯示之后再執行。只對外部腳本文件有效。 - `language`：已廢棄 - `src`：可選，表示包含要執行代碼的外部文件 - `type`：可選，表示編寫代碼使用的腳本語言的內容類型（也稱為MIME類型）。在HTML5中，默認是text/javascript，所以不需要設置。使用`<script>`元素嵌入JavaScript代碼，有兩種方式：第一種：直接在頁面中嵌入JavaScript代碼，包裹在`<script>`元素之間： ``` <script> console.log('Hello World'); </script> ``` 注意：在使用`<script>`嵌入JavaScript代碼時，切記不要在代碼中的任何地方出現`</script>`。執行下面的代碼時，會產生一個錯誤： ``` <script> function loadScript(){ alert('</script>'); } </script> ``` JavaScript代碼的執行順序：只要不存在defer和async屬性，JavaScript代碼就會從上至下依次解析。第二種：使用外鏈腳本形式，必須有src屬性，而且指定一個外部JavaScript文件的鏈接。 ``` <script src="example.js"></script> ``` 注意：帶有src屬性的<script>元素不應該在其<script>和</script>標簽之間再包含額外的JavaScript代碼，嵌入代碼會被忽略。只要不存在defer和async屬性，瀏覽器都會按照`<script>`出現的先后順序對它們依次進行解析。一般將全部JavaScript引用放在<body>元素中頁面的內容后面。 **2.2 延遲腳本** 當給`<script>`元素添加了`defer`屬性時，src指向的外部文件會立即下載，但包含的腳本會延遲到瀏覽器遇到`</html>`標簽（整個頁面解析完畢）后再執行（按添加順序執行），會先于DOMContentLoaded事件執行。 ``` <script defer="defer" src="example.js"></script> <script async src="example2.js"></script> ``` 會先執行example.js，然后執行example2.js 注意：defer只適合外部腳本文件。 **2.3 異步腳本** `async`與`defer`屬性類似，都用于改變處理腳本的行為，適用于外部腳本文件，并告訴瀏覽器立即下載，但標記為`async`的腳本并不保證按照指定它們的先后順序執行。 ``` <script async src="example.js"></script> <script async src="example2.js"></script> ``` 兩個執行順序不定。指定`async`屬性的目的是不讓頁面等待兩個腳本下載和執行，從而異步加載頁面其他內容。注意：異步腳本不要在加載期間修改DOM。異步腳本一定會在頁面的load事件前執行，但可能會在DOMContentLoaded事件觸發之前或之后執行。 **2.4 使用外部文件的好處** - **可維護性**：將JavaScript文件都放在一個文件夾中，比每次都需要到不同的HTML頁面修改JavaScript方便維護。 - **可緩存**：瀏覽器會緩存所有外部JavaScript文件，所以當你有多個頁面使用同一個JavaScript腳本時，這個腳本只需下載一次。 **2.5 `<noscript>`元素** 當瀏覽器不支持JavaScript或被禁用時，顯示里面的內容。 ``` <noscript> 本頁面需要瀏覽器支持（啟用）JavaScript </noscript> ``` **小結** - JavaScript由`ECMAScript`、`DOM`、`BOM`三部分組成； - ECMAScript由ECMA-262定義，提供核心語言功能； - 文檔對象模型（DOM），提供訪問和操作網頁內容的方法和接口； - 瀏覽器對象模型（BOM），提供與瀏覽器交互的方法和接口； - 把JavaScript插入到HTML頁面中要使用`<script>`元素，可以內嵌，也可以外鏈文件； - 使用`defer`屬性可以讓腳本在文檔完全呈現之后再執行，延遲腳本總是按照它們的順序執行；使用`async`屬性表示當前腳本不必等待其他腳本，也不必阻塞文檔呈現，不能保證按照它們在頁面中出現的順序執行。 - 使用`<noscript>`元素可以指定在不支持腳本的瀏覽器中顯示的提示內容。