02-程式控制结构.ppt

JavaScript 程式設計與應用：用於網頁用戶端 第二章程式控制結構 張智星 jang@ /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 (a30) 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 ((a0)|| (!(b0) !(c0))){ ...} 說明 符號 且 或 || 否定 ! 條件運算子 基本架構條件 ? 程式碼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。 條件敘述 判定結果 0 false 5 true -3 true false 0 true 00 true 0.0 true 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 +