JavaScript代碼怎樣引入到HTML中？

avaScript 程序不能獨(dú)立運(yùn)行，它需要被嵌入 HTML 中，然后瀏覽器才能執(zhí)行 JavaScript 代碼。通過 <script> 標(biāo)簽將 JavaScript 代碼引入到 HTML 中，有兩種方式：
1.內(nèi)部方式
內(nèi)部方式是通過<script>標(biāo)簽包裹JavaScript代碼,從而引入HTML頁(yè)面中，示例代碼如下：

<!DOCTYPE html>
 <html>
 <head>
   <meta charset="UTF-8">
   <title>JavaScript 基礎(chǔ) - 引入方式</title>
 </head>
 <body>
   <!-- 內(nèi)聯(lián)形式：通過 script 標(biāo)簽包裹 JavaScript 代碼 -->
   <script>
     alert('嗨，歡迎來傳智播學(xué)習(xí)前端技術(shù)！')
   </script>
 </body>
 </html>

2.外部形式

一般將 JavaScript 代碼寫在獨(dú)立的以 .js 結(jié)尾的文件中，然后通過 <script>標(biāo)簽的 <src>屬性引入，示例代碼如下：

// demo.js
document.write('嗨，歡迎來傳智播學(xué)習(xí)前端技術(shù)！')

<!DOCTYPE html>
 <html>
 <head>
   <meta charset="UTF-8">
   <title>JavaScript 基礎(chǔ) - 引入方式</title>
 </head>
 <body>
   <!-- 外部形式：通過 script 的 src 屬性引入獨(dú)立的 .js 文件 -->
   <script src="demo.js"></script>
 </body>
 </html>

注意：如果 script 標(biāo)簽使用 src 屬性引入了某 .js 文件，那么標(biāo)簽的代碼會(huì)被忽略！！！如下代碼所示：

習(xí)目標(biāo)：了解JavaScript是如何與HTML結(jié)合來創(chuàng)建動(dòng)態(tài)網(wǎng)頁(yè)，網(wǎng)頁(yè)中嵌入JavaScript的不同方式，JavaScript的內(nèi)容類型及其與<script>的關(guān)系

<script>元素

1、async:表示立即開始下載腳本，但不能阻止其他頁(yè)面動(dòng)作，比如下載資源或者等待其他腳本加載。只對(duì)外部腳本文件有效。

2、charset：使用src屬性指定代碼字符集。這個(gè)屬性很少用，因?yàn)榇蠖鄶?shù)瀏覽器不在乎它的值。

3、crossorigin；配置資源請(qǐng)求的CORS（跨源資源共享）設(shè)置。默認(rèn)情況下不使用CORS。crossorigin = “anonymous”配置文件請(qǐng)求不用設(shè)置憑據(jù)標(biāo)志。crossorigin = ”use-credentials“設(shè)置憑據(jù)標(biāo)志，意味著出站請(qǐng)求會(huì)包含憑據(jù)。

4、defer:表示腳本可以延遲到文檔全部解析和顯示后再執(zhí)行。新版本中只能用于外部腳本。

5、integrity:允許比對(duì)接收到的資源和指定的加密簽名以驗(yàn)證子資源完整性（SRI，Subresource integrity），如果驗(yàn)證簽名不匹配則腳本不會(huì)執(zhí)行。這個(gè)屬性可以用于確保內(nèi)容分發(fā)網(wǎng)絡(luò)（CDN，Content Delivery Network）不會(huì)提供惡意內(nèi)容。

6、language：此屬性已被廢止。

7、src:表示包含外部要執(zhí)行的代碼的外部文件。

8、type:代替language，表示代碼塊中腳本語(yǔ)言的內(nèi)容類型（也稱為MIME類型），按照慣例這個(gè)值始終都是”text/JavaScript“，盡管”text/JavaScript“和”text/ecmascript“都已經(jīng)廢棄。JavaScript文件的MIME類型通常是”application/x-javascript“,不過給type屬性這個(gè)值的話可能會(huì)導(dǎo)致腳本被忽略。在非IE的瀏覽器中有效的值還有”application/JavaScript“和”application/ecmascript"。如果這個(gè)值是module，則代碼會(huì)被當(dāng)成是ES6模塊，而且只有這時(shí)候代碼中才能出現(xiàn)import和export關(guān)鍵字。

使用<script>的方式有內(nèi)聯(lián)和外嵌兩種，只要把code寫入<script>code</script>中就好，code中要是包含字符串“<script>”,只要加上轉(zhuǎn)義字符“\”即可。

如果要外嵌JavaScript代碼只要使用src屬性來鏈接外部文件即可如：

XHTML 文檔中，可以忽略結(jié)束標(biāo)簽寫成<script src=“example.js”/>即可，但是這在HTML中不能使用。

標(biāo)簽位置

過去把JavaScript和CSS一起寫在head中，但是這意味著必須下載所有code并解析和解釋完成后才開始渲染頁(yè)面，對(duì)于JavaScript很多的頁(yè)面會(huì)導(dǎo)致頁(yè)面渲染速度過慢，為解決這個(gè)問題，JavaScript一般寫在body元素的頁(yè)面內(nèi)容的最后邊，如下

<html>

<body>

message

<\body>

</html>

推遲使用腳本

在外聯(lián)JavaScript時(shí)可以使用defer屬性來推遲腳本的運(yùn)行。可以寫成：

<html>

<head>

</head>

<body>

message

<\body>

</html>

異步執(zhí)行腳本

async屬性從腳本處理方式上與defer類似，但是不同的是標(biāo)記async的腳本并不能保證腳本按照他們的出現(xiàn)順序執(zhí)行，比如：

<html>

<head>

</head>

<body>

message

<\body>

</html>

不能保證example1比example2先執(zhí)行。

動(dòng)態(tài)加載腳本

除了<script>以外還可以用其他方式加載腳本。因?yàn)镴avaScript可以使用DOM API，所以通過向DOM中動(dòng)態(tài)地加入script元素同樣可以加載指定腳本。只要?jiǎng)?chuàng)建一個(gè)script元素并將其添加到DOM即可。

let script = document.createElement('script');

script.src = 'gibberish.js';

document.head.appendChild(script);

當(dāng)然，在把 HTMLElement 元素添加到 DOM 且執(zhí)行到這段代碼之前不會(huì)發(fā)送請(qǐng)求。默認(rèn)情況下，以這種方式創(chuàng)建的<script>元素是以異步方式加載的，相當(dāng)于添加了 async 屬性。不過這樣做可能會(huì)有問題，因?yàn)樗袨g覽器都支持 createElement()方法，但不是所有瀏覽器都支持 async 屬性。因此，如果要統(tǒng)一動(dòng)態(tài)腳本的加載行為，可以明確將其設(shè)置為同步加載：

let script = document.createElement('script');

script.src = 'gibberish.js';

script.async = false;

document.head.appendChild(script);

以這種方式獲取的資源對(duì)瀏覽器預(yù)加載器是不可見的。這會(huì)嚴(yán)重影響它們?cè)谫Y源獲取隊(duì)列中的優(yōu)先級(jí)。根據(jù)應(yīng)用程序的工作方式以及怎么使用，這種方式可能會(huì)嚴(yán)重影響性能。要想讓預(yù)加載器知道這些動(dòng)態(tài)請(qǐng)求文件的存在，可以在文檔頭部顯式聲明它們：

XHTML中的變化

可擴(kuò)展超文本標(biāo)記語(yǔ)言（XHTML，Extensible HyperText Markup Language）是將 HTML 作為 XML的應(yīng)用重新包裝的結(jié)果。與 HTML 不同，在 XHTML 中使用 JavaScript 必須指定 type 屬性且值為text/javascript，HTML 中則可以沒有這個(gè)屬性。XHTML 雖然已經(jīng)退出歷史舞臺(tái)，但實(shí)踐中偶爾可能也會(huì)遇到遺留代碼，為此本節(jié)稍作介紹。在 XHTML 中編寫代碼的規(guī)則比 HTML 中嚴(yán)格，這會(huì)影響使用<script>元素嵌入 JavaScript 代碼。下面的代碼塊雖然在 HTML 中有效，但在 XHML 中是無效的。

function compare(a, b) {

if (a < b) {

console.log("A is less than B");

} else if (a > b) {

console.log("A is greater than B");

} else {

console.log("A is equal to B");

}

</script>

在 HTML 中，解析<script>元素會(huì)應(yīng)用特殊規(guī)則。XHTML 中則沒有這些規(guī)則。這意味著 a < b語(yǔ)句中的小于號(hào)（<）會(huì)被解釋成一個(gè)標(biāo)簽的開始，并且由于作為標(biāo)簽開始的小于號(hào)后面不能有空格，這會(huì)導(dǎo)致語(yǔ)法錯(cuò)誤。避免 XHTML 中這種語(yǔ)法錯(cuò)誤的方法有兩種。第一種是把所有小于號(hào)（<）都替換成對(duì)應(yīng)的 HTML實(shí)體形式（<）。結(jié)果代碼就是這樣的：

function compare(a, b) {

if (a < b) {

console.log("A is less than B");

} else if (a > b) {

console.log("A is greater than B");

} else {

console.log("A is equal to B");

}

</script>

這樣代碼就可以在 XHTML 頁(yè)面中運(yùn)行了。不過，缺點(diǎn)是會(huì)影響閱讀。好在還有另一種方法。第二種方法是把所有代碼都包含到一個(gè) CDATA 塊中。在 XHTML（及 XML）中，CDATA 塊表示文檔中可以包含任意文本的區(qū)塊，其內(nèi)容不作為標(biāo)簽來解析，因此可以在其中包含任意字符，包括小于號(hào)，并且不會(huì)引發(fā)語(yǔ)法錯(cuò)誤。使用 CDATA 的格式如下：

<script type="text/javascript"><![CDATA[

function compare(a, b) {

if (a < b) {

console.log("A is less than B");

} else if (a > b) {

console.log("A is greater than B");

} else {

console.log("A is equal to B");

}

]]></script>

在兼容 XHTML 的瀏覽器中，這樣能解決問題。但在不支持 CDATA 塊的非 XHTML 兼容瀏覽器中則不行。為此，CDATA 標(biāo)記必須使用 JavaScript 注釋來抵消：

//<![CDATA[

function compare(a, b) {

if (a < b) {

console.log("A is less than B");

} else if (a > b) {

console.log("A is greater than B");

} else {

console.log("A is equal to B");

}

//]]>

</script>

這種格式適用于所有現(xiàn)代瀏覽器。雖然有點(diǎn)黑科技的味道，但它可以通過 XHTML 驗(yàn)證，而且對(duì)XHTML 之前的瀏覽器也能優(yōu)雅地降級(jí)。

廢棄的語(yǔ)法

自 1995 年 Netscape 2 發(fā)布以來，所有瀏覽器都將 JavaScript 作為默認(rèn)的編程語(yǔ)言。type 屬性使用一個(gè) MIME 類型字符串來標(biāo)識(shí)<script>的內(nèi)容，但 MIME 類型并沒有跨瀏覽器標(biāo)準(zhǔn)化。即使瀏覽器默認(rèn)使用 JavaScript，在某些情況下某個(gè)無效或無法識(shí)別的 MIME 類型也可能導(dǎo)致瀏覽器跳過（不執(zhí)行）相關(guān)代碼。因此，除非你使用 XHTML 或<script>標(biāo)簽要求或包含非 JavaScript 代碼，最佳做法是不指定 type 屬性。在最初采用 script 元素時(shí)，它標(biāo)志著開始走向與傳統(tǒng) HTML 解析不同的流程。對(duì)這個(gè)元素需要應(yīng)用特殊的解析規(guī)則，而這在不支持 JavaScript 的瀏覽器（特別是 Mosaic）中會(huì)導(dǎo)致問題。不支持的瀏覽器會(huì)把<script>元素的內(nèi)容輸出到頁(yè)面上，從而破壞頁(yè)面的外觀。Netscape 聯(lián)合 Mosaic 拿出了一個(gè)解決方案，對(duì)不支持 JavaScript 的瀏覽器隱藏嵌入的 JavaScript 代碼。最終方案是把腳本代碼包含在一個(gè) HTML 注釋中，像這樣：

<script><!--

function sayHi(){

console.log("Hi!");

}

//--></script>

使用這種格式，Mosaic 等瀏覽器就可以忽略<script>標(biāo)簽中的內(nèi)容，而支持 JavaScript 的瀏覽器則必須識(shí)別這種模式，將其中的內(nèi)容作為 JavaScript 來解析。雖然這種格式仍然可以被所有瀏覽器識(shí)別和解析，但已經(jīng)不再必要，而且不應(yīng)該再使用了。在XHTML 模式下，這種格式也會(huì)導(dǎo)致腳本被忽略，因?yàn)榇a處于有效的 XML 注釋當(dāng)中。

行內(nèi)代碼與外部文件

雖然可以直接在 HTML 文件中嵌入 JavaScript 代碼，但通常認(rèn)為最佳實(shí)踐是盡可能將 JavaScript 代碼放在外部文件中。不過這個(gè)最佳實(shí)踐并不是明確的強(qiáng)制性規(guī)則。推薦使用外部文件的理由如下。

? 可維護(hù)性。JavaScript 代碼如果分散到很多 HTML 頁(yè)面，會(huì)導(dǎo)致維護(hù)困難。而用一個(gè)目錄保存所有 JavaScript 文件，則更容易維護(hù)，這樣開發(fā)者就可以獨(dú)立于使用它們的 HTML 頁(yè)面來編輯代碼。

? 緩存。瀏覽器會(huì)根據(jù)特定的設(shè)置緩存所有外部鏈接的 JavaScript 文件，這意味著如果兩個(gè)頁(yè)面都用到同一個(gè)文件，則該文件只需下載一次。這最終意味著頁(yè)面加載更快。

? 適應(yīng)未來。通過把 JavaScript 放到外部文件中，就不必考慮用 XHTML 或前面提到的注釋黑科技。包含外部 JavaScript 文件的語(yǔ)法在 HTML 和 XHTML 中是一樣的。在配置瀏覽器請(qǐng)求外部文件時(shí)，要重點(diǎn)考慮的一點(diǎn)是它們會(huì)占用多少帶寬。在 SPDY/HTTP2 中，預(yù)請(qǐng)求的消耗已顯著降低，以輕量、獨(dú)立 JavaScript 組件形式向客戶端送達(dá)腳本更具優(yōu)勢(shì)。比如，第一個(gè)頁(yè)面包含如下腳本：

<script src="mainA.js"></script>

<script src="component1.js"></script>

<script src="component2.js"></script>

<script src="component3.js"></script>

...

后續(xù)頁(yè)面可能包含如下腳本：

<script src="mainB.js"></script>

<script src="component3.js"></script>

<script src="component4.js"></script>

<script src="component5.js"></script>

...

在初次請(qǐng)求時(shí)，如果瀏覽器支持 SPDY/HTTP2，就可以從同一個(gè)地方取得一批文件，并將它們逐個(gè)放到瀏覽器緩存中。從瀏覽器角度看，通過 SPDY/HTTP2 獲取所有這些獨(dú)立的資源與獲取一個(gè)大JavaScript 文件的延遲差不多。在第二個(gè)頁(yè)面請(qǐng)求時(shí)，由于你已經(jīng)把應(yīng)用程序切割成了輕量可緩存的文件，第二個(gè)頁(yè)面也依賴的某些組件此時(shí)已經(jīng)存在于瀏覽器緩存中了。當(dāng)然，這里假設(shè)瀏覽器支持 SPDY/HTTP2，只有比較新的瀏覽器才滿足。如果你還想支持那些比較老的瀏覽器，可能還是用一個(gè)大文件更合適。

文檔模式

IE5.5 發(fā)明了文檔模式的概念，即可以使用 doctype 切換文檔模式。最初的文檔模式有兩種：混雜模式（quirks mode）和標(biāo)準(zhǔn)模式（standards mode）。前者讓 IE 像 IE5 一樣（支持一些非標(biāo)準(zhǔn)的特性），后者讓 IE 具有兼容標(biāo)準(zhǔn)的行為。雖然這兩種模式的主要區(qū)別只體現(xiàn)在通過 CSS 渲染的內(nèi)容方面，但對(duì)JavaScript 也有一些關(guān)聯(lián)影響，或稱為副作用。本書會(huì)經(jīng)常提到這些副作用。

IE 初次支持文檔模式切換以后，其他瀏覽器也跟著實(shí)現(xiàn)了。隨著瀏覽器的普遍實(shí)現(xiàn)，又出現(xiàn)了第三種文檔模式：準(zhǔn)標(biāo)準(zhǔn)模式（almost standards mode）。這種模式下的瀏覽器支持很多標(biāo)準(zhǔn)的特性，但是沒有標(biāo)準(zhǔn)規(guī)定得那么嚴(yán)格。主要區(qū)別在于如何對(duì)待圖片元素周圍的空白（在表格中使用圖片時(shí)最明顯）。

混雜模式在所有瀏覽器中都以省略文檔開頭的 doctype 聲明作為開關(guān)。這種約定并不合理，因?yàn)榛祀s模式在不同瀏覽器中的差異非常大，不使用黑科技基本上就沒有瀏覽器一致性可言。標(biāo)準(zhǔn)模式通過下列幾種文檔類型聲明開啟：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"

"http://www.w3.org/TR/html4/strict.dtd">

<!DOCTYPE html PUBLIC

"-//W3C//DTD XHTML 1.0 Strict//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<!DOCTYPE html>

準(zhǔn)標(biāo)準(zhǔn)模式通過過渡性文檔類型（Transitional）和框架集文檔類型（Frameset）來觸發(fā)：

<!DOCTYPE HTML PUBLIC

"-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">

<!DOCTYPE HTML PUBLIC

"-//W3C//DTD HTML 4.01 Frameset//EN"

"http://www.w3.org/TR/html4/frameset.dtd">

<!DOCTYPE html PUBLIC

"-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<!DOCTYPE html PUBLIC

"-//W3C//DTD XHTML 1.0 Frameset//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

準(zhǔn)標(biāo)準(zhǔn)模式與標(biāo)準(zhǔn)模式非常接近，很少需要區(qū)分。人們?cè)谡f到“標(biāo)準(zhǔn)模式”時(shí)，可能指其中任何一個(gè)。而對(duì)文檔模式的檢測(cè)（本書后面會(huì)討論）也不會(huì)區(qū)分它們。本書后面所說的標(biāo)準(zhǔn)模式，指的就是除混雜模式以外的模式。

<noscript>元素

針對(duì)早期瀏覽器不支持 JavaScript 的問題，需要一個(gè)頁(yè)面優(yōu)雅降級(jí)的處理方案。最終，<noscript>元素出現(xiàn)，被用于給不支持 JavaScript 的瀏覽器提供替代內(nèi)容。雖然如今的瀏覽器已經(jīng) 100%支持JavaScript，但對(duì)于禁用 JavaScript 的瀏覽器來說，這個(gè)元素仍然有它的用處。<noscript>元素可以包含任何可以出現(xiàn)在<body>中的 HTML 元素，<script>除外。在下列兩種情況下，瀏覽器將顯示包含在<noscript>中的內(nèi)容：

? 瀏覽器不支持腳本；

? 瀏覽器對(duì)腳本的支持被關(guān)閉。任何一個(gè)條件被滿足，包含在<noscript>中的內(nèi)容就會(huì)被渲染。否則，瀏覽器不會(huì)渲染<noscript>中的內(nèi)容。

下面是一個(gè)例子：

<!DOCTYPE html>

<html>

<head>

<title>Example HTML Page</title>

</head>

<body>

<noscript>

<p>This page requires a JavaScript-enabled browser.</p>

</noscript>

</body>

</html>

這個(gè)例子是在腳本不可用時(shí)讓瀏覽器顯示一段話。如果瀏覽器支持腳本，則用戶永遠(yuǎn)不會(huì)看到它。

小結(jié)

JavaScript 是通過<script>元素插入到 HTML 頁(yè)面中的。這個(gè)元素可用于把 JavaScript 代碼嵌入到HTML 頁(yè)面中，跟其他標(biāo)記混合在一起，也可用于引入保存在外部文件中的 JavaScript。本章的重點(diǎn)可以總結(jié)如下。

? 要包含外部 JavaScript 文件，必須將 src 屬性設(shè)置為要包含文件的 URL。文件可以跟網(wǎng)頁(yè)在同一臺(tái)服務(wù)器上，也可以位于完全不同的域。

? 所有<script>元素會(huì)依照它們?cè)诰W(wǎng)頁(yè)中出現(xiàn)的次序被解釋。在不使用 defer 和 async 屬性的情況下，包含在<script>元素中的代碼必須嚴(yán)格按次序解釋。

? 對(duì)不推遲執(zhí)行的腳本，瀏覽器必須解釋完位于<script>元素中的代碼，然后才能繼續(xù)渲染頁(yè)面的剩余部分。為此，通常應(yīng)該把<script>元素放到頁(yè)面末尾，介于主內(nèi)容之后及</body>標(biāo)簽之前。

? 可以使用 defer 屬性把腳本推遲到文檔渲染完畢后再執(zhí)行。推遲的腳本原則上按照它們被列出的次序執(zhí)行。

? 可以使用 async 屬性表示腳本不需要等待其他腳本，同時(shí)也不阻塞文檔渲染，即異步加載。異步腳本不能保證按照它們?cè)陧?yè)面中出現(xiàn)的次序執(zhí)行。

? 通過使用<noscript>元素，可以指定在瀏覽器不支持腳本時(shí)顯示的內(nèi)容。如果瀏覽器支持并啟用腳本，則<noscript>元素中的任何內(nèi)容都不會(huì)被渲染。

者 | 泰斗賢若如

來源 | 泰斗賢若如

這次寫一篇對(duì)于JavaScript的簡(jiǎn)介，我們知道的編程語(yǔ)言有很多種，比如Java、C++、Python等等，每種編程語(yǔ)言都有其獨(dú)具的特色，不論是語(yǔ)法格式還是表達(dá)形式，都能讓每個(gè)程序員沉淀在知識(shí)的海洋里難以自拔。

即每種編程語(yǔ)言都有無限的延展性，但如果我們考慮問題的時(shí)候追溯其根源，其實(shí)也不難發(fā)現(xiàn)每種編程語(yǔ)言都具有共同的初心，最直白的話就是人與計(jì)算機(jī)進(jìn)行溝通的語(yǔ)言，在現(xiàn)實(shí)生活中，見什么人說什么話我們都很清楚，那在與計(jì)算機(jī)溝通的世界中，做什么事用什么編程語(yǔ)言溝通也是同樣的道理，前提就是我們要了解這些編程語(yǔ)言，在你需要選擇的時(shí)候做出正確的判斷，這也正是我寫此篇文章的意義。

JavaScript的歷史由來

在1994年，當(dāng)時(shí)的網(wǎng)景公司（Netscape）憑借Navigator這個(gè)瀏覽器成為了Web時(shí)代開啟最著名的第一代的互聯(lián)網(wǎng)公司。當(dāng)時(shí)所用的第一版本的瀏覽器就是下圖中的瀏覽器，相信有很多年輕朋友都沒有見過這種瀏覽器。如果大家回想十年前或是十五年前，大家用的瀏覽器應(yīng)該是IE瀏覽器，那個(gè)時(shí)候的瀏覽器跟現(xiàn)在的比如說谷歌瀏覽器、火狐瀏覽器等相比而言，那就是天壤之別了。

這個(gè)最早版本的瀏覽器，整個(gè)瀏覽器都是靜態(tài)的，也就是用HTML和CSS寫的，并沒有像今天的各種瀏覽器一樣具有各種各樣的動(dòng)態(tài)效果了，比如像網(wǎng)頁(yè)的圖片輪播、鼠標(biāo)懸浮切換等效果。

網(wǎng)景公司就想在原來的靜態(tài)頁(yè)面的基礎(chǔ)上添加一些動(dòng)態(tài)的效果，這時(shí)候網(wǎng)景公司出來一個(gè)很牛的人物叫布蘭登·艾奇，他用不到兩周的時(shí)間就設(shè)計(jì)出了能在網(wǎng)頁(yè)上實(shí)現(xiàn)動(dòng)態(tài)效果的編程語(yǔ)言。

他設(shè)計(jì)出實(shí)現(xiàn)網(wǎng)頁(yè)動(dòng)態(tài)效果的編程語(yǔ)言，并將其編程語(yǔ)言命名為JavaScript。

為什么會(huì)命名為JavaScript呢？原因是在當(dāng)時(shí)，Java非常火，網(wǎng)景公司希望借用Java在當(dāng)時(shí)的名氣來進(jìn)行推廣。其實(shí)事實(shí)上呢，JavaScript除了語(yǔ)法上有點(diǎn)像Java外，別的地方都跟Java沒有任何關(guān)系。

JavaScript和ECMAScript的關(guān)系

從上面講的JavaScript的由來中，我們就知道JavaScript由網(wǎng)景公司的布蘭登·艾奇開發(fā)出來的，一年后，微軟又模仿JavaScript開發(fā)出了一種編程語(yǔ)言叫JScript,再后來，陸續(xù)又有別的商家推出JavaScript的不同實(shí)現(xiàn)語(yǔ)言。這就導(dǎo)致JavaScript的語(yǔ)法和特性日益混亂，其標(biāo)準(zhǔn)化問題被提上日程。最終由歐洲計(jì)算機(jī)制造商協(xié)會(huì)（ECMA）以JavaScript1.1為藍(lán)本，制定了【ECMA-262】標(biāo)準(zhǔn)，并由此標(biāo)準(zhǔn)定義了一種新腳本語(yǔ)言ECMAScript。隨后，ISO也采用ECMAScript作為標(biāo)準(zhǔn)，各瀏覽器廠商便紛紛開始將ECMAScript作為各自JavaScript實(shí)現(xiàn)的基礎(chǔ)。

那到底JavaScript和ECMAScript有什么關(guān)系呢?

ECMAScript其實(shí)并不等同于JavaScript，它只是JavaScript的核心標(biāo)準(zhǔn)（語(yǔ)法、類型、語(yǔ)句、關(guān)鍵字、保留字、操作符、對(duì)象），而JavaScript還包括文檔對(duì)象模型（DOM）和瀏覽器對(duì)象模型（BOM）等。其中各主流瀏覽器對(duì)ECMAScript的支持都還不錯(cuò)，但對(duì)DOM的支持相差較大，對(duì)于BOM一直沒有相關(guān)標(biāo)準(zhǔn)。最后再簡(jiǎn)單總結(jié)一下就是：ECMAScript是一種語(yǔ)言標(biāo)準(zhǔn)，JavaScript是對(duì)ECMAScript的一種實(shí)現(xiàn)。

JavaScript版本迭代

1997年06月 :發(fā)布首版。
1997年06月:修改規(guī)范完全符合ISO/IEC 16262國(guó)際標(biāo)準(zhǔn)。
1998年6月，ECMAScript 2.0版發(fā)布。
1999年12月，ECMAScript 3.0版發(fā)布，成為JavaScript的通行標(biāo)準(zhǔn)，得到了廣泛支持。
1999年12月:增加正則、更好的文字處理、新的控制語(yǔ)句、try/catch異常處理、更加明確的錯(cuò)誤定義，數(shù)字輸出格式等等。放棄發(fā)布。
2007年10月，ECMAScript4.0版草案發(fā)布，對(duì)3.0版做了大幅升級(jí)，預(yù)計(jì)次年8月發(fā)布正式版本。草案發(fā)布后，由于4.0版的目標(biāo)過于激進(jìn)，各方對(duì)于是否通過這個(gè)標(biāo)準(zhǔn)，發(fā)生了嚴(yán)重分歧。以Yahoo、Microsoft、Google為首的大公司，反對(duì)JavaScript的大幅升級(jí)，主張小幅改動(dòng)；以JavaScript創(chuàng)造者Brendan Eich為首的Mozilla公司，則堅(jiān)持當(dāng)前的草案。
2008年7月，由于對(duì)于下一個(gè)版本應(yīng)該包括哪些功能，各方分歧太大，爭(zhēng)論過于激進(jìn)，ECMA開會(huì)決定，中止ECMAScript 4.0的開發(fā)，將其中涉及現(xiàn)有功能改善的一小部分，發(fā)布為ECMAScript3.1，而將其他激進(jìn)的設(shè)想擴(kuò)大范圍，放入以后的版本，由于會(huì)議的氣氛，該版本的項(xiàng)目代號(hào)起名為Harmony（和諧）。會(huì)后不久，ECMAScript 3.1改名為ECMAScript 5。
2009年12月:完善了ECMASript 3版本、增加"strict mode," (嚴(yán)格模式)、以及新的功能，如getter和setter、 JSON庫(kù)支持和更完整的對(duì)象屬性。ECMAScript 5.0版正式發(fā)布。Harmony項(xiàng)目則一分為二，一些較為可行的設(shè)想定名為JavaScript.next繼續(xù)開發(fā)，后來演變成ECMAScript 6；一些不是很成熟的設(shè)想，則被視為JavaScript.next.next，在更遠(yuǎn)的將來再考慮推出。
2011年06月:ECMAscript 5.1版發(fā)布，并且成為ISO國(guó)際標(biāo)準(zhǔn)（ISO/IEC 16262:2011）。
2013年3月，ECMAScript 6草案凍結(jié)，不再添加新功能。新的功能設(shè)想將被放到ECMAScript 7。
2013年12月，ECMAScript 6草案發(fā)布。
2015年06月:第六版的名字有很多，可以叫ECMAScript6 (ES6) ，也可以叫ECMAScript 2015 (ES2015) 。
2015年6月17日，ECMAScript 6發(fā)布正式版本，即ECMAScript 2015。
2016年06月:也被稱為ECMAScript 2016。完善ES6規(guī)范，還包括兩個(gè)新的功能:求冪運(yùn)算符(*) 和array.prototype.includes方法。
2017年06月:增加新的功能，如并發(fā)、原子操作、Object.values/Object.entries、字符串填充、promises、 await/asyn等等。

JavaScript的組成部分

JavaScript的三個(gè)主要組成部分是：ECMAScript(核心)，DOM（文檔對(duì)象模型），BOM（瀏覽器對(duì)象模型）。

ECMAScript(核心)

【ECMA-262】并沒有參照web瀏覽器，規(guī)定了語(yǔ)言的組成部分，其具體內(nèi)容包括語(yǔ)法、類型、語(yǔ)言、關(guān)鍵字、保留字、操作符、對(duì)象等。

ECMAScript的兼容：

支持【ECMA-262】描述的所有“類型、值、對(duì)象、屬性、函數(shù)以及程序語(yǔ)法和語(yǔ)義” 。
支持Unicode字符標(biāo)準(zhǔn)。
添加【ECMA-262】沒有描述的更多“類型、值、對(duì)象、屬性和函數(shù)”，【ECMA-262】說的這些新增特性，主要是指該標(biāo)準(zhǔn)中沒有規(guī)定的新對(duì)象和對(duì)象的新屬性。
支持【ECMA-262】中沒有定義的“程序和正則表達(dá)式的語(yǔ)法”。也就是說可以修改和擴(kuò)展內(nèi)置的正則表達(dá)式語(yǔ)法。

DOM（文檔對(duì)象模型）

文檔對(duì)象模型(DOM)是針對(duì)XML但經(jīng)過擴(kuò)展用于HTML的應(yīng)用程序編程接口（API）。DOM把整個(gè)頁(yè)面映射為一個(gè)多層次節(jié)點(diǎn)結(jié)構(gòu)。HTML或者XML頁(yè)面中的每個(gè)組成部分都是某種類型的節(jié)點(diǎn)，這些節(jié)點(diǎn)又包含著不同類型的數(shù)據(jù)。

其實(shí)說白了，文檔對(duì)象模型(DOM)就是操作網(wǎng)頁(yè)上的那些標(biāo)簽，來實(shí)現(xiàn)動(dòng)態(tài)的效果。

在DOM中，頁(yè)面一般可以用分層節(jié)點(diǎn)圖表示：

DOM級(jí)別：

DOM1級(jí)于1998年10月成為W3C的推薦標(biāo)準(zhǔn)。BOM1由兩個(gè)模塊組成分別是DOM core和DOM HTML。
DOM core：規(guī)定如何映射基于XML的文檔結(jié)構(gòu)，以便簡(jiǎn)化對(duì)文檔中任意部分的訪問和操作。
DOM HTML：在DOM core的基礎(chǔ)上加以擴(kuò)展，添加了針對(duì)HTML的對(duì)象和方法。
DOM2級(jí)在原來DOM的基礎(chǔ)上有擴(kuò)充了鼠標(biāo)和用戶界面事件、范圍、遍歷等細(xì)分模塊，通過對(duì)象接口增加了對(duì)css的支持。包括以下模塊：

DOM Views（DOM視圖）：定義了跟蹤不同文檔視圖的接口。
DOM Events（DOM事件）：定義了事件與事件處理的接口。
DOM Traversal and Range(DOM遍歷和范圍)：定義了遍歷和操作文檔的接口。

DOM3級(jí)則進(jìn)一步擴(kuò)展了DOM，引入了加載和保存模塊以統(tǒng)一方式加載和保存文檔的方法；新增了DOM驗(yàn)證模塊主要還是驗(yàn)證文檔的方法。

BOM（瀏覽器對(duì)象模型）

瀏覽器對(duì)象模型(BOM)是處理瀏覽器窗口和框架，我們習(xí)慣上把所有針對(duì)瀏覽器的JavaScript擴(kuò)展算作是BOM的一部分。包括以下：

彈出新瀏覽器窗口的功能。
移動(dòng)、縮放和關(guān)閉瀏覽器窗口的功能。
提供瀏覽器所加載頁(yè)面的詳細(xì)信息的navigator對(duì)象。
提供瀏覽器所加載頁(yè)面的詳細(xì)信息的location對(duì)象。
提供用戶分辨率詳細(xì)信息的screen對(duì)象。
對(duì)cookies的支持。
像XMLHttpRequest和IE的ActionXobject這樣的自定義對(duì)象。

瀏覽器對(duì)象模型(BOM)其實(shí)很簡(jiǎn)單，它包含了當(dāng)前瀏覽器上的一些操作，比如說像關(guān)閉按鈕、刷新按鈕、前進(jìn)和后退按鈕等等。

綜上來說，JavaScript就包含了以上這三部分內(nèi)容，第一部分就是核心基礎(chǔ)語(yǔ)法，這是非常非常重要的東西，有了核心基礎(chǔ)的鋪墊，我們才能后續(xù)的學(xué)習(xí)文檔對(duì)象模型(DOM)和瀏覽器對(duì)象模型(BOM)。文檔對(duì)象模型(DOM)就是操作一些網(wǎng)頁(yè)上的一些標(biāo)簽元素，來實(shí)現(xiàn)網(wǎng)頁(yè)上的動(dòng)態(tài)效果。

而瀏覽器對(duì)象模型(BOM)就是像比如說滾動(dòng)的行為，點(diǎn)擊回到頂部，還有刷新，前進(jìn)，后退等操作。這些特性就是我們需要了解的內(nèi)容，在你后續(xù)進(jìn)行詳細(xì)學(xué)習(xí)的時(shí)候，就帶著這些特性疑問去學(xué)習(xí)，會(huì)有事半功倍的效果。

?微信Android版支持改微信號(hào)，淘寶硬核拒絕改名要求；5G 套餐價(jià)格松動(dòng)；Kotlin 1.4 第二個(gè)預(yù)覽版發(fā)布|極客頭條
?跨行成為程序員的 15 個(gè)實(shí)用技巧！
?程序員擺地?cái)偟恼_姿勢(shì)！
?全網(wǎng)唯一禿頭數(shù)據(jù)集：20萬張人像，網(wǎng)羅各類禿頭
?一個(gè)神秘URL釀大禍，差點(diǎn)讓我背鍋！
?Uber 前無人駕駛工程師告訴你，國(guó)內(nèi)無人駕駛之路還要走多久？

在線咨詢

上一篇：CSS 中幾種最常用的水平垂直居中的方法
下一篇：8個(gè)精巧的在線網(wǎng)站工具，哪個(gè)看起來更強(qiáng)大一點(diǎn)？

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營(yíng)銷服務(wù)商

JavaScript代碼怎樣引入到HTML中？

<script>元素

標(biāo)簽位置

推遲使用腳本

異步執(zhí)行腳本

動(dòng)態(tài)加載腳本

XHTML中的變化

廢棄的語(yǔ)法

行內(nèi)代碼與外部文件

文檔模式

<noscript>元素

小結(jié)

JavaScript的歷史由來

JavaScript和ECMAScript的關(guān)系

JavaScript版本迭代

JavaScript的組成部分

ECMAScript(核心)

DOM（文檔對(duì)象模型）

BOM（瀏覽器對(duì)象模型）

您的項(xiàng)目需求