第1章 JavaScript基礎(chǔ)概念

本章主要內(nèi)容

全端意味著利用相關(guān)的技術(shù)、編程手段、編程思想將視覺(jué)和交互效果無(wú)縫、完美地重構(gòu)到多種終端。本章將從基本語(yǔ)法開始，詳細(xì)闡述能夠?qū)崿F(xiàn)交互效果的JavaScript。

JavaScript 是一門跨平臺(tái)、面向?qū)ο蟮娜躅愋偷妮p量級(jí)的解釋型語(yǔ)言，也是目前最流行的網(wǎng)頁(yè)前端腳本語(yǔ)言之一，通常被稱為JS。那些炫酷的頁(yè)面效果、良好的交互體驗(yàn)、表單驗(yàn)證等，都是通過(guò)JavaScript實(shí)現(xiàn)的。

隨著AJAX的出現(xiàn)，前端可以在不刷新頁(yè)面的情況下和后臺(tái)進(jìn)行數(shù)據(jù)交換，從而實(shí)現(xiàn)頁(yè)面數(shù)據(jù)的更新。jQuery 庫(kù)的出現(xiàn)，使得JS 編寫變得非常簡(jiǎn)潔。類似于ECharts、D3 插件的出現(xiàn)，使得前端實(shí)現(xiàn)豐富的數(shù)據(jù)可視化圖表變得更加容易，AngularJS、React等優(yōu)秀框架的出現(xiàn)，大大提高了開發(fā)效率。最終Node的發(fā)布，使得JS不僅可以運(yùn)行在前端，還可以運(yùn)行在服務(wù)器上。現(xiàn)在，前端工程師通過(guò)JS實(shí)現(xiàn)網(wǎng)站開發(fā)已經(jīng)成為現(xiàn)實(shí)了。

以上只是陳列了本書中涉及的一些插件和框架，當(dāng)然還遠(yuǎn)不止這些，那么面對(duì)這么多框架和插件，該如何快速上手呢？既然它們都是建立在JavaScript 的基礎(chǔ)上，那么只要把JavaScript中的基本知識(shí)以及原理都理解透徹，學(xué)習(xí)將會(huì)變得容易很多。

關(guān)于JavaScript，大家必須深刻理解并熟練運(yùn)用的有3 部分，即變量、對(duì)象、函數(shù)。具體內(nèi)容會(huì)在接下來(lái)的章節(jié)中講到。

本章將重點(diǎn)闡述JavaScript的基礎(chǔ)概念。

1.1 JavaScript的用途

JavaScript 作為前端開發(fā)中的核心語(yǔ)言，其重要性不言而喻，那么用它能做些什么呢？本節(jié)將介紹JavaScript的一些應(yīng)用場(chǎng)合。

1.1.1 數(shù)據(jù)的驗(yàn)證

JavaScript最初設(shè)計(jì)的目的就是用來(lái)完成表單數(shù)據(jù)的驗(yàn)證。到今天，利用JavaScript完成數(shù)據(jù)驗(yàn)證依然是一種重要的驗(yàn)證方式，當(dāng)然，除了使用JavaScript，表單中也有自帶的驗(yàn)證功能，但是一些需要結(jié)合數(shù)據(jù)庫(kù)的驗(yàn)證依然需要通過(guò)后臺(tái)語(yǔ)言來(lái)完成。

例如，優(yōu)逸客官網(wǎng)（www.sxuek.com），首頁(yè)中有在線咨詢的功能，其中有輸入手機(jī)號(hào)的一個(gè)輸入框，當(dāng)用戶輸入信息時(shí)就需要進(jìn)行數(shù)據(jù)驗(yàn)證。還有人們經(jīng)常操作的用戶登錄、注冊(cè)等也都需要進(jìn)行數(shù)據(jù)驗(yàn)證。

1.1.2 制作頁(yè)面動(dòng)態(tài)效果

隨著網(wǎng)絡(luò)鏈接速度的提升和硬件設(shè)備的發(fā)展，人們?cè)絹?lái)越不滿足于簡(jiǎn)單、死板的內(nèi)容呈現(xiàn)方式，通過(guò)瀏覽器，用戶更想看到一些不一樣的效果，而JavaScript 就是在網(wǎng)頁(yè)中制作動(dòng)態(tài)效果的比較好用的工具。

例如，優(yōu)逸客官網(wǎng)的輪播圖和樓層跳轉(zhuǎn)等動(dòng)態(tài)效果都是通過(guò)JS實(shí)現(xiàn)的。

1.1.3 對(duì)事件做出響應(yīng)

JavaScript 是基于事件驅(qū)動(dòng)的，用戶可以通過(guò)單擊、鼠標(biāo)指針的移入移出、滾輪滾動(dòng)、鍵盤按下等一系列的事件來(lái)控制頁(yè)面中代碼的執(zhí)行，進(jìn)而提升網(wǎng)頁(yè)的交互性。

例如，在優(yōu)逸客官網(wǎng)中通過(guò)單擊banner 圖的輪播點(diǎn)、導(dǎo)航欄等，可以進(jìn)行內(nèi)容的切換等，包括鼠標(biāo)指針移入后效果的變化，其實(shí)都是JavaScript在對(duì)事件做響應(yīng)。

1.1.4 單頁(yè)面應(yīng)用

隨著AngularJS等前端框架的興起，JavaScript 能夠在前端網(wǎng)頁(yè)中處理的邏輯也更加復(fù)雜，WebStorage更是給開發(fā)人員提供了直接在瀏覽器中保存數(shù)據(jù)的便利。以前一些C/S結(jié)構(gòu)的應(yīng)用現(xiàn)在也可以基于瀏覽器來(lái)實(shí)現(xiàn)了。

例如，谷歌在線的Word、Excel等編輯器；各大平臺(tái)的云，如小米云、谷歌云等都是單頁(yè)面應(yīng)用。

1.1.5 網(wǎng)頁(yè)游戲

H5中的Canvas給開發(fā)人員提供了在頁(yè)面中處理復(fù)雜2D、3D效果的接口，當(dāng)然，操作這些接口的還是JavaScript。雖然如今在瀏覽器端的網(wǎng)頁(yè)游戲更多的是通過(guò)其他語(yǔ)言實(shí)現(xiàn)的，但是基于JavaScript的游戲，現(xiàn)在也可以在游戲市場(chǎng)分一杯羹。

1.1.6 服務(wù)器端的應(yīng)用

Node.js（有關(guān)Node.js詳見本書的第3部分）就是運(yùn)行在服務(wù)器端的JavaScript。Node.js是一個(gè)事件驅(qū)動(dòng)I/O服務(wù)端的JavaScript環(huán)境，基于Google的V8引擎，執(zhí)行JavaScript的速度非常快，性能非常好。

JavaScript 發(fā)展到目前為止，它不僅僅作為一種客戶端語(yǔ)言，而且還能構(gòu)建服務(wù)器，但是無(wú)論如何，學(xué)習(xí)它都需要學(xué)習(xí)以下3部分：

1）ECMAScript，核心語(yǔ)法部分。

2）瀏覽器對(duì)象模型（BOM），提供訪問(wèn)和操作網(wǎng)頁(yè)內(nèi)容的方法和接口。

3）文檔對(duì)象模型（DOM），提供與瀏覽器交互的方法和接口。

注：在本書Node 部分還有關(guān)于JavaScript 的其他操作，如操作文件、操作數(shù)據(jù)庫(kù)等，相關(guān)內(nèi)容請(qǐng)查閱本書的第3部分。

有關(guān)BOM和DOM的詳細(xì)介紹請(qǐng)參考第6章。

1.2 JavaScript的發(fā)展歷史

如上節(jié)介紹所說(shuō)，JavaScript 擁有諸多用途，那么我們不禁好奇，如此強(qiáng)大的一門語(yǔ)言，它是怎么由來(lái)的呢？

1.2.1 悄然誕生

1995年，Netscape（網(wǎng)景）公司的Brendan Eich（布蘭登·艾奇）（見圖1-1）在公司提出的“看上去與Java 足夠相似，但是比Java 簡(jiǎn)單，使得非專業(yè)的網(wǎng)頁(yè)開發(fā)者也能很快上手”的要求下，利用10 天時(shí)間就把JavaScript 設(shè)計(jì)出來(lái)了。當(dāng)然，起初并不是JavaScript 這個(gè)名字，最開始叫作liveScript，因?yàn)镾un 公司（Java 開發(fā)者所在公司）與網(wǎng)景合作的原因，故改名為JavaScript。

同年，不甘落后的微軟在自己的IE 瀏覽器中嵌入了JavaScript的復(fù)刻版并且將其命名為JScript，獨(dú)立發(fā)展自己的客戶端腳本語(yǔ)言。

1997年，通過(guò)網(wǎng)景、Sun、微軟等公司以及眾多開發(fā)者的努力，統(tǒng)一標(biāo)準(zhǔn)的ECMAScript 被作為標(biāo)準(zhǔn)規(guī)范推出，標(biāo)準(zhǔn)編號(hào)為ECMA-262，從此ECMAScript 就成為JavaScript等腳本語(yǔ)言實(shí)現(xiàn)的標(biāo)準(zhǔn)基礎(chǔ)。因?yàn)槊鏅?quán)的原因，JavaScript 的正式名稱為“ECMAScript”。ECMA（歐洲計(jì)算機(jī)制造聯(lián)合會(huì)）是制定計(jì)算機(jī)標(biāo)準(zhǔn)規(guī)范的機(jī)構(gòu)，不過(guò)在一般場(chǎng)合下，還是把它稱為JavaScript。

1.2.2 穩(wěn)步發(fā)展

1998年、1999年，ECMAScript 2.0和ECMAScript 3.0相繼推出，并且穩(wěn)定下來(lái)，在之后的很長(zhǎng)一段時(shí)間內(nèi)，JavaScript 都在有條不紊地發(fā)展。隨著JavaScript 的不斷發(fā)展，越來(lái)越多的人加入到JavaScript 開發(fā)者的行列中。當(dāng)然，因?yàn)檎Z(yǔ)言本身設(shè)計(jì)缺陷的問(wèn)題，JavaScript越來(lái)越多的不足之處漸漸暴露了出來(lái)。所以新版本的推出已經(jīng)迫在眉睫。

2008年，關(guān)于JavaScript新版本協(xié)商的會(huì)議在并不和諧的氛圍中落下帷幕，因?yàn)橛刑嗉みM(jìn)的改動(dòng)被提出，眾多開發(fā)商不能達(dá)成一致，所以最終只是采用了一個(gè)折中的辦法，將一些較小的改動(dòng)加入到新版本中，并且命名為ECMAScript 3.1。而一些激進(jìn)的改動(dòng)則作為JavaScript.next 繼續(xù)改進(jìn)。ECMAScript 3.1也在不久后正式更名為ECMAScript 5。

1.2.3 黃金時(shí)代

2015年6月，ECMAScript 6.0正式推出，其中包含了大量關(guān)于JavaScript的語(yǔ)法補(bǔ)充以及新的語(yǔ)法，因?yàn)檫€有許多改動(dòng)不斷被提出，所以標(biāo)準(zhǔn)委員會(huì)決定，在每年6 月份發(fā)布一次版本更新，而第一版的正式名稱也被改為ECMAScript 2015。

如今，越來(lái)越多基于JavaScript的框架出現(xiàn)，JavaScript可以完成的功能也越來(lái)越多，使用也越來(lái)越方便。AngularJS、ReactJS、VueJS等框架讓前端開發(fā)進(jìn)入了全新的模式，而Node.js 的出現(xiàn)和發(fā)展也讓JavaScript 進(jìn)入了后臺(tái)和數(shù)據(jù)庫(kù)。在未來(lái)一段時(shí)間內(nèi)，JavaScript作為Web全棧開發(fā)的核心，將會(huì)迎來(lái)更加鼎盛的發(fā)展。

1.2.4 JavaScript和ECMAScript

如上文所述，ECMAScript 1.0版從一開始就是針對(duì)JavaScript 語(yǔ)言制定的，但是之所以不叫JavaScript，有兩個(gè)原因：

1）Java是Sun 公司的商標(biāo)，根據(jù)授權(quán)協(xié)議，只有Netscape 公司可以合法地使用JavaScript 這個(gè)名字，且JavaScript本身也已經(jīng)被Netscape 公司注冊(cè)為商標(biāo)。

2）想體現(xiàn)這門語(yǔ)言的制定者是ECMA，而不是Netscape，這樣有利于保證這門語(yǔ)言的開放性和中立性。

因此，ECMAScript 和JavaScript 的關(guān)系是，前者是后者的規(guī)格，后者是前者的一種實(shí)現(xiàn)。日常場(chǎng)合中，這兩個(gè)詞是可以互換的。

1.2.5 JavaScript和Java

在開始接觸JavaScript 時(shí)，很多人都會(huì)誤解JavaScript 和Java。這兩個(gè)編程語(yǔ)言除了“外貌”看起來(lái)有點(diǎn)相似，實(shí)則是兩種完全不同的編程語(yǔ)言：

1）從發(fā)布公司來(lái)講，Java是Sun公司于1995年5月推出的；而JavaScript是1995年由Netscape公司設(shè)計(jì)并實(shí)現(xiàn)的，由于兩個(gè)公司間的合作關(guān)系，Netscape高層希望它看上去能夠像Java，所以取名為JavaScript。

2）從本質(zhì)上來(lái)說(shuō)，Java是面向?qū)ο蟮木幊陶Z(yǔ)言；而JavaScript是基于對(duì)象的，它本身就提供了很多豐富的內(nèi)置對(duì)象可以供設(shè)計(jì)人員使用。

3）從執(zhí)行方式上來(lái)講，Java 是編譯性的語(yǔ)言，即在執(zhí)行之前必須經(jīng)過(guò)編譯；而JavaScript 是解釋性的語(yǔ)言，在執(zhí)行之前無(wú)須編譯，由瀏覽器解釋執(zhí)行，等等。總之，Java和JavaScript是兩個(gè)完全不一樣的語(yǔ)言。

1.3 JavaScript的語(yǔ)法特點(diǎn)

每個(gè)編程語(yǔ)言都有自己的特點(diǎn)，而語(yǔ)法的學(xué)習(xí)是入門的開始。本節(jié)將介紹JavaScript 這門編程語(yǔ)言的特點(diǎn)。

JavaScript是基于對(duì)象和事件驅(qū)動(dòng)的松散型的解釋性語(yǔ)言，下面一一解釋每個(gè)特點(diǎn)。

1.3.1 基于對(duì)象

基于對(duì)象，是因?yàn)镴avaScript 是基于面向?qū)ο蟮姆绞介_發(fā)的，通過(guò)構(gòu)造函數(shù)完成類的定義，通過(guò)對(duì)象冒充和prototype 實(shí)現(xiàn)繼承。之所以說(shuō)是繼承，是因?yàn)樗陨砭陀泻芏鄡?nèi)置的對(duì)象可以直接使用，關(guān)于JavaScript內(nèi)置的對(duì)象將在第5章中詳細(xì)介紹。

示例：

1.3.2 事件驅(qū)動(dòng)

在事件驅(qū)動(dòng)這個(gè)特點(diǎn)中，事件指的就是用戶的一些操作或?yàn)g覽器的一些行為，如用戶單擊鼠標(biāo)、按下鍵盤上的某個(gè)鍵等。JavaScript 的運(yùn)行需要事件的驅(qū)動(dòng)來(lái)完成，那么對(duì)于事件我們可以在HTML代碼中添加，也可以在JavaScript代碼中添加。

示例：

1.3.3 松散型

之所以說(shuō)JavaScript 具有松散型特點(diǎn)（有時(shí)也稱為是一門弱語(yǔ)言），是因?yàn)橄啾菾ava、C等強(qiáng)語(yǔ)言，它的語(yǔ)法并不是很嚴(yán)格。在強(qiáng)語(yǔ)言中，不同類型的變量聲明方式也不相同，而在JS中，不用關(guān)注變量的類型，一個(gè)var就可以搞定；每一行代碼的最后可以加分號(hào)，也可以不加分號(hào)；函數(shù)和var聲明的變量都可以在聲明之前訪問(wèn)等。

示例：

說(shuō)明：在上述示例中定義的變量str，在沒(méi)有聲明之前就可以調(diào)用，且不報(bào)錯(cuò)。此處得到的undefined是個(gè)數(shù)據(jù)類型，并不是錯(cuò)誤，后續(xù)章節(jié)中會(huì)講到。

1.3.4 解釋型

在眾多編程語(yǔ)言中，如C、C++、Java、JavaScript、PHP等，都可以分為兩類，即編譯型語(yǔ)言和解釋型語(yǔ)言。如果把讀者比喻為計(jì)算機(jī)，那么編程語(yǔ)言就是一本書，讀者通過(guò)閱讀書上的內(nèi)容，理解書里邊的內(nèi)涵，從而采取某些相應(yīng)的動(dòng)作。解釋型語(yǔ)言就類似于閱讀英文的文獻(xiàn)，需要一邊看一邊翻譯。

JavaScript 作為典型的解釋型語(yǔ)言，不需要編譯，可以由瀏覽器來(lái)解釋執(zhí)行，所以在學(xué)習(xí)JavaScript時(shí)，安裝主流瀏覽器進(jìn)行測(cè)試是很有必要的，如IE、火狐、谷歌。

1.4 JavaScript的引入方式

通過(guò)學(xué)習(xí)前3節(jié)，讀者已經(jīng)初步對(duì)JavaScript有了一定的了解，為了讓靜態(tài)的HTML頁(yè)面實(shí)現(xiàn)某些動(dòng)態(tài)效果，因此引入JavaScript。本節(jié)將重點(diǎn)介紹如何將JavaScript 與HTML 頁(yè)面正確地聯(lián)系起來(lái)。

總的來(lái)說(shuō)，在HTML網(wǎng)頁(yè)中引入JavaScript有4種方式，這4種方式各有各的用途，在實(shí)際工作中具體采用哪種方式，需要根據(jù)具體的需求來(lái)決定。

1.4.1 在域名或者重定向的位置引入

示例：

說(shuō)明：如上述示例，當(dāng)用戶單擊鏈接進(jìn)行頁(yè)面跳轉(zhuǎn)或提交表單時(shí)就會(huì)執(zhí)行對(duì)應(yīng)的JavaScript語(yǔ)句。在實(shí)際工作中，JavaScript語(yǔ)句一般都會(huì)寫在對(duì)應(yīng)的JS文件中。

1.4.2 在事件中引入

在事件中引入JavaScript，即在元素的某個(gè)屬性中直接編寫JavaScript代碼，這里的屬性指的是元素的事件屬性，如onclick表示鼠標(biāo)單擊事件。

示例：

說(shuō)明：如上述示例，當(dāng)用戶單擊該文本時(shí)會(huì)執(zhí)行對(duì)應(yīng)的JavaScript 語(yǔ)句。該方式一般也僅用于測(cè)試，在實(shí)際工作中，這些操作都是在JS文件中實(shí)現(xiàn)的。

1.4.3 在頁(yè)面中嵌入

在頁(yè)面中嵌入，類似于之前的CSS通過(guò)style標(biāo)簽對(duì)在頁(yè)面中嵌入，JavaScript可以在頁(yè)面中通過(guò)script標(biāo)簽對(duì)嵌入。

示例：

注意：JavaScript 代碼必須在<script></script>標(biāo)簽對(duì)內(nèi)編寫。該引入方式一般在做練習(xí)的時(shí)候比較常用，真正做項(xiàng)目的時(shí)候不推薦大家使用，因?yàn)椴荒芎芎玫貙?shí)現(xiàn)前后臺(tái)分離。

1.4.4 引入外部JavaScript文件

在實(shí)際工作中，不同功能的文件一般是分離的，所以外部引入的形式采用較多，引入方式也是采用script標(biāo)簽對(duì)。不過(guò)這里需要注意的是，在引入外部文件時(shí)，script標(biāo)簽對(duì)中間是不能放置任何其他內(nèi)容的！

示例：

注意：引入外部JavaScript 文件的script 標(biāo)簽可以放在head 標(biāo)簽內(nèi)，也可以放在body標(biāo)簽內(nèi)。

1.4.5 注意事項(xiàng)

上文中介紹的4種不同的引入方式之間會(huì)在代碼加載的時(shí)候按照書寫順序執(zhí)行。

多個(gè)塊之間（即多個(gè)script 標(biāo)簽對(duì)）的代碼最終還是在一個(gè)環(huán)境中解析的，所以互相之間是有關(guān)聯(lián)的，會(huì)相互影響。

示例：

說(shuō)明：如上述示例，在第一個(gè)script 標(biāo)簽對(duì)中聲明的變量，可以在第二個(gè)script 標(biāo)簽對(duì)中進(jìn)行調(diào)用。特別注意，在JavaScript腳本中不能出現(xiàn)script標(biāo)簽對(duì)。

1.5 JavaScript中的輸出工具

在上節(jié)中已經(jīng)學(xué)習(xí)了如何將HTML頁(yè)面和JavaScript關(guān)聯(lián)起來(lái)，即JavaScript的引入，那么在編寫代碼的過(guò)程中，除了要正確引入文件，編寫高質(zhì)量、優(yōu)美的語(yǔ)法代碼也是必需的。但是在編寫過(guò)程中難免會(huì)碰到一些bug，所以需要一些輸出工具來(lái)完成一些數(shù)據(jù)的驗(yàn)證測(cè)試。在最終完成的程序中肯定看不到這些輸出的代碼，但在開發(fā)過(guò)程中，這些輸出調(diào)試是必需的，常用的輸出方式有console.log()、alert()、document.wirte()等，下面將詳細(xì)介紹每個(gè)輸出工具的使用方法。

1.5.1 console

console 是控制臺(tái)的意思，在瀏覽器中打開開發(fā)者工具就可以找到控制臺(tái)，各個(gè)瀏覽器都有自己的查看工具，功能各有千秋，常用的控制臺(tái)命令如下：

1）console.log()可在控制臺(tái)打印括號(hào)中的內(nèi)容，將要輸出的內(nèi)容寫到括號(hào)中即可，可以一次輸出多個(gè)。

示例：

說(shuō)明：有時(shí)在不同的瀏覽器中可能會(huì)輸出不同的結(jié)果，如對(duì)于對(duì)象的輸出，這是正常現(xiàn)象。

2）console.dir()可詳細(xì)地輸出一個(gè)對(duì)象的所有屬性以及原型鏈。

示例：

3）console.table()，對(duì)于某些復(fù)合類型的數(shù)據(jù)，它可以將其轉(zhuǎn)為表格顯示。

示例：

示例輸出結(jié)果見表1-1。

4）console.clear()可清空當(dāng)前的控制臺(tái)。

當(dāng)然還有一些其他方法，不過(guò)常用的就是這些，讀者若感興趣可以詳細(xì)查閱console對(duì)象。

1.5.2 alert()

方法alert()用于顯示帶有一條指定消息和一個(gè)確定按鈕的警告框。

示例：

示例運(yùn)行結(jié)果如圖1-2所示。

說(shuō)明：alert()會(huì)阻塞代碼的運(yùn)行，這在測(cè)試的時(shí)候?qū)ξ覀兎浅Ｓ袔椭绻幌氤绦虮蛔枞梢圆捎闷渌敵龇绞健?/p>

1.5.3 document.write();

此方法會(huì)在文檔中打印內(nèi)容并顯示到網(wǎng)頁(yè)中，不過(guò)，因?yàn)檫@樣的操作會(huì)影響文檔結(jié)構(gòu)，所以這種方式不推薦使用，可在頁(yè)面中做一些有個(gè)性的輸出測(cè)試。

1.5.4 prompt(str,[value]);

此方法用于彈出一個(gè)輸入框，可以為它指定默認(rèn)值，也可以接收該輸入值。

示例：

示例運(yùn)行結(jié)果如圖1-3所示。

1.5.5 confirm()

此方法用于彈出一個(gè)確認(rèn)框，單擊確認(rèn)返回true，單擊否返回false。

示例：

示例運(yùn)行結(jié)果如圖1-4所示。

1.5.6 JavaScript注釋

在實(shí)際開發(fā)過(guò)程中，除了通過(guò)輸出工具可以幫助我們進(jìn)行代碼的調(diào)試，還可以借助JavaScript注釋。

JavaScript注釋分為兩種：行注釋//和塊注釋/ ** /。

通過(guò)添加注釋可以對(duì)JavaScript 代碼進(jìn)行解釋，或者提高代碼的可讀性；還可以使用注釋來(lái)阻止代碼的執(zhí)行。

下面的示例中使用行注釋來(lái)解釋代碼：

下面的示例中使用塊注釋進(jìn)行多行代碼的注釋，故塊注釋又可以稱為多行注釋：

說(shuō)明：不能嵌套使用塊注釋，否則會(huì)報(bào)錯(cuò)。