張智星 jang@mirlab.org http://mirlab.org/jang 台大資工系 多媒體檢索實驗室 第二章 程式控制結構 張智星 jang@mirlab.org http://mirlab.org/jang 台大資工系 多媒體檢索實驗室

本章大綱 大綱 本章介紹 JavaScript 的程式控制結構，以便控制程式的執行流程。我們將針對「條件敘述」與「迴圈敘述」這兩大程式控制結構來進行說明。 主題 2-1：條件敘述 2-2：迴圈敘述

2-1：條件敘述 本小節介紹if-else以及switch-case這兩種條件判斷式的使用方法。

if-else敘述 if-else基本結構 If (條件句) { 程式碼 1 } else { 程式碼 2 } 說明 當條件句的值是true或非零，就會執行程式碼 1，剩下的情況就會執行程式碼 2 這樣的架構只會執行程式碼 1 或 2，一組if-else敘述只會執行其中一段程式碼。

範例2-1 主題：利用if-else敘述，判斷使用者輸入的值。 說明 連結：ifElse01.htm 重點程式碼 if (a<30) alert("您只有 "+a+ " 歲，真是青年才俊啊！"); else alert("您年過30，想必是事業有成了！"); 說明 如果在if-else程式碼只有單行，可以省略{ }符號。 如果需要判斷很多種可能，可以用if…else if…else，其中else if的個數視需求而定。

switch-case 敘述 switch-case基本結構 switch(var){ case 1: 程式碼1; 說明 break; case 2: 程式碼2; break; default: 程式碼3; } 說明 var的值如果等於case後面放的數字，就會從該case開始執行程式碼。 如果不用break，會造成程式碼循序往下執行，使用break會跳出switch-case這個區塊。 當var的值沒有相對應的case時，就會執行default。

範例2-2 主題：利用switch-case敘述，根據星期替換網頁內容。 說明 連結：switch01.htm day 的值是從 0 到 6，分別代表星期日、星期一、星期二、...、星期六。 default 之後的敘述，只會在所有條件均不符合時，才會被執行。 如果不加上 break，則系統會在符合某一個特定條件後，繼續執行下列其他條件的敘述，產生不是我們要的結果。

範例2-3 主題：根據範例2-2的程式碼，將break註解所產生的結果 說明 連結: switch02.htm 以上 switch-case 的行為，和 C/C++ 中的 switch-case 是完全相同的。

邏輯判斷 若是判斷條件較複雜，我們也可以使用「且」、「或」、「否定」等方式來產生複合條件。 範例：判斷是否「a 大於零，或 b 和 c 均不小於零」。 if ((a>0)|| (!(b<0) &&!(c<0))){ ... } 說明 符號 且 && 或 || 否定 !

條件運算子 基本架構 條件 ? 程式碼1 : 程式碼2 說明 當條件成立時，會執行程式碼1，如果不成立就會執行程式碼2。

範例2-4 主題：取得現在時間，並用條件運算子判斷是上午或下午。 說明 連結：implicitIf01.htm 重點程式碼： prepand = (hour>=12)? "下午":"上午"; hour = (hour>=12)? hour-12:hour; 說明 在”?”的右邊可以直接放值，如果條件成立，將左邊的值存到變數中，反之亦然。

範例2-5 主題：判斷條件的真偽。 說明 連結：testIf.htm 當運算結果是一個數值時， 若此數值等於 0，則是 false， 其他則是 true。 當運算結果是一個字串時， 若此字串等於空字串“”，則是 false，其他則是 true。 條件敘述 判定結果 false 5 true -3 "" "0" "00" "0.0"

2-2：迴圈敘述 本小節說明 JavaScript 的迴圈敘述（Loop Statement），這些敘述可以讓電腦反覆地執行某一段程式碼。

for迴圈 基本結構 for (計數變數的初值;判斷式;更改計數變數的值) { 迴圈內部敘述 } 說明 在每一次執行前都會先檢查判斷式，成立就執行迴圈，不成立就跳出迴圈。 更改計數變數的值，是在每次執行完一輪迴圈後，計數變數值的變化。

範例2-6 主題：由 for 迴圈來產生 5 個由小變大的 "Hello World! 說明 連結： forLoop01.htm 重點程式碼 for (i=1; i<=5; i++) { document.write("Font size = " + i + " ===> "); document.write("<font color=green size=" + i + ">Hello World!</font><br>"); } 說明 利用變數i和html字串組合，跑出五種不同大小的字。

for-in迴圈 基本結構 for(變數 in 物件){ … } 說明 這個變數代表物件中每一個屬性的屬性名稱，我們可以用”物件[變數]”，這樣的方式來取得該屬性的值。

範例2-7 主題：使用 for-in 迴圈來列舉 document 物件的屬性 說明 連結： forInLoop01.htm 重點程式碼 for (prop in document) document.write("<br>document." + prop + " = " + document[prop]); </script> 說明 我們可以使用 document.xyz 或 document["xyz"] 來存取屬性 xyz，得到的結果是相同的。

範例2-8 主題：利用for-in loop列舉自訂物件的屬性 說明 連結： forInLoop02.htm 範例中，prop 變數會被分別指定成字串 “name”、“age”、“phone”，代表此物件的屬性名稱。 經由 student[prop] 取得不同屬性所對應的值。

while迴圈 基本結構 while(條件式){ 程式碼 } 說明 程式會先判斷條件式是否成立，再決定是否要繼續迴圈，當條件式成立時，會執行{ }中的程式碼，不成立時則跳出。

範例2-9 主題：用while迴圈亂數產生許多0~1之間的數字。 說明 連結： whileLoop01.htm 重點程式碼 x=Math.random(); while (x<=0.8){ document.write("<br>"+x); x=Math.random(); } 說明 只要條件式為真，while 迴圈的內部敘述就會反覆一再被執行。利用 while 迴圈來反覆印出隨機變數值，直到所遇到的隨機變數值大於 0.8 才停止。

do-while迴圈 基本結構 do{ 程式碼 }while(條件式); 說明 和while不同地方在於do-while會先執行一次再判斷，而while是先判斷一次再執行。 在while(條件式)的後面切記要加上”;”

範例2-10 主題：利用do-while迴圈產生許多0~1之間的數字。 說明： 連結： whileLoop02.htm 重點程式碼 do{ x=Math.random(); document.write("<br>"+x); }while (x<=0.8); 說明： 和範例2-9差別在於do-while最後一個輸出的值會大於0.8。

範例2-11 主題：while 迴圈- break 的使用。 連結： whileLoop03.htm 重點程式碼 while(1){ x=Math.random(); document.write(“<br>”+x); if (x>0.8) break; } 說明 使用break會直接跳出迴圈，迴圈內剩餘的程式碼也不會執行。 while(1)代表無窮迴圈，因為條件式永遠成立(非零)。

範例2-12 主題： for 迴圈- continue 的使用。 說明 連結： whileLoop04.htm 重點程式碼 for (i=0; i<100; i++){ a=Math.random(); if(a<=0.95) continue; document.write("<br>"+a); } 說明 continue會跳下一輪迴圈繼續執行，迴圈中在continue以後的程式碼就不會被執行到了。