## JavaScript簡(jiǎn)介
JavaScript誕生于1995年，它的主要目的是處理以前由服務(wù)器端語(yǔ)言負(fù)責(zé)的一些輸入驗(yàn)證操作。
完整的JavaScript實(shí)現(xiàn)由下列三個(gè)不同的部分組成：
- 核心（ECMAScript）
- 文檔對(duì)象模型（DOM）
- 瀏覽器對(duì)象模型（BOM）
**一、JavaScript簡(jiǎn)介**
**1.1 ECMAScript**
`ECMAScript`是由ECMA-262定義的，它提供了核心語(yǔ)言功能。
Web瀏覽器只是ECMAScript實(shí)現(xiàn)可能的宿主環(huán)境之一。宿主環(huán)境不僅提供基本的ECMAScript實(shí)現(xiàn)，同時(shí)也會(huì)提供該語(yǔ)言的擴(kuò)展，以便語(yǔ)言與環(huán)境之間對(duì)接交互。
ECMA-262規(guī)定這門(mén)語(yǔ)言的下列組成部分：語(yǔ)法、類(lèi)型、語(yǔ)句、關(guān)鍵字、保留字、操作符、對(duì)象
ECMAScript就是對(duì)實(shí)現(xiàn)該標(biāo)準(zhǔn)規(guī)定的各個(gè)方面內(nèi)容的語(yǔ)言的描述。
ECMAScript的不同版本又稱為版次，以第x版表示。目前最新的是ECMAScript 6.0（簡(jiǎn)稱：ES6）
**1.2 文檔對(duì)象模型（DOM）**
文檔對(duì)象模型（**DOM**，Document Object Model）是針對(duì)XML但經(jīng)過(guò)拓展用于HTML的應(yīng)用程序接口（**API**，Application Programming Interface）。
**DOM**把整個(gè)頁(yè)面映射為一個(gè)多層節(jié)點(diǎn)的結(jié)構(gòu)（結(jié)構(gòu)樹(shù)）。HTML或XML頁(yè)面中的每個(gè)組成部分都是某種類(lèi)型的節(jié)點(diǎn)，這些節(jié)點(diǎn)又包含著不同類(lèi)型的數(shù)據(jù)。
**DOM**提供訪問(wèn)和操作網(wǎng)頁(yè)內(nèi)容的方法和接口。
**1.3 瀏覽器對(duì)象模型（BOM）**
瀏覽器對(duì)象模型（BOM，Browser Object Model）是指可以訪問(wèn)和操作瀏覽器窗口的應(yīng)用程序接口（API）
**BOM**提供與瀏覽器交互的方法和接口。
**二、在HTML中使用JavaScript**
**2.1 `<script>`元素**
向HTML頁(yè)面中插入JavaScript的主要方法，就是使用`<script>`元素。
`<script>`中定義了下列6個(gè)屬性：
- `async`：可選，表示應(yīng)該立即下載腳本，但不應(yīng)妨礙頁(yè)面中的其他操作。只對(duì)外部腳本文件有效
- `charset`：可選，表示通過(guò)src屬性指定的代碼的字符集，比較少用。
- `defer`：可選，表示腳本可以延遲到文檔完全被解析和顯示之后再執(zhí)行。只對(duì)外部腳本文件有效。
- `language`：已廢棄
- `src`：可選，表示包含要執(zhí)行代碼的外部文件
- `type`：可選，表示編寫(xiě)代碼使用的腳本語(yǔ)言的內(nèi)容類(lèi)型（也稱為MIME類(lèi)型）。在HTML5中，默認(rèn)是text/javascript，所以不需要設(shè)置。
使用`<script>`元素嵌入JavaScript代碼，有兩種方式：
第一種：直接在頁(yè)面中嵌入JavaScript代碼，包裹在`<script>`元素之間：
```
<script>
console.log('Hello World');
</script>
```
注意：在使用`<script>`嵌入JavaScript代碼時(shí)，切記不要在代碼中的任何地方出現(xiàn)`</script>`。
執(zhí)行下面的代碼時(shí)，會(huì)產(chǎn)生一個(gè)錯(cuò)誤：
```
<script>
function loadScript(){
alert('</script>');
}
</script>
```
JavaScript代碼的執(zhí)行順序：只要不存在defer和async屬性，JavaScript代碼就會(huì)從上至下依次解析。
第二種：使用外鏈腳本形式，必須有src屬性，而且指定一個(gè)外部JavaScript文件的鏈接。
```
<script src="example.js"></script>
```
注意：帶有src屬性的<script>元素不應(yīng)該在其<script>和</script>標(biāo)簽之間再包含額外的JavaScript代碼，嵌入代碼會(huì)被忽略。
只要不存在defer和async屬性，瀏覽器都會(huì)按照`<script>`出現(xiàn)的先后順序?qū)λ鼈円来芜M(jìn)行解析。
一般將全部JavaScript引用放在<body>元素中頁(yè)面的內(nèi)容后面。
**2.2 延遲腳本**
當(dāng)給`<script>`元素添加了`defer`屬性時(shí)，src指向的外部文件會(huì)立即下載，但包含的腳本會(huì)延遲到瀏覽器遇到`</html>`標(biāo)簽（整個(gè)頁(yè)面解析完畢）后再執(zhí)行（按添加順序執(zhí)行），會(huì)先于DOMContentLoaded事件執(zhí)行。
```
<script defer="defer" src="example.js"></script>
<script async src="example2.js"></script>
```
會(huì)先執(zhí)行example.js，然后執(zhí)行example2.js
注意：defer只適合外部腳本文件。
**2.3 異步腳本**
`async`與`defer`屬性類(lèi)似，都用于改變處理腳本的行為，適用于外部腳本文件，并告訴瀏覽器立即下載，但標(biāo)記為`async`的腳本并不保證按照指定它們的先后順序執(zhí)行。
```
<script async src="example.js"></script>
<script async src="example2.js"></script>
```
兩個(gè)執(zhí)行順序不定。
指定`async`屬性的目的是不讓頁(yè)面等待兩個(gè)腳本下載和執(zhí)行，從而異步加載頁(yè)面其他內(nèi)容。
注意：異步腳本不要在加載期間修改DOM。
異步腳本一定會(huì)在頁(yè)面的load事件前執(zhí)行，但可能會(huì)在DOMContentLoaded事件觸發(fā)之前或之后執(zhí)行。
**2.4 使用外部文件的好處**
- **可維護(hù)性**：將JavaScript文件都放在一個(gè)文件夾中，比每次都需要到不同的HTML頁(yè)面修改JavaScript方便維護(hù)。
- **可緩存**：瀏覽器會(huì)緩存所有外部JavaScript文件，所以當(dāng)你有多個(gè)頁(yè)面使用同一個(gè)JavaScript腳本時(shí)，這個(gè)腳本只需下載一次。
**2.5 `<noscript>`元素**
當(dāng)瀏覽器不支持JavaScript或被禁用時(shí)，顯示里面的內(nèi)容。
```
<noscript>
本頁(yè)面需要瀏覽器支持（啟用）JavaScript
</noscript>
```
**小結(jié)**
- JavaScript由`ECMAScript`、`DOM`、`BOM`三部分組成；
- ECMAScript由ECMA-262定義，提供核心語(yǔ)言功能；
- 文檔對(duì)象模型（DOM），提供訪問(wèn)和操作網(wǎng)頁(yè)內(nèi)容的方法和接口；
- 瀏覽器對(duì)象模型（BOM），提供與瀏覽器交互的方法和接口；
- 把JavaScript插入到HTML頁(yè)面中要使用`<script>`元素，可以內(nèi)嵌，也可以外鏈文件；
- 使用`defer`屬性可以讓腳本在文檔完全呈現(xiàn)之后再執(zhí)行，延遲腳本總是按照它們的順序執(zhí)行；
使用`async`屬性表示當(dāng)前腳本不必等待其他腳本，也不必阻塞文檔呈現(xiàn)，不能保證按照它們?cè)陧?yè)面中出現(xiàn)的順序執(zhí)行。
- 使用`<noscript>`元素可以指定在不支持腳本的瀏覽器中顯示的提示內(nèi)容。
- 前言
- JavaScript簡(jiǎn)介
- 基本概念
- 語(yǔ)法
- 數(shù)據(jù)類(lèi)型
- 運(yùn)算符
- 表達(dá)式
- 語(yǔ)句
- 對(duì)象
- 數(shù)組
- 函數(shù)
- 引用類(lèi)型（對(duì)象）
- Object對(duì)象
- Array對(duì)象
- Date對(duì)象
- RegExp對(duì)象
- 基本包裝類(lèi)型（Boolean、Number、String）
- 單體內(nèi)置對(duì)象（Global、Math）
- console對(duì)象
- DOM
- DOM-屬性和CSS
- BOM
- Event 事件
- 正則表達(dá)式
- JSON
- AJAX
- 表單和富文本編輯器
- 表單
- 富文本編輯器
- canvas
- 離線應(yīng)用
- 客戶端存儲(chǔ)（Cookie、Storage、IndexedDB）
- HTML5 API
- Video/Audio
- Geolocation API
- requestAnimationFrame
- File API
- FullScreen API
- IndexedDB
- 檢測(cè)設(shè)備方向
- Blob
- vibrate
- Luminosity API
- WebRTC
- Page Visibility API
- Performance API
- Web Speech
- Notification
- 面向?qū)ο蟮某绦蛟O(shè)計(jì)
- 概述
- this關(guān)鍵字
- 原型鏈
- 作用域
- 常用API合集
- SVG
- 錯(cuò)誤處理機(jī)制
- JavaScript開(kāi)發(fā)技巧合集
- 編程風(fēng)格
- 垃圾回收機(jī)制