JavaScript條件判斷與迴圈
JavaScript條件判斷
程式的三個主要結構為循序結構、選擇結構與重複結構。循序結構為程式有從開始逐行執行的特性，第一行執行完畢後執行第二行，第二行執行完畢後執行第三行，直到程式執行結束；選擇結構為若條件測試的結果為真，則做條件測試為真的動作，否則執行條件測試為假的動作，例如：若成績大於等於60分，則輸出及格，否則輸出不及格。重複結構讓電腦重複執行某個區塊的程式多次，電腦適合做重複的工作，例如：求1+2+3+…+1000，使用重複結構可在很短時間內重複執行加總程式，直到求出結果，善用這三種結構可以寫出解決複雜問題的程式。
日常生活中也有許多選擇結構的對話，「若明天天氣很好的話，我們就去動物園，否則就待在家裡」，程式語言提供選擇結構的程式結構，讓使用者可以於程式中使用，邏輯上的語意為「若測式條件成立，則執行條件成立的動作，否則執行條件不成立的動作」，許多問題的解決過程，都會遇到選擇結構，如登入系統時需要驗證帳號和密碼，正確則可登入系統，否則跳到登入畫面，重新輸入帳號與密碼。選擇結構分成單向選擇結構、雙向選擇結構與多向選擇結構，以下分別說明敘述。
(1)單向與雙向選擇結構
單向選擇結構是最簡單的選擇結構，日常生活上經常用到，例如：「若週末天氣好的話，我們就去動物園」。單向選擇結構只做測試條件為真時，執行對應的動作，只有一個方向的選擇，因此稱做單向選擇結構。
雙向選擇結構比起單向選擇結構更複雜一些，日常生活上屬於雙向選擇的對話，例如：「若週末天氣好的話，我們就出去參觀動物園，否則去看電影」。雙向選擇結構為當測試條件為真時，執行測試條件為真的動作，否則做測試條件為假的動作，有兩個方向的選擇，因此稱做雙向選擇結構。
雙向選擇的另一種寫法，如下。
本單元範例網頁如下。
本單元範例網頁瀏覽結果如下。
除了單向選擇與雙向選擇外，更廣義的選擇結構是多向選擇，意即選擇結構中還可以加入選擇結構，單向選擇與雙向選擇為多向選擇結構的特例，多向選擇結構讓程式有無限多可能執行的路徑與狀態。
多向選擇結構--使用多個if-else
我們可以使用多個if-else來達成多向選擇結構，以下以成績與評語對應關係為例，介紹多向選擇結構，例如：假設成績與評語有對應關係，若成績大於等於80分，評語為「非常好」；否則若成績大於等於60分，也就是小於80分且大於等於60分，評語為「不錯喔」；否則評語為「要加油」，也就是小於60分，這就是多向選擇結構。
多向選擇結構可以使用多個if-else串接起來，以下說明if-else的多向選擇語法。
多向選擇結構除了使用if then else格式表達外，還可以使用switch case
格式表示，switch case格式是針對某個變數測試，該變數若為狀態1，則執行狀態1成立的動作，該變數若為狀態2，則執行狀態2成立的動作，以此類推
多向選擇程式語法
switch (測試變數){
case 狀況1:
狀況1的動作
break;
case 狀況2:
狀況2的動作
break;
case 狀況3:
狀況3的動作
break;
default:
狀況1、2與3皆不符合的動作
}
註：switch中測試變數需為整數。
程式範例
switch(new Date().getDay()){case 0:
r2="星期天";
break;
case 1:
r2="星期一";
break;
case 2:
r2="星期二";
break;
case 3:
r2="星期三";
break;
case 4:
r2="星期四";
break;
case 5:
r2="星期五";
break;
case 6:
r2="星期六";
break;
}
註：getDay函式回傳今天星期幾所對應的數字，0表示星期天、1表示星期一、2表示星期二、3表示星期三、4表示星期四、5表示星期五、6表示星期六。
本單元範例網頁如下。
本單元範例網頁瀏覽結果如下。
迴圈
電腦每秒鐘可執行幾億次的指令，擁有強大的計算能力，程式中迴圈結構可以重複執行某個程式區塊許多次，如此才能善用電腦的計算能力。迴圈結構利用指定迴圈變數的初始條件、迴圈變數的終止條件與迴圈變數的增減值來控制迴圈執行次數。許多問題的解決都涉及迴圈結構的使用，例如：加總、排序、找最大值…等，善用迴圈結構才能有效利用電腦的運算能力與簡化程式碼。
JavaScript語言中迴圈結構有for與while兩種，若以條件測試的先後分成前測試迴圈與後測試迴圈，迴圈當中可以包含迴圈稱做巢狀迴圈，另外迴圈當中可以設定跳出迴圈(使用break)，跳過正在執行的迴圈執行迴圈的下一輪(使用continue)，以下我們就詳細介紹這些結構。
(1)迴圈結構—使用for
for迴圈結構通常用於已知重複次數的程式，迴圈結構中指定迴圈變數的初始值、終止值與遞增(減)值，迴圈變數將由初始值變化到終止值，每次依照遞增(減)的值進行數值增加或減少。
使用迴圈加總1到9，加總使用「sum=sum+i」，原理如下表，在JavaScript語言中等號右邊(sum+i)的算式會先計算，結果回存到等號左邊(sum)。
本單元範例網頁如下。
本單元範例網頁瀏覽結果如下。
(2)巢狀迴圈結構
巢狀迴圈並不是新的程式結構，只是迴圈範圍又有迴圈，巢狀迴圈可以有好幾層，巢狀迴圈與單層迴圈運作原理相同，從外層迴圈來看，內層迴圈只是外層迴圈內的動作，因此外層迴圈作用一次，內層迴圈運作到執行完畢。以列印九九乘法表為例，當外層迴圈作用一次，內層迴圈要執行九次，當外層迴圈作用九次，內層迴圈總共執行八十一次。
巢狀迴圈印出九九乘法表原理，如下表，外層迴圈包含內層迴圈，外層迴圈執行一次，內層迴圈要執行完畢，九九乘法表外層迴圈執行九次，內層迴圈執行八十一次。
本單元範例網頁如下。
本單元範例網頁瀏覽結果如下。
(3)while迴圈
while迴圈結構與for迴圈結構十分類似，while迴圈結構常用於不固定次數的迴圈，由迴圈中測試條件決定是否跳出迴圈，測試條件為真時繼續迴圈，當測試條件為假時結束迴圈。如猜數字遊戲，兩人（A與B）玩猜數字遊戲，一人(A)心中想一個數，另一人(B)去猜，A就B所猜數字回答「猜大一點」或「猜小一點」，直到B猜到A所想數字，這樣的猜測就屬於不固定次數的迴圈，適合使用while，但不適合使用for。
while指令後面所接條件測試，若為真時會不斷做迴圈內動作，直到測試為假時跳出while迴圈。
可以將for迴圈結構轉換成while迴圈結構，for迴圈結構轉換成while迴圈結構如下表。
前測式迴圈與後測式迴圈結構
while迴圈結構有兩種分成前測式迴圈與後測式迴圈，前測式迴圈是指先測試迴圈變數是否符合迴圈終止條件，後測式迴圈是指先執行迴圈一次再測試迴圈變數是否符合迴圈終止條件，兩者的差異在於後測式迴圈至少執行一次。要使用哪一種結構是看程式功能需求，如帳號密碼登入功能至少要讓使用者輸入一次帳號密碼，再確認帳號密碼是否正確，就可以使用後測式迴圈結構。前測式與後測式迴圈結構比較如下。
本單元範例網頁如下。
本單元範例網頁瀏覽結果如下。
(4)迴圈中使用break與continue
迴圈於特殊需求下可以使用break與continue指令，當要跳出迴圈時可以使用break跳出迴圈；當要跳過迴圈內之後的程式碼，迴圈變數值直接遞增（減），繼續迴圈的執行，使用continue，也就是跳過後繼續執行迴圈程式。
針對不同的迴圈結構進行break，如下表。
針對不同的迴圈結構進行continue，如下表。
本單元範例網頁如下。
本單元範例網頁瀏覽結果如下。
