日韩偷拍一区二区,国产香蕉久久精品综合网,亚洲激情五月婷婷,欧美日韩国产不卡

本章內容

JavaScript的起源

瀏覽器戰爭

DOM的演變史

本書第1版面世的時候，做一名Web設計師是件很讓人很興奮的事。5個年頭過去了，這個職業依然保持著強大的吸引力。特別是JavaScript，經歷了從被人誤解到萬眾矚目的巨大轉變。Web開發呢，也已從混亂無序的狀態，發展成一門需要嚴格訓練才能從事的正規職業。無論設計師還是開發人員，在創建網站的過程中都積極地采用標準技術，Web標準已經深入人心。

當網頁設計人員談論起與Web標準有關的話題時，HTML(超文本標記語言)和CSS(層疊樣式表)通常占據著核心地位。不過，W3C(萬維網聯盟)已批準另一項技術，所有與標準相兼容的Web瀏覽器都支持它，這就是DOM(文檔對象模型)。我們可以利用DOM給文檔增加交互能力，就像利用CSS給文檔添加各種樣式一樣。

在開始學習DOM之前，我們先檢視一下使網頁具備交互能力的程序設計語言。這種語言就是JavaScript，它已經誕生相當長的時間了。

1.1 JavaScript的起源

JavaScript是Netscape公司與Sun公司合作開發的。在JavaScript出現之前，Web瀏覽器不過是一種能夠顯示超文本文檔的簡單的軟件。而在JavaScript出現之后，網頁的內容不再局限于枯燥的文本，它們的可交互性得到了顯著的改善。JavaScript的及時個版本，即JavaScript 1.0版本，出現在1995年推出的Netscape Navigator 2瀏覽器中。

在JavaScript 1.0時，Netscape Navigator主宰著瀏覽器市場，微軟的IE瀏覽器則扮演著追趕者的角色。微軟在推出IE 3的時候了自己的VBScript語言，同時以JScript為名了JavaScript的一個版本，以此很快跟上了Netscape的步伐。面對微軟公司的競爭，Netscape和Sun公司聯合ECMA(歐洲計算機制造商協會)對JavaScript語言進行了標準化。于是出現了ECMAScript語言，這是同一種語言的另一個名字。雖說ECMAScript這個名字沒有流行開來，但人們現在談論的JavaScript實際上就是ECMAScript。

到了1996年，JavaScript、ECMAScript、JScript——隨便你們怎么稱呼它——已經站穩了腳跟。Netscape和微軟公司在各自的第3版瀏覽器中都不同程度地支持JavaScript 1.1語言。

注意 JavaScript與Sun公司開發的Java程序語言沒有任何聯系。JavaScript最開始的名字是LiveScript，后來選擇“JavaScript”作為其正式名稱的原因，大概是想讓它聽起來有系出名門的感覺。但令人遺憾的是，這一選擇容易讓人們把這兩種語言混為一談，而這種混淆又因為各種Web瀏覽器確實具備這樣或那樣的Java客戶端支持功能而進一步加劇。事實上，Java在理論上幾乎可以部署在任何環境，但JavaScript卻傾向于只應用在Web瀏覽器。

JavaScript是一種腳本語言，通常只能通過Web瀏覽器去完成一些操作而不能像普通意義上的程序那樣獨立運行。因為需要由Web瀏覽器進行解釋和執行，所以JavaScript腳本不像Java和C 等編譯型程序設計語言那樣用途廣泛。不過，這種相對的簡單性也正是JavaScript的長處：比較容易學習和掌握，所以那些本身不是程序員，但希望通過簡單的剪貼操作把腳本嵌入現有網頁的普通用戶很快就接受了JavaScript。

JavaScript還向程序員提供了一些操控Web瀏覽器的手段。例如，JavaScript語言可以用來調整Web瀏覽器窗口的高度、寬度和位置等屬性。這種設定瀏覽器屬性的辦法可以看做是BOM(瀏覽器對象模型)。JavaScript的早期版本還提供了一種初級的DOM。

1.2 DOM

什么是DOM？簡單地說，DOM是一套對文檔的內容進行抽象和概念化的方法。

在現實世界里，人們對所謂的“世界對象模型”都不會陌生。例如，當用“汽車”、“房子”和“樹”等名詞來稱呼日常生活環境里的事物時，我們可以百分之百地肯定對方知道我們說的是什么，這是因為人們對這些名詞所代表的東西有著同樣的認識。于是，當對別人說“汽車停在了車庫里”時，可以斷定他們不會理解為“小鳥關在了壁櫥里”。

我們的“世界對象模型”不僅可以用來描述客觀存在的事物，還可以用來描述抽象概念。例如，假設有個人向我問路，而我給出的答案是“左邊第三棟房子”。這個答案有沒有意義將取決于那個人能否理解“第三”和“左邊”的含義。如果他不會數數或者分不清左右，則不管他是否理解這幾個概念，我的回答對他都不會有任何幫助。在現實世界里，正是因為大家對抽象的世界對象模型有著基本的共識，人們才能用非常簡單的話表達出復雜的含義并得到對方的理解。具體到這里的例子，你可以相當有把握地斷定，其他人對“第三”和“左邊”的理解和我一樣。

這個道理對網頁也同樣適用。JavaScript的早期版本向程序員提供了查詢和操控Web文檔某些實際內容(主要是圖像和表單)的手段。因為JavaScript預先定義了“images”和“forms”等術語，我們才能像下面這樣在JavaScript腳本里引用“文檔中的第三個圖像”或“文檔中名為‘details’的表單”：

現在的人們通常把這種試驗性質的初級DOM稱為“第0級DOM”(DOM Level 0)。在還未形成統一標準的初期階段，“第0級DOM”的常見用途是翻轉圖片和驗證表單數據。Netscape和微軟公司各自推出第四代瀏覽器產品以后，DOM開始遇到麻煩，陷入困境。

1.3 瀏覽器戰爭

Netscape Navigator 4于1997年6月，IE 4于同年10月。這兩種瀏覽器都對它們的早期版本進行了許多改進，大幅擴展了DOM，使能夠通過JavaScript完成的功能大大增加。而網頁設計人員也開始接觸到一個新名詞：DHTML。

1.3.1 DHTML

DHTML是“Dynamic HTML”(動態HTML)的簡稱。DHTML并不是一項新技術，而是描述HTML、CSS和JavaScript技術組合的術語。DHTML背后的含義是：

利用HTML把網頁標記為各種元素；

利用CSS設置元素樣式和它們的顯示位置；

利用JavaScript實時地操控頁面和改變樣式。

利用DHTML，復雜的動畫效果一下子變得非常容易實現。例如，用HTML標記一個頁面元素：

然后用CSS為這個頁面元素定義如下位置樣式：

接下來，只需利用JavaScript改變myelement元素的left和top樣式，就可以讓它在頁面上隨意移動。不過，這只是理論而已。

不幸的是，NN 4和IE 4瀏覽器使用的是兩種不兼容的DOM。換句話說，雖然瀏覽器制造商的目標一樣，但他們在解決DOM問題時采用的辦法卻不同。

1.3.2 瀏覽器之間的沖突

Netscape公司的DOM使用了專有元素，這些元素稱為層(layer)。層有的ID，JavaScript代碼需要像下面這樣引用它們：

而在微軟公司的DOM中這個元素必須像下面這樣引用：

這兩種DOM的差異并不止這一點。假設你想找出myelement元素的left位置并把它賦值給變量xpos，那么在Netscape Navigator 4瀏覽器里必須這樣做：

而在IE 4瀏覽器中，需要使用如下所示的語句才能完成同樣的工作：

這就導致了一種很可笑的局面：程序員在編寫DOM腳本代碼時必須知道它們將運行在哪種瀏覽器環境里，所以在實際工作中，許多腳本都不得不編寫兩次，一次為Netscape Navigator，另一次為IE。同時，為了確保能夠正確地向不同的瀏覽器提供與之相應的腳本，程序員還必須編寫一些代碼去探查在客戶端運行的瀏覽器到底是哪一種。

DHTML打開了一個充滿機會的新世界，但想要進入其中的人們卻發現這是個充滿苦難的世界。因此，沒多久，DHTML就從一個大熱門變成了一個人們不愿提起的名詞，而對這種技術的評價也很快地變成了“宣傳噱頭”和“難以實現”。

1.4 制定標準

就在瀏覽器制造商以DOM為武器展開營銷大戰的同時，W3C不事聲張地結合大家的優點推出了一個標準化的DOM。令人欣慰的是，Netscape、微軟和其他一些瀏覽器制造商們還能拋開彼此的敵意而與W3C攜手制定新的標準，并于1998年10月完成了“第1級DOM”(DOM Level 1)。

回到剛才的例子，我們已經用

標簽定義了一個ID為myelement的頁面元素，現在需要找出它的left位置并把這個值保存到變量xpos中。下面是使用新的標準化DOM時需要用到的語法：

乍看起來，這與剛才那兩種非標準化的專有DOM相比并沒有明顯的改進。但事實上，標準化的DOM有著非常遠大的抱負。

瀏覽器制造商們感興趣的只不過是通過JavaScript操控網頁的具體辦法，但W3C推出的標準化DOM卻可以讓任何一種程序設計語言對使用任何一種標記語言編寫出來的任何一份文檔進行操控。

1.4.1 瀏覽器以外的考慮

DOM是一種API(應用編程接口)。簡單地說，API就是一組已經得到有關各方共同認可的基本約定。在現實世界中，相當于API的例子包括(但不限于)摩爾斯碼、國際時區、化學元素周期表。以上這些都是不同學科領域中的標準，它們使得人們能夠更方便地交流與合作。如果沒有一個統一的標準，事情往往會演變成為一場災難。別忘了，因混淆英制度量衡與公制度量衡至少導致過一次火星探測任務的失敗。

在軟件編程領域中，雖然存在著多種不同的語言，但很多任務卻是相同或相似的。這也正是人們需要API的原因。一旦掌握了某個標準，就可以把它應用在許多不同的環境中。雖然語法會因為使用的程序設計語言而有所變化，但這些約定卻總是保持不變的。

因此，雖然本書的重點是教會你如何通過JavaScript使用DOM，當你需要使用諸如PHP或Python之類的程序設計語言去解析XML文檔的時候，你獲得的DOM新知識將會有很大的幫助。

W3C對DOM的定義是：“一個與系統平臺和編程語言無關的接口，程序和腳本可以通過這個接口動態地訪問和修改文檔的內容、結構和樣式。”W3C推出的標準化DOM，在獨立性和適用范圍等諸多方面，都遠遠超出了各自為戰的瀏覽器制造商們推出的各種專有DOM。

1.4.2 瀏覽器戰爭的結局

我們知道，瀏覽器市場份額大戰中微軟公司戰勝了Netscape，具有諷刺意味的是，專有的DOM和HTML標記對這個最終結果幾乎沒有產生影響。IE瀏覽器注定能擊敗其他對手，不過是因為所有運行Windows操作系統的個人電腦都預裝了它。

受瀏覽器戰爭影響最重的人群是那些網站設計人員。跨瀏覽器開發曾經是他們的噩夢。除了剛才提到的那些在JavaScript實現方面的差異之外，Netscape Navigator和IE這兩種瀏覽器在對CSS的支持方面也有許多非常不同的地方。而編寫那些可以同時支持這兩種瀏覽器的樣式表和腳本的工作也成了一種黑色藝術。

瀏覽器制造商的自私姿態遭到人們的激烈反對，一個名為Web標準計劃(簡稱WaSP，webstandards.org/)的小組應運而生。WaSP小組采取的及時個行動就是，鼓勵瀏覽器制造商們采用W3C制定和推薦的各項標準，也就是在瀏覽器制造商們的幫助下得以起草和完善的那些標準。

或許是因為來自?WaSP小組的壓力，又或許是因為企業的內部決策，下一代瀏覽器產品對Web標準的支持得到了極大的改善。

1.4.3 嶄新的起點

早期瀏覽器大戰至今，瀏覽器市場已經發生了巨大的變化，而且到了今天，這一切也幾乎每天都有變化。有的瀏覽器，比如Netscape Navigator，差不多已經從人們的視野中消失了，而新一代瀏覽器則陸續登臺亮相。蘋果公司在2003年首次了它的Safari瀏覽器(基于WebKit)，它從一開始就堅定不移地遵循DOM標準。今天，包括Firefox、Chrome、Opera和IE，以及一些基于WebKit的其他瀏覽器都對DOM有著良好的支持。很多最潮的智能手機瀏覽器都在使用WebKit渲染引擎，推動著手持瀏覽器開發不斷向前，讓手機上網的體驗甚至好過了使用某些桌面瀏覽器。

注意 WebKit(webkit.org)是Safari和Chrome采用的一個開源Web瀏覽器引擎。以WebKit和Gecko(Firefox的核心，https://developer.mozilla.org/en/Gecko)為代表的開源引擎，在促進微軟的Trident(IE的核心)等專有瀏覽器引擎逐步向Web標準靠攏方面起到特別積極的作用。

今天，幾乎所有的瀏覽器都內置了對DOM的支持。20世紀90年代后期的瀏覽器大戰的硝煙已經散盡。現在的瀏覽器廠商無一不在爭先恐后地實現近期規范。我們已經目睹了由異步數據傳輸技術(Ajax)所引發的學習DOM腳本編程的熱潮，而HTML5 DOM的眾多新特性，怎能不讓人對Web的未來浮想聯翩？HTML5極大地改進了標記的語義，讓我們通過和得以控制各種媒體，元素具備了完善的繪圖能力，瀏覽器本地存儲超越了cookie限制，更有內置的拖放支持，等等。

Web設計師的日子已經今非昔比。盡管還沒有一款瀏覽器無瑕地實現W3C DOM，但所有現代瀏覽器對DOM特性的覆蓋率都基本達到了95%，而且每款瀏覽器都幾乎會在及時時間實現近期的特性。這意味著什么？意味著大量的任務都不必依靠分支代碼了。以前，為了探查瀏覽器，我們不得不編寫大量分支判斷腳本，現在，終于可以實現“編寫一次，隨處運行”的夢想了。只要遵循DOM標準，就可以放心大膽地去做，因為你的腳本無論在哪里都不會遇到問題。

1.5 小結

在前面對JavaScript發展簡史的介紹中，筆者特別提到，不同的瀏覽器采用了不同的辦法來完成同樣的任務。這一無法回避的事實不僅主宰著如何編寫JavaScript腳本代碼，還影響著JavaScript教科書的編寫方式。

JavaScript教科書往往會提供大量的示例代碼以演示這種腳本語言的使用方法，而完成同一項任務的示例腳本往往需要為不同的瀏覽器編寫兩次或更多次。就像你在絕大多數網站上查到的代碼一樣，在絕大多數JavaScript教科書的示例腳本中往往充斥著大量的瀏覽器探查代碼和分支調用結構。類似地，在JavaScript技術文檔中，函數和方法的清單也往往是一式多份——至少需要標明哪種瀏覽器支持哪些函數和方法。

如今這種情況已經有所改變。多虧了標準化的DOM，不同的瀏覽器在完成同樣的任務時采用的做法已經非常一致了。因此，在本書中，當演示如何使用JavaScript和DOM完成某項任務時，將不再需要撇開主題去探討如何對付不同的瀏覽器。如果無特殊的必要，本書將盡量避免涉及任何一種特定的瀏覽器。

此外，我們在本書后面的內容中將不再使用“DHTML”這個術語，因為這個術語與其說是一個技術性詞語，不如說是一個市場營銷噱頭。首先，它聽起來很像是HTML或XHTML語言的另一種擴展，因而很容易造成誤解或混淆；其次，這個術語容易勾起一些痛苦的回憶——如果你向20世紀90年代后期的程序員們提起“DHTML”，你將很難讓他們相信它現在已經變成了一種簡單、易用的標準化技術。

DHTML曾被認為是HTML/XHTML、CSS和JavaScript相結合的產物，就像今天的HTML5那樣，但把這些東西真正凝聚在一起的是DOM。如果真的需要來描述這一過程的話，“DOM腳本程序設計”更，它表示使用W3C DOM來處理文檔和樣式表。DHTML只適用于Web文檔，“DOM腳本程序設計”則涵蓋了使用任何一種支持DOM API的程序設計語言去處理任何一種標記文檔的情況。具體到Web文檔，JavaScript的無所不在使它成為了DOM腳本程序設計的選擇。

在正式介紹DOM腳本程序設計技巧之前，我們將在下一章先簡要地復習一下JavaScript的語法。

JavaScript語法

本章內容

語句

變量和數組

操作符

條件語句和循環語句

函數與對象

本章將簡要復習一下JavaScript語法，并介紹其中最重要的一些概念。

2.1 準備工作

編寫JavaScript腳本不需要任何特殊的軟件，一個普通的文本編輯器和一個Web瀏覽器就足夠了。

用JavaScript編寫的代碼必須通過HTML/XHTML文檔才能執行。有兩種方式可以做到這點。及時種方式是將JavaScript代碼放到文檔標簽中的