1.1 JavaScript概述

JavaScript是為滿足制作動態網頁的需要而誕生的一種編程語言，是由Netscape（網景通信公司）開發的嵌入到HTML文件中的基于對象（Object）和事件驅動（Event Driven）的腳本語言。在HTML基礎上，使用JavaScript可以開發交互式（網頁）Web。JavaScript的出現使得網頁和用戶之間實現了實時、動態和交互的關系。

1.1.1 JavaScript發展歷史

JavaScript最初由Netscape的Brendan Eich開發，開發的目的是為了擴展即將于1995年發行的NetscapeNavigator2.0（NN2.0）功能，提高網頁的響應速度。最初JavaScript叫作LiveScript，后來因為Netscape和Sun公司合作，且Java正處于強勁的發展勢頭中，出于市場營銷的目的，Netscape和Sun公司協商后，將LiveScript改為JavaScript。當時的Microsoft（微軟）為了取得技術上的優勢，在IE3.0上發布了VBScript，并將其命名為JScript，以此來應對JavaScript。之后，為了爭奪市場份額，Netscape和Microsoft這兩大瀏覽器廠商不斷在各自的瀏覽器中添加新的特性和各種版本的JavaScript實現。由于他們在實現各自的JavaScript時并沒有遵守共同的標準，這就使得他們的瀏覽器對JavaScript的兼容性問題越來越大，從而給JavaScript開發人員帶來巨大的痛苦。為了達到使用上的一致性，減輕JavaScript開發人員的痛苦，1997年，在ECMA（歐洲計算機制造商協會）的協調下，由Netscape、Sun、微軟、Borland組成的工作組對JavaScript和JScript等當時存在的主要的腳本語言確定了統一標準：ECMA-262。該標準定義了一個名為ECMAScript的腳本語言，規定了JavaScript的基礎內容，其中主要包括：語法、類型、語句、關鍵字、保留字、操作符和對象這幾方面的內容。

從內容上看，ECMAScript規定了腳本語言的規范，而JavaScript、JScript等腳本語言則是依照這個規范來實現的，和ECMAScript相容，但包含了超出ECMAScript的功能。因為ECMA-262標準的出臺，所以現在JavaScript、JScript和ECMAScript都通稱為JavaScript（在后面的內容中，我們將會更多使用其簡寫“JS”來表示JavaScript）。瀏覽器的兼容性也越來越高：在2008年，五大主流Web瀏覽器（IE、Firefox、Safari、Chrome和Opera）就全部做到了與ECMA-262兼容；隨著各大瀏覽器廠商的不斷努力，特別是HTML5規范的發布，各大瀏覽器對JavaScript的兼容性也得到了不斷的提高。依照這樣的發展趨勢，我們完全可以相信，不久的將來，各大瀏覽器必將實現對JavaScript的完全兼容。

1.1.2 JavaScript組成部分及特點

1．JavaScript組成部分

標準化后的JavaScript包含了3個組成部分，如圖1-1所示。

圖1-1 JavaScript組成部分

ECMAScript：腳本語言的核心內容，定義了腳本語言的基本語法和基本對象。現在每種瀏覽器都有對ECMAScript標準的實現。

DOM（Document Object Model）：文檔對象模型，它是HTML和XML文檔的應用程序編程接口。瀏覽器中的DOM把整個網頁規劃成由節點層級構成的樹狀結構的文檔。用DOM API可以輕松地刪除、添加和替換文檔樹結構中的節點。

BOM（Browser Object Model）：瀏覽器對象模型，描述了對瀏覽器窗口進行訪問和操作的方法和接口。

2．JavaScript特點

JavaScript是一種運行在瀏覽器中的主要用于增強網頁的動態效果、提高與用戶的交互性的編程語言。相比于其他編程語言，它具有許多特點，主要包括以下幾方面。

（1）解釋性

JavaScript不同于一些編譯性的程序語言，它是一種解釋性的程序語言，它的源代碼不需要經過編譯，直接在瀏覽器中運行時進行解釋。

（2）動態性

JavaScript是一種基于事件驅動的腳本語言，它不需要經過Web服務器就可以對用戶的輸入直接做出響應。

（3）跨平臺性

JavaScript依賴于瀏覽器本身，與操作環境無關。任何瀏覽器，只要具有JavaScript腳本引擎，就可以執行JavaScript。目前，幾乎所有用戶使用的瀏覽器都內置了JavaScript腳本引擎。

（4）安全性

JavaScript是一種安全性語言，它不允許訪問本地的硬盤，同時不能將數據存到服務器上，不允許對網絡文檔進行修改和刪除，只能通過瀏覽器實現信息瀏覽或動態交互。這樣可有效地防止數據丟失。

（5）基于對象

JavaScript是一種基于對象的語言，同時也可以被看作是一種面向對象的語言。這意味著它能運用自己已經創建的對象。因此，許多功能可以來自于腳本環境中對象的方法與腳本的相互作用。

1.1.3 JavaScript與Java的區別

Java是由Sun公司開發的面向對象的程序設計語言，適合于網絡應用程序開發。JavaScript最初是受Java啟發而開始設計的，目的之一就是“看上去像Java”，因此語法上和Java有類似之處，一些名稱和命名規范也源自于Java。但事實上，JavaScript除了在語法上和Java有些類似以及前面所說的出于市場營銷的目的，名字和Java有點相似以外，其他方面和Java存在很大的不同，主要體現在以下幾點。

（1）JavaScript由瀏覽器解釋執行，Java程序則是編譯執行。

（2）JavaScript是一種基于對象的腳本語言，其中提供了豐富的內置對象供開發人員直接使用；Java則是一種真正的面向對象的編程語言，不管開發的程序簡單與否，都必須設計對象。

（3）JavaScript是弱類型語言，聲明變量時不需要聲明變量的類型，甚至不聲明變量而直接使用變量；Java是強類型語言，變量在使用前必須先聲明且必須聲明變量的類型。

（4）代碼格式及嵌入HTML文檔方式不一樣：Java代碼必須用相應的編譯工具編譯為字節碼文件，嵌入HTML文檔必須使用<applet>…</applet>標簽嵌入字節碼文件；JavaScript代碼是一種文本字符格式，嵌入HTML文檔使用<script></script>標簽，其中可以直接嵌入JavaScript代碼，也可以嵌入JavaScript腳本文件。

1.1.4 JavaScript語法特點及編輯工具

不管是JavaScript，還是Java、C++，它們編寫的程序代碼不外乎都是由一些英文單詞按照一定的規則組織起來的一條條語句。這些語句遵循的各項規則，稱為語法。JavaScript和Java、C++等編程語言的語法很類似，但它也具有自己的一些特點。

1．區分大小寫

和Java一樣，JavaScript代碼中的標識符也區分大小寫，所以Student和student是兩個不同的標識符，如果把student寫成Student，程序將會出錯或得不到預期結果。通常，JavaScript中的關鍵字、變量、函數名等標識符一般全部小寫，如果名詞是由多個單詞構成，通常從第二個單詞開始每個單詞的首字母大寫。

2．語句結束的分號問題

不同于Java每條語句結尾必須加上分號，JavaScript語句結尾處的分號是可選的，即可加也可不加。如果語句結尾不加分號，JavaScript會對當前語句和下一行語句進行合并解析，如果不能將兩者當成一個合法的語句來解析的話，JavaScript會在當前語句換行處填補分號，例如：

var a
a
=
3

解析的結果為var a;a=3;。

由JavaScript來添加分號在大多數情況下是正確的，但也有兩個例外情況。第一個例外情況是涉及return、contiune和break這3個關鍵字的時候。不管什么情況下，如果這些關鍵字的行尾處沒有分號，JavaScript都會對它們在換行處填補分號。例如，本意是return true;的語句，如果寫成以下形式：

return
true;

則JavaScript解析后的結果將變成：return;true;。第二個例外情況是涉及“++”和“--”這兩個運算符的時候。這些運算符既可作為表達式前綴使用，也可以作為表達式后綴使用。如果將其作為表達式后綴使用，它和表達式應該在同一行。否則，JavaScript將在行尾處填補分號。例如，本意是x++;y;的語句，如果寫成以下形式：

x
++
Y

則解析的結果為：x;++y;。

由前面兩個例子可見，為了使語句不出現歧義，我們最好在每條語句的結尾處都加上分號。

3．編輯工具

因為JavaScript代碼是純文本代碼，所以可以使用任何文本編輯器來編輯JavaScript，甚至可以使用Microsoft Word這樣的字處理軟件，但此時一定要確保將文件保存為文本文件類型。建議最好使用以純文本作為標準格式的軟件。目前主流JavaScript編輯軟件有：Dreamweaver、Visual Studio Code、Sublime Text、Atom和WebStorm。

1.1.5 JavaScript的實際應用場景

很多其他語言的開發者或一些初學者對JavaScript的印象似乎停留在做各種“炫彩奪目的網站”上。的確，能夠完成Web端復雜的交互，使得網頁元素能夠“動起來”，讓信息以更佳效果呈現，這是JavaScript的功能之一；但它的實際應用場景遠不止于此，一名專業前端開發工程師在工作中至少要使用JavaScript進行以下任務的開發。

1．開發各種網頁動態交互效果

在海量信息爆炸的時代，網站不僅要呈現必要的關鍵信息，還要以最佳方式與用戶之間進行動態交互，加深用戶對網站信息或功能印象，并提高用戶體驗和黏度。因此，更多網站的開發者們精心研發了某些表現力豐富的交互效果，例如以培訓“前端開發”為主的妙味課堂官網，就在首頁制作了一個形象的“展臺”，并用動畫堆疊的形式將前端必學的“HTML5\CSS3\JS”組合在一起，如圖1-2所示，象征著學習前端開發最關鍵的基礎語言是HTML5\CSS3\JS。

圖1-2 妙味課堂首頁的交互展示效果之一

2．使用Ajax等技術與后端進行數據交互

前端開發者每天要處理的大量編碼工作中，占據很重比例的工作內容之一是根據后端提供的各種數據接口，把數據渲染到網頁相應位置中，完成頁面信息呈現。例如經典的登錄和注冊功能，當登錄時會調用后端相應接口判斷登錄用戶是否正確，而注冊時會判斷填寫的用戶名是否符合要求以及是否已被注冊過。

3．處理網頁各種業務邏輯

在今天，許多內容型網站有大量用戶關注，在這樣的網站中，許多業務邏輯需要開發者使用JavaScript來實現。比如網站的使用者當中，有游客、普通會員，也有VIP會員，這幾種不同類型的用戶在權限上需要加以區分：游客、普通會員、VIP會員能觀看的視頻是不同的。在這樣的需求下，網站內容展示需要根據不同的業務需求進行邏輯判斷，這樣才能在頁面中呈現不同內容。這些功能，都需要開發者使用JavaScript做出判斷處理。

除上述幾個任務以外，JavaScript還可以變成運行在服務器上的后端開發語言（Node.js）以及能以Hybrid App形式運行在移動設備上的App開發語言。此外，還能夠用來構建桌面應用、開發游戲、圖形處理、PDF生成、編譯解釋器、測試工具、視頻音頻播放、通信……限于本書篇幅，在此不對這些展開介紹。

接下來，我們從最容易理解的“網頁動態變化”原理開始與大家探討，逐漸深入到JavaScript語言的學習中去。

1.1.6 JavaScript實現網頁動態變化原理以及執行順序

1．JavaScript實現網頁變化原理

使用JavaScript后，可以實現許多網頁的動態變化效果，諸如：跑馬燈、選項卡切換、廣告輪播、表單數據有效驗證、漂移菜單、折疊菜單、倒計時等。這些動態變化效果的實現，并不需要網頁重新加載，而是通過改變局部區域的外觀或內容來實現。這正是JavaScript實現網頁動態效果的原理。需要網頁動態變化時，只需要根據變化的需要，使用JavaScript修改元素的樣式或增加/清空頁面元素內容或屬性值。使用JavaScript動態改變網頁時一般會結合CSS，其中CSS設置元素的初始樣式，JavaScript則實現元素的動態樣式。所以使用JavaScript實現網頁動態效果，通常包含這樣兩個步驟：首先是使用CSS設置初始樣式（即布局元素）；然后再根據動態變化的需要，使用JavaScript修改元素樣式或增加／清空頁面元素內容或屬性值。

JavaScript實現網頁變化原理的應用示例請參見示例1-4。

2．JavaScript代碼執行順序

JavaScript代碼按照執行的機制可分為兩類代碼：事件處理代碼和非事件處理代碼。非事件處理代碼如果不在某個函數中，則在載入HTML文檔時，將按JavaScript在文檔中出現的順序，從上往下依次執行；如果非事件處理代碼出現在某個函數中，則在調用該函數時執行。事件處理代碼則在HTML文件內容載入完成，并且所有非事件處理代碼執行完成后，才根據觸發的事件執行對應的事件處理代碼。

3．JavaScript代碼的調試

在編寫JavaScript的過程中，很有可能會出現一些語法錯誤，所以在開發過程需要經常調試腳本代碼（注：隨寫隨調試不失為一種好習慣）。腳本代碼的調試包括代碼調試和工具調試兩種方法，有關腳本代碼的調試方法，我們將會在1.2節中詳細介紹。