《Javascript高級程序設(shè)計(jì)》課件-項(xiàng)目3 猜數(shù)字游戲-JavaScript流程控制

項(xiàng)目3猜數(shù)字游戲——JavaScript流程控制五四青年節(jié)快要到了，班里要舉行晚會，需要設(shè)計(jì)一個(gè)猜數(shù)字游戲環(huán)節(jié)。李強(qiáng)同學(xué)剛剛學(xué)習(xí)了JavaScript的基本語法規(guī)則，迫切地想大顯身手，他和團(tuán)支部書記規(guī)劃游戲的流程。游戲開始時(shí)界面如圖3-1所示，輸入數(shù)字，單擊“確定”按鈕出現(xiàn)提示界面，提示輸入的數(shù)值偏大或偏小，如圖3-2、圖3-3所示，同時(shí)顯示用戶的輸入次數(shù)。猜測成功后恭喜用戶，效果如圖3-4所示，超過限定猜測次數(shù)時(shí)提示用戶“您已經(jīng)沒有機(jī)會了，真遺憾！”，效果如圖3-5所示，游戲結(jié)束。情境導(dǎo)入情境導(dǎo)入情境導(dǎo)入■掌握流程控制的基本概念，能夠根據(jù)具體情況分析使用何種結(jié)構(gòu)■掌握分支語句的語法結(jié)構(gòu)及使用方法，并具備使用分支語句解決實(shí)際問題的能力■掌握循環(huán)語句的語法結(jié)構(gòu)及使用方法，并具備使用循環(huán)語句解決實(shí)際問題的能力項(xiàng)目目標(biāo)知識儲備任務(wù)

使用分支結(jié)構(gòu)任務(wù)

使用循環(huán)結(jié)構(gòu)

任務(wù)

認(rèn)識流程控制任務(wù)

認(rèn)識流程控制 JavaScript的程序是一系列可執(zhí)行語句的集合。語句是指一個(gè)可執(zhí)行的單元，通過語句的執(zhí)行，實(shí)現(xiàn)某種功能。

流程控制是指語句的組織、執(zhí)行方式，它控制程序的執(zhí)行流程。在一個(gè)程序執(zhí)行的過程中，語句的執(zhí)行順序會直接影響執(zhí)行結(jié)果。認(rèn)識流程控制JavaScript中有三大流程控制語句順序結(jié)構(gòu)是程序中最基本的結(jié)構(gòu)，程序按照代碼的書寫順序，從上到下執(zhí)行程序代碼分支結(jié)構(gòu)根據(jù)條件來決定是否執(zhí)行某個(gè)分支的代碼循環(huán)結(jié)構(gòu)根據(jù)條件來決定是否重復(fù)執(zhí)行某一段代碼認(rèn)識流程控制顯示個(gè)人信息——順序結(jié)構(gòu)【任務(wù)一】采用順序結(jié)構(gòu)顯示個(gè)人信息任務(wù)描述任務(wù)分析根據(jù)要求，通過prompt()對話框從鍵盤上輸入個(gè)人信息（姓名、專業(yè)、籍貫等）。通過字符串連接，使用document.write()在頁面上輸出結(jié)果。顯示個(gè)人信息——順序結(jié)構(gòu)【任務(wù)一】顯示個(gè)人信息——順序結(jié)構(gòu)【任務(wù)一】任務(wù)

使用分支結(jié)構(gòu)

分支結(jié)構(gòu)用于在代碼由上而下執(zhí)行的過程中，根據(jù)不同的條件，執(zhí)行不同的代碼，從而得到不同的結(jié)果，分支結(jié)構(gòu)也稱為選擇結(jié)構(gòu)。常見的分支結(jié)構(gòu)主要有單分支結(jié)構(gòu)（if語句）、雙分支結(jié)構(gòu)（if…else語句）和多分支結(jié)構(gòu)（if…elseif…else語句和switch語句）3種。下面將分別對這幾種分支結(jié)構(gòu)進(jìn)行講解。分支結(jié)構(gòu)

if語句用于實(shí)現(xiàn)單分支結(jié)構(gòu)，當(dāng)滿足某種條件時(shí)，就進(jìn)行某種處理。其語法格式如下。相關(guān)知識

單分支結(jié)構(gòu)（if語句）if(條件表達(dá)式)

語句塊；If語句流程結(jié)構(gòu)如圖所示。功能：在if語句中，只有當(dāng)條件表達(dá)式的值等于true時(shí)，才執(zhí)行下面的語句塊相關(guān)知識

單分支結(jié)構(gòu)（if語句） if…else語句用于實(shí)現(xiàn)典型的雙分支結(jié)構(gòu)，當(dāng)滿足某種條件時(shí)，就進(jìn)行某種處理，否則進(jìn)行另一種處理。其語法格式如下相關(guān)知識

雙分支結(jié)構(gòu)（if…else語句）if(條件表達(dá)式)

語句塊1;else

語句塊2;if…else語句流程結(jié)構(gòu)如圖所示當(dāng)條件表達(dá)式的值等于true時(shí)，執(zhí)行語句塊1當(dāng)條件表達(dá)式的值等于false時(shí)，執(zhí)行語句塊2if和else后面的語句塊不能同時(shí)執(zhí)行，只能執(zhí)行其中一個(gè)相關(guān)知識

雙分支結(jié)構(gòu)（if…else語句）判斷最大值——雙分支語句【任務(wù)二】通過if…else語句比較給出的兩個(gè)數(shù)的大小，并在頁面上輸出這兩個(gè)數(shù)的最大值任務(wù)描述任務(wù)分析通過prompt()對話框從鍵盤輸入兩個(gè)數(shù)通過if…else語句比較兩個(gè)數(shù)的大小，使用alert()對話框在頁面上輸出結(jié)果判斷最大值——雙分支語句【任務(wù)二】判斷最大值——雙分支語句【任務(wù)二】

某單位男職工60歲退休，女職工55歲退休，判斷58歲的女職工是否已經(jīng)退休。

那么我們是怎樣得出答案的呢？

我們首先判斷年齡還是性別？很明顯，我們先判斷這個(gè)職工是男還是女，然后判斷他是否滿足對應(yīng)的退休年齡要求，思考過程如圖所示。相關(guān)知識

分支結(jié)構(gòu)嵌套

判斷性別采用雙分支結(jié)構(gòu)實(shí)現(xiàn)，在各自的分支中又有一個(gè)判斷退休年齡的分支。要實(shí)現(xiàn)這個(gè)過程，需要在if語句的語句塊和else語句的語句塊中再使用if…else語句，即if…else語句嵌套另外一個(gè)完整的if…else語句，這就是分支結(jié)構(gòu)嵌套。相關(guān)知識

分支結(jié)構(gòu)嵌套開始性別是男輸入職工信息age>=60age>=55結(jié)束男職工true女職工false已經(jīng)退休true沒有退休false已經(jīng)退休true沒有退休false分支結(jié)構(gòu)嵌套在使用分支結(jié)構(gòu)嵌套時(shí)，else與前面最近的if匹配，而不是通過縮進(jìn)來匹配。為了保證合理的匹配關(guān)系，盡量使用花括號{}來確定語句的層次關(guān)系，否則會得到不一樣的結(jié)構(gòu)。評定成績等級——分支結(jié)構(gòu)嵌套【任務(wù)三】根據(jù)學(xué)生的成績給出學(xué)生的考評等級，成績大于等于90，考評等級為“優(yōu)”；成績小于90、大于等于60，考評等級為“合格”；成績小于60，考評等級為“不合格”任務(wù)描述任務(wù)分析首先聲明兩個(gè)變量grade、score，分別用來保存學(xué)生的考評等級和成績對給出的成績分別同90、60進(jìn)行比較，將結(jié)果保存在grade中通過alert()語句在頁面上輸出結(jié)果【任務(wù)三】開始score>=90score>=60結(jié)束輸入成績score評價(jià)等級：優(yōu)秀truefalse評價(jià)等級：合格true評價(jià)等級:不合格false評定成績等級——分支結(jié)構(gòu)嵌套【任務(wù)三】

分支語句的嵌套層次超過兩層，就很容易出錯(cuò)。要解決這個(gè)問題，可以使用一種新的分支語句，即if…elseif…else語句，也稱為多分支語句，可針對不同情況進(jìn)行不同的處理。

相關(guān)知識

多分支結(jié)構(gòu)if(條件表達(dá)式1)

語句塊1;elseif(條件表達(dá)式2)

語句塊2;elseif(條件表達(dá)式3)

語句塊3;…else

語句塊n;在if…elseif…else語句中，當(dāng)條件表達(dá)式1的值等于true時(shí)，執(zhí)行下面的語句塊1

否則，當(dāng)條件表達(dá)式2的值等于true時(shí)，執(zhí)行下面的語句塊2依次類推，當(dāng)條件表達(dá)式n的值等于true時(shí)，結(jié)束執(zhí)行。多分支結(jié)構(gòu)在【任務(wù)三】中，通過if…else語句的嵌套顯示了成績的考評等級。每個(gè)條件表達(dá)式后面有自己的結(jié)果分支，可以嘗試使用多分支結(jié)構(gòu)來替換分支結(jié)構(gòu)嵌套。多分支結(jié)構(gòu)if…elseif…else語句示例對比兩種實(shí)現(xiàn)方法，我們發(fā)現(xiàn)多分支結(jié)構(gòu)中的if…elseif…else語句層次比if…else語句嵌套要更清晰?！纠?-4】if…elseif…else語句示例分時(shí)問候——多分支結(jié)構(gòu)【任務(wù)四】通過if…elseif…else語句進(jìn)行分時(shí)問候任務(wù)描述任務(wù)分析首先要獲得當(dāng)前系統(tǒng)時(shí)間，可以使用JavaScript內(nèi)置對象Date的getHours()方法獲取當(dāng)前的整點(diǎn)時(shí)間對于不同的整點(diǎn)時(shí)間有不同的顯示內(nèi)容，我們通過if…elseif…else語句來實(shí)現(xiàn)不同的問候語分時(shí)問候——多分支結(jié)構(gòu)【任務(wù)四】分時(shí)問候——多分支結(jié)構(gòu)【任務(wù)四】

switch語句也用于實(shí)現(xiàn)多分支結(jié)構(gòu)，功能與使用if語句的多分支結(jié)構(gòu)相同，不同的是switch語句只能針對某個(gè)表達(dá)式的值做出判斷，從而決定執(zhí)行哪一段代碼。其語法格式如下。

相關(guān)知識

多分支結(jié)構(gòu)（switch語句）switch(表達(dá)式){case值1：語句塊1;[break;]case值2：語句塊2;[break;]…case值n：語句塊n;[break;]default:語句塊n+1;[break;]}在switch分支語句中，根據(jù)表達(dá)式的值來執(zhí)行對應(yīng)的語句塊。case后面的值一般為整數(shù)或字符串常量，中間用空格隔開。當(dāng)JavaScript執(zhí)行switch語句時(shí)，首先要計(jì)算switch后面圓括號內(nèi)的表達(dá)式的值，當(dāng)表達(dá)式的值與某個(gè)case的值相等時(shí)，就執(zhí)行此case后面的語句塊；如果所有case的值都不與switch表達(dá)式的值相等，執(zhí)行default后面的語句塊。break語句表示終止執(zhí)行，退出語句。在switch語句的每條case語句后都加上break語句，當(dāng)執(zhí)行完case后的語句塊后，就可以結(jié)束執(zhí)行，直接跳出switch語句。如果沒有break語句，那么在執(zhí)行完某個(gè)case語句塊后，switch語句還會繼續(xù)往下執(zhí)行，直到結(jié)束或者遇到break語句，造成程序結(jié)果不正確。相關(guān)知識

多分支結(jié)構(gòu)（switch語句）【例3-5】switch語句實(shí)現(xiàn)分時(shí)問候示例。switch語句與if…elseif…else語句都可以實(shí)現(xiàn)多分支結(jié)構(gòu)。switch語句比較適合實(shí)現(xiàn)表達(dá)式的值為整數(shù)的多分支結(jié)構(gòu)，if…elseif…else語句適合實(shí)現(xiàn)條件表達(dá)式的值為范圍的多分支結(jié)構(gòu)。在實(shí)際編程時(shí)，應(yīng)根據(jù)實(shí)際情況選擇。判斷今天是星期幾——switch語句【任務(wù)五】與【任務(wù)四】類似，也是根據(jù)當(dāng)前系統(tǒng)的時(shí)間，判斷出今天是星期幾，不過這里是利用switch語句來實(shí)現(xiàn)的。任務(wù)描述任務(wù)分析根據(jù)要求，與【任務(wù)四】類似，使用JavaScript內(nèi)置對象Date的getDay()方法得到表示星期幾的數(shù)值。通過switch語句來輸出當(dāng)前日期是星期幾。判斷今天是星期幾——switch語句【任務(wù)五】任務(wù)

使用循環(huán)結(jié)構(gòu)

while循環(huán)語句是JavaScript常用的循環(huán)語句之一，在while循環(huán)語句中首先根據(jù)循環(huán)條件表達(dá)式判斷當(dāng)前數(shù)據(jù)是否符合循環(huán)條件，即循環(huán)條件表達(dá)式的值是否為true。如果是true，則執(zhí)行循環(huán)體，否則退出循環(huán)。while循環(huán)語句的語法格式如下。

相關(guān)知識

while循環(huán)語句while(循環(huán)條件表達(dá)式){

循環(huán)體;}while循環(huán)語句的流程圖如圖所示。按照while循環(huán)語句的流程圖，可以得出while循環(huán)語句的執(zhí)行步驟。第1步：計(jì)算循環(huán)條件表達(dá)式。第2步：如果循環(huán)條件表達(dá)式的值為true，就執(zhí)行循環(huán)體，否則退出while循環(huán)。第3步：重復(fù)執(zhí)行第1、2步，直到不滿足循環(huán)條件而退出循環(huán)。相關(guān)知識

while循環(huán)語句求1到100的奇數(shù)累加和——while循環(huán)【任務(wù)六】通過while循環(huán)語句求出1+3+5+…+100的值。任務(wù)描述【任務(wù)六】任務(wù)分析根據(jù)要求，可用圖所示的流程圖來求出1到100的奇數(shù)累加和。變量sum用來保存1到100的奇數(shù)累加和，變量i作為循環(huán)變量，是1到100的奇數(shù)。因?yàn)橐笃鏀?shù)的累加和，所以循環(huán)變量i的初值為1。累加和用的sum+=i相當(dāng)于sum=sum+i，i=i+2表示每循環(huán)一次變量i加2，直到變量i不滿足循環(huán)條件，退出循環(huán)。do…while循環(huán)語句和while循環(huán)語句相似，它們的主要區(qū)別是：while循環(huán)語句在執(zhí)行循環(huán)體之前檢查表達(dá)式的值，do…while循環(huán)語句則在執(zhí)行循環(huán)體之后檢查表達(dá)式的值。do…while循環(huán)語句的語法格式如下。

相關(guān)知識

do...while循環(huán)語句do{循環(huán)體語句;}while(循環(huán)條件表達(dá)式)do…while循環(huán)語句的流程圖如圖3-30所示。按照do…while循環(huán)語句的流程圖，可以得出while循環(huán)語句的執(zhí)行步驟。第1步：執(zhí)行循環(huán)體。第2步：計(jì)算循環(huán)條件表達(dá)式。如果循環(huán)條件表達(dá)式的值為true，就執(zhí)行第1步，否則退出do…while循環(huán)。相關(guān)知識

do...while循環(huán)語句求1到100的奇數(shù)累加和——while循環(huán)【任務(wù)七】通過do…while循環(huán)語句求出2+4+6+…+100的值。任務(wù)描述【任務(wù)七】任務(wù)分析本任務(wù)實(shí)現(xiàn)同【任務(wù)六】類似，可用圖3-31所示的流程圖來求出1到100的偶數(shù)累加和。變量sum用來保存1到100的偶數(shù)累加和，變量i作為循環(huán)變量，是1到100的偶數(shù)。因?yàn)橐笈紨?shù)的累加和，所以循環(huán)變量i的初值應(yīng)為2。累加和用的sum+=i相當(dāng)于sum=sum+i，i=i+2表示每循環(huán)一次變量i加2，直到變量；不滿足循環(huán)條件，退出循環(huán)。

for循環(huán)語句是JavaScript常用的循環(huán)語句之一，在for循環(huán)語句中，用一個(gè)變量作為計(jì)數(shù)器來指定循環(huán)的次數(shù)，這個(gè)變量稱為循環(huán)變量。

相關(guān)知識

for循環(huán)語句for(循環(huán)初值表達(dá)式;循環(huán)條件表達(dá)式;循環(huán)變量更新表達(dá)式){

循環(huán)體;}按照for循環(huán)語句的流程圖，可以得出for循環(huán)語句的執(zhí)行步驟第1步：計(jì)算循環(huán)初值表達(dá)式第2步：判斷循環(huán)條件表達(dá)式第3步：如果循環(huán)條件表達(dá)式的值為true，就執(zhí)行第4步，否則退出for循環(huán)第4步：執(zhí)行循環(huán)體，之后再計(jì)算循環(huán)變量更新表達(dá)式第5步：重復(fù)執(zhí)行第2、3、4步，直到不滿足循環(huán)條件，退出循環(huán)相關(guān)知識

for循環(huán)語句求1到100的累加和——for循環(huán)【任務(wù)八】要求通過for循環(huán)語句求出1+2+3+…+100的值任務(wù)描述【任務(wù)八】任務(wù)分析變量sum用來保存1到100的累加和，變量i作為循環(huán)變量，為1到100累加和用的sum+=i相當(dāng)于sum=sum+i，i++表示每循環(huán)一次變量i加1，直到變量；不滿足循環(huán)條件，退出循環(huán)

循環(huán)語句嵌套是指在JavaScript中一條循環(huán)語句的循環(huán)體中包含另外一條循環(huán)語句。3種循環(huán)語句都可以嵌套，并且可以相互嵌套。在循環(huán)語句嵌套中，把被嵌套的循環(huán)語句稱為內(nèi)循環(huán)，把嵌套別的循環(huán)語句的循環(huán)語句稱為外循環(huán)。

例如，如果A循環(huán)語句包含B循環(huán)語句，而B循環(huán)語句不包含其他循環(huán)語句，那么A循環(huán)語句就稱為外循環(huán)，而B循環(huán)語句稱為內(nèi)循環(huán)。相關(guān)知識

循環(huán)語句嵌套輸出直角三角形圖案——循環(huán)嵌套語句【任務(wù)九】通過循環(huán)嵌套語句在頁面輸出“*”組成的直角三角形圖案（5行）。任務(wù)描述任務(wù)分析應(yīng)用循環(huán)嵌套的方法來實(shí)