《第二章程式控制結構.ppt》由会员分享,可在线阅读,更多相关《第二章程式控制結構.ppt(24页珍藏版)》请在得力文库 - 分享文档赚钱的网站上搜索。
1、第二章程式控制結構,張智星 jangmirlab.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
2、這樣的架構只會執行程式碼 1 或 2,一組if-else敘述只會執行其中一段程式碼。,範例2-1,主題:利用if-else敘述,判斷使用者輸入的值。 連結:ifElse01.htm 重點程式碼if (a30)alert(您只有 +a+ 歲,真是青年才俊啊!);elsealert(您年過30,想必是事業有成了!); 說明 如果在if-else程式碼只有單行,可以省略 符號。 如果需要判斷很多種可能,可以用ifelse ifelse,其中else if的個數視需求而定。,switch-case 敘述,switch-case基本結構switch(var)case 1:程式碼1; break;case
3、 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,則系統會在符合某一
4、個特定條件後,繼續執行下列其他條件的敘述,產生不是我們要的結果。,範例2-3,主題:根據範例2-2的程式碼,將break註解所產生的結果 連結: switch02.htm 說明 以上 switch-case 的行為,和 C/C+ 中的 switch-case 是完全相同的。,邏輯判斷,若是判斷條件較複雜,我們也可以使用且、或、否定等方式來產生複合條件。 範例:判斷是否a 大於零,或 b 和 c 均不小於零。if (a0)| (!(b0) hour = (hour=12)? hour-12:hour; 說明 在”?”的右邊可以直接放值,如果條件成立,將左邊的值存到變數中,反之亦然。,範例2-5,
5、主題:判斷條件的真偽。 連結:testIf.htm 說明 當運算結果是一個數值時,若此數值等於 0,則是 false,其他則是 true。 當運算結果是一個字串時,若此字串等於空字串“”,則是 false,其他則是 true。,2-2:迴圈敘述,本小節說明 JavaScript 的迴圈敘述(Loop Statement),這些敘述可以讓電腦反覆地執行某一段程式碼。,for迴圈,基本結構for (計數變數的初值;判斷式;更改計數變數的值) 迴圈內部敘述 說明 在每一次執行前都會先檢查判斷式,成立就執行迴圈,不成立就跳出迴圈。 更改計數變數的值,是在每次執行完一輪迴圈後,計數變數值的變化。,範例2
6、-6,主題:由 for 迴圈來產生 5 個由小變大的 Hello World! 連結: forLoop01.htm 重點程式碼for (i=1; i ); document.write(Hello World!); 說明 利用變數i和html字串組合,跑出五種不同大小的字。,for-in迴圈,基本結構for(變數 in 物件) 說明 這個變數代表物件中每一個屬性的屬性名稱,我們可以用”物件變數”,這樣的方式來取得該屬性的值。,範例2-7,主題:使用 for-in 迴圈來列舉 document 物件的屬性 連結: forInLoop01.htm 重點程式碼for (prop in documen
7、t) document.write(document. + prop + = + documentprop); 說明 我們可以使用 document.xyz 或 documentxyz 來存取屬性 xyz,得到的結果是相同的。,範例2-8,主題:利用for-in loop列舉自訂物件的屬性 連結: forInLoop02.htm 說明 範例中,prop 變數會被分別指定成字串 “name”、“age”、“phone”,代表此物件的屬性名稱。 經由 studentprop 取得不同屬性所對應的值。,while迴圈,基本結構while(條件式) 程式碼 說明 程式會先判斷條件式是否成立,再決定是否
8、要繼續迴圈,當條件式成立時,會執行 中的程式碼,不成立時則跳出。,範例2-9,主題:用while迴圈亂數產生許多01之間的數字。 連結: whileLoop01.htm 重點程式碼x=Math.random(); while (x+x); x=Math.random(); 說明 只要條件式為真,while 迴圈的內部敘述就會反覆一再被執行。利用 while 迴圈來反覆印出隨機變數值,直到所遇到的隨機變數值大於 0.8 才停止。,do-while迴圈,基本結構do 程式碼while(條件式); 說明 和while不同地方在於do-while會先執行一次再判斷,而while是先判斷一次再執行。 在
9、while(條件式)的後面切記要加上”;”,範例2-10,主題:利用do-while迴圈產生許多01之間的數字。 連結: whileLoop02.htm 重點程式碼do x=Math.random(); document.write(+x);while (x=0.8); 說明: 和範例2-9差別在於do-while最後一個輸出的值會大於0.8。,範例2-11,主題:while 迴圈- break 的使用。 連結: whileLoop03.htm 重點程式碼while(1) x=Math.random(); document.write(“”+x); if (x0.8) break; 說明 使用break會直接跳出迴圈,迴圈內剩餘的程式碼也不會執行。 while(1)代表無窮迴圈,因為條件式永遠成立(非零)。,範例2-12,主題: for 迴圈- continue 的使用。 連結: whileLoop04.htm 重點程式碼for (i=0; i+a); 說明 continue會跳下一輪迴圈繼續執行,迴圈中在continue以後的程式碼就不會被執行到了。,
限制150内