JavaScript程序開發(fā)案例教程高職PPT完整全套教學(xué)課件

JavaScript程序開發(fā)案例教程全套可編輯PPT課件1JavaScript簡介2JavaScript基本語法3數(shù)

組4函

數(shù)目錄5對(duì)

象6DOM7BOM8事

件9Ajax簡介目錄10jQuery簡介1CHAPTERJavaScript簡介學(xué)習(xí)目標(biāo)

(1)熟悉JavaScript的用途和發(fā)展?fàn)顩r。

(2)了解JavaScript開發(fā)工具。(3)熟悉JavaScript的基礎(chǔ)知識(shí)。任務(wù)描述

制作一個(gè)網(wǎng)頁,網(wǎng)頁自動(dòng)彈出一個(gè)文本框,提示用戶輸入密碼。獲取用戶輸入的密碼后,判斷用戶密碼是否正確。如果正確,則在彈出的提示框中提示“密碼輸入正確”,如果不正確,則提示“密碼輸入錯(cuò)誤”。

分析:任務(wù)中有用戶密碼判斷,單純用HTML代碼是無法實(shí)現(xiàn)的,需要用到JavaScript腳本語言。用戶輸入密碼需要用mpt()函數(shù),然后從文本框中獲取所輸入的密碼,把輸入的密碼和用戶密碼相比對(duì),根據(jù)用戶輸入的密碼正確與否,用alert()彈出相應(yīng)的提示。任務(wù)準(zhǔn)備要完成密碼判斷任務(wù),需要做如下準(zhǔn)備:(1)安裝Dreamweaver軟件。(2)安裝瀏覽器。(3)了解JavaScript基礎(chǔ)知識(shí)。1.1JavaScript概述1.1.1JavaScript介紹

JavaScript是Web開發(fā)領(lǐng)域中一門功能強(qiáng)大的腳本編程語言,也是一種通用的、跨平臺(tái)的、基于對(duì)象和事件驅(qū)動(dòng)并具有安全性的編程語言。JavaScript不需要經(jīng)過編譯,而是直接嵌入在HTML頁面中,通過瀏覽器的JavaScript引擎直接解釋運(yùn)行,把原本只做顯示的靜態(tài)頁面轉(zhuǎn)變成具有良好交互性能的頁面程序。

對(duì)于編寫網(wǎng)頁所起的作用,HTML、CSS和JavaScript分別代表了結(jié)構(gòu)、樣式和行為,結(jié)構(gòu)是網(wǎng)頁的框架,樣式是網(wǎng)頁的外觀,行為是網(wǎng)頁的交互邏輯,如表1-1所示。表1-1比較HTML、CSS和JavaScript1.1JavaScript概述1.1.1JavaScript介紹

下面通過一些示例來展示JavaScript能夠編寫的效果,如圖1-1所示。圖1-1JavaScript在網(wǎng)頁中的應(yīng)用

從圖1-1可以看出,利用JavaScript可以實(shí)現(xiàn)網(wǎng)頁中常見的交互效果。JavaScript可以使網(wǎng)頁的交互性更強(qiáng),提升用戶體驗(yàn)。1.1JavaScript概述1.1.2JavaScript的誕生與發(fā)展

20世紀(jì)90年代,Internet普及得越來越廣泛,網(wǎng)頁的內(nèi)容也更加豐富和復(fù)雜。但與此同時(shí),大部分用戶只能通過28.8Kb/s的Modem來連接網(wǎng)絡(luò),網(wǎng)絡(luò)速度慢且上網(wǎng)流量貴,有時(shí)一些簡單的操作卻要花費(fèi)用戶大量的時(shí)間、精力與金錢。如用戶填寫完自己的個(gè)人資料,單擊“提交”按鈕,等待1分鐘后,看到的卻是一條提示你忘記填寫出生年月的返回信息。提高用戶上網(wǎng)體驗(yàn)成為瀏覽器開發(fā)公司的迫切需求。1994年,網(wǎng)景(Netscape)公司發(fā)布了人類歷史上第一個(gè)比較成熟的瀏覽器———Navigator瀏覽器0.9版,轟動(dòng)一時(shí)。但是,這個(gè)版本的瀏覽器只能用來瀏覽,不具備與訪問者互動(dòng)的能力。網(wǎng)景公司急需一種網(wǎng)頁腳本語言,使得瀏覽器可以與網(wǎng)頁互動(dòng)。1.1JavaScript概述1.1.2JavaScript的誕生與發(fā)展

1995年,Netscape公司的布蘭登·艾奇(BrendanEich)成功為即將發(fā)行的Netscape

Navigator2.0瀏覽器設(shè)計(jì)出了一種腳本語言。后來Netscape公司與Sun公司聯(lián)手完成了這種腳本語言開發(fā),并將其命名為LiveScript。由于當(dāng)時(shí)Sun公司推出的Java語言正備受關(guān)注,為了利用Java這個(gè)時(shí)髦詞匯從而更好地推廣自己的腳本語言,在Netscape

Navigator2.0發(fā)行前夕,Netscape公司將LiveScript改名為JavaScript,這就是JavaScript1.0版本。1.1JavaScript概述1.1.2JavaScript的誕生與發(fā)展

搭載JavaScript1.0版本的Netscape

Navigator

2.0瀏覽器大獲成功。緊接著,Netscape公司在Netscape

Navigator

3.0瀏覽器中發(fā)布了JavaScript1.1版本。與此同時(shí),Microsoft(微軟)公司開始進(jìn)軍瀏覽器市場,發(fā)布的IE(InternetExplorer)3.0搭載了一個(gè)JavaScript的類似版本,叫作Jscript。Microsoft公司的這一舉動(dòng)極大地推動(dòng)了JavaScript的進(jìn)一步發(fā)展。在Microsoft進(jìn)入瀏覽器這一領(lǐng)域之后,市場上存在3種JavaScript版本,即Netscape

Navigator

3.0中的JavaScript、IE中的Jscript以及CEnvi中的ScriptEase。但這三個(gè)版本卻沒有統(tǒng)一的語法或特性,這一突出的問題降低了用戶的使用體驗(yàn),這個(gè)語言的標(biāo)準(zhǔn)化顯然勢在必行。1.1JavaScript概述1.1.2JavaScript的誕生與發(fā)展

1997年,JavaScript1.1作為一個(gè)草案提交給ECMA(歐洲計(jì)算機(jī)制造商協(xié)會(huì)),最終由來自Netscape、Sun、Microsoft、Borland和其他一些對(duì)腳本編程感興趣的公司的程序員組成了TC39委員會(huì),該委員會(huì)被委派來標(biāo)準(zhǔn)化一個(gè)通用、跨平臺(tái)、中立于廠商的腳本語言的語法和語義。TC39委員會(huì)制定了“ECMAScript程序語言的規(guī)范書”,即ECMA-262標(biāo)準(zhǔn),該標(biāo)準(zhǔn)被國際標(biāo)準(zhǔn)化組織(ISO)采納通過,作為各種瀏覽器開發(fā)使用的腳本程序的統(tǒng)一標(biāo)準(zhǔn)。

設(shè)計(jì)之初,JavaScript語言嵌入網(wǎng)頁中,用來控制瀏覽器的行為。今天的JavaScript承擔(dān)了更多的責(zé)任,尤其是當(dāng)Ajax技術(shù)興起之后,瀏覽器和服務(wù)器可以進(jìn)行異步交互,網(wǎng)站的用戶體驗(yàn)得到了更好的提升。例如,當(dāng)用戶在百度的搜索框中輸入關(guān)鍵字后,網(wǎng)頁會(huì)自動(dòng)補(bǔ)齊用戶可能要搜索的內(nèi)容,如圖1-2所示。

另外,JavaScript的用途已經(jīng)不再局限于瀏覽器,Node.js的出現(xiàn)使得JavaScript代碼能夠運(yùn)行在服務(wù)器上,這極大地?cái)U(kuò)大了JavaScript的應(yīng)用范圍。1.1JavaScript概述1.1.2JavaScript的誕生與發(fā)展圖1-2百度搜索框1.1JavaScript概述1.1.3JavaScript的特點(diǎn)

1.JavaScript是腳本語言

腳本(script)簡單地說就是一條條的文本命令,按照程序流程執(zhí)行。常見的腳本語言有JavaScript、VBScript、Perl、PHP、Python等,而C、C++、Java、C#這些語言不屬于腳本語言。它們的區(qū)別在于,非腳本語言一般需要經(jīng)過編譯、鏈接、生成獨(dú)立的可執(zhí)行文件才能運(yùn)行;而腳本語言依賴于解釋器,只在被調(diào)用時(shí)自動(dòng)進(jìn)行解釋或編譯。腳本語言縮短了傳統(tǒng)語言編寫→編譯→鏈接→運(yùn)行的過程。

腳本語言通常都有簡單、易學(xué)、易用的特點(diǎn),語法規(guī)則比較松散,使開發(fā)人員能夠快速完成程序的編寫工作,但其缺點(diǎn)是執(zhí)行效率不如編譯型的語言快。不過,由于計(jì)算機(jī)的運(yùn)行速度越來越快,Web應(yīng)用的需求變化也越來越快，人們更加重視關(guān)鍵的開發(fā)速度，腳本語言帶來的執(zhí)行效率慢已經(jīng)可以被忽略了。1.1JavaScript概述1.1.3JavaScript的特點(diǎn)

2.JavaScript可以跨平臺(tái)

JavaScript不依賴操作系統(tǒng),只要有瀏覽器就能運(yùn)行。目前,市面上絕大部分瀏覽器都支持JavaScript。在移動(dòng)互聯(lián)網(wǎng)時(shí)代,利用手機(jī)等各種移動(dòng)設(shè)備上網(wǎng)的用戶越來越多,JavaScript的跨平臺(tái)性使得它在移動(dòng)端也起著重要的作用。例如,JavaScript可以搭配CSS3編寫響應(yīng)式的網(wǎng)頁,或者將網(wǎng)頁編寫成具有移動(dòng)App的交互方式,從而縮短App的開發(fā)和更新周期。JavaScript還可以結(jié)合HTML5中的Canvas技術(shù),在網(wǎng)頁上制作精美的動(dòng)畫和游戲。

3.JavaScript支持面向?qū)ο?/p>

面向?qū)ο笫擒浖_發(fā)中的一種重要的編程思想,其優(yōu)點(diǎn)眾多,可以極大地提高程序的開發(fā)效率和速度,降低成本。例如,基于面向?qū)ο笏枷刖帉懙膉Query框架,大大地提高了JavaScript的開發(fā)快捷性,使JavaScript的開發(fā)效率出現(xiàn)了第一次飛躍。近幾年,Web前端開發(fā)技術(shù)日益受到重視,又誕生了Bootstrap、AngularJS、Vue.js、Backbone.js、React、webpack等框架和工具。1.2開發(fā)工具

JavaScript的開發(fā)工具主要包括瀏覽器和代碼編輯器兩種軟件。瀏覽器用于執(zhí)行、調(diào)試JavaScript代碼,代碼編輯器用于編寫代碼。開發(fā)工具瀏覽器代碼編輯器1.2開發(fā)工具1.2.1瀏覽器

瀏覽器是訪問互聯(lián)網(wǎng)上各種網(wǎng)站所必備的工具。由于瀏覽器的版本比較多,作為JavaScript開發(fā)人員需要解決各種瀏覽器的兼容性問題,確保用戶使用的瀏覽器能夠準(zhǔn)確執(zhí)行自己編寫的程序。常見的瀏覽器如表1-2所示。表1-2常見瀏覽器1.2開發(fā)工具1.2.1瀏覽器

在表1-2列舉的瀏覽器中,InternetExplorer歷史最悠久,主要版本有6、7、8、9、10、11,但版本6、7、8由于發(fā)布時(shí)間早,兼容性較差,已經(jīng)被市場淘汰。Chrome瀏覽器是各方面都比較優(yōu)秀的瀏覽器,除了占據(jù)內(nèi)存大,沒有其他明顯缺點(diǎn),本書將選擇Chrome瀏覽器進(jìn)行詳解。表1-2常見瀏覽器1.2開發(fā)工具1.2.2代碼編輯器

1.Adobe

Dreamweaver

Adobe

Dreamweaver簡稱DW,中文名稱為“夢想編織者”,最初由美國Macromedia公司開發(fā),2005年被Adobe公司收購。Adobe

Dreamweaver是一個(gè)集網(wǎng)頁制作和網(wǎng)站管理于一身的所見即所得的網(wǎng)頁編輯器,降低了網(wǎng)頁的開發(fā)難度和HTML、CSS的學(xué)習(xí)門檻,適合新手使用。用戶借助經(jīng)過簡化的智能編碼引擎,可以輕松地創(chuàng)建、編碼和管理動(dòng)態(tài)網(wǎng)站;訪問代碼提示,即可快速了解HTML、CSS和其他Web標(biāo)準(zhǔn);使用視覺輔助功能可以減少錯(cuò)誤并提高網(wǎng)站開發(fā)速度。其缺點(diǎn)是可視化編輯功能會(huì)產(chǎn)生大量冗余代碼,不適合開發(fā)結(jié)構(gòu)復(fù)雜、需要大量動(dòng)態(tài)交互的網(wǎng)頁。1.2開發(fā)工具1.2.2代碼編輯器

2.HBuilder

HBuilder編輯器是DCloud推出的一款支持HTML5的Web開發(fā)編輯器。HBuilder通過完整的語法提示和代碼輸入法、代碼塊等,大幅提升HTML、JavaScript、CSS的開發(fā)效率,同時(shí)還包括最全面的語法庫和瀏覽器兼容性數(shù)據(jù),幫助開發(fā)者快速完成開發(fā),解決瀏覽器碎片化問題。

3.Sublime

Text

Sublime

Text是一個(gè)輕量級(jí)、跨平臺(tái)的代碼編輯器,同時(shí)支持Windows、Linux、Mac

OSX等操作系統(tǒng),也是優(yōu)秀的HTML和CSS編輯器。Sublime

Text是由程序員Jon

Skinner于2008年1月開發(fā)出來的,它最初被設(shè)計(jì)為一個(gè)具有豐富擴(kuò)展功能的Vim。Sublime

Text具有美觀、友好的用戶界面和強(qiáng)大的功能,如代碼縮略圖、Python的插件、代碼段等,還可自定義鍵綁定、菜單和工具欄。Sublime

Text的主要功能包括拼寫檢查、書簽、完整的PythonAPI、Goto功能、即時(shí)項(xiàng)目切換、多選擇、多窗口等。1.2開發(fā)工具1.2.2代碼編輯器

4.WebStorm

WebStorm是JetBrains公司旗下一款Web前端開發(fā)工具,JavaScript、HTML5開發(fā)效率高,支持許多流行的前端技術(shù),被中國廣大JavaScript開發(fā)者譽(yù)為“Web前端開發(fā)神器”“最強(qiáng)大的HTML5編輯器”“最智能的JavaScript編輯器”等。與IntelliJ

IDEA同源,繼承了IntelliJ

IDEA強(qiáng)大的JavaScript部分的功能。

考慮到學(xué)習(xí)JavaScript的開發(fā)人員,大都會(huì)先學(xué)習(xí)HTML+CSS3的開發(fā),而HTML+CSS3學(xué)習(xí)者中使用HBuilder的人數(shù)較多,所以本書選擇使用HBuilder進(jìn)行代碼編寫,其軟件界面如圖1-3所示。1.2開發(fā)工具1.2.2代碼編輯器

4.WebStorm

圖1-3

HBuilder軟件界面1.3使用基礎(chǔ)1.3.1JavaScript引入方式

在網(wǎng)頁編寫JavaScript代碼?？梢酝ㄟ^嵌入式、外鏈?zhǔn)胶托袃?nèi)式這3種方式來引入JavaScript代碼。引入方式嵌入式外鏈?zhǔn)叫袃?nèi)式1.3使用基礎(chǔ)1.3.1JavaScript引入方式

1.嵌入式

嵌入式就是使用<script>標(biāo)簽包裹JavaScript代碼,直接編寫到HTML文件中,具體如下:

(1)使用HBuilder創(chuàng)建一個(gè)“test.html”文件。在“文件”菜單欄下執(zhí)行“新建”→“7.html文件”命令,即可創(chuàng)建一個(gè)HTML文件,如圖1-4所示。圖1-4創(chuàng)建HTML文件1.3使用基礎(chǔ)1.3.1JavaScript引入方式

1.嵌入式

創(chuàng)建的HTML文件代碼如圖1-5所示。圖1-5HTML文件代碼1.3使用基礎(chǔ)1.3.1JavaScript引入方式

1.嵌入式

(2)將JavaScript代碼嵌入HTML中,如圖1-6所示。圖1-6嵌入JavaScript代碼1.3使用基礎(chǔ)1.3.1JavaScript引入方式

2.外鏈?zhǔn)?/p>

外鏈?zhǔn)绞侵笇avaScript保存在單獨(dú)的文件中,通常使用“.js”作為文件的擴(kuò)展名,然后使用<script>標(biāo)簽的src屬性引入文件,具體如下:

(1)創(chuàng)建“test.js”文件,如圖1-7所示。圖1-7創(chuàng)建“test.js”文件1.3使用基礎(chǔ)1.3.1JavaScript引入方式

2.外鏈?zhǔn)?/p>

創(chuàng)建完成后的頁面如圖1-8所示。圖1-8新建的test.js頁面1.3使用基礎(chǔ)1.3.1JavaScript引入方式

2.外鏈?zhǔn)?/p>

(2)從圖1-8可以看出,新建的“test.js”文件中沒有任何代碼。在其中添加代碼,如圖1-9所示。圖1-9添加代碼1.3使用基礎(chǔ)1.3.1JavaScript引入方式

2.外鏈?zhǔn)?/p>

然后使用<script>標(biāo)簽的src屬性引入文件,如圖1-10所示。其中,<script>標(biāo)簽的type屬性用于告知瀏覽器腳本的類型。src屬性是一個(gè)文件路徑或者URL地址,可以指定相對(duì)路徑、絕對(duì)路徑或者URL地址。圖1-10通過src屬性引入文件1.3使用基礎(chǔ)1.3.1JavaScript引入方式

3.行內(nèi)式

行內(nèi)式是將JavaScript代碼作為HTML標(biāo)簽的屬性值使用。例如,單擊超鏈接時(shí),彈出一個(gè)警告提示框,代碼如圖1-11所示。圖1-11標(biāo)簽屬性嵌入JavaScript代碼1.3使用基礎(chǔ)1.3.1JavaScript引入方式

3.行內(nèi)式

圖1-11代碼實(shí)現(xiàn)了單擊鏈接時(shí),彈出一個(gè)警告框提示“將進(jìn)行跳轉(zhuǎn)”。由于現(xiàn)在網(wǎng)頁開始提倡結(jié)構(gòu)、樣式、行為相分離,即分離HTML、CSS、JavaScript三部分的代碼,避免直接寫在HTML標(biāo)簽的屬性中,從而便于更新和維護(hù)。因此實(shí)際開發(fā)中不推薦使用行內(nèi)式。1.3使用基礎(chǔ)1.3.2輸出語句

利用輸出語句可以輸出一段代碼的執(zhí)行結(jié)果,在學(xué)習(xí)JavaScript的過程中會(huì)經(jīng)常用到輸出語句。接下來介紹3種常用的輸出語句。

1.alert()

alert()用于彈出一個(gè)警告框,確保用戶可以看到某些信息,在前面的示例中已經(jīng)演示過。利用alert()可以很方便地輸出一個(gè)結(jié)果,經(jīng)常用于測試程序。

2.console.log()

console.log()用于在瀏覽器的控制臺(tái)中輸出內(nèi)容。例如,在“test.html”文件中編寫如下代碼:1.3使用基礎(chǔ)1.3.2輸出語句

2.console.log()

使用Chrome瀏覽器打開“test.html”文件,按F12鍵啟動(dòng)開發(fā)者工具,然后單擊“Console”控制臺(tái)選項(xiàng)卡,如圖1-12所示。圖1-12瀏覽器控制臺(tái)輸出

從圖1-12中可以看出,控制臺(tái)顯示了輸出結(jié)果“學(xué)習(xí)JavaScript程序開發(fā)”,其最右邊的“test.html:13”表示輸出的代碼來自“test.html”文件中的第13行。1.3使用基礎(chǔ)1.3.2輸出語句

3.document.write()

document.write()用于向HTML文檔頁面中輸出內(nèi)容,具體示例如下:1.3使用基礎(chǔ)1.3.3注釋

在JavaScript開發(fā)過程中,使用注釋是為了提高代碼的可讀性或者把目前不需要的代碼進(jìn)行暫時(shí)的屏蔽。在程序解析的過程當(dāng)中,注釋會(huì)被自動(dòng)忽略。JavaScript語言支持單行注釋和多行注釋2種注釋方式。注釋單行注釋多行注釋1.3使用基礎(chǔ)1.3.3注釋

1.單行注釋“//”

上述示例中,“//”和其后面的“向控制臺(tái)打印一句話”是一個(gè)單行注釋。以“//”開始,到該行結(jié)束或者JavaScript標(biāo)記結(jié)束之前的內(nèi)容都是注釋。1.3使用基礎(chǔ)1.3.3注釋

2.多行注釋“/**/”

上述示例中,“/*”和“*/”之間的內(nèi)容是多行注釋,多行注釋以“/*”開始,以“*/”結(jié)束。同時(shí),多行注釋可以嵌套單行注釋,但不能再嵌套多行注釋。任務(wù)實(shí)施

完成驗(yàn)證用戶輸入密碼的代碼如下:任務(wù)實(shí)施

上述代碼中,varpassword=prompt(?請輸入密碼:?)獲取用戶輸入的密碼,然后判斷用戶輸入的密碼是否與“jxcia”相同,如果相同則提示“密碼輸入正確”,否則提示“密碼輸入錯(cuò)誤”。

通過瀏覽器測試,運(yùn)行結(jié)果如圖1-13所示。圖1-13用戶輸入密碼任務(wù)實(shí)施

輸入錯(cuò)誤的密碼“helloworld”后,單擊“確定”按鈕,運(yùn)行結(jié)果如圖1-14所示。圖1-14用戶密碼輸入錯(cuò)誤模塊小結(jié)

本模塊首先提出一個(gè)驗(yàn)證用戶輸入密碼的任務(wù)并進(jìn)行分析,針對(duì)任務(wù)介紹了JavaScript的應(yīng)用領(lǐng)域、發(fā)展?fàn)顩r及特點(diǎn),瀏覽器、代碼編輯器相關(guān)容,JavaScript的基礎(chǔ)知識(shí)(引入方式、輸出語句和注釋)。最后利用相關(guān)知識(shí)完成任務(wù)。THANKYOU謝

謝JavaScript基本語法2CHAPTER學(xué)習(xí)目標(biāo)

(1)掌握J(rèn)avaScript變量的定義及賦值。

(2)掌握J(rèn)avaScript的數(shù)據(jù)類型。

(3)掌握J(rèn)avaScript的表達(dá)式及運(yùn)算符。

(4)熟悉JavaScript流程控制語句,并具備運(yùn)用控制語句解決問題的能力。任務(wù)描述

九九乘法表是學(xué)習(xí)數(shù)學(xué)必備的知識(shí),它體現(xiàn)了數(shù)字之間的乘法規(guī)律,如何使用JavaScript輸出九九乘法表呢?

分析:用JavaScript輸出九九乘法表需要使用循環(huán)嵌套的知識(shí)來完成。首先考慮九九乘法表有九行,需要一個(gè)循環(huán)變量來控制行數(shù)的變化,由于每行的列數(shù)不一樣,因此還需要一個(gè)循環(huán)變量來控制每行的列數(shù)。觀察九九乘法表會(huì)發(fā)現(xiàn)以下規(guī)律:

(1)每行中公式的列數(shù)等于該行的行號(hào),例如第4行共有4列公式;

(2)每行的被乘數(shù)的取值范圍在“1到每行中的列數(shù)”,例如第4行中,被乘數(shù)的取值范圍在1到4;

(3)乘數(shù)的值等于該行的行號(hào),例如第4行中所有公式的乘數(shù)的值都為4。

只要根據(jù)上述規(guī)律使用JavaScript語言編寫代碼,即可將九九乘法表顯示在網(wǎng)頁中。任務(wù)準(zhǔn)備

要完成九九乘法表任務(wù),需要掌握如下知識(shí):

(1)基本的網(wǎng)頁輸出語句。

(2)循環(huán)語句的基本結(jié)構(gòu)及用法。

(3)循環(huán)嵌套的用法。2.1變量2.1.1標(biāo)識(shí)符

在JavaScript中,變量、數(shù)組、函數(shù)等都需要一個(gè)名稱,這個(gè)名稱被稱為標(biāo)識(shí)符。用戶自己定義的標(biāo)識(shí)符要遵循JavaScript標(biāo)識(shí)符命名規(guī)則,具體規(guī)則如下:

(1)標(biāo)識(shí)符由字母(A~Z,a~z)、下劃線(_)、數(shù)字(0~9)和美元符號(hào)($)組成。

(2)標(biāo)識(shí)符不能以數(shù)字開頭。

(3)標(biāo)識(shí)符不能使用JavaScript中的關(guān)鍵字命名,如case、var、false等。

(4)JavaScript中的標(biāo)識(shí)符嚴(yán)格區(qū)分字母的大小寫,如abcd和abcD表示兩個(gè)不同的標(biāo)識(shí)符。

用戶在定義標(biāo)識(shí)符時(shí)還需要注意在定義標(biāo)識(shí)符時(shí)盡量做到“見名知意”。如用gender表示性別、name表示姓名等,養(yǎng)成良好的編程習(xí)慣。

合法標(biāo)識(shí)符的舉例:A123、school、name_2、a_23、get_age、$stu、$s_3。

非法標(biāo)識(shí)符的舉例:12age、a-b、a&b、M.teacher、new、ab#、abc￥。2.1變量2.1.2保留關(guān)鍵字

保留關(guān)鍵字是JavaScript語言中規(guī)定使用的專用詞,它們有特定的含義,如定義變量用關(guān)鍵字var,定義函數(shù)用關(guān)鍵字function。所有的保留關(guān)鍵字都不能作為標(biāo)識(shí)符使用,否則會(huì)造成語法錯(cuò)誤。JavaScript的保留關(guān)鍵字如表2-1所示。表2-1JavaScript保留關(guān)鍵字2.1變量2.1.2保留關(guān)鍵字

除此之外,JavaScript中還保留了一些未來可能會(huì)用到的關(guān)鍵字,如表2-2所示。表2-2JavaScript預(yù)保留關(guān)鍵字2.1變量2.1.3變量的使用

變量是內(nèi)存中的一塊存儲(chǔ)空間,是用來存儲(chǔ)數(shù)據(jù)的。變量的名字就是內(nèi)存地址的別名,在程序的執(zhí)行過程中其內(nèi)的值是可以改變的。變量有兩個(gè)基本特征,即變量名和變量值,變量名的命名規(guī)則遵循標(biāo)識(shí)符的命名規(guī)則。在使用JavaScript變量前要先對(duì)變量進(jìn)行聲明。由于JavaScript是一種弱類型的語言,所有的JavaScript變量都是由關(guān)鍵字var進(jìn)行聲明的,其語法格式如下:

var

valuename1[,valuename2,valuename3,…];

var是聲明變量的關(guān)鍵字,所有變量的聲明都用該關(guān)鍵字。valuename1是聲明的變量名。一次可以聲明一個(gè)變量,也可以聲明多個(gè)變量,多個(gè)變量之間要用逗號(hào)隔開。

上述代碼中,用var聲明的變量都沒有賦初始值,所以默認(rèn)為undefined。行末的分號(hào)(;)可以省略,一般我們都會(huì)保留,表示一行的結(jié)束。2.1變量2.1.4變量的賦值

變量的賦值就是給變量一個(gè)初始值,JavaScript中使用等號(hào)(=)實(shí)現(xiàn)變量的賦值。變量的賦值有兩種方式。

(1)在聲明變量的同時(shí)給變量進(jìn)行初始化賦值。

(2)聲明完變量后,再使用賦值語句進(jìn)行賦值。

在JavaScript中,雖然變量可以不先聲明而直接對(duì)其進(jìn)行賦值(上述代碼中可以省略聲明變量那行),但還是建議在使用變量之前就對(duì)該變量進(jìn)行聲明。這是因?yàn)镴avaScript采用的是動(dòng)態(tài)編譯,運(yùn)行過程中不易發(fā)現(xiàn)代碼中的錯(cuò)誤,特別是變量命名方面的錯(cuò)誤,所以要養(yǎng)成良好的編程習(xí)慣。2.2數(shù)據(jù)類型2.2.1數(shù)據(jù)類型分類

JavaScript是一種弱類型的語言,即數(shù)據(jù)在定義時(shí)不需要指明是什么類型,其數(shù)據(jù)類型可以通過數(shù)據(jù)賦值時(shí)的值來推斷。JavaScript的數(shù)據(jù)類型可以分為三類:基本數(shù)據(jù)類型、引用數(shù)據(jù)類型和特殊數(shù)據(jù)類型,如圖2-1所示。引用數(shù)據(jù)類型會(huì)在后續(xù)模塊中介紹。圖2-1數(shù)據(jù)類型分類2.2數(shù)據(jù)類型2.2.2基本數(shù)據(jù)類型和特殊數(shù)據(jù)類型

1.數(shù)值型

數(shù)值型是JavaScript中最基本的數(shù)據(jù)類型。JavaScript并不區(qū)分整型和浮點(diǎn)型,所有的數(shù)字都是數(shù)值型。當(dāng)一個(gè)數(shù)字直接出現(xiàn)在JavaScript中,那么這個(gè)數(shù)字被稱為數(shù)值直接量,JavaScript常用的數(shù)值直接量如下:

(1)十進(jìn)制。在JavaScript中,十進(jìn)制用0~9的數(shù)字來表示,如23、-30、51、-103。

(2)八進(jìn)制。在JavaScript中,八進(jìn)制用0~7的數(shù)字來表示,第一位數(shù)字前必須加0,如023、065、0347、02。

(3)十六進(jìn)制。在JavaScript中,十六進(jìn)制用0~9的數(shù)字和A~F(或者小寫字母a~f)的字母來表示,在字母和數(shù)字前要先添加0X(或者0x)開頭,表示是十六進(jìn)制數(shù),如0Xff、0X1234、0xA23、0xEC。2.2數(shù)據(jù)類型2.2.2基本數(shù)據(jù)類型和特殊數(shù)據(jù)類型

1.數(shù)值型

下面通過輸出不同進(jìn)制下的數(shù)字25,加深對(duì)這三種進(jìn)制數(shù)的理解。

執(zhí)行上面的代碼,得到的運(yùn)行結(jié)果如圖2-2所示。圖2-2不同進(jìn)制下數(shù)字25的輸出結(jié)果2.2數(shù)據(jù)類型2.2.2基本數(shù)據(jù)類型和特殊數(shù)據(jù)類型

1.數(shù)值型

(4)浮點(diǎn)型。浮點(diǎn)型數(shù)據(jù)只能用十進(jìn)制數(shù)表示,表示形式有以下兩種:

①一般表示形式:由整數(shù)部分、小數(shù)點(diǎn)和小數(shù)部分組成,如1.45、-5.6、15.0。

②指數(shù)表示形式:由數(shù)字、e(或E)和指數(shù)組成,如3.14e5、5e3、1.56E-6。e或E后面的整數(shù)表示10的指數(shù)次冪,如3.14e5表示3.14×105。

下面通過代碼了解浮點(diǎn)型數(shù)據(jù)的用法,具體如下:2.2數(shù)據(jù)類型2.2.2基本數(shù)據(jù)類型和特殊數(shù)據(jù)類型

1.數(shù)值型

執(zhí)行上面的代碼,得到的運(yùn)行結(jié)果如圖2-3所示。圖2-3浮點(diǎn)型數(shù)據(jù)輸出結(jié)果2.2數(shù)據(jù)類型2.2.2基本數(shù)據(jù)類型和特殊數(shù)據(jù)類型

2.字符串型

字符串是由字符組成的序列,主要由字母、數(shù)字、漢字或者其他特殊字符組成。字符串?dāng)?shù)據(jù)必須用單引號(hào)或者雙引號(hào)括起來,單引號(hào)和雙引號(hào)可以互相嵌套,即單引號(hào)中的字符串可以出現(xiàn)雙引號(hào),雙引號(hào)中的字符串可以有單引號(hào)。

通過上述代碼可知,單引號(hào)和雙引號(hào)可以互相嵌套,但是單引號(hào)中包含單引號(hào),或者雙引號(hào)中包含雙引號(hào),程序則會(huì)出錯(cuò)。解決此錯(cuò)誤的方法是通過轉(zhuǎn)義字符“\”對(duì)其進(jìn)行轉(zhuǎn)義。2.2數(shù)據(jù)類型2.2.2基本數(shù)據(jù)類型和特殊數(shù)據(jù)類型

2.字符串型

除了可以對(duì)單引號(hào)和雙引號(hào)進(jìn)行轉(zhuǎn)義外,JavaScript中還有其他的特殊字符需要轉(zhuǎn)義,具體如表2-3所示。

表2-3JavaScript常用轉(zhuǎn)義字符2.2數(shù)據(jù)類型2.2.2基本數(shù)據(jù)類型和特殊數(shù)據(jù)類型

3.布爾型

布爾型(Boolean)只有兩個(gè)值,一個(gè)是true,表示結(jié)果為真,一個(gè)是false,表示結(jié)果為假,常用于邏輯判斷。

4.空型空型只有一個(gè)值為null,用于定義空的或者不存在的引用。這里需要注意null和空字符串""或者0不一樣,null一般用于給對(duì)象進(jìn)行初始賦值。5.未定義型未定義型只有一個(gè)值為undefined,當(dāng)定義了一個(gè)變量未進(jìn)行初始化時(shí),該變量的默認(rèn)值為undefined。例如“vara;”定義了變量a,但是沒有給變量a進(jìn)行初始賦值。undefined和null的區(qū)別是null表示一個(gè)變量被賦了一個(gè)空值,而undefined則表示該變量未被賦值。2.2數(shù)據(jù)類型2.2.3數(shù)據(jù)類型檢測

由于JavaScript語言是弱類型語言,JavaScript中的變量的數(shù)據(jù)類型是由上下文運(yùn)行過程決定的,變量的加法演示示例如下:

通過上述案例的輸出結(jié)果可以看出,變量沒有進(jìn)行加法運(yùn)算,而是進(jìn)行了字符串的拼接。由于兩個(gè)變量的數(shù)據(jù)類型不同,直接相加并不能得到正確的答案。做數(shù)字運(yùn)算前,要先進(jìn)行數(shù)據(jù)類型檢測,只有檢測到變量的數(shù)據(jù)類型都是數(shù)值型,才能夠進(jìn)行加法運(yùn)算。一般通過typeof操作符或者對(duì)象原型的擴(kuò)展函數(shù)這兩種方式進(jìn)行數(shù)據(jù)類型檢測。2.2數(shù)據(jù)類型2.2.3數(shù)據(jù)類型檢測

1.typeof操作符

使用typeof操作符進(jìn)行數(shù)據(jù)類型檢測時(shí),以字符串的形式返回檢測結(jié)果。下面通過代碼演示typeof操作符的用法及對(duì)應(yīng)結(jié)果,用typeof操作符檢測前面定義的變量。

通過代碼可以看出,對(duì)兩個(gè)變量進(jìn)行加法運(yùn)算前,可以通過typeofnum1=="string"和typeof

num2=="number"來判斷num1和num2是否都是數(shù)值型,只有兩個(gè)變量都為數(shù)值型,才能進(jìn)行加法運(yùn)算。不同類型的數(shù)據(jù)使用typeof運(yùn)算符的返回值如表2-4所示。

2.2數(shù)據(jù)類型2.2.3數(shù)據(jù)類型檢測

1.typeof操作符表2-4不同數(shù)據(jù)類型使用typeof運(yùn)算符的返回值2.2數(shù)據(jù)類型2.2.3數(shù)據(jù)類型檢測

2.對(duì)象原型的擴(kuò)展函數(shù)

JavaScript是面向?qū)ο蟮囊环N語言,因此可以利用對(duì)象原型擴(kuò)展函數(shù)Object.prototype.toString.call()來區(qū)分?jǐn)?shù)據(jù)類型。

從上述代碼的結(jié)果可以看到,如果要判斷變量name的數(shù)據(jù)類型是否是空型(Null),則通過判斷Ototype.toString.call(name)=="[object

Null]"是否成立,如果判斷結(jié)果為true,則表示name的數(shù)據(jù)類型為空型,否則判斷結(jié)果為false,表示name的數(shù)據(jù)類型不是空型。2.2數(shù)據(jù)類型2.2.4數(shù)據(jù)類型轉(zhuǎn)換

1.轉(zhuǎn)換成數(shù)值型

在程序開發(fā)時(shí),為了保證參與運(yùn)算的變量都是數(shù)值型,通常會(huì)對(duì)其進(jìn)行類型轉(zhuǎn)換,常用的數(shù)值型轉(zhuǎn)換函數(shù)有Number()、parseInt()、parseFloat()。

下面以Number()函數(shù)為例進(jìn)行講解。2.2數(shù)據(jù)類型2.2.4數(shù)據(jù)類型轉(zhuǎn)換

1.轉(zhuǎn)換成數(shù)值型

執(zhí)行上面的代碼,得到的運(yùn)行結(jié)果如圖2-4所示。圖2-4

求和結(jié)果2.2數(shù)據(jù)類型2.2.4數(shù)據(jù)類型轉(zhuǎn)換

1.轉(zhuǎn)換成數(shù)值型

由此可知,實(shí)現(xiàn)變量求和之前,要保證參與運(yùn)算的變量都是數(shù)值型,否則將會(huì)當(dāng)成字符串的拼接。下面通過一張表格(見表2-5)詳細(xì)介紹三種數(shù)值型轉(zhuǎn)換函數(shù)的使用方法。表2-5

三種數(shù)值型轉(zhuǎn)換函數(shù)2.2數(shù)據(jù)類型2.2.4數(shù)據(jù)類型轉(zhuǎn)換

1.轉(zhuǎn)換成數(shù)值型

以上三種數(shù)值型轉(zhuǎn)換函數(shù)轉(zhuǎn)換純數(shù)字字符串時(shí),會(huì)忽略最前面的零,如轉(zhuǎn)換純數(shù)字字符串"097",轉(zhuǎn)換結(jié)果為97。parseInt()函數(shù)的第二個(gè)參數(shù)表示被轉(zhuǎn)換數(shù)的進(jìn)制,第二個(gè)參數(shù)的取值范圍是2~36,如果沒寫第二個(gè)參數(shù),默認(rèn)被轉(zhuǎn)換數(shù)是十進(jìn)制。通過示例了解parseInt()函數(shù)的第二個(gè)參數(shù)的作用。2.2數(shù)據(jù)類型2.2.4數(shù)據(jù)類型轉(zhuǎn)換

1.轉(zhuǎn)換成數(shù)值型

通過上述代碼可以看到,如果對(duì)字符串進(jìn)行轉(zhuǎn)換,轉(zhuǎn)換后的結(jié)果有可能是NaN,所以實(shí)際編程中應(yīng)該注意對(duì)轉(zhuǎn)換后的結(jié)果再進(jìn)行NaN的判斷,只有轉(zhuǎn)換結(jié)果不是NaN時(shí),才能進(jìn)行算數(shù)運(yùn)算。JavaScript語言通過isNaN()函數(shù)來檢查其參數(shù)是否為非數(shù)字值,如果參數(shù)值為NaN、非純數(shù)字的字符串、對(duì)象或undefined等非數(shù)字值,則返回true,否則返回false。下面通過一些示例了解isNaN()函數(shù)的用法。2.2數(shù)據(jù)類型2.2.4數(shù)據(jù)類型轉(zhuǎn)換

1.轉(zhuǎn)換成數(shù)值型

因此,可以通過isNaN()函數(shù)來完善上述求和代碼,使程序書寫更加嚴(yán)謹(jǐn)。2.2數(shù)據(jù)類型2.2.4數(shù)據(jù)類型轉(zhuǎn)換

2.轉(zhuǎn)換成字符串型

JavaScript提供了String()函數(shù)和toString()函數(shù)將數(shù)據(jù)轉(zhuǎn)換成字符串類型。String()函數(shù)可以將任意數(shù)據(jù)類型轉(zhuǎn)換成字符串型;除了null和undefined類型沒有toString()函數(shù)外,其他類型都可以通過該函數(shù)完成字符串類型轉(zhuǎn)換。toString()函數(shù)中可以設(shè)置參數(shù),該參數(shù)用來指定要轉(zhuǎn)換的進(jìn)制,然后再轉(zhuǎn)換成字符串類型。具體用法如下:2.2數(shù)據(jù)類型2.2.4數(shù)據(jù)類型轉(zhuǎn)換

2.轉(zhuǎn)換成字符串型

在上述代碼中,第三行代碼將num2的值4和num3轉(zhuǎn)換后的字符串"25"進(jìn)行了拼接,得到結(jié)果"425"。num3.toString(2)先把num3的值25轉(zhuǎn)換成了二進(jìn)制數(shù)11001,然后再將二進(jìn)制數(shù)轉(zhuǎn)換成字符串"11001"。num3.toString(16)則先把num3的值轉(zhuǎn)換成十六進(jìn)制數(shù)19,然后再轉(zhuǎn)換成字符串"19"。2.2數(shù)據(jù)類型2.2.4數(shù)據(jù)類型轉(zhuǎn)換

3.轉(zhuǎn)換成布爾型

JavaScript提供了Boolean()函數(shù)將數(shù)據(jù)轉(zhuǎn)換成布爾類型。當(dāng)要轉(zhuǎn)換的數(shù)據(jù)是非空字符串、非零數(shù)值或非空對(duì)象時(shí),轉(zhuǎn)換結(jié)果為true;當(dāng)要轉(zhuǎn)換的數(shù)據(jù)是空字符串、0、NaN、undefined或者null時(shí),轉(zhuǎn)換結(jié)果為false。通過具體的案例加深理解,代碼如下:2.3表達(dá)式

表達(dá)式是由運(yùn)算符和操作數(shù)組成的式子,表達(dá)式的值就是對(duì)操作數(shù)進(jìn)行運(yùn)算后的結(jié)果。下面列舉一些常見的表達(dá)式,供讀者理解。2.4運(yùn)算符

運(yùn)算符是指能夠完成一系列計(jì)算操作的符號(hào),參與運(yùn)算操作的數(shù)稱為操作數(shù),例如,在表達(dá)式“3×4”中,3和4就是操作數(shù),乘法符號(hào)“×”就是運(yùn)算符。JavaScript中提供了多種運(yùn)算符,根據(jù)運(yùn)算符的功能可以將其分為以下幾類。運(yùn)算符算術(shù)運(yùn)算符字符串運(yùn)算符賦值運(yùn)算符比較運(yùn)算符邏輯運(yùn)算符三元運(yùn)算符位運(yùn)算符2.4運(yùn)算符

算術(shù)運(yùn)算符一般用于數(shù)值型數(shù)據(jù)進(jìn)行算術(shù)運(yùn)算,主要實(shí)現(xiàn)加、減、乘、除、取余等功能。常用的算術(shù)運(yùn)算符如表2-6所示。2.4.1算術(shù)運(yùn)算符表2-6算術(shù)運(yùn)算符2.4運(yùn)算符

使用算術(shù)運(yùn)算符時(shí)還需要注意:在進(jìn)行取余運(yùn)算時(shí),運(yùn)算結(jié)果的正負(fù)取決于“%”符號(hào)左邊的數(shù),如果“%”符號(hào)左邊的數(shù)是負(fù)數(shù),則整個(gè)取余的結(jié)果是負(fù)數(shù),與“%”符號(hào)右邊的數(shù)無關(guān)。例如,(-5)%3=-2,5%(-3)=2。2.4.1算術(shù)運(yùn)算符2.4運(yùn)算符

字符串運(yùn)算符用于字符串型數(shù)據(jù)之間進(jìn)行拼接。在JavaScript中使用符號(hào)“+”表示字符串運(yùn)算符。此時(shí)要注意和算術(shù)運(yùn)算符中的“+”區(qū)分,如果“+”兩邊有一個(gè)操作數(shù)是字符串型數(shù)據(jù),則“+”的作用就是拼接字符串;如果“+”兩邊都是數(shù)值型數(shù)據(jù),則“+”的作用就是做加法運(yùn)算。具體示例如下:2.4.2字符串運(yùn)算符2.4運(yùn)算符

和其他語言一樣,JavaScript語言也采用符號(hào)“=”作為賦值運(yùn)算符,賦值運(yùn)算符的作用是將賦值運(yùn)算符“=”右邊的表達(dá)式賦值給左邊的變量。賦值運(yùn)算符可以和其他運(yùn)算符構(gòu)成復(fù)合賦值運(yùn)算符。常用的賦值運(yùn)算符如表2-7所示。2.4.3賦值運(yùn)算符表2-7常用賦值運(yùn)算符2.4運(yùn)算符2.4.3賦值運(yùn)算符表2-7常用賦值運(yùn)算符2.4運(yùn)算符

比較運(yùn)算符用于對(duì)兩個(gè)操作數(shù)進(jìn)行比較,比較的結(jié)果是一個(gè)布爾類型的值,即true或false。在JavaScript中常用的比較運(yùn)算符如表2-8所示。2.4.4比較運(yùn)算符表2-8常用比較運(yùn)算符2.4運(yùn)算符

使用比較運(yùn)算符時(shí)需要注意一些問題:

(1)由于參與比較的操作數(shù)類型是任意的,所以在進(jìn)行不同類型數(shù)據(jù)比較時(shí),會(huì)先自動(dòng)將其轉(zhuǎn)換成相同類型的數(shù)據(jù)后再進(jìn)行比較。例如,字符串“24”和24進(jìn)行比較時(shí),先將字符串“24”自動(dòng)轉(zhuǎn)換成數(shù)值型,然后再與數(shù)值24進(jìn)行比較。

(2)字符串型數(shù)據(jù)進(jìn)行比較時(shí),會(huì)先從兩個(gè)字符串的第一個(gè)字符開始,按照ASCII碼值的大小進(jìn)行比較,如果第一個(gè)字符的ASCII碼值相等,則接著比較下一個(gè)字符,依此類推。如果每個(gè)字符的ASCII碼值都相等,則字符數(shù)多的字符串大于字符數(shù)少的字符串。2.4.4比較運(yùn)算符2.4運(yùn)算符

邏輯運(yùn)算符一般用于對(duì)布爾型的數(shù)據(jù)進(jìn)行邏輯運(yùn)算。邏輯運(yùn)算符共有三種:&&(邏輯與)、||(邏輯或)、!(邏輯非)。前兩種邏輯運(yùn)算符是雙目運(yùn)算符,邏輯非(!)是單目運(yùn)算符。邏輯運(yùn)算符的使用如表2-9所示。2.4.5邏輯運(yùn)算符表2-9邏輯運(yùn)算符2.4運(yùn)算符2.4.5邏輯運(yùn)算符

在使用邏輯運(yùn)算符時(shí),注意邏輯與和邏輯或短路情況。當(dāng)使用“&&”連接兩個(gè)表達(dá)式時(shí),只要左邊表達(dá)式的結(jié)果為false,則整個(gè)表達(dá)式的結(jié)果就為false,不需要再去計(jì)算右邊表達(dá)式的結(jié)果。當(dāng)使用“||”連接兩個(gè)表達(dá)式時(shí),只要左邊的表達(dá)式的結(jié)果為true,則整個(gè)表達(dá)式的結(jié)果就為true,不需要再去計(jì)算右邊表達(dá)式的結(jié)果。這種情況就是將右邊表達(dá)式短路,可以提高整個(gè)表達(dá)式的運(yùn)算速度。2.4運(yùn)算符

三元運(yùn)算符是JavaScript中唯一需要三個(gè)操作數(shù)的運(yùn)算符,具體語法格式如下:

如果條件表達(dá)式的值為真,則返回表達(dá)式1的執(zhí)行結(jié)果,如果條件表達(dá)式的值為假,則返回表達(dá)式2的執(zhí)行結(jié)果。用三元運(yùn)算符求兩個(gè)數(shù)中的最大數(shù)。

上述代碼中,當(dāng)用戶輸入兩個(gè)數(shù)后,程序如果判斷num1>num2條件成立,則返回num1的值賦值給max變量;如果判斷num1>num2條件不成立,則返回num2的值賦值給max變量,實(shí)現(xiàn)了求兩個(gè)數(shù)中的最大數(shù)。2.4.6三元運(yùn)算符2.4運(yùn)算符

位運(yùn)算符僅對(duì)數(shù)值型數(shù)據(jù)進(jìn)行運(yùn)算,將其操作數(shù)當(dāng)作32位的比特序列(由0和1組成),即把操作數(shù)轉(zhuǎn)換成二進(jìn)制形式,然后按位操作每一位上的數(shù)值。例如,十進(jìn)制數(shù)10,轉(zhuǎn)換成二進(jìn)制數(shù)為1010,位運(yùn)算符會(huì)對(duì)1010的每一位進(jìn)行運(yùn)算。位運(yùn)算符一共有7種,具體使用如表2-10所示。2.4.7位運(yùn)算符表2-10位運(yùn)算符2.4運(yùn)算符

1.按位與運(yùn)算符&

將參與按位與運(yùn)算的兩個(gè)操作數(shù)先轉(zhuǎn)換成二進(jìn)制數(shù),然后再對(duì)每一位進(jìn)行與操作。只有兩個(gè)二進(jìn)制位都為1,與的結(jié)果才為1,否則為0。例如,將十進(jìn)制數(shù)10和6進(jìn)行按位與運(yùn)算,10對(duì)應(yīng)的二進(jìn)制數(shù)是1010,6對(duì)應(yīng)的二進(jìn)制數(shù)是110,具體運(yùn)算過程如下:

運(yùn)算的二進(jìn)制結(jié)果為10,轉(zhuǎn)換成十進(jìn)制數(shù)就是2。2.4.7位運(yùn)算符2.4運(yùn)算符

2.按位或運(yùn)算符?

將參與按位或運(yùn)算的兩個(gè)操作數(shù)先轉(zhuǎn)換成二進(jìn)制數(shù),然后再對(duì)每一位進(jìn)行或操作。只要兩個(gè)二進(jìn)制位有一個(gè)為1,或的結(jié)果為1,否則為0。例如,將十進(jìn)制數(shù)10和6進(jìn)行按位或運(yùn)算,具體運(yùn)算過程如下:

運(yùn)算的二進(jìn)制結(jié)果為1110,轉(zhuǎn)換成十進(jìn)制數(shù)就是14。2.4.7位運(yùn)算符2.4運(yùn)算符

3.按位非運(yùn)算符~

將參與按位非運(yùn)算的操作數(shù)先轉(zhuǎn)換成二進(jìn)制數(shù),然后再對(duì)每一位進(jìn)行取反操作。如果該位是0,取反后則為1;如果是1,取反后則為0。例如,將十進(jìn)制數(shù)10進(jìn)行按位非操作,具體運(yùn)算過程如下:

運(yùn)算結(jié)果的最高位為1,表示取反后的數(shù)是負(fù)數(shù),由于負(fù)數(shù)在內(nèi)存中以補(bǔ)碼形式存儲(chǔ),要得到負(fù)數(shù)的原碼值,需要對(duì)補(bǔ)碼值進(jìn)行取反加1。2.4.7位運(yùn)算符2.4運(yùn)算符

3.按位非運(yùn)算符~

最后將原碼值轉(zhuǎn)換成十進(jìn)制數(shù)后,得到的結(jié)果是-11。2.4.7位運(yùn)算符2.4運(yùn)算符

4.按位異或運(yùn)算符^

將參與按位異或運(yùn)算的兩個(gè)操作數(shù)先轉(zhuǎn)換成二進(jìn)制數(shù),然后再對(duì)每一位進(jìn)行異或操作。如果二進(jìn)制位相同,則異或的結(jié)果為0,否則為1。例如,將十進(jìn)制數(shù)10和6進(jìn)行按位異或運(yùn)算,具體運(yùn)算過程如下:

運(yùn)算的二進(jìn)制結(jié)果為1100,轉(zhuǎn)換成十進(jìn)制數(shù)就是12。2.4.7位運(yùn)算符2.4運(yùn)算符

5.左移運(yùn)算符<<

進(jìn)行左移運(yùn)算時(shí),先將操作數(shù)轉(zhuǎn)換成二進(jìn)制數(shù),然后二進(jìn)制的每一位按指定位數(shù)左移,移動(dòng)過程中左邊超過32位的部分被舍棄,右邊補(bǔ)0。例如,將十進(jìn)制數(shù)10左移2位:

運(yùn)算的二進(jìn)制結(jié)果為101000,轉(zhuǎn)換成十進(jìn)制數(shù)就是40。2.4.7位運(yùn)算符2.4運(yùn)算符

6.右移運(yùn)算符>>

進(jìn)行右移運(yùn)算時(shí),先將操作數(shù)轉(zhuǎn)換成二進(jìn)制數(shù),然后二進(jìn)制的每一位按指定位數(shù)右移,移動(dòng)到右邊界之外的多余二進(jìn)制位會(huì)被舍棄,并從左邊界移入一個(gè)二進(jìn)制位。若原數(shù)的最高位為1,則移入的二進(jìn)制位為1,否則為0。例如,分別將十進(jìn)制數(shù)10和-10右移2位。

運(yùn)算的二進(jìn)制結(jié)果為0010,轉(zhuǎn)換成十進(jìn)制數(shù)就是2。整數(shù)的最高位是0,所以移動(dòng)過程中左邊補(bǔ)0。2.4.7位運(yùn)算符2.4運(yùn)算符

6.右移運(yùn)算符>>

-10移動(dòng)2位的過程有些復(fù)雜,因?yàn)樨?fù)數(shù)在內(nèi)存中是以補(bǔ)碼形式存在的,所以首先根據(jù)負(fù)數(shù)的原碼求出負(fù)數(shù)的補(bǔ)碼(原碼的符號(hào)位不變,其余位按位取反加1),然后保持符號(hào)位不變,其余位向右移動(dòng)2位,在移動(dòng)的過程中,高位補(bǔ)1。移位完成以后,保持符號(hào)位不變,其余位按位取反加1,得到移位后所對(duì)應(yīng)數(shù)的原碼,即為所求。具體示例如下:

運(yùn)算的二進(jìn)制結(jié)果為10000000000000000000000000000011,轉(zhuǎn)換成十進(jìn)制數(shù)就是-3。2.4.7位運(yùn)算符2.4運(yùn)算符

7.無符號(hào)右移運(yùn)算符>>>

進(jìn)行無符號(hào)右移運(yùn)算時(shí),先將操作數(shù)轉(zhuǎn)換成二進(jìn)制數(shù),然后二進(jìn)制數(shù)的每一位向右移動(dòng)指定的位數(shù),移動(dòng)到右邊界之外的多余二進(jìn)制位會(huì)被丟棄,并從左邊界移入0,不考慮操作數(shù)的正負(fù)。例如,分別將十進(jìn)制數(shù)10和-10無符號(hào)右移2位。

2.4.7位運(yùn)算符2.4運(yùn)算符

7.無符號(hào)右移運(yùn)算符>>>

運(yùn)算的二進(jìn)制結(jié)果轉(zhuǎn)換成十進(jìn)制數(shù)就是2。十進(jìn)制數(shù)-10無符號(hào)右移2位的過程如下:

運(yùn)算的二進(jìn)制結(jié)果為00111111111111111111111111111101,轉(zhuǎn)換成十進(jìn)制數(shù)就是1073741821。2.4.7位運(yùn)算符2.4運(yùn)算符

JavaScript運(yùn)算符有明確的優(yōu)先級(jí)和結(jié)合方向之分,如表2-11所示,表中運(yùn)算符按照優(yōu)先級(jí)從高到低排序。2.4.8運(yùn)算符優(yōu)先級(jí)表2-11運(yùn)算符的優(yōu)先級(jí)和結(jié)合方向2.4運(yùn)算符

優(yōu)先級(jí)高的運(yùn)算符比優(yōu)先級(jí)低的運(yùn)算符先執(zhí)行,在優(yōu)先級(jí)相同的情況下,要考慮運(yùn)算符的結(jié)合方向,結(jié)合方向從左往右的稱為左結(jié)合,從右往左的稱為右結(jié)合。下面通過一個(gè)示例演示運(yùn)算符的優(yōu)先級(jí)及結(jié)合方向。2.4.8運(yùn)算符優(yōu)先級(jí)

分析表達(dá)式的運(yùn)行過程:由于()的優(yōu)先級(jí)最高,先計(jì)算(1+2)的值為3,再計(jì)算10-3的值為7,接著判斷7<4,結(jié)果為false,對(duì)于邏輯運(yùn)算符&&而言,只要其左邊的表達(dá)式為false,則整個(gè)邏輯表達(dá)式的值就為false,因此,--num2被短路了,num2的值保持不變,最后num1+=false默認(rèn)會(huì)將布爾型值轉(zhuǎn)換成0,所以num1的值仍為2。2.5流程控制語句

程序設(shè)計(jì)過程中除了順序執(zhí)行每行代碼外,還可以通過其他語句改變程序的執(zhí)行流程。JavaScript語言中有三大流程控制語句,分別是順序語句、選擇語句、循環(huán)語句。順序語句自上而下依次執(zhí)行程序中的每行代碼,前面接觸的JavaScript代碼都是順序語句。選擇語句和循環(huán)語句可以改變程序的執(zhí)行流程,接下來會(huì)對(duì)這兩種語句進(jìn)行詳細(xì)的介紹。流程控制語句順序語句選擇語句循環(huán)語句2.5流程控制語句

在程序設(shè)計(jì)過程中會(huì)根據(jù)不同的情況做出判斷,來選擇執(zhí)行不同的操作。常用的選擇語句有單分支語句(if)、雙分支語句(if...else)和多分支語句(if...elseif...else和switch-case)。2.5.1選擇語句

1.單分支語句

單分支語句就是當(dāng)滿足某個(gè)條件時(shí)就執(zhí)行該語句組,否則不執(zhí)行該語句組。用簡單的if語句可以實(shí)現(xiàn)單分支選擇結(jié)構(gòu)。其程序流程圖如圖2-5所示。圖2-5單分支流程圖2.5流程控制語句

1.單分支語句

if語句的一般格式為2.5.1選擇語句

說明:小括號(hào)中的判斷條件為true時(shí),執(zhí)行語句組,否則,跳過語句組往下執(zhí)行代碼。當(dāng)語句組中只有一條語句時(shí),可以省略{}。2.5流程控制語句

1.單分支語句

【例2-1】輸出整數(shù)的絕對(duì)值。2.5.1選擇語句2.5流程控制語句

2.雙分支語句

雙分支語句就是根據(jù)判斷條件來選擇執(zhí)行兩個(gè)分支語句中的哪一個(gè),雙分支語句由if...else語句構(gòu)成。其程序流程圖如圖2-6所示。2.5.1選擇語句圖2-6雙分支流程圖2.5流程控制語句

2.雙分支語句

if...else語句的一般格式為2.5.1選擇語句

說明:小括號(hào)中的判斷條件為true時(shí),則執(zhí)行語句組1中的代碼,否則執(zhí)行語句組2中的代碼。2.5流程控制語句

2.雙分支語句

【例2-2】輸出兩個(gè)整數(shù)中較大的數(shù)。2.5.1選擇語句2.5流程控制語句

3.多分支語句

在實(shí)際處理問題的過程中,除了單分支和雙分支語句,還會(huì)遇到多分支語句。多分支語句就是根據(jù)判斷條件來選擇執(zhí)行多個(gè)分支中的某一個(gè),常用的多分支語句有if...else

if...else語句、switch-case語句。

2.5.1選擇語句圖2-7

if...else

if...else多分支流程圖

(1)if...elseif...else語句。其程序流程圖如圖2-7所示。2.5流程控制語句

3.多分支語句

其一般格式為2.5.1選擇語句

說明:此語句中可出現(xiàn)多個(gè)else

if條件判斷,如果所有的小括號(hào)中的判斷條件都為false,則執(zhí)行else中的語句組n。有時(shí)else語句可以不書寫,根據(jù)具體情況決定是否需要else語句。2.5流程控制語句

3.多分支語句

【例2-3】成績等級(jí)輸出。如果用戶輸入的分?jǐn)?shù)為90~100輸出“優(yōu)秀”,80~90輸出“良好”,70~80輸出“中等”,60~70輸出“及格”,60分以下輸出“不及格”。

2.5.1選擇語句2.5流程控制語句

3.多分支語句

(2)switch-case語句。switch-case語句也可以實(shí)現(xiàn)多分支功能,它比if...elseif...else語句的可讀性要好,但是它只能用于定值判斷,而if...elseif...else語句可以用于定值和區(qū)間段的判斷。switch-case語句的程序流程圖如圖2-8所示。

2.5.1選擇語句圖2-8switch-case多分支流程圖2.5流程控制語句

3.多分支語句

switch-case語句的一般格式為

2.5.1選擇語句

說明:將表達(dá)式的值與所有的case后的值進(jìn)行比較,如果與某個(gè)case后的值相等,則執(zhí)行case后的對(duì)應(yīng)語句組,遇到break后跳出switch語句;如果沒有匹配到任何一個(gè)case后的值,則默認(rèn)執(zhí)行default后的語句組。default不是必選項(xiàng),可根據(jù)需要進(jìn)行添加或刪除。2.5流程控制語句

3.多分支語句

【例2-4】判斷當(dāng)前日期是星期幾。

2.5.1選擇語句2.5流程控制語句

循環(huán)語句就是反復(fù)執(zhí)行程序中的一段代碼。循環(huán)必須具備以下兩個(gè)因素:

(1)在一定條件下,重復(fù)執(zhí)行一段代碼;

(2)包含讓循環(huán)趨于終止的條件。

JavaScript語言中常用的循環(huán)語句有while循環(huán)語句、do...while循環(huán)語句、for循環(huán)語句。2.5.2循環(huán)語句2.5流程控制語句

1.while循環(huán)語句

while循環(huán)語句先判斷條件是否成立,再?zèng)Q定是否執(zhí)行代碼。while循環(huán)的程序流程圖如圖2-9所示。2.5.2循環(huán)語句圖2-9while循環(huán)流程圖2.5流程控制語句

1.while循環(huán)語句

while循環(huán)語句的一般格式為

while循環(huán)的執(zhí)行過程:當(dāng)表達(dá)式的值為true時(shí),執(zhí)行循環(huán)語句;當(dāng)表達(dá)式的值為false時(shí),跳出循環(huán),繼續(xù)執(zhí)行循環(huán)后面的語句。如果循環(huán)條件一直為true,則稱該循環(huán)為死循環(huán)。需要注意的是,退出循環(huán)有兩種情況:

(1)while循環(huán)的表達(dá)式為false。

(2)通過循環(huán)語句(循環(huán)體)中的break關(guān)鍵字退出循環(huán)。2.5.2循環(huán)語句2.5流程控制語句

1.while循環(huán)語句

【例2-5】輸出10遍“我愛祖國”。

程序運(yùn)行結(jié)果如圖2-10所示。注意上述代碼中的i++非常重要,如果沒有書寫該語句,while循環(huán)會(huì)成為死循環(huán)。2.5.2循環(huán)語句圖2-10輸出10遍“我愛祖國”2.5流程控制語句

1.while循環(huán)語句

【例2-6】求1+2+3+...+10的和。2.5.2循環(huán)語句2.5流程控制語句

2.do...while循環(huán)語句

do...while循環(huán)語句和while循環(huán)語句的功能一樣,都是滿足條件就重復(fù)執(zhí)行代碼,但是它們的區(qū)別在于do...while語句是先執(zhí)行一遍代碼,然后再判斷條件,而while語句是先判斷條件是否成立,再執(zhí)行代碼。do...while循環(huán)的程序流程圖如圖2-11所示。2.5.2循環(huán)語句圖2-11do...while循環(huán)流程圖2.5流程控制語句

2.do...while循環(huán)語句

do...while循環(huán)語句的一般格式為

do...while循環(huán)的執(zhí)行過程:先執(zhí)行一次循環(huán)語句,再判斷表達(dá)式的值。如果表達(dá)式的值為true,則執(zhí)行循環(huán)語句,否則,跳出循環(huán),繼續(xù)執(zhí)行循環(huán)后面的語句。這里需要注意,不管表達(dá)式是否成立,do...while語句至少執(zhí)行一次循環(huán)語句。用do...while語句實(shí)現(xiàn)輸出大于0的數(shù)時(shí),如果初始值是負(fù)數(shù),循環(huán)體至少執(zhí)行一次,會(huì)2.5.2循環(huán)語句2.5流程控制語句

2.do...while循環(huán)語句

用do...while語句實(shí)現(xiàn)輸出大于0的數(shù)時(shí),如果初始值是負(fù)數(shù),循環(huán)體至少執(zhí)行一次,會(huì)產(chǎn)生錯(cuò)誤輸出,示例如下:2.5.2循環(huán)語句2.5流程控制語句

2.do...while循環(huán)語句

程序運(yùn)行結(jié)果如圖2-12所示。從上述代碼中可以看到循環(huán)條件是num>0時(shí),才輸出num的值,但是用do...while語句會(huì)先無條件輸出一遍num的值,所以在程序設(shè)計(jì)中要選擇合適的循環(huán)語句。2.5.2循環(huán)語句圖2-12

輸出結(jié)果2.5流程控制語句

2.do...while循環(huán)語句

用do...while語句也可以實(shí)現(xiàn)求1+2+3+...+10的和,代碼如下:2.5.2循環(huán)語句2.5流程控制語句

3.for循環(huán)語句

for循環(huán)語句一般用于循環(huán)次數(shù)已知的情況,某些情況下for循環(huán)語句可以和while語句、do...while語句通用。for循環(huán)的程序流程圖如圖2-13所示。2.5.2循環(huán)語句圖2-13

for循環(huán)流程圖2.5流程控制語句

3.for循環(huán)語句

for循環(huán)語句的一般格式為2.5.2循環(huán)語句

說明:

(1)初始化表達(dá)式用來初始化循環(huán)變量。

(2)條件表達(dá)式給出循環(huán)條件,控制循環(huán)繼續(xù)或者結(jié)束。

(3)迭代表達(dá)式改變循環(huán)變量的值,從而使循環(huán)趨于結(jié)束。

當(dāng)for循環(huán)中的三個(gè)表達(dá)式都為空時(shí),表示循環(huán)為死循環(huán),可以在循環(huán)體中使用break關(guān)鍵字跳出循環(huán)。2.5流程控制語句

3.for循環(huán)語句

用for循環(huán)輸出1+2+3+...+10的和,代碼如下:2.5.2循環(huán)語句2.5流程控制語句

4.循環(huán)語句嵌套

循環(huán)語句嵌套是指一個(gè)循環(huán)語句中又包含了另一個(gè)完整的循環(huán)語句。上述三種循環(huán)語句可以嵌套自身,也可以互相嵌套。例如,for循環(huán)中可以嵌套for循環(huán),也可以嵌套while循環(huán)。循環(huán)嵌套的層數(shù)沒有限制,常用的循環(huán)嵌套為雙層或者三層。

【例2-7】用循環(huán)嵌套實(shí)現(xiàn)輸出直角三角形。2.5.2循環(huán)語句2.5流程控制語句

4.循環(huán)語句嵌套

程序運(yùn)行結(jié)果如圖2-14所示,通過雙層for循環(huán)實(shí)現(xiàn)了直角三角形的輸出。2.5.2循環(huán)語句圖2-14

輸出直角三角形2.5流程控制語句

跳轉(zhuǎn)語句常用于實(shí)現(xiàn)程序執(zhí)行過程中流程的跳轉(zhuǎn),跳轉(zhuǎn)語句有break和continue。break在選擇語句switch-case中出現(xiàn)過,它的作用是跳出選擇語句。同理,break用于循環(huán)語句中,它的作用是跳出循環(huán)語句,執(zhí)行循環(huán)語句后面的語句。continue語句只能用于循環(huán)語句中,它的作用是結(jié)束本次循環(huán),回到循環(huán)條件去判斷下次循環(huán)是否繼續(xù)。

下面通過示例來展示break語句和continue語句的區(qū)別。2.5.3跳轉(zhuǎn)語句2.5流程控制語句

兩段代碼分別運(yùn)行后,得到的運(yùn)行結(jié)果如圖2-15所示。2.5.3跳轉(zhuǎn)語句圖2-15跳轉(zhuǎn)語句break和continue的輸出結(jié)果任務(wù)實(shí)施

用JavaScript輸出九九乘法表的代碼如下:任務(wù)實(shí)施

用JavaScript輸出九九乘法表的代碼如下:任務(wù)實(shí)施

通過瀏覽器測試,運(yùn)行結(jié)果如圖2-16所示。圖2-16九九乘法表模塊小結(jié)

本模塊主要介紹了JavaScript的基本語法,涵蓋的主要內(nèi)容如下:

(1)JavaScript中的基礎(chǔ)語法知識(shí),包括標(biāo)識(shí)符和變量的命名、聲明、使用與賦值。

(2)JavaScript數(shù)據(jù)類型的分類、檢測與轉(zhuǎn)換。

(3)JavaScript的表達(dá)式、7種運(yùn)算符及運(yùn)算符的優(yōu)先級(jí)和結(jié)合方向。

(4)JavaScript中常用的3種流程控制語句,即順序語句、選擇語句和循環(huán)語句。THANKYOU謝

謝數(shù)

組3CHAPTER學(xué)習(xí)目標(biāo)(1)掌握數(shù)組的創(chuàng)建方法。(2)掌握數(shù)組的基本操作。(3)掌握數(shù)組的屬性和常用方法。任務(wù)描述

制作一個(gè)簡單的網(wǎng)頁,實(shí)現(xiàn)高等院校系部查詢功能。通過該網(wǎng)頁,用戶可以查詢到全國各大高校名稱及其院系分布情況。當(dāng)用戶在高校下拉列表中選擇某所高校后,其后面的學(xué)院下拉列表會(huì)自動(dòng)獲取該校中的所有學(xué)院,當(dāng)用戶選擇某個(gè)學(xué)院后,其后面的系部下拉列表會(huì)自動(dòng)獲取該學(xué)院中的所有系部,實(shí)現(xiàn)了高校、學(xué)院、系部的三級(jí)聯(lián)動(dòng)。

分析:首先,在HTML上要使用三個(gè)下拉菜單分別實(shí)現(xiàn)高校、學(xué)院、系部名稱的顯示。其次,要采用數(shù)組來存儲(chǔ)名稱信息,方便代碼的維護(hù)?？紤]到高校、學(xué)院、系部內(nèi)部的對(duì)應(yīng)關(guān)系,分別采用一維數(shù)組、二維數(shù)組和三維數(shù)組存儲(chǔ)對(duì)應(yīng)信息。最后,實(shí)現(xiàn)高校、學(xué)院、系部的三級(jí)聯(lián)動(dòng)功能,即選擇高校名后,自動(dòng)生成對(duì)應(yīng)的學(xué)院下拉菜單,選擇學(xué)院名后,自動(dòng)生成對(duì)應(yīng)的系部下拉菜單。這里要注意一個(gè)細(xì)節(jié)問題:修改高校名后,要更新系部下拉菜單,否則其顯示的仍是前一個(gè)高校的系部,會(huì)產(chǎn)生頁面錯(cuò)亂顯示的現(xiàn)象。任務(wù)準(zhǔn)備

要完成高等院校系部查詢?nèi)蝿?wù),需要掌握如下知識(shí):

(1)一維數(shù)組的用法。

(2)二維數(shù)組的用法。

(3)下拉列表框select的使用。3.1數(shù)組介紹

數(shù)組和普通變量一樣,都是用來存儲(chǔ)數(shù)據(jù)的,兩者的區(qū)別在于普通變量只能存儲(chǔ)一個(gè)數(shù)據(jù),而數(shù)組可以存儲(chǔ)多個(gè)數(shù)據(jù)。數(shù)組是一組數(shù)據(jù)的集合,可以在數(shù)組中存儲(chǔ)任意類型的多個(gè)數(shù)據(jù),如字符串型、數(shù)值型、布爾型等。數(shù)組中的每個(gè)數(shù)據(jù)稱為數(shù)組的元素,獲取數(shù)組中的每個(gè)元素的值需要通過索引值訪問,該索引值也稱為“數(shù)組的下標(biāo)”。數(shù)組的下標(biāo)從0開始,到數(shù)組元素個(gè)數(shù)-1結(jié)束,數(shù)組的下標(biāo)和數(shù)組元素一一對(duì)應(yīng)。因此,使用數(shù)組可以方便地進(jìn)行批量數(shù)據(jù)的處理。數(shù)組的下標(biāo)和元素的關(guān)系如圖3-1所示。圖3-1數(shù)組的下標(biāo)和數(shù)組元素對(duì)應(yīng)關(guān)系

JavaScript中數(shù)組可以分為一維數(shù)組、二維數(shù)組和多維數(shù)組等。一維數(shù)組的存儲(chǔ)是線性的,其存儲(chǔ)的元素是非數(shù)組類型的數(shù)據(jù)。二維數(shù)組存儲(chǔ)的元素是一維數(shù)組,由此類推,三維數(shù)組中存儲(chǔ)的元素是二維數(shù)組,n維數(shù)組中存儲(chǔ)的元素是n-1維數(shù)組?？筛鶕?jù)程序設(shè)計(jì)需求選擇合適的數(shù)組。3.2數(shù)組創(chuàng)建

數(shù)組是一種對(duì)象,可以使用new關(guān)鍵字和Array()函數(shù)來創(chuàng)建一個(gè)數(shù)組,也可以使用[](字面值定義法)創(chuàng)建數(shù)組。下面介紹四種創(chuàng)建數(shù)組的方法。

1.聲明空數(shù)組

使用Array()函數(shù)不帶參數(shù)的構(gòu)造函數(shù)可以聲明一個(gè)空數(shù)組,在后續(xù)添加數(shù)組元素。其語法格式如下:其中,arrayName是數(shù)組名,數(shù)組名和變量名一樣,要滿足標(biāo)識(shí)符的命名規(guī)范。3.2數(shù)組創(chuàng)建

例如,創(chuàng)建一個(gè)空數(shù)組,然后向數(shù)組中添加元素。在上述代碼中,首先創(chuàng)建了一個(gè)空數(shù)組,此時(shí)數(shù)組中元素個(gè)數(shù)為0，即數(shù)組的長度為0。在為數(shù)組賦值后,數(shù)組中含有3個(gè)元素,此時(shí)數(shù)組的長度為3。與其他語言不同的是,JavaScript中數(shù)組的長度是可變的。3.2數(shù)組創(chuàng)建

2.聲明指定長度的數(shù)組

在聲明數(shù)組時(shí)可以指定數(shù)組的長度,使用Array()函數(shù)帶參數(shù)的構(gòu)造函數(shù)可以聲明一個(gè)指定長度的數(shù)組,但是沒有給數(shù)組元素賦值,所有的元素值是undefined。其語法格式如下:

其中,arrayName是數(shù)組名,size是數(shù)組的長度,數(shù)組的下標(biāo)取值范圍是從0到size-1。

例如,創(chuàng)建一個(gè)長度為3的數(shù)組,然后向數(shù)組中存儲(chǔ)數(shù)據(jù)。

3.2數(shù)組創(chuàng)建

3.聲明指定元素內(nèi)容的數(shù)組

如果在聲明數(shù)組時(shí)知道要給數(shù)組賦哪些初值,此時(shí)可以在聲明數(shù)組時(shí)指定各個(gè)元素的值。其語法格式如下:

其中,arrayName是數(shù)組名,數(shù)組名的定義要滿足標(biāo)識(shí)符的命名規(guī)范。value1、value2、value3...就是存入數(shù)組中的元素,數(shù)組的長度等于數(shù)組元素的個(gè)數(shù)。

例如,創(chuàng)建數(shù)組的同時(shí)存入數(shù)組元素的初始值。3.2數(shù)組創(chuàng)建

4.使用字面值聲明數(shù)組

上述3種方式都是采用Array()函數(shù)聲明數(shù)組,除此之外,還可以采用字面值聲明數(shù)組,即使用中括號(hào)[]來聲明一個(gè)數(shù)組。這種聲明數(shù)組的方式寫法更為簡潔,其語法格式如下:

其中,arrayName是數(shù)組名,如果中括號(hào)[]中沒有內(nèi)容,則表示聲明了一個(gè)空數(shù)組,如果中括號(hào)[]中存放了數(shù)據(jù),則指定了數(shù)組元素的值。

例如,使用字面值來創(chuàng)建數(shù)組。

可以看到上述arr3數(shù)組中的元素可以包含空存儲(chǔ)位置,而使用Array()函數(shù)則不可以,否則會(huì)報(bào)錯(cuò),這是兩者的區(qū)別。3.3數(shù)組的基本操作

數(shù)組是一組數(shù)據(jù)的集合,對(duì)數(shù)組的操作就是對(duì)數(shù)組元素的操作,數(shù)組的基本操作包括訪問、遍歷、增加、修改及刪除數(shù)組元素。數(shù)組的基本操作訪問遍歷修改刪除3.3數(shù)組的基本操作

前面說過數(shù)組中元素的個(gè)數(shù)就是數(shù)組的長度。JavaScript中可以通過length屬性獲取數(shù)組的長度值。

上述代碼中,數(shù)組arr1中包含5個(gè)數(shù)組元素,故length屬性值為5。數(shù)組arr2中包含的空存儲(chǔ)位置也計(jì)算到數(shù)組的長度中,所以length屬性值為6。3.3.1數(shù)組長度3.3數(shù)組的基本操作

除了可以讀取數(shù)組的長度之外,也可以修改數(shù)組的長度。

從上述代碼可以看出,修改數(shù)組的長度后,如果修改后的數(shù)組長度比原來的長度值要小,則只會(huì)保留修改后長度的數(shù)組元素個(gè)數(shù),如數(shù)組arr1的數(shù)組長度改為2,