《基于任務(wù)驅(qū)動(dòng)模式的JavaScript程序設(shè)計(jì)案例教程》課件第2章

第2章JavaScript語(yǔ)言基礎(chǔ)2.1概述

2.2運(yùn)算符

2.3核心語(yǔ)句

2.4函數(shù)

2.1概述

JavaScript腳本語(yǔ)言作為一門(mén)功能強(qiáng)大、使用范圍較廣的程序語(yǔ)言，其語(yǔ)言基礎(chǔ)包括數(shù)據(jù)類(lèi)型、變量、運(yùn)算符、函數(shù)以及核心語(yǔ)句等內(nèi)容。本章主要介紹JavaScript腳本語(yǔ)言的基礎(chǔ)知識(shí)，帶領(lǐng)讀者領(lǐng)略JavaScript腳本語(yǔ)言的精妙之處，并為后續(xù)章節(jié)的深入學(xué)習(xí)打下堅(jiān)實(shí)的基礎(chǔ)。

2.2運(yùn)算符

編寫(xiě)JavaScript腳本代碼過(guò)程中，對(duì)目標(biāo)數(shù)據(jù)進(jìn)行運(yùn)算操作需用到運(yùn)算符。JavaScript腳本語(yǔ)言支持的運(yùn)算符包括：賦值運(yùn)算符、基本數(shù)學(xué)運(yùn)算符、自加和自減、比較運(yùn)算符、邏輯運(yùn)算符、?…：運(yùn)算符以及typedof運(yùn)算符等，下面將分別予以介紹。

2.2.1賦值運(yùn)算符

常用的JavaScript腳本語(yǔ)言的賦值運(yùn)算符包含“=”、“+=”、“-=”、“*=”、“/=”、“%=”，匯總?cè)绫?-1所示。表2-12.2.2基本數(shù)學(xué)運(yùn)算符

JavaScript腳本語(yǔ)言中基本的數(shù)學(xué)運(yùn)算包括加、減、乘、除以及取余等，其對(duì)應(yīng)的數(shù)學(xué)運(yùn)算符分別為“+”、“－”、“*”、“/”和“%”等，如表2-2所示。表2-22.2.3自加和自減

自加運(yùn)算符“++”和自減運(yùn)算符“－－”分別將操作數(shù)加1或減1。值得注意的是，自加和自減運(yùn)算符放置在操作數(shù)的前面和后面含義不同。運(yùn)算符寫(xiě)在變量名前面，則返回值為自加或自減前的值；而寫(xiě)在后面，則返回值為自加或自減后的值。參考如下測(cè)試代碼：程序運(yùn)行后，效果如圖2-1所示。圖2-1由程序運(yùn)行結(jié)果可以看出：

(1)若自加(或自減)運(yùn)算符放置在操作數(shù)之后，執(zhí)行該自加(或自減)操作時(shí)，先將操作數(shù)的值賦值給運(yùn)算符前面的變量，然后操作數(shù)自加(或自減)；

(2)若自加(或自減)運(yùn)算符放置在操作數(shù)之前，執(zhí)行該自加(或自減)操作時(shí)，操作數(shù)先進(jìn)行自加(或自減)，然后將操作數(shù)的值賦值給運(yùn)算符前面的變量。2.2.4比較運(yùn)算符

JavaScript腳本語(yǔ)言中用于比較兩個(gè)數(shù)據(jù)的運(yùn)算符稱(chēng)為比較運(yùn)算符，包括“==”、“!=”、“>”、“<”、“<=”、“>=”等，其具體作用見(jiàn)表2-3。表2-3程序運(yùn)行后，在原始頁(yè)面中單擊“運(yùn)算符測(cè)試”按鈕，將彈出提示框提示用戶(hù)輸入相關(guān)信息，如圖2-2所示。圖2-2在上述提示框中輸入相關(guān)信息(如年齡35)后，單擊“確定”按鈕，彈出警告框如圖2-3所示。

可以看出，腳本代碼采集用戶(hù)輸入的數(shù)值，然后通過(guò)比較運(yùn)算符進(jìn)行判定，再做出相對(duì)應(yīng)的操作，實(shí)現(xiàn)了程序流程的有效控制。圖2-32.2.5邏輯運(yùn)算符

JavaScript腳本語(yǔ)言的邏輯運(yùn)算符包括“&&”、“||”和“!”等，用于兩個(gè)邏輯型數(shù)據(jù)之間的操作，返回值的數(shù)據(jù)類(lèi)型為布爾型。邏輯運(yùn)算符的功能如表2-4所示。表2-42.2.6?…：運(yùn)算符

在JavaScript腳本語(yǔ)言中，“?…：”運(yùn)算符用于創(chuàng)建條件分支。在動(dòng)作較為簡(jiǎn)單的情況下，較之if…else語(yǔ)句更加簡(jiǎn)便，其語(yǔ)法結(jié)構(gòu)如下：

程序運(yùn)行后，頁(yè)面中彈出提示框提示用戶(hù)輸入年齡，并根據(jù)輸入值決定后續(xù)操作。例如在提示框中輸入整數(shù)17，然后單擊“確定”按鈕，則彈出警告框如圖2-4所示。圖2-4若在提示框中輸入整數(shù)24，然后單擊“確定”按鈕，則彈出警告框如圖2-5所示。圖2-52.2.7typeof運(yùn)算符

typeof運(yùn)算符用于表明操作數(shù)的數(shù)據(jù)類(lèi)型，返回?cái)?shù)值類(lèi)型為一個(gè)字符串。在JavaScript腳本語(yǔ)言中，其使用格式如下：

考察如下實(shí)例：程序運(yùn)行后，出現(xiàn)如圖2-6所示頁(yè)面。圖2-6可以看出，使用關(guān)鍵字var定義變量時(shí)，若不指定其初始值，則變量的數(shù)據(jù)類(lèi)型默認(rèn)為undefined。同時(shí)，若在程序執(zhí)行過(guò)程中，變量被賦予其他隱性包含特定數(shù)據(jù)類(lèi)型的數(shù)值時(shí)，其數(shù)據(jù)類(lèi)型也隨之發(fā)生更改。

2.3核心語(yǔ)句

2.3.1基本處理流程

基本處理流程就是對(duì)數(shù)據(jù)結(jié)構(gòu)的處理流程。在JavaScript里，基本的處理流程包含三種結(jié)構(gòu)，即順序結(jié)構(gòu)、選擇結(jié)構(gòu)和循環(huán)結(jié)構(gòu)。

順序結(jié)構(gòu)即按照語(yǔ)句出現(xiàn)的先后順序依次執(zhí)行，是JavaScript腳本程序中最基本的結(jié)構(gòu)，如圖2-7所示。圖2-7選擇結(jié)構(gòu)按照給定的邏輯條件來(lái)決定執(zhí)行順序，可以分為單向選擇、雙向選擇和多向選擇。但無(wú)論是單向選擇還是多向選擇，程序在執(zhí)行過(guò)程中都只能執(zhí)行其中一條分支。單向選擇和雙向選擇結(jié)構(gòu)分別如圖2-8(a)、(b)所示。(a)(b)圖2-8循環(huán)結(jié)構(gòu)根據(jù)代碼的邏輯條件來(lái)判斷是否重復(fù)執(zhí)行某一段程序。若邏輯條件為true，則重復(fù)執(zhí)行，即進(jìn)入循環(huán)，否則結(jié)束循環(huán)。循環(huán)結(jié)構(gòu)可分為條件循環(huán)和計(jì)數(shù)循環(huán)，分別如圖2-9(a)、(b)所示。(a)(b)圖2-9一般而言，在JavaScript腳本語(yǔ)言中，程序總體是按照順序結(jié)構(gòu)執(zhí)行的，而在順序結(jié)構(gòu)中可以包含選擇結(jié)構(gòu)和循環(huán)結(jié)構(gòu)。

2.3.2if條件假設(shè)語(yǔ)句

if條件假設(shè)語(yǔ)句是比較簡(jiǎn)單的一種選擇結(jié)構(gòu)語(yǔ)句，若給定的邏輯條件表達(dá)式為真，則執(zhí)行一組給定的語(yǔ)句。其基本結(jié)構(gòu)如下：當(dāng)邏輯條件表達(dá)式conditions運(yùn)算結(jié)果為真時(shí)，執(zhí)行statement1語(yǔ)句(或語(yǔ)句塊)，否則執(zhí)行statement2語(yǔ)句(或語(yǔ)句塊)。

if(或if…else)結(jié)構(gòu)可以嵌套使用來(lái)表示所示條件的一種層次結(jié)構(gòu)關(guān)系。值得注意的是，嵌套時(shí)應(yīng)重點(diǎn)考慮各邏輯條件表達(dá)式所表示的范圍。2.3.3switch流程控制語(yǔ)句

在if條件假設(shè)語(yǔ)句中，邏輯條件只能有一個(gè)，如果有多個(gè)條件，可以使用嵌套的if語(yǔ)句來(lái)解決，但此種方法會(huì)增加程序的復(fù)雜度，降低程序的可讀性。若使用switch流程控制語(yǔ)句就可完美地解決此問(wèn)題，其基本結(jié)構(gòu)如下：圖2-102.3.4for循環(huán)語(yǔ)句

for循環(huán)語(yǔ)句是循環(huán)結(jié)構(gòu)語(yǔ)句，按照指定的循環(huán)次數(shù)，循環(huán)執(zhí)行循環(huán)體內(nèi)語(yǔ)句(或語(yǔ)句塊)，其基本結(jié)構(gòu)如下：

testcondition為控制循環(huán)結(jié)束與否的條件表達(dá)式，程序每執(zhí)行完一次循環(huán)體內(nèi)語(yǔ)句(或語(yǔ)句塊)，均要計(jì)算該表達(dá)式是否為真，若結(jié)果為真，則繼續(xù)執(zhí)行下一次循環(huán)體內(nèi)語(yǔ)句(或語(yǔ)句塊)，若結(jié)果為假，則跳出循環(huán)體。

altercondition指循環(huán)變量更新的方式，程序每執(zhí)行完一次循環(huán)體內(nèi)語(yǔ)句(或語(yǔ)句塊)，均需要更新循環(huán)變量。

上述循環(huán)控制參數(shù)之間使用分號(hào)“;”間隔開(kāi)來(lái)。

考察如下的測(cè)試函數(shù)：圖2-112.3.5while和do…while循環(huán)語(yǔ)句

while語(yǔ)句與if語(yǔ)句相似，均能夠有條件地控制語(yǔ)句(或語(yǔ)句塊)的執(zhí)行，其語(yǔ)言結(jié)構(gòu)如下：2.3.6使用break和continue進(jìn)行循壞控制

在循環(huán)語(yǔ)句中，某些情況下需要跳出循環(huán)或者跳過(guò)循環(huán)體內(nèi)剩余語(yǔ)句，而直接執(zhí)行下一次循環(huán)，此時(shí)需要通過(guò)break和continue語(yǔ)句來(lái)實(shí)現(xiàn)。break語(yǔ)句的作用是立即跳出循環(huán)，continue語(yǔ)句的作用是停止正在進(jìn)行的循環(huán)，而直接進(jìn)入下一次循環(huán)?？疾烊缦聹y(cè)試代碼：圖2-12從圖2-12的結(jié)果可以看出：

當(dāng)n=3時(shí)，?跳出當(dāng)前循環(huán)而直接進(jìn)行下一個(gè)循環(huán)，故iArray[3]不進(jìn)行顯示；

當(dāng)n=6時(shí)，直接跳出while循環(huán)，不再執(zhí)行余下的循環(huán)，故iArray[5]之后的數(shù)組元素不再進(jìn)行顯示。

在編寫(xiě)JavaScript腳本代碼過(guò)程中，應(yīng)根據(jù)實(shí)際需要來(lái)選擇使用哪一種循環(huán)語(yǔ)句，并確保在使用了循環(huán)控制語(yǔ)句continue和break后，循環(huán)不出現(xiàn)任何差錯(cuò)。 2.4函數(shù)

2.4.1函數(shù)的基本組成

函數(shù)由函數(shù)定義和函數(shù)調(diào)用兩部分組成。為養(yǎng)成良好的編程習(xí)慣，應(yīng)首先定義函數(shù)，然后再進(jìn)行調(diào)用。

函數(shù)的定義應(yīng)使用關(guān)鍵字function，其語(yǔ)法規(guī)則如下：函數(shù)的各部分含義如下：

funcName為函數(shù)名，函數(shù)名可由開(kāi)發(fā)者自行定義，與變量的命名規(guī)則基本相同。

parameters為函數(shù)的參數(shù)，在調(diào)用目標(biāo)函數(shù)時(shí)，需將實(shí)際數(shù)據(jù)傳遞給參數(shù)列表以完成函數(shù)特定的功能。參數(shù)列表中可定義一個(gè)或多個(gè)參數(shù)，各參數(shù)之間加“,”分隔開(kāi)來(lái)。當(dāng)然，參數(shù)列表也可為空。

statements是函數(shù)體，規(guī)定了函數(shù)的功能，本質(zhì)上相當(dāng)于一個(gè)腳本程序。

return指定函數(shù)的返回值，是可選參數(shù)。自定義函數(shù)一般放置在HTML文檔的<head>和</head>標(biāo)記對(duì)之間。除了自定義函數(shù)外，JavaScript腳本語(yǔ)言提供大量的內(nèi)建函數(shù)，無(wú)需開(kāi)發(fā)者定義即可直接調(diào)用，例如Window對(duì)象的alert()方法即為JavaScript腳本語(yǔ)言支持的內(nèi)建函數(shù)。

函數(shù)定義過(guò)程結(jié)束后，可在文檔中任意位置調(diào)用該函數(shù)。引用目標(biāo)函數(shù)時(shí)，只需在函數(shù)名后加上小括號(hào)即可。若目標(biāo)函數(shù)需引入?yún)?shù)，則需在小括號(hào)內(nèi)添加傳遞參數(shù)。如果函數(shù)有返回值，可將最終結(jié)果賦值給一個(gè)自定義的變量并用關(guān)鍵字return返回?？疾烊缦聹y(cè)試代碼：程序運(yùn)行后，在原始頁(yè)面單擊“點(diǎn)擊這里”按鈕，彈出警告框如圖2-13所示。

如果函數(shù)中引用的外部函數(shù)較多或函數(shù)的功能很復(fù)雜，勢(shì)必導(dǎo)致函數(shù)代碼過(guò)長(zhǎng)而降低腳本代碼可讀性，違反了開(kāi)發(fā)者使用函數(shù)實(shí)現(xiàn)特定功能的初衷。因此，在編寫(xiě)函數(shù)時(shí)，應(yīng)盡量保持函數(shù)功能的單一性，使腳本代碼結(jié)構(gòu)清晰、簡(jiǎn)單易懂。圖2-132.4.2全局函數(shù)

JavaScript腳本語(yǔ)言提供了很多全局(內(nèi)建)函數(shù)，在腳本編程過(guò)程中可直接調(diào)用。在此介紹四種簡(jiǎn)單的全局函數(shù)：parseInt()、parseFloat()、escape()和unescape()。

parseInt()函數(shù)的作用是將字符串轉(zhuǎn)換為整數(shù)；parseFloat()函數(shù)的作用是將字符串轉(zhuǎn)換為浮點(diǎn)數(shù)；escape()函數(shù)的作用是將一些特殊字符轉(zhuǎn)換成ASCII碼；unescape()函數(shù)的作用是將ASCII碼轉(zhuǎn)換成字符?？疾烊缦聹y(cè)試代碼：圖2-14由程序運(yùn)行結(jié)果可知上述全局函數(shù)的具體作用，當(dāng)然JavaScript腳本語(yǔ)言還支持很多其他的全局函數(shù)，在編程中適當(dāng)使用它們可大大提高編程效率。2.4.3函數(shù)應(yīng)用注意事項(xiàng)

這里介紹一下在使用函數(shù)過(guò)程中應(yīng)特別注意的幾個(gè)問(wèn)題，以幫助大家更好、更準(zhǔn)確地使用函數(shù)，并養(yǎng)成良好的編程習(xí)慣。具體為以下幾點(diǎn)：

定義函數(shù)的位置：如果函數(shù)代碼較為復(fù)雜，函數(shù)之間相互調(diào)用較多，應(yīng)將所有函數(shù)的定義部分放在HTML文檔的<head>和</head>標(biāo)記對(duì)之間，?既可保證所有的函數(shù)在調(diào)用之前均已定義，又可使開(kāi)發(fā)者后期的維護(hù)工作更為簡(jiǎn)便。

函數(shù)的命名：函數(shù)的命名原則與變量的命名原則相同，但盡量不要將函數(shù)和變量取同一個(gè)名字。如因?qū)嶋H情況需要將函數(shù)和變量定義為相近的名字，也應(yīng)給函數(shù)加上可以清楚辨認(rèn)的字符(如前綴func等)以示區(qū)別。函數(shù)返回值：在函數(shù)定義代碼結(jié)束時(shí)，即使函數(shù)不需要返回任何值；也應(yīng)使用return語(yǔ)句返回。

變量的作用域：應(yīng)區(qū)分函數(shù)中使用的變量