《JavaScript 闖關記》之簡介

劼哥stone發表於2016-10-21
JavaScript

JavaScript 是面向 Web 的程式語言，絕大多數現代網站都使用了 JavaScript，並且所有的現代 Web 瀏覽器（電腦，手機，平板）均包含了 JavaScript 直譯器。 這使得 JavaScript 能夠稱得上史上使用最廣泛的程式語言。 JavaScript 也是前端開發工程師必須掌握的三種技能之一：描述網頁內容的 HTML、描述網頁樣式的 CSS、以及描述網頁行為的 JavaScript。

JavaScript 是一門 動態的、弱型別的、物件導向的、解釋型的 程式語言，非常適合物件導向和函式式的程式設計風格。JavaScript 的語法來自於 Java，它的一等函式（first-class function）來自於 Scheme，它的基於原型（prototype-based）的繼承來自於 Self。但學習本課程不必去了解那些（Java/Scheme/Slef）語言或熟悉那些術語。

JavaScript 起源

時間：1995年

人物：Brendan Eich（布蘭登·艾奇）

背景：那個時候，絕大多數因特網使用者都是用速度僅為28.8kbit/s的「貓」上網，為了完成簡單的表單驗證，必須把表單資料傳送到伺服器端才能確定使用者是否沒有填寫某個必填域、是否輸入了無效的值，每次操作需等待30秒以上才會有結果，這無疑是在慢性自殺。

事件：當時走在技術革新最前沿的 Netscape 公司指派 Brendan Eich 開發一種客戶端語言，用來處理這種簡單的驗證，它就是 JavaScript。JavaScript 原名 LiveScript，Netscape 為了搭上媒體熱炒 Java 的順風車，才把 LiveScript 改名為 JavaScript。（所以 Java 和 JavaScript 的關係，就相當於雷鋒和雷峰塔的關係。）

自此以後，JavaScript 逐漸成為市面上常見瀏覽器必備的一項特色功能。如今，JavaScript 的用途早已不再侷限於簡單的資料驗證，而是具備了與瀏覽器視窗及其內容等幾乎所有方面互動的能力。今天的 JavaScript 已經成為一門功能全面的程式語言，能夠處理複雜的計算和互動，擁有了閉包、匿名（lambda，拉姆達）函式，甚至超程式設計等特性。

JavaScript 從一個簡單的輸入驗證器發展成為一門強大的程式語言，完全出乎人們的意料。應該說，它既是一門非常簡單的語言，又是一門非常複雜的語言。說它簡單，是因為學會使用它只需片刻功夫；而說它複雜，是因為要真正掌握它則需要數年時間。

JavaScript 實現

隨著 JavaScript 的普及，微軟公司在 IE 瀏覽器中也加入了名為 JScript 的 JavaScript 實現，由於沒有標準規定 JavaScript 的語法和特性，導致市面上存在多個版本的 JavaScript 實現，且互不相容，因此 JavaScript 標準化問題被提上了議事日程。

1997年，歐洲計算機制造商協會（ECMA，European Computer Manufactures Association）定義了名為ECMAScript（發音為 ek-ma-script）的指令碼語言標準，它是通用的，與平臺無關的語言標準。自此以後，瀏覽器開發商開始致力於將 ECMAScript 作為各自 JavaScript 實現的基礎。雖然基礎相同，但具體實現在不同瀏覽器上卻略有差異。

JavaScript 和 ECMAScript 通常被人們用來表達相同的含義，但 JavaScript 的含義卻比 ECMAScript 中規定的要多得多。一個完整的 JavaScript 實現應該由下面三個不同的部分組成。

  • 核心（ECMAScript）
  • 文件物件模型（DOM）
  • 瀏覽器物件模型（BOM）

核心（ECMAScript）

ECMAScript 標準由 語法、資料型別、語句、關鍵字、保留字、運算子、物件 組成。它與 Web 瀏覽器沒有任何依賴關係，並且這門語言本身並不包含輸入和輸出定義。ECMAScript 定義的只是這門語言的基礎，而在此基礎之上可以構建更完善的指令碼語言。

Web 瀏覽器只是 ECMAScript 實現的宿主環境之一，其他宿主環境包括 Node 和 Adobe Flash。宿主環境不僅提供基本的 ECMAScript 實現，同時也會提供該語言的擴充套件（例如：DOM、BOM），這些擴充套件則利用 ECMAScript 的核心型別和語法提供更多更具體的功能。

JavaScript 是 Web 瀏覽器對 ECMAScript 標準的實現，ActionScript 是 Adobe Flash 對 ECMAScript 標準的實現。

ECMAScript 歷史

1997年，ECMAScript 1版釋出。

1998年6月，ECMAScript 2版釋出。

1999年12月，ECMAScript 3版釋出。

2000年，ECMAScript 4開始醞釀，最終這個版本沒有通過。

2009年12月，ECMAScript 5版釋出。

2011年6月，ECMAscript 5.1版釋出，成為國際標準。

2015年6月，ECMAScript 6正式通過，成為國際標準。

擴充套件閱讀「阮一峰 的《ECMAScript 6 入門》」
es6.ruanyifeng.com/#docs/intro

3.0版是一個巨大的成功，在業界得到廣泛支援，成為通行標準，奠定了 JavaScript 語言的基本語法，以後的版本完全繼承。直到今天，初學者一開始學習 JavaScript，其實就是在學3.0版的語法。

文件物件模型（DOM）

文件物件模型（DOM，Document Object Model）是用於 HTML 的應用程式程式設計介面（API），它把整個頁面對映為一個多層節點結構。HTML 頁面中的每個組成部分都是某種型別的節點，這些節點又包含著不同型別的資料。看下面這個 HTML 頁面：

<html>
    <head>
        <title>Sample Page</title>
    </head>
    <body>
        <p>Hello World!</p>
    </body>
</html>複製程式碼

通過 DOM 建立的這個表示文件的樹形圖，開發人員獲得了控制頁面內容和結構的主動權。藉助 DOM 提供的 API，開發人員可以輕鬆自如地刪除、新增、替換或修改任何節點。

由於 Netscape 和 微軟實現的 DOM 互不相容，負責制定 Web 通訊標準的 W3C（World Wide Web Consortium，全球資訊網聯盟）開始著手規劃 DOM。

DOM 1級：

  • DOM 核心：對映文件結構，簡化對文件中任意部分的操作和訪問。
  • DOM HTML：在 DOM 核心的基礎上，新增了針對 HTML 的物件和方法。

DOM 2級：

  • DOM 檢視：定義了跟蹤不同文件檢視的介面。
  • DOM 事件：定義了事件和事件處理的介面。
  • DOM 樣式：定義了基於 CSS 為元素應用樣式的介面。
  • DOM 遍歷和範圍：定義了遍歷和操作文件樹的介面。

DOM 3級：

  • DOM 載入和儲存：引入了以統一方式載入和儲存文件的方法。
  • DOM 驗證：新增了驗證文件的方法。
  • DOM 核心擴充套件。

注意：

  1. DOM 並不是只針對 JavaScript 的，很多別的語言也都實現了 DOM。
  2. DOM 0級標準是不存在的，它只是 DOM 歷史座標中的一個參照點而已。

瀏覽器物件模型（BOM）

瀏覽器物件模型（BOM，Browser Object Model）是用於瀏覽器的應用程式程式設計介面（API），它把整個瀏覽器視窗對映為一個物件。從根本上講，BOM 只處理瀏覽器視窗和框架，但人們習慣上也把所有針對瀏覽器的 JavaScript 擴充套件算作 BOM 的一部分，例如：

  • 彈出新瀏覽器視窗的功能。
  • 移動、縮放和關閉瀏覽器視窗的功能。
  • 提供瀏覽器詳細資訊的 navigator 物件。
  • 提供瀏覽器所載入頁面的詳細資訊的 localtion 物件。
  • 提供使用者顯示器解析度詳細資訊的 screen 物件。
  • 對 cookies 的支援。
  • XMLHttpRequest 和 IE 的 ActiveXObject 這樣的自定義物件。

BOM 最讓人頭疼的是沒有相關的規範和標準，每個瀏覽器都有獨有的實現，這個問題在 HTML5 中得到了解決，HTML5 致力於把很多 BOM 功能寫入正式規範。

小結

JavaScript 是一種專為網頁互動而設計的指令碼語言，由下列3個不同的部分組成：

  • 核心（ECMAScript），由 ECMA-262 定義，提供核心語言功能。
  • 文件物件模型（DOM），提供訪問和操作網頁內容的方法和介面。
  • 瀏覽器物件模型（BOM），提供與瀏覽器互動的方法和介面。

JavaScript 的這3個組成部分，在當前5個主要瀏覽器（IE、FireFox、Chrome、Safari 和 Opera）中都得到了不同程度的支援。其中，所有瀏覽器對 ECMAScript 3 版本的支援大體上都還不錯，而對 ECMAScript 5 的支援程度越來越高，但對 DOM 的支援則彼此相差比較多。對於已經正式納入 HTML5 標準的 BOM 來說，儘管各瀏覽器都實現了某些眾所周知的共同特性，但其他特性還是會因瀏覽器而異。

擴充套件閱讀「Standard ECMA-262 5.1 Edition 」
www.ecma-international.org/ecma-262/5.…

擴充套件閱讀「ECMAScript 5 瀏覽器相容一覽表」
caniuse.mojijs.com/Home/Html/i…

更多

關注微信公眾號「劼哥舍」回覆「答案」，獲取關卡詳解。
關注 github.com/stone0090/j…，獲取最新動態。

相關文章