【1】JavaScript
JavaScript 是一種輕量級的程式設計語言;是可插入 HTML 頁面的程式設計代碼。
JavaScript 插入 HTML 頁面後,可由所有的現代浏覽器執行。
ECMA-262 是 JavaScript 标準的官方名稱。
JavaScript 由 Brendan Eich 發明。它于 1995 年出現在 Netscape 中(該浏覽器已停止更新),并于 1997 年被 ECMA(一個标準協會)采納。
JavaScript包括三個部分:ECMAScript、DOM和BOM對象

【2】ECMAScript
ECMAScript 和 JavaScript 的關系是,前者是後者的規格,後者是前者的一種實作(另外的 ECMAScript 方言還有 Jscript 和 ActionScript)。
ECMAScript 并不與任何具體浏覽器相綁定,實際上,它也沒有提到用于任何使用者輸入輸出的方法(這點與 C 這類語言不同,它需要依賴外部的庫來完成這類任務)。
那麼什麼才是 ECMAScript 呢?ECMA-262 标準(第 2 段)的描述如下:
“ECMAScript 可以為不同種類的宿主環境提供核心的腳本程式設計能力,是以核心的腳本語言是與任何特定的宿主環境分開進行規定的... ...”
Web 浏覽器對于 ECMAScript 來說是一個宿主環境,但它并不是唯一的宿主環境。事實上,還有不計其數的其他各種環境(例如 Nombas 的 ScriptEase,以及 Macromedia 同時用在 Flash 和 Director MX 中的 ActionScript)可以容納 ECMAScript 實作。
那麼 ECMAScript 在浏覽器之外規定了些什麼呢?
簡單地說,ECMAScript 描述了以下内容:
文法
類型
語句
關鍵字
保留字
運算符
對象
ECMAScript 僅僅是一個描述,定義了腳本語言的所有屬性、方法和對象。其他語言可以實作 ECMAScript 來作為功能的基準,JavaScript 就是這樣:
每個浏覽器都有它自己的 ECMAScript 接口(标準)的實作,然後這個實作又被擴充,包含了 DOM 和 BOM。當然還有其他實作并擴充了 ECMAScript 的語言,例如 Windows 腳本宿主(Windows Scripting Host, WSH)、Macromedia 在 Flash 和 Director MX 中的 ActionScript,以及 Nombas ScriptEase。
參考ECMAScript講解
【3】DOM
DOM(文檔對象模型)是 HTML 和 XML 的應用程式接口(API)。DOM 将把整個頁面規劃成由節點層級構成的文檔。HTML 或 XML 頁面的每個部分都是一個節點的衍生物。請考慮下面的 HTML 頁面:
<html>
<head>
<title>Sample Page</title>
</head>
<body>
<p>hello world!</p>
</body>
</html>
這段代碼可以用 DOM 繪制成一個節點層次圖:
DOM 通過建立樹來表示文檔,進而使開發者對文檔的内容和結構具有空前的控制力。用 DOM API 可以輕松地删除、添加和替換節點。
【DOM 的各個 level】
DOM Level 1 是 W3C 于 1998 年 10 月提出的。它由兩個子產品組成,即 DOM Core 和 DOM HTML。前者提供了基于 XML 的文檔的結構圖,以便通路和操作文檔的任意部分;後者添加了一些 HTML 專用的對象和方法,進而擴充了 DOM Core。
注意,DOM 不是 JavaScript 專有的,事實上許多其他語言都實作了它。不過,Web 浏覽器中的 DOM 已經用 ECMAScript 實作了(基于該标準實作了DOM),現在是 JavaScript 語言的一個很大組成部分。
DOM Level 1 隻是一個目标,即規劃文檔的結構。
DOM Level 2 的目标就廣泛多了:
對原始 DOM 的擴充添加了對滑鼠和使用者界面事件(DHTML 對此有豐富的支援)、範圍、周遊(重複執行 DOM 文檔的方法)的支援,并通過對象接口添加了對 CSS(層疊樣式表)的支援。
由 Level 1 引入的原始 DOM Core 也加入了對 XML 命名空間的支援。
DOM Level 2 引入了幾種 DOM 新子產品,用于處理新的接口類型:
- DOM 視圖 - 描述跟蹤文檔的各種視圖(即 CSS 樣式化之前和 CSS 樣式化之後的文檔)
- DOM 事件 - 描述事件的接口
- DOM樣式 - 描述處理基于 CSS 樣式的接口
- DOM 周遊和範圍 - 描述周遊和操作文檔樹的接口
DOM Level 3 引入了以統一的方式載入和保持文檔的方法(包含在新子產品 DOM Load and Save)以及驗證文檔(DOM Validation)的方法,進而進一步擴充了 DOM。
在 Level 3 中,DOM Core 被擴充為支援所有的 XML 1.0 特性,包括 XML Infoset、XPath 和 XML Base。
在學習 DOM 時,可能會遇到有人引用 DOM Level 0。注意,根本沒有 DOM Level 0 這個标準,它隻是 DOM 的一個曆史參考點(DOM Level 0 指的是 IE 4.0 和 Netscape Navigator 4.0 中支援的原始 DHTML)。
【4】BOM
IE 3.0 和 Netscape Navigator 3.0 提供了一種特性 - BOM(浏覽器對象模型),可以對浏覽器視窗進行通路和操作。
使用 BOM,開發者可以移動視窗、改變狀态欄中的文本以及執行其他與頁面内容不直接相關的動作。使 BOM 獨樹一幟且又常常令人懷疑的地方在于,它隻是 JavaScript 的一個部分,沒有任何相關的标準。
BOM 主要處理浏覽器視窗和架構,不過通常浏覽器特定的 JavaScript 擴充都被看做 BOM 的一部分。這些擴充包括:
彈出新的浏覽器視窗
移動、關閉浏覽器視窗以及調整視窗大小
提供 Web 浏覽器詳細資訊的定位對象
提供使用者螢幕分辨率詳細資訊的螢幕對象
對 cookie 的支援
IE 擴充了 BOM,加入了 ActiveXObject 類,可以通過 JavaScript 執行個體化 ActiveX 對象
由于沒有相關的 BOM 标準,每種浏覽器都有自己的 BOM 實作。有一些事實上的标準,如具有一個視窗對象和一個導航對象,不過每種浏覽器可以為這些對象或其他對象定義自己的屬性和方法
浏覽器對象有以下幾種:
Window 對象
Navigator 對象
Screen 對象
History 對象
Location 對象
【4.1】window對象
Window 對象表示浏覽器中打開的視窗。
如果文檔包含架構(frame 或 iframe 标簽),浏覽器會為 HTML 文檔建立一個 window 對象,并為每個架構建立一個額外的 window 對象。
注釋:沒有應用于 window 對象的公開标準,不過所有浏覽器都支援該對象。
window對象擁有對其他浏覽器對象的引用屬性:
- document:對Document對象的隻讀引用;
- history:對History對象的隻讀引用;
- location:用于視窗或架構的Location對象;
- navigator:對Navigator對象的隻讀引用;
- screen:對Screen對象的隻讀引用;
window對象的屬性和方法請參考Window對象
幾種對象圖示如下:
① document:
② history:
③ location:
④ navigator:
⑤ screen:
【4.2】Document對象
每個載入浏覽器的 HTML 文檔都會成為 Document 對象。
Document 對象使我們可以從腳本中對 HTML 頁面中的所有元素進行通路。
提示:Document 對象是 Window 對象的一部分,可通過 window.document 屬性對其進行通路。
Document對象的屬性和方法請參考Document對象
【4.3】History對象
History 對象包含使用者(在浏覽器視窗中)通路過的 URL。
History 對象是 window 對象的一部分,可通過 window.history 屬性對其進行通路。
History 對象最初設計來表示視窗的浏覽曆史。但出于隐私方面的原因,History 對象不再允許腳本通路已經通路過的實際 URL。唯一保持使用的功能隻有 back()、forward() 和 go() 方法。
下面一行代碼執行的操作與單擊後退按鈕執行的操作一樣:
history.back()
下面一行代碼執行的操作與單擊兩次後退按鈕執行的操作一樣:
history.go(-2)
History對象的屬性和方法請參考History對象
【4.4】Location對象
Location 對象包含有關目前 URL 的資訊。
Location 對象是 Window 對象的一個部分,可通過 window.location 屬性來通路。
Location 對象存儲在 Window 對象的 Location 屬性中,表示那個視窗中目前顯示的文檔的 Web 位址。它的 href 屬性存放的是文檔的完整 URL,其他屬性則分别描述了 URL 的各個部分。這些屬性與 Anchor 對象(或 Area 對象)的 URL 屬性非常相似。當一個 Location 對象被轉換成字元串,href 屬性的值被傳回。這意味着你可以使用表達式 location 來替代 location.href。
不過 Anchor 對象表示的是文檔中的超連結,Location 對象表示的卻是浏覽器目前顯示的文檔的 URL(或位置)。但是 Location 對象所能做的遠遠不止這些,它還能控制浏覽器顯示的文檔的位置。如果把一個含有 URL 的字元串賦予 Location 對象或它的 href 屬性,浏覽器就會把新的 URL 所指的文檔裝載進來,并顯示出來。
除了設定 location 或 location.href 用完整的 URL 替換目前的 URL 之外,還可以修改部分 URL,隻需要給 Location 對象的其他屬性指派即可。這樣做就會建立新的 URL,其中的一部分與原來的 URL 不同,浏覽器會将它裝載并顯示出來。
例如,假設設定了Location對象的 hash 屬性,那麼浏覽器就會轉移到目前文檔中的一個指定的位置。同樣,如果設定了 search 屬性,那麼浏覽器就會重新裝載附加了新的查詢字元串的 URL。
除了 URL 屬性外,Location 對象的 reload() 方法可以重新裝載目前文檔,replace() 可以裝載一個新文檔而無須為它建立一個新的曆史記錄,也就是說,在浏覽器的曆史清單中,新文檔将替換目前文檔。
History對象的屬性和方法請參考Location對象
【4.5】Navigator 對象
Navigator 對象包含有關浏覽器的資訊。
Navigator 對象包含的屬性描述了正在使用的浏覽器。可以使用這些屬性進行平台專用的配置。
雖然這個對象的名稱顯而易見的是 Netscape 的 Navigator 浏覽器,但其他實作了 JavaScript 的浏覽器也支援這個對象。
Navigator 對象的執行個體是唯一的,可以用 Window 對象的 navigator 屬性來引用它。
Navigator對象的屬性和方法請參考Navigator對象
【4.6】Screen對象
Screen 對象包含有關用戶端顯示螢幕的資訊。
每個 Window 對象的 screen 屬性都引用一個 Screen 對象。Screen 對象中存放着有關顯示浏覽器螢幕的資訊。
JavaScript 程式将利用這些資訊來優化它們的輸出,以達到使用者的顯示要求。