第一篇 JavaScript程序開發

第1章 JavaScript簡介

所有Web開發人員及希望成為Web開發人員的人，對HTML一定不會感到陌生，因為它是所有網頁制作的基礎。但是如果希望網頁能夠方便網絡用戶使用，友好而大方，甚至像桌面應用程序一樣，那么僅依靠HTML是不夠的，JavaScript在其中也扮演著重要的角色。本章從JavaScript的起源及一些背景知識出發，介紹其基礎知識，為讀者進一步學習后續內容打下基礎。本章的思維導圖如下。

1.1 其他程序設計語言與JavaScript

在正式開始學習JavaScript語言之前，我們先來了解一些關于其他程序設計語言和JavaScript的背景知識和特點。雖然初學者未必能夠完全、迅速、深刻地理解這些概念，但是如果先對它們有一個感性的認識，等到學完以后再經過一些時間的實踐和練習，就會逐步真正理解它們了。

自從20世紀中期電子計算機被發明以來，程序設計語言就在不斷地發展、演進。從數量上來說，真正實際被使用的程序設計語言可能有數十種，甚至上百種，各種程序設計語言也在不斷發展、變化，讀者如果有興趣，可以查看專門對各種程序設計語言流行度進行研究和追蹤的網站——TIOBE。根據TIOBE給出的數據，2021年2月流行度最廣的10種程序設計語言如圖1.1所示。

如果仔細觀察這10種程序設計語言，可以看出它們大致分為以下幾種不同的情況。

●排名第1的C語言是傳統的結構化程序設計語言，它可以被看作很多程序設計語言的“老祖宗”，但目前C語言主要用于對性能要求比較高的系統開發或底層開發，例如操作系統或設備驅動程序的開發，而應用層的程序開發則使用得并不多。排名第10的Assembly Language被用于底層的設備驅動程序的開發等場景，通常不會被用來開發通用的面向業務層面的程序和系統。

●排名第9的SQL雖然是使用極為廣泛的語言，幾乎所有網站或者App的背后都有SQL的存在，但它不是通用程序設計語言，而是用于對數據庫進行操作和查詢的專用語言。

●剩下的7種語言中，除JavaScript語言之外，其余的6種語言也都屬于面向對象的程序設計語言，它們都是主流的用于開發業務系統的語言。實際上，它們都有著非常類似的語法結構和特性，被稱為基于“類”的面向對象語言。也可以看出，面向對象是一種極其主流的程序開發范式，否則不會幾乎所有的主流程序開發語言都使用這種范式。

●本書的主角——JavaScript經過20多年的發展，已經從一個內嵌于瀏覽器的非常簡單的腳本語言，發展成一種廣泛應用于各個領域的通用程序開發語言。需要了解的是，JavaScript也是一種面向對象的程序設計語言，但是它使用了與其他主流面向對象語言都不一樣的另一種范式，該范式被稱為基于“原型”的面向對象范式。對于大多數開發者來說，學習這種開發范式時多多少少會遇到一些困難。

JavaScript語言有如下一些特點。

1.JavaScript是解釋型語言，而非編譯型語言

傳統的C、C++、C#、Java等語言都是“編譯型語言”，程序員寫好的程序首先被編譯為機器碼或者字節碼，然后才能在機器上運行，因此這些語言都有“編譯期”和“運行時”的概念。當程序存在一些問題的時候，有的問題可以在編譯的時候就被發現，有的問題則要到運行的時候才會被發現。

而JavaScript是“解釋型語言”，不需要編譯即可直接在具體環境（如瀏覽器）中運行，因此程序如果存在問題，在運行時才會暴露。

2.JavaScript是動態類型語言，而非靜態類型語言

所有高級程序設計語言都有“數據類型”的概念。只有機器語言和匯編語言是面向寄存器和內存地址進行編程，基本上沒有數據類型概念的。而對高級程序設計語言來說，類型系統是一門語言里最重要的特征和組成部分，不同的語言會有各自不同的類型系統。如果深入探究，會發現類型系統是非常復雜的，需要更深入的相關背景知識才能學懂，因此這里僅做一些淺顯的講解。

諸如C、C++、C#、Java這些語言都屬于靜態類型語言，也就是說一個變量一旦被聲明為某種類型，就不能再改變。JavaScript語言則不然，一個變量可以隨時改變其類型，即它是動態類型語言。

3.JavaScript是弱類型語言，而非強類型語言

高級程序設計語言的類型系統除了可以分為動態類型和靜態類型之外，還可以分為強類型和弱類型。但是類型強弱的區分比動態、靜態的區分更為復雜，如果要對此進行嚴格的定義，需要一些復雜的程序設計語言方面的知識，這里不做嚴格的定義。粗淺地說，強類型語言對類型的要求更為嚴格，偏向于更嚴格地限制變量自動的類型轉換（或稱隱式轉換），弱類型語言則偏向于對自動的類型轉換更為寬容。

我們會在后面詳細地介紹相關知識，而這部分內容的學習也是讓人頗為頭疼的。

總體來說，根據上面的第2、第3個特點，可以把各種程序設計語言分類到4個象限，如圖1.2所示。

●靜態強類型語言，典型的是Java、C#語言。

●靜態弱類型語言，典型的是C語言。

●動態強類型語言，典型的是Python語言。

●動態弱類型語言，典型的是JavaScript語言。

從圖1.2中可以看出，一門語言是動態的還是靜態的，是強類型的還是弱類型的，并不是絕對的，而是一種“尺度”，代表偏向某一邊多一些而已。

此外，JavaScript是一種特別靈活的語言，能很大程度上給予程序員自由掌控程序的權利。這是一把“雙刃劍”，自由的同時意味著責任：一方面這與最初設計它的理想主義理念有關；另一方面也與當初的不夠完善有關。JavaScript的創始人布蘭登·艾奇（Brendan Eich）最初設計并實現JavaScript語言只用了兩周的時間，因此不可避免地在各個方面使用“做減法”的策略。因為當時的目的僅僅是在網頁上能夠實現一些簡單的交互而已。在當時，誰也無法預料JavaScript會成為今天這樣重要的程序設計語言和事實上的互聯網標準。

4.JavaScript是基于原型的面向對象語言，而非基于類的面向對象語言

這一點是JavaScript讓初學者最為頭疼的一點。從程序設計的宏觀范式角度來看，程序設計語言的演進大致經過了3個階段。

在電子計算機出現后不久的初始階段，使用機器語言進行程序設計與開發是一件極其低效而煩瑣的工作，因此產生了高級語言，盡可能使用接近人類語言的方式編寫程序。當然在最早期階段，其功能相當不完善，主要通過“翻譯”機器指令的方式實現，因此主要通過條件判斷以及跳轉（Goto語句）實現程序邏輯的表達。

在知名的荷蘭計算機科學家迪杰斯特拉（Dijkstra）發表了論文指出“Goto語句是有害的”之后，程序設計語言領域逐步發展出“結構化程序設計”這種范式。最早實現這種范式的是Pascal語言，其核心思想是消除Goto語句，自頂向下、逐步求精，通過順序、分支、循環這3種基本結構以及子程序（函數）表達程序邏輯，對指令進行封裝，實現代碼的復用。

此后，人們逐漸發現，在結構化程序設計過程中雖然消除了Goto語句，但是往往需要依賴大量的分支結構，例如嵌套的if-else結構或者switch-case結構，而這往往是程序復雜性的來源。因此，“面向對象”（object oriented）思想逐步產生并發展成熟，在結構化程序設計的基礎上增加了“類”等基本結構，對程序的抽象能力進一步加強，通過封裝、繼承和多態等特性，實現低耦合、高內聚的目標，降低程序的復雜性，提高程序的可讀性、可維護性。

目前面向對象的基本結構是主流程序設計語言的基本配置，上面的所有被廣泛使用的通用程序設計語言都是面向對象的。

但非常有趣，同時也令人頭疼的是，JavaScript使用了一種與大多數主流語言很不一樣的面向對象的實現方式，主要涉及以下4點。

●例如Java、C#這類常見語言都使用“類-實例”方式來對程序要表達的邏輯進行抽象。而JavaScript使用一套非常不同的稱為“原型”的方式來對邏輯進行抽象。理解“原型”的工作原理對初學者是一件頗具挑戰的事情。

●JavaScript的類型系統為“結構性類型”，而不是Java、C#這類語言使用的“名義性類型”，這一點會帶來很多開發中不同的思維方式。要逐步熟悉這些思維方式，且需要學習者靜下心來認真思考并通過實踐逐步掌握。

●JavaScript吸納了函數式語言的一些特征，“函數”在JavaScript中的地位特別重要，遠遠超出了函數在普通語言中的含義。

●由于歷史原因，JavaScript的發展經過了很漫長的爭論，不同的版本有各自不同的要求，還要兼顧對歷史版本的兼容。要實現同一個功能，可能有很多不同的方法，不同的方法有不同的優缺點，所以要想真正掌握，不得不條分縷析地研究。例如要實現對象的創建和繼承，這在其他語言里是件很簡單和確定的事情，而在JavaScript中有將近10種實現方法，這樣對于初學者是比較有挑戰性的。

總體來說，根據上面的講解，讀者可以了解到JavaScript是一門“頗具個性”的語言，無論是對一名編程新手還是對已經熟練掌握了其他語言的資深開發人員，都需要認真付出一些努力才能真正掌握JavaScript。從Java到JavaScript的“距離”，遠遠大于從Java到C#，或者Java到Python的“距離”。

當然，讀者對此也無須害怕。一方面，隨著ES6的推出，新的JavaScript用起來已經非常“正常”了；另一方面，JavaScript的使用者大體上可以分為兩類，即“框架開發者”和“應用開發者”，他們對這門語言的理解和掌握程度的要求有很大的不同。

●如果你是一名框架開發者，需要對這門語言有著非常深刻的理解和能熟練掌握操作方法。常見的JavaScript框架，例如非常流行的jQuery、Vue.js和React等，都是很多技術水準非常高的開發者開發出來的，而開發這些框架的目的就是降低開發實際應用程序（例如某個網站）的技術門檻。

●如果你是一名應用開發者，大致上每天面對的工作是使用一些常用的框架開發一些網站的頁面。這對技術的要求會簡單很多，通常只要能掌握JavaScript的基本特性就可以了，基本不需要編寫涉及對象繼承等復雜的代碼。當然本書還是會對一些比較深入的特性進行講解，使讀者在需要時能夠讀懂一些比較復雜的代碼，比如某些框架的源代碼。這對程序員技術實力的提升意義巨大。

1.2 JavaScript的起源、發展與標準化

任何技術都不是單純地在實驗室里被憑空構想出來的。JavaScript語言起于實踐，逐步成為如今互聯網時代的“核心支柱”之一。

1.2.1 起源

早在1992年，一家名為Nombas的公司開發出一種叫作“C減減”（C-minus-minus）的嵌入式腳本語言，并將其捆綁在一個被稱作CEnvi的共享軟件中。當時意識到互聯網會成為技術焦點的Netscape（網景）公司，開發出自己的瀏覽器軟件Navigator并使其率先進入市場。與此同時，Nombas公司開發出了第一個可以嵌入網頁中的CEnvi，這便是最早萬維網上的客戶端腳本。

當“網上沖浪”逐步走入千家萬戶的時候，開發客戶端腳本顯得越來越重要。此時大多數網民還是通過28.8kbit/s的調制解調器來連接網絡，網頁卻越來越豐富多彩。用戶認證等現在看起來極其簡單的操作，當時實現起來都非常麻煩。這時網景公司為了擴展其瀏覽器的功能開發了一種名為LiveScript的腳本語言，并于1995年11月末與Sun（太陽計算機系統）公司聯合宣布把其改名為JavaScript。改成這個名字并非因為它與Java有什么關系，而僅僅想蹭一下Java的熱度。二者之間的差異不小于“雷鋒”和“雷峰塔”。

此后很短時間，Microsoft（微軟）公司也意識到了互聯網的重要性，決定進軍瀏覽器市場，在其發布的IE 3.0中搭載了一個JavaScript的克隆版本，為了避免版權糾紛，將其命名為Jscript。隨后微軟公司將瀏覽器加入操作系統中進行捆綁銷售，使JavaScript得到了很快的發展，但這樣也產生了3種不同的JavaScript：網景公司的JavaScript、微軟公司的Jscript，以及Nombas公司的ScriptEase。

1997年，JavaScript 1.1作為一個草案被提交給ECMA（European computer manufacturers association，歐洲計算機制造商協會），由來自網景、太陽計算機系統、微軟、Borland（寶藍）等一些對腳本語言感興趣公司的程序員組成第39技術委員會（TC39），最終錘煉出ECMA-262標準，其中定義了ECMAScript這種全新的腳本語言。這是一個偉大的標準，至今我們能夠在不同的設備上用JavaScript都要得益于ECMA-262標準，并且ECMA-262標準一直在不斷升級演進。

進入21世紀后，網上的各種對話框、廣告、滾動提示條越來越多，JavaScript被很多網頁制作者亂用，一度背上了惡劣的名聲。直到2005年年初，Google（谷歌）公司的網上產品Google討論組、Google地圖、Google搜索建議、Gmail等使得AJAX一時興起并受到廣泛好評，這時作為AJAX最重要元素之一的JavaScript才重新找到了自己的定位。

1.2.2 博弈與發展

所有日后看起來天經地義的技術，其實都是經過了驚心動魄的博弈和競爭之后的產物。JavaScript就是在一系列激烈的博弈中逐步發展起來的。

20世紀90年代，互聯網開始普及，而此時瀏覽器成為“風口”，瀏覽器市場幾乎被網景公司的產品壟斷，這時如日中天的微軟公司意識到自己在這個領域已經落后的現實情況，又一次通過“捆綁”這個法寶，在Windows操作系統中免費內置了IE。1997年6月，網景公司的Navigator 4.0發布，同年的10月，微軟公司發布了它的IE 4.0。這兩種瀏覽器較其以前的版本有了明顯的改進，DOM（document object model，文檔對象模型）得到了很大的擴展，從而可以運用JavaScript來實現一系列加強的功能。

在各自的瀏覽器中，雙方大體上遵循著一致的標準，但是有各自的特性，導致不完全一致。雙方對CSS（cascading style sheets，串聯樣式表）和JavaScript的支持都不盡相同。例如網景公司的DOM使用其專有的層（layer）元素，每個層都有唯一的ID標識，JavaScript通過如下代碼對其進行訪問。

---

 document.layers['mydiv']

---

而在微軟的IE中，JavaScript必須這樣使用：

---

 document.all['mydiv']

---

這兩種瀏覽器在細節方面的差異很大，可以說幾乎所有的JavaScript細節都是或多或少有區別的，這就使得互聯網網站開發受到嚴重的影響。在商業市場上，競爭與合作永遠是共存的。當時各自為戰帶來很多問題以后，各大廠商開始尋找解決之道。

1.2.3 標準的制定

就在瀏覽器廠商為了商業利益而展開激烈的競爭時，萬維網聯盟（world wide web consortium，W3C）也在協調各大廠商制定需要大家共同遵守的標準，實現技術的標準化。但是這個過程也是非常艱難的，各個廠商有各自的訴求，要達成一致的目的非常不容易。

1998年6月，ECMAScript 2.0發布。不久，在1999年12月，ECMAScript 3.0發布。這個標準取得了巨大的成功，成為JavaScript的通用標準，得到了廣泛支持。接著就開始了下一個版本標準的制定工作，但是這個工作非常困難，爭議巨大。經過8年的時間才于2007年10月發布了ECMAScript 4.0的草案，本來預計次年8月發布正式版本，但是草案發布后，由于4.0版本的目標過于激進，各方對于是否通過這個標準產生了嚴重分歧。以Yahoo（雅虎）、微軟、谷歌為首的大公司反對JavaScript的大幅升級，主張小幅改動；以JavaScript創造者布倫丹·艾奇為首的謀智公司，則堅持原標準草案。為此，ECMA開會決定中止ECMAScript 4.0的開發，將其中涉及現有功能改善的一小部分發布為ECMAScript 3.1，不久之后，改名為ECMAScript 5，這是一個妥協的產物。因此，目前JavaScript的早期版本常見的就是ES3和ES5，它們之間差別不大，并且不存在ES4。

又過了7年，2015年6月17日，ECMAScript 6正式發布，其正式的名稱改為ECMAScript 2015，但是開發者早已習慣稱之為ES6了，因此，大多數場合它都被稱為ES6。ECMAScript 2015是一個非常重要的版本，在多方的共同努力下，它使得JavaScript從一個“先天不足”的腳本語言，成為一個正常而穩定的通用程序開發語言。而此后，ECMAScript仍然在不斷演進，但是ES6奠定的大結構已經穩定下來，因此ES6可以說是JavaScript標準化過程中最重要的一個版本，也是經過了近20年的多方努力而得到的結果。

從ECMAScript 2015開始，正式的版本名稱用發布年份標識，這導致了每個版本都有兩個名稱。2016年6月，小幅修訂的ECMAScript 2016（簡稱ES2016或ES7）發布，它與ES6的差異非常小。

需要注意的是，上面介紹的都是ECMAScript，那么它和JavaScript是什么關系呢？二者是標準與實現的關系，即ECMAScript是大家協商確定的一套標準，JavaScript是各個瀏覽器或其他運行環境具體的實現。

1.3 JavaScript的實現

盡管ECMAScript是一個重要的標準，但它并不是JavaScript的唯一組成部分，也不是唯一被標準化的部分，上面提到的DOM也是重要的組成部分之一，另外BOM（browser object model，瀏覽器對象模型）也是，如圖1.3所示。

1.3.1 ECMAScript

正如前面所說，ECMAScript是一種由歐洲計算機制造商協會標準化的腳本程序設計語言。它并不與任何瀏覽器綁定，也沒有用到任何用戶輸入/輸出的方法。事實上，Web瀏覽器僅僅是一種ECMAScript的宿主環境。除了常見的網頁瀏覽器之外，Adobe公司的Flash腳本ActionScript等都可以容納ECMAScript的實現，只是Flash已經走下“歷史舞臺”。簡單來說，ECMAScript描述的僅僅是語法、類型、語句、關鍵字、保留字、運算符、對象等。

每個瀏覽器都有其自身ECMAScript接口的實現，這些接口又被不同程度地擴展，包含了后面會提到的DOM、BOM等。

1.3.2 DOM

根據W3C的DOM規范可知，DOM是一種與瀏覽器、平臺、語言無關的接口，使用戶可以訪問頁面其他的標準組件。簡單來說，DOM最初解決了網景和微軟之間的沖突，給了Web開發者一個標準的方法，讓其方便地訪問站點中的數據、腳本和表現層對象。

DOM把整個頁面規劃成由節點層級構成的文檔，考慮下面這段簡單的HTML代碼。

---

1 <html>
2 <head> 
3      <title>DOM Page</title> 
4 </head> 
5   
6 <body> 
7      <h2><a href="#myUl">標題1</a></h2> 
8      <p>段落1</p> 
9      <ul id="myUl"> 
10          <li>JavaScript</li> 
11          <li>DOM</li> 
12          <li>CSS</li> 
13      </ul> 
14 </body> 
15 </html>

---

這段HTML代碼十分簡單，這里不再一一說明各個標記的含義。利用DOM結構將其繪制成節點層次圖，如圖1.4所示。

對于該節點層次圖的各個部分，我們以后會詳細講解。這里需要明確的是，DOM將頁面清晰、合理地進行了層次結構化，從而使開發者對整個文檔有了空前的控制力。

1.3.3 BOM

從IE 3.0和Netscape Navigator 3.0開始，瀏覽器都提供一種被稱為BOM的特性，它可以對瀏覽器窗口進行訪問和操作。利用BOM的相關技術，Web開發者可以移動窗口、改變狀態欄，以及執行一些與頁面中內容毫不相關的操作。盡管沒有統一的標準，但BOM的出現依然給“網絡世界”增添了不少色彩，主要功能包括以下幾個。

●彈出新的瀏覽窗口。

●移動、關閉瀏覽窗口以及調整窗口大小。

●提供Web瀏覽器相關信息的導航對象。

●頁面詳細信息的定位對象。

●提供屏幕分辨率詳細參數的屏幕對象。

●cookie的支持。

●各種瀏覽器自身的一些新特性，例如IE的ActiveX類等。

本書的后面也將對BOM進行詳細的介紹。

1.3.4 新的開始

20世紀90年代，網景與微軟之間的競爭最終以后者的全面獲勝而告終，這并不是因為IE對標準的支持強于Netscape Navigator或是別的技術因素，而是IE在Windows上進行捆綁銷售。迫于各方面的壓力，微軟公司從IE 5.0開始就內置了對W3C標準化DOM的支持，但仍然繼續支持它獨有的Microsoft DOM。

這里再回顧一下瀏覽器的發展歷程，各種瀏覽器近年來的市場占有率的變化情況如圖1.5所示，這對我們了解JavaScript語言也有所幫助。

由于早期的瀏覽器對標準支持不好，它們有各自獨有的一些特性和接口，導致早期的前端開發者為了能夠讓網頁在不同的瀏覽器中有統一的顯示效果，需要付出巨大的努力和時間成本。

從2010年左右開始，Web標準化開始了新的歷程。谷歌開發的Chrome瀏覽器逐漸成為主流，與此同時，它對標準的支持也越來越好。各大廠商逐步意識到標準化才是正確的選擇。

特別是進入移動互聯網時代以后，由于瀏覽器進入移動設備相對較晚，反而它從一開始就比較好地支持了新的標準，讓前端開發者擁有了比較舒服的開發體驗。

1.4 Web標準

2004年初，網頁設計在經歷了一系列的變革之后，一本名為Designing with Web Standards（中文譯本《網站重構——應用Web標準進行設計》）的書掀起了整個Web行業的“大革命”。網頁設計與制作人員紛紛開始重新審視自己的頁面，并發現那些充滿嵌套表格的HTML代碼臃腫而難以被修改，于是一場清理HTML代碼的行動開始了。

1.4.1 Web標準概述

Web標準不是某一個標準，而是一系列標準的集合。網頁主要由3個部分組成：結構（structure）、表現（presentation）和行為（behavior）。對應的標準也分為3個方面：結構標準語言主要包括XML（extensible markup language，可擴展標記語言）和XHTML（extensible hypertext markup language，可擴展超文本標記語言），表現標準語言主要包括CSS，行為標準主要包括DOM、ECMAScript等。

1.結構標準語言

XML和HTML一樣，來源于SGML（standard general markup language，標準通用標記語言），但XML是一種能定義其他語言的語言。XML最初設計的目的是彌補HTML的不足，以強大的擴展性滿足網絡信息發布的需要，后來逐漸用于網絡數據的轉換和描述。

XML雖然數據轉換能力強大，完全可以替代HTML，但面對成千上萬已有的站點，直接采用XML還為時過早。因此，開發者在HTML4的基礎上，用XML的規則對其進行擴展，得到了XHTML。簡單來說，建立XHTML的目的就是實現HTML向XML的過渡。

2.表現標準語言

W3C最初創建CSS標準的目的是取代HTML表格式布局、幀和其他表現的語言。純CSS布局與結構式XHTML相結合能幫助設計師分離外觀與結構，使站點的訪問及維護更加容易。

3.行為標準

前面已經介紹過，DOM是一種與瀏覽器、平臺、語言無關的接口，它使得用戶可以訪問頁面其他的標準組件。簡單來說，DOM解決了網景的JavaScript和微軟的Jscript之間的沖突，給了Web設計師和開發者標準的方法來訪問站點中的數據、腳本和表現層對象。

另外，前面介紹的ECMAScript同樣也是重要的行為標準，目前推薦遵循的是ECMA-262標準。

使用Web標準，對于網站瀏覽者來說有以下優勢。

●文件下載與頁面顯示速度更快。

●內容能被更多的用戶（包括失明、視弱、色盲等人士）所訪問。

●內容能被更廣泛的設備（包括屏幕閱讀機、手持設備、搜索機器人、打印機、電冰箱等）所訪問。

●用戶能夠通過樣式選擇定制自己的界面風格。

●所有頁面都能提供適用于打印的版本。

而對網站的設計者來說有以下優勢。

●更少的代碼和組件，容易維護。

●帶寬要求降低（代碼更簡潔），成本降低。

●更容易被搜尋引擎搜索到。

●改版方便，不需要變動頁面內容。

●提供打印版本而不需要復制內容。

●提高網站易用性。在美國，有嚴格的法律條款來約束政府網站必須達到一定的易用性，其他國家也有類似的要求。

1.4.2 結構、表現、行為的分離

對于網頁開發者而言，Web標準的最好運用就是結構、表現、行為的分離，將頁面看成這幾個部分的有機結合體，分別對待，這樣也使得不同的部分需運用不同的專用技術。下面來看網頁各個部分的含義。

頁面是用于展現其內容（content）的，例如動物網站的內容主要是動物的介紹等。內容形式可以包括清單、文檔、圖片等，是純粹的網站數據。

頁面上只有內容顯然是不夠的，內容合理地組織在一起便是結構，例如一級標題、二級標題、正文、列表、圖像等，類似Word文檔的結構。有了合理的結構才能使內容更加具有邏輯性和易用性。通常頁面的結構是由HTML來搭建的，例如下面這段簡單的HTML代碼便構建了一個頁面的結構。

---

1  <div id="container">
2      <div id="globallink"></div> 
3      <div id="parameter"></div> 
4      <div id="main"></div> 
5      <div id="footer"></div> 
6  </div>

---

對應的頁面結構如圖1.6所示。

HTML雖然定義了頁面的結構，但整個頁面的外觀還是沒有改變，例如標題的顏色還不夠突出、頁面的背景還不夠漂亮等，這些用來改變頁面外觀的東西稱為表現。通常處理頁面表現的是CSS技術，后面將會進一步介紹。

網站通常不僅通過表現來展示其內容，很多時候還需要與用戶交互，例如用戶單擊按鈕、提交表單、拖曳地圖等，這些統稱為行為。而讓用戶能夠具有這些行為的，通常就是以JavaScript為代表的腳本語言。

通過HTML搭建結構框架來存放內容，CSS制作美工完成頁面的表現，JavaScript編寫腳本實現各種行為，這樣便實現了Web網頁結構、表現、行為三者的分離。這是目前標準化制作頁面的方法，也是本書的基礎，在后面都會逐一分析。

1.4.3 前后端分離成為Web開發的主流模式

另外一個大趨勢是從2012年開始，前后端分離出現，2014年到2015年是JavaScript技術“大爆發”的兩年，此后全面進入前后端分離階段。

由于移動互聯網的普及，多終端設備的適配逐步成為前端開發必須面對的問題。因此后端業務邏輯逐步演變成API方式，脫離與UI（user interface，用戶界面）層的耦合，前端和后端開發逐步分離。由此，前后端分離模式的Web開發模式逐漸被接受和發展起來。

互聯網的應用越來越豐富，逐步從提供內容向提供服務轉變，對技術上的要求有如下4點。

●客戶端需求復雜化，用戶體驗的期望提高。

●頁面的渲染從服務器端轉移到客戶端。

●客戶端程序具備完整的生命周期、分層架構和技術棧。

●從“單一網站”到“多端應用”。

因此，傳統的jQuery逐步被新的客戶端框架取代，例如當下主流的3個框架Vue.js、Angular、React。使用這些新的客戶端框架對JavaScript的理解和掌握提出了新的要求。

本章小結

在這一章里，我們介紹了JavaScript語言的一些歷史發展情況、JavaScript的基本組成部分，以及Web標準的相關知識。JavaScript的作用，簡而言之就是對頁面中的各種對象通過“可編程”的方式進行控制。這正是我們正在經歷的這個時代的大趨勢——各種各樣的事物都在逐步軟件化和智能化，例如“軟件定義網絡”“軟件定義存儲”，甚至近期出現的“軟件定義汽車”；而要實現軟件化和智能化，本質就是讓各種事物“可編程”。

習題1

一、關鍵詞解釋

JavaScript ECMAScript DOM BOM Web標準 前后端分離模式

二、描述題

1.請簡單描述一下JavaScript語言有什么特點。

2.請簡單描述一下JavaScript是由哪幾個部分組成的。

3.請簡單描述一下Web標準主要包含哪些內容。