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

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

2.2運算符

2.3核心語句

2.4函數(shù)

2.1概述

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

2.2運算符

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

2.2.1賦值運算符

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

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

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

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

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

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

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

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

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

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

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

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

2.3核心語句

2.3.1基本處理流程

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

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

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

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

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

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

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

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

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

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

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

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

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

當n=3時，?跳出當前循環(huán)而直接進行下一個循環(huán)，故iArray[3]不進行顯示；

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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