《JavaScript程序設(shè)計(jì)》課件-項(xiàng)目2-2 流程控制語句

JavaScript程序設(shè)計(jì)20211課程導(dǎo)入2任務(wù)導(dǎo)入3知識(shí)講解4任務(wù)實(shí)施項(xiàng)目2-2流程控制語句5任務(wù)總結(jié)知識(shí)回顧任務(wù)導(dǎo)入知識(shí)講解任務(wù)實(shí)施任務(wù)總結(jié)共有幾種基本數(shù)據(jù)類型？分別是什么？如何檢測數(shù)據(jù)的類型？哪個(gè)函數(shù)可以將數(shù)據(jù)轉(zhuǎn)換為字符串？三元運(yùn)算符是什么意思？提問知識(shí)回顧任務(wù)導(dǎo)入知識(shí)講解任務(wù)實(shí)施任務(wù)總結(jié)任務(wù)重難點(diǎn)查詢水果價(jià)格打印金字塔重點(diǎn)：選擇結(jié)構(gòu)：if，if…else，if…elseif…,swich語句循環(huán)結(jié)構(gòu)：for，while，do…while語句實(shí)際案例講解知識(shí)回顧任務(wù)導(dǎo)入知識(shí)講解任務(wù)實(shí)施任務(wù)總結(jié)流程控制流程控制通過控制代碼的執(zhí)行順序來完成要實(shí)現(xiàn)的功能，流程控制的3種結(jié)構(gòu)如下：順序結(jié)構(gòu)是程序中最基本的結(jié)構(gòu)，程序會(huì)按照代碼的先后順序依次執(zhí)行分支結(jié)構(gòu)用于根據(jù)條件來決定是否執(zhí)行某個(gè)分支代碼循環(huán)結(jié)構(gòu)用于根據(jù)條件來決定是否重復(fù)執(zhí)行某一段代碼知識(shí)回顧任務(wù)導(dǎo)入知識(shí)講解任務(wù)實(shí)施任務(wù)總結(jié)流程控制選擇結(jié)構(gòu)概念：選擇結(jié)構(gòu)語句需要根據(jù)給出的條件進(jìn)行判斷來決定執(zhí)行對應(yīng)的代碼。if…elseif…else多分支語句if單分支語句if…else雙分支語句switch多分支語句知識(shí)回顧任務(wù)導(dǎo)入知識(shí)講解任務(wù)實(shí)施任務(wù)總結(jié)流程控制1.1選擇結(jié)構(gòu)——if單分支語句流程圖if(條件表達(dá)式){//代碼段}語法結(jié)構(gòu)if語句也稱為條件語句、單分支語句，當(dāng)滿足某種條件時(shí)，就進(jìn)行某種處理。知識(shí)回顧任務(wù)導(dǎo)入知識(shí)講解任務(wù)實(shí)施任務(wù)總結(jié)流程控制1.2選擇結(jié)構(gòu)——if…else雙分支語句if…else語句也稱為雙分支語句，當(dāng)滿足某種條件時(shí)，就進(jìn)行某種處理，否則進(jìn)行另一種處理。if(條件表達(dá)式){//代碼段1}else{//代碼段2}語法結(jié)構(gòu)流程圖知識(shí)回顧任務(wù)導(dǎo)入知識(shí)講解任務(wù)實(shí)施任務(wù)總結(jié)流程控制1.3選擇結(jié)構(gòu)——if…elseif…else多分支語句if…elseif語句也稱為多分支語句，可針對不同情況進(jìn)行不同的處理。if(條件表達(dá)式1){//代碼段1}elseif(條件表達(dá)式2){//代碼段2}...elseif(條件表達(dá)式n){//代碼段n}else{//代碼段n+1}語法結(jié)構(gòu)流程圖知識(shí)回顧任務(wù)導(dǎo)入知識(shí)講解任務(wù)實(shí)施任務(wù)總結(jié)流程控制1.4選擇結(jié)構(gòu)——switch多分支語句switch語句也是多分支語句，功能與if…elseif語句類似，不同的是它只能針對某個(gè)表達(dá)式的值作出判斷，從而決定執(zhí)行哪一段代碼。switch(表達(dá)式){case值1

代碼段1;break;case值2

代碼段2;break;...default:

代碼段n;}語法結(jié)構(gòu)流程圖知識(shí)回顧任務(wù)導(dǎo)入知識(shí)講解任務(wù)實(shí)施任務(wù)總結(jié)流程控制循環(huán)結(jié)構(gòu)概念：所謂循環(huán)語句就是可以實(shí)現(xiàn)一段代碼的重復(fù)執(zhí)行。舉例：連續(xù)輸出1~100之間的數(shù)字。forwhiledo…while知識(shí)回顧任務(wù)導(dǎo)入知識(shí)講解任務(wù)實(shí)施任務(wù)總結(jié)流程控制

2.1

for語句for語句是最常用的循環(huán)語句，它適合循環(huán)次數(shù)已知的情況。for(初始化變量;條件表達(dá)式;操作表達(dá)式){//循環(huán)體}語法結(jié)構(gòu)流程圖知識(shí)回顧任務(wù)導(dǎo)入知識(shí)講解任務(wù)實(shí)施任務(wù)總結(jié)流程控制案例：使用for語句輸出1~100范圍內(nèi)的數(shù)字初始化變量條件表達(dá)式操作表達(dá)式for(vari=1;i<=100;i++){console.log(i);}知識(shí)回顧任務(wù)導(dǎo)入知識(shí)講解任務(wù)實(shí)施任務(wù)總結(jié)流程控制代碼執(zhí)行流程：執(zhí)行“vari=1;”初始化變量判斷“i<=100”是否為true，如果為true，執(zhí)行循環(huán)體，反之，結(jié)束循環(huán)執(zhí)行循環(huán)體，通過“console.log(i)”輸出變量i的值執(zhí)行“i++”，將i的值加1，此時(shí)i的值為2判斷“i<=100”是否為true，和第②步相同。只要滿足“i<=100”這個(gè)條件，就會(huì)一直循環(huán)。當(dāng)i的值加到101時(shí)，判斷結(jié)果為false，循環(huán)結(jié)束知識(shí)回顧任務(wù)導(dǎo)入知識(shí)講解任務(wù)實(shí)施任務(wù)總結(jié)流程控制斷點(diǎn)調(diào)試是指在程序的某一行設(shè)置一個(gè)斷點(diǎn)，調(diào)試時(shí)，程序運(yùn)行到這一行就會(huì)停住，然后就可以控制代碼一步一步的執(zhí)行，在這個(gè)過程中可以看到每個(gè)變量當(dāng)前的值。查看方式：在Chrome瀏覽器中，按F12鍵啟動(dòng)開發(fā)者工具后，切換到“Sources”面板，界面效果如下圖所示，其中右欄是JavaScript調(diào)試區(qū)。“Sources”面板知識(shí)回顧任務(wù)導(dǎo)入知識(shí)講解任務(wù)實(shí)施任務(wù)總結(jié)流程控制在中欄顯示的網(wǎng)頁源代碼中，單擊某一行的行號，即可添加斷點(diǎn)，再次單擊，可以取消斷點(diǎn)。例如，為for語句添加斷點(diǎn)，如下圖所示。斷點(diǎn)調(diào)試知識(shí)回顧任務(wù)導(dǎo)入知識(shí)講解任務(wù)實(shí)施任務(wù)總結(jié)流程控制

for循環(huán)案例“重復(fù)執(zhí)行相同代碼”案例，重復(fù)執(zhí)行N次。varnum=prompt('請您輸入次數(shù)');for(vari=1;i<=num;i++){console.log('重要的事情說'+num+'遍');}知識(shí)回顧任務(wù)導(dǎo)入知識(shí)講解任務(wù)實(shí)施任務(wù)總結(jié)流程控制“重復(fù)執(zhí)行不同代碼”案例for(vari=1;i<=100;i++){if(i==1){//使用if條件判斷語句，根據(jù)i的不同，進(jìn)行不同處理console.log('當(dāng)前是第1次');}elseif(i==100){console.log('當(dāng)前是第100次');}}知識(shí)回顧任務(wù)導(dǎo)入知識(shí)講解任務(wù)實(shí)施任務(wù)總結(jié)流程控制1~100之間的所有整數(shù)“求和”和“平均數(shù)”案例varsum=0; //利用sum對計(jì)數(shù)器i進(jìn)行累加for(vari=1;i<=100;i++){sum+=i; //相當(dāng)于sum=sum+i;}console.log('求和：'+sum);//計(jì)算結(jié)果：5050console.log('求平均值：'+(sum/100));//計(jì)算結(jié)果：50.5知識(shí)回顧任務(wù)導(dǎo)入知識(shí)講解任務(wù)實(shí)施任務(wù)總結(jié)流程控制1~100之間的所有整數(shù)“求偶數(shù)和”和“求奇數(shù)和”案例vareven=0;varodd=0;for(vari=1;i<=100;i++){if(i%2==0){ //判斷i是奇數(shù)還是偶數(shù)even+=i;}else{odd+=i;}}console.log('1~100之間所有的偶數(shù)和是'+even);//計(jì)算結(jié)果：2550console.log('1~100之間所有的奇數(shù)和是'+odd);//計(jì)算結(jié)果：2500知識(shí)回顧任務(wù)導(dǎo)入知識(shí)講解任務(wù)實(shí)施任務(wù)總結(jié)流程控制1~100之間的所有能被3整除的整數(shù)之和案例varresult=0;for(vari=1;i<=100;i++){if(i%3==0){result+=i;}}console.log(result); //計(jì)算結(jié)果：1683知識(shí)回顧任務(wù)導(dǎo)入知識(shí)講解任務(wù)實(shí)施任務(wù)總結(jié)流程控制自動(dòng)生成字符串案例varnum=prompt('請輸入星星的個(gè)數(shù)');varstr='';for(vari=1;i<=num;i++){str=str+'★';}console.log(str);知識(shí)回顧任務(wù)導(dǎo)入知識(shí)講解任務(wù)實(shí)施任務(wù)總結(jié)流程控制

循環(huán)嵌套案例生成i行j列的星星圖案案例varrows=prompt('請輸入行數(shù)：');varcols=prompt('請輸入列數(shù)：');varstr='';for(vari=1;i<=rows;i++){for(varj=1;j<=cols;j++){str+='☆';}str+='\n'; //換到下一行}console.log(str);星星圖案知識(shí)回顧任務(wù)導(dǎo)入知識(shí)講解任務(wù)實(shí)施任務(wù)總結(jié)流程控制生成三角形的星星圖案案例varstr='';for(vari=1;i<=5;i++){for(varj=i;j<=5;j++){//j的初始值為istr=str+'☆';}str+='\n';}console.log(str);三角形圖案知識(shí)回顧任務(wù)導(dǎo)入知識(shí)講解任務(wù)實(shí)施任務(wù)總結(jié)流程控制生成九九乘法表案例varstr='';for(vari=1;i<=9;i++){for(varj=1;j<=i;j++){str+=j+'x'+i+'='+i*j+'\t';}str+='\n';}console.log(str);九九乘法表知識(shí)回顧任務(wù)導(dǎo)入知識(shí)講解任務(wù)實(shí)施任務(wù)總結(jié)流程控制

2.2while語句while語句可以在條件表達(dá)式為true的前提下，循環(huán)執(zhí)行指定的一段代碼，直到條件表達(dá)式為false時(shí)結(jié)束循環(huán)。while(條件表達(dá)式){//循環(huán)體}語法結(jié)構(gòu)流程圖知識(shí)回顧任務(wù)導(dǎo)入知識(shí)講解任務(wù)實(shí)施任務(wù)總結(jié)流程控制

2.3

do…while語句do…while語句會(huì)無條件地執(zhí)行一次循環(huán)體中的代碼，然后再判斷條件，根據(jù)條件決定是否循環(huán)執(zhí)行。do{//循環(huán)體}while(條件表達(dá)式)語法結(jié)構(gòu)流程圖知識(shí)回顧任務(wù)導(dǎo)入知識(shí)講解任務(wù)實(shí)施任務(wù)總結(jié)流程控制

2.4

continue關(guān)鍵字continue關(guān)鍵字可以在for、while以及do…while循環(huán)體中使用，它用來立即跳出本次循環(huán)，也就是跳過了continue后面的代碼，繼續(xù)下一次循環(huán)。知識(shí)回顧任務(wù)導(dǎo)入知識(shí)講解任務(wù)實(shí)施任務(wù)總結(jié)流程控制

2.5

break關(guān)鍵字break關(guān)鍵字的用法：用在switch語句中，當(dāng)遇到break語句時(shí)，跳出switch語句循環(huán)語句中使用時(shí)，其作用是立即跳出整個(gè)循環(huán)（將循環(huán)結(jié)束）注意：break語句還可跳轉(zhuǎn)到指定的標(biāo)簽語句處，實(shí)現(xiàn)循環(huán)嵌套中的多層跳轉(zhuǎn)知識(shí)回顧任務(wù)導(dǎo)入知識(shí)講解任務(wù)實(shí)施任務(wù)總結(jié)流程控制其他功能：break和continue語句還可跳轉(zhuǎn)到指定的標(biāo)簽語句處，實(shí)現(xiàn)嵌套語句的多層次跳轉(zhuǎn)。//定義標(biāo)簽label:statement//使用標(biāo)簽break/continuelabel;label表示標(biāo)簽的名稱，如start、end等任意合法的標(biāo)識(shí)符。statement表示具體執(zhí)行的語句，如if、while、變量的聲明等。標(biāo)簽語句必須在使用之前定義，否則會(huì)出現(xiàn)找不到標(biāo)簽的情況。知識(shí)回顧任務(wù)導(dǎo)入知識(shí)講解任務(wù)實(shí)施任務(wù)總結(jié)

1.

【案例】查詢水果的價(jià)格案例需求：使用多分支語句實(shí)現(xiàn)用戶在彈出框中輸入一個(gè)水果，如果有就彈出該水果的價(jià)格，如果該水果不存在就彈出“沒有此水果”的效果。var

fruit

=

prompt('請您輸入查詢的水果：');switch(fruit){

case

'蘋果':

alert('蘋果的價(jià)格是

3.5/斤');

break;

case

'榴蓮':

alert('榴蓮的價(jià)格是

35/斤');

break;

case

'香梨':

alert('香梨的價(jià)格是

3/斤');

break;

default:

alert('沒有此水果')}知識(shí)回顧任務(wù)導(dǎo)入知識(shí)講解任務(wù)實(shí)施任務(wù)總結(jié)2.【案例】打印金字塔代碼實(shí)現(xiàn)思路：①分析金字塔組成：由空格和星星“*”組成的三角形。分析