流程控制

程式的運作

• 程式由一堆的資料和運算組成。在執行的時候，把程式碼交由背後的系統做處理，可能回傳結果到程式中。��3+5; 回傳 8�5>2; 回傳 true�var x=3; 無回傳值，但可設定變數資料�

練習目標

• 利用 Chrome 的開發者工具，更加了解程式的運作。

​

• 學習簡單的除錯技巧。

流程控制

• 條件判斷

​

• 迴圈

條件判斷簡介

• 程式可以協助人類做決策，此時需要使用條件判斷結構。

​

• 例如，ATM 提款時判斷使用者輸入的金額是否大於提款上限。

if 條件判斷結構

• if 相關判斷結構可表達各種決策流程。��var x=3;�if(x>2){� alert("變數x中的資料大於2");�}�基本運作流程如下：�if(判斷結果){� 若判斷結果是對的 (true)，則執行對應區塊的程式碼，否則忽略 (false)�}

if … else 條件判斷結構

• 加入 else 區塊，無論判斷結果如何都可執行相對應的程式區塊。��var x=1;�if(x>2){� alert("變數x中的資料大於2");�}else{� alert("變數x中的資料不大於2");�}

if …. else if …. else 條件判斷結構

• 可同時進行多組判斷。��var x=prompt("請輸入一個數字","");�if(x>500){� alert("變數x大於500");�}else if(x>300){� alert("變數x介於300 ~ 500之間");�}else{� alert("變數x小於或等於300");�}

switch 條件判斷結構

• 與 if 結構可互相替換，視情況使用。��switch(某個變數){� case 1: 變數==1時，執行。break;� case 2: 變數==2時，執行。break;� default: 變數不符合以上條件時，預設執行。break;�}

練習目標

• 簡單計算機：請使用者輸入兩個數字，並讓使用者決定要進行甚麼運算：加、減、乘、除。

迴圈簡介

• 電腦的速度非常的快。有多快？

​

• 利用迴圈，才能有效發揮電腦的速度優勢。

while 迴圈結構

• 可重複執行對應程式區塊中的程式碼。��var i=0;�while(i<100){� alert("變數i的資料是"+i);� i=i+1;�}�基本運作流程如下：�while(判斷結果){� 若判斷結果為true，執行此區塊。執行完後跳回上方重新進行判斷。� 直到判斷結果為false時，才離開迴圈。�}�

for 迴圈結構

• 與 while 迴圈可互相替代，但結構更嚴謹。��for(var i=0; i<100; i=i+1){� alert("變數i的資料是"+i);�}��基本運作流程如下：�for(初始化命令; 判斷結果; 一般程式命令){� 基本流程與 while 相同，可參照比較。�}

迴圈中的 break 命令

• 此命令可強制離開迴圈結構，只能使用在迴圈的對應程式區塊中。��var i=0;�while(i<100){� if(i==50){� break;� }� i++;�}

迴圈中的 continue 命令

• 此命令可強制程式回到上方，立刻進行下一次的迴圈流程。��var x=0;�for(var i=0; i<100; i++){� if(i%2==0){� continue;� }� x++;�}

練習目標

• 讓使用者輸入一個數字，判斷此數字是否為質數。利用迴圈、判斷式、與 % 運算子處理。