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