《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 入門》」
http://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 」
http://www.ecma-international.org/ecma-262/5.1/

擴展閱讀「ECMAScript 5 瀏覽器兼容一覽表」
http://caniuse.mojijs.com/Home/Html/item/key/es5/index.html

更多

關注微信公衆號「劼哥舍」回覆「答案」,獲取關卡詳解。
關注 https://github.com/stone0090/javascript-lessons,獲取最新動態。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章