1.流程控制基本概念
默認情況下，程序的運行流程是：運行程序后，系統(tǒng)會按書寫從上至下順序執(zhí)行程序中的每一行代碼,但是這并不能滿足我們所有的開發(fā)需求，實際開發(fā)中, 我們需要根據(jù)不同的條件執(zhí)行不同的代碼或者重復執(zhí)行某一段代碼。
為了方便我們控制程序的運行流程，JavaScript提供3種流程結(jié)構(gòu)，不同的流程結(jié)構(gòu)可以實現(xiàn)不同的運行流程。這3種流程結(jié)構(gòu)分別是順序、選擇、循環(huán)三種基本控制結(jié)構(gòu)。
順序結(jié)構(gòu)：默認的流程結(jié)構(gòu)。按照書寫順序從上至下執(zhí)行每一條語句。（圖5-5）
圖5-5 順序結(jié)構(gòu)
選擇結(jié)構(gòu)：對給定的條件進行判斷，再根據(jù)判斷結(jié)果來決定執(zhí)行哪一段代碼。（圖5-6）
圖5-6 分支結(jié)構(gòu)
循環(huán)結(jié)構(gòu)：在給定條件成立的情況下，反復執(zhí)行某一段代碼。
圖5-7循環(huán)結(jié)構(gòu)
2.分支語句
1) if語句
if語句是基于條件成立才執(zhí)行相應代碼時使用的語句。
語法:
注意：if小寫，大寫字母（IF）會出錯！
假設你應聘web前端技術開發(fā)崗位，如果你會JavaScript技術，你面試成功，歡迎加入公司。代碼表示如下:
| <script> var myCarrer = "JavaScript"; if (myCarrer == "JavaScript") { document.write("你面試成功，歡迎加入公司。"); } </script> |
2) if...else語句
if...else語句是在指定的條件成立時執(zhí)行代碼，在條件不成立時執(zhí)行else后的代碼。
語法:
| if(條件) { 條件成立時執(zhí)行的代碼} else {條件不成立時執(zhí)行的代碼} |
假設你應聘web前端技術開發(fā)崗位，如果你會JavaScript技術，你面試成功，歡迎加入公司，否則你面試不成功，不能加入公司。
| <script> var myCarrer = " JavaScript "; // myCarrer變量存儲技能 if (myCarrer == " JavaScript ") { document.write("你面試成功，歡迎加入公司。"); } else //否則，技能不是JavaScript { document.write("你面試不成功，不能加入公司。");} </script> |
3) if..else嵌套語句
要在多組語句中選擇一組來執(zhí)行，使用if..else嵌套語句。
語法:
| if(條件1) { 條件1成立時執(zhí)行的代碼} else if(條件2) { 條件2成立時執(zhí)行的代碼} ... else if(條件n) { 條件n成立時執(zhí)行的代碼} else { 條件1、2至n不成立時執(zhí)行的代碼} |
假設數(shù)學考試，小明考了86分，給他做個評價，60分以下的不及格，60(包含60分)-75分為良好，75(包含75分)-85分為很好，85(包含75分)-100優(yōu)秀。
| <script> var myScore = 86;//myScore變量存儲分數(shù)，假設為86 if(myScore < 60){ document.write("成績不及格，加油了！"); }else if(myScore < 75){ document.write("成績良好，不錯啊！"); }else if(myScore < 85){ document.write("成績很好，很棒！"); }else{ document.write("成績優(yōu)秀，超級棒！"); } </script> |
4) Switch語句
當有很多種選項的時候，switch比if else使用更方便。
語法:
| switch(表達式) { case值1: 執(zhí)行代碼塊 1 break; case值2: 執(zhí)行代碼塊 2 break; ... case值n: 執(zhí)行代碼塊 n break; default: 與 case值1 、 case值2...case值n 不同時執(zhí)行的代碼 } |
語法說明:
| Switch必須賦初始值，值與每個case值匹配。滿足執(zhí)行該 case 后的所有語句，并用break語句來阻止運行下一個case。如所有case值都不匹配，執(zhí)行default后的語句。 |
假設評價學生的考試成績，10分滿分制，我們按照每一分一個等級將成績分等，并根據(jù)成績的等級做出不同的評價。
| <script> var myScore = 6;//myScore變量存儲分數(shù)，假設為6 switch (myScore){ case 0: case 1: case 2: case 3: case 4: case 5: degree = "繼續(xù)努力！"; document.write("評語："+degree+"<br>"); break; case 6: degree = "及格，加油！"; document.write("評語："+degree+"<br>"); break; case 7: degree = "湊合，奮進！"; document.write("評語："+degree+"<br>"); break; case 8: degree = "很棒，很棒！"; document.write("評語："+degree+"<br>"); break; case 9: case 10: degree = "高手，大牛！"; document.write("評語："+degree+"<br>"); break; } </script> |
注意:記得在case所執(zhí)行的語句后添加上一個break語句。否則就直接繼續(xù)執(zhí)行下面的case中的語句。
3.循環(huán)結(jié)構(gòu)
1) for循環(huán)
很多事情不只是做一次，要重復做。如打印10份試卷，每次打印一份，重復這個動作，直到打印完成。這些事情，我們使用循環(huán)語句來完成，循環(huán)語句，就是重復執(zhí)行一段代碼。
for語句結(jié)構(gòu)：
| for(初始化變量;循環(huán)條件;循環(huán)迭代) { 循環(huán)語句 } |
假如，一個盒子里有6個球，我們每次取一個，重復從盒中取出球，直到球取完為止。
| <script> var num=1; for (num=1;num<=6;num++) //初始化值；循環(huán)條件；循環(huán)后條件值更新 { document.write("取出第"+num+"個球<br />"); } </script> |
2) while循環(huán)
和for循環(huán)有相同功能的還有while循環(huán),while循環(huán)重復執(zhí)行一段代碼，直到某個條件不再滿足。
while語句結(jié)構(gòu)：
| while(判斷條件) { 循環(huán)語句 } |
使用while循環(huán)，完成從盒子里取球的動作，每次取一個，共6個球
| <script> var num=0; //初始化值 while (num<=6) //條件判斷 { document.write("取出第"+num+"個球<br />"); num=num+1; //條件值更新 } </script> |
3) do...while循環(huán)
do while結(jié)構(gòu)的基本原理和while結(jié)構(gòu)是基本相同的，但是它保證循環(huán)體至少被執(zhí)行一次。因為它是先執(zhí)行代碼，后判斷條件，如果條件為真，繼續(xù)循環(huán)。
do...while語句結(jié)構(gòu)：
| do{ 循環(huán)語句 }while(判斷條件) |
我們試著輸出5個數(shù)字
| <script> num= 1; do{ document.write("數(shù)值為:" + num+"<br />"); num++; //更新條件 }while (num<=5) </script> |
4) 退出循環(huán)break
在while、for、do...while、while循環(huán)中使用break語句退出當前循環(huán)，直接執(zhí)行后面的代碼。
5) 繼續(xù)循環(huán)continue
continue的作用是僅僅跳過本次循環(huán)，而整個循環(huán)體繼續(xù)執(zhí)行。
5.1.6綜合案例
1．案例描述
計算X的Y次方，X（底數(shù)）和Y（指數(shù)）的值由用戶輸入。
2．案例思路
計算X的Y次方其實就是讓Y個X相乘，所以利用簡單的循環(huán)N次，并用一個變量（如result）來與X相乘，并累積保存乘積即可解決問題。但是，也有一些特殊的情況，比如，如果Y是負數(shù)，就不是簡單的Y個X相乘而已了，而是讓Y個X相乘后用1來除以這個結(jié)果；如果Y為0，任意數(shù)的0次方都等于1；如果X為0則是無意義的，不用考慮。
3．案例實現(xiàn)
案例5-2 example02.html
| <script> // 計算X的Y次方 var x = prompt("請輸入一個底數(shù)："); var y = prompt("請輸入一個指數(shù)："); var result = 1; if (y<0) { y *= -1; for (var i=1; i<=y; i++) { result *= x; } result = 1/result; } else { for (var i = 1; i <= y; i++) { result *= x; } } document.write(x+"的"+y+"次方為：" + result); </script> |
運行效果如圖5-8所示：
圖5-8 計算X的Y次方
