《熟悉if巢状控制结构制作选择式网页试题》由会员分享，可在线阅读，更多相关《熟悉if巢状控制结构制作选择式网页试题（27页珍藏版）》请在金锄头文库上搜索。
1、熟悉if巢状控制结构制作选择式网页试题課程內容v熟悉程式中控制結構*認識if的巢狀控制結構v製作選擇式的網頁試題v認識選項按鈕 （radio）的Properties及method讓程式幫忙做簡單分類v如果希望JavaScript程式能幫忙將學期總成績以下面方式分類：*60分以上為Good*60分以下為Failv通常我們會借用 if 邏輯控制指令來完成此工作v首先我們設定變數*grade代表學期數字成績*credit代表英文成績簡單式的 if 控制結構vcredit = “Good”vif (grade 60)credit = “Fail”grade 60真假credit = “Fail”cre
2、dit = “Good”複和式的 if 控制結構vif (grade 60)*credit = “Fail”velse*credit = “Good”grade 60真假credit = “Fail”credit = “Good”兩種作法vfunction pass1( )vvvar grade=F1.T1.value*1;vvar credit = “Good”;vif (grade 60) credit = “Fail”;vreturn credit;v;vfunction pass2( )vvvar grade=F1.T1.value*1;vif (grade 60)*credit =
3、“Fail”velse*credit = “Good”vreturn credit;v;JS Homework 6-1v開啟FrontPage，將空白網頁以index.htm存於 我的文件WWWjs-6v請依照右圖，並利用前一張投影的function pass2( )完成學期成績評量表（10）*先在 F1.T1 的文字方格輸入學期成績*按下判斷是否及格的按鈕時，F1.T2 顯示 “Good” 或 “Fail”F1.T1F1.T2F1就讓程式做更複雜的分類v如果希望JavaScript程式能幫忙將學期總成績以下面方式分類：*90分100分為A*80分89分為B*70分79分為C*60分69分為D
4、*60分以下為Fv通常我們會借用 if 邏輯控制指令來完成此工作v首先我們設定變數*grade代表學期數字成績*credit代表英文成績懶人的想法vif (grade = 60 & grade = 70 & grade = 80 & grade = 90) credit = “A”雖然這個程式可以達到分類的目的，卻是非常沒有效率雖然這個程式可以達到分類的目的，卻是非常沒有效率，如：，如：grade=35，雖然只有第一個，雖然只有第一個if成立，但是程式執成立，但是程式執行時它還是需要經過所有行時它還是需要經過所有if的判斷，如此會讓程式慢下的判斷，如此會讓程式慢下來！來！複雜的 if 巢狀控制
5、結構grade60credit =“F”grade70credit =“D”falsetruegrade80credit =“C”falsefalsetruegrade90truecredit =“B”falsecredit =“A”true複雜的 if 巢狀控制程式if ( grade 60) credit =“F”else if (grade 70) credit =“D”else if (grade 80) credit =“C”else if (grade 90) credit =“B”elsecredit =“A” if ( grade 60) credit =“F”else if
6、(grade 70) credit =“D”else if (grade 80) credit =“C”else if (grade 90) credit =“B”elsecredit =“A”簡化簡化if巢狀控制程式巢狀控制程式JS Homework 6-2v請在學期成績評量表 中再增加一個按鈕及一個文字方塊如右圖（10）*請仿照pass2 函式寫出轉換成英文成績的函式*按下轉換成英文成績的按鈕時，先呼叫轉換成英文成績的函式，然後將結果顯示在F1.T3如： “A”, “B” . 或 “F”F1.T1F1.T2F1.T3製作選擇式的網頁試題v如果選a 正確v如果選b 錯誤，二氧化錳當去極劑也當
7、氧化劑。 v如果選c 錯誤，石墨當陰極。v如果選d 錯誤，當氧化劑者有氯化銨與二氧化錳。 v你（妳）忘記選擇第一題答案，請先選擇答案複雜的 if 巢狀控制結構a1 = = a正確a1 = = b錯誤falsetruea1 = = c錯誤falsefalsetruea1 = = dtrue錯誤false你忘記.true利用switch簡化複雜的 if 巢狀控制結構vswitch (a1)v*case a :ualert(正確);ubreak;*case b :ualert( 錯誤，二氧化錳當去極劑也當氧化劑。);ubreak;vv下載JavaScript的 test 1範例v請使用IE連結至 :
8、/ cc.nctu.edu.tw/twli/ v請至下載互動式的網頁試題的教材 v開啟test1.htm的網頁，並並將內容拷貝至學期成績評量表 下面加入選項按鈕 Radiov在一般模式下，請於(A)鋅殼為負極 之前，插入選項按鈕 *選按插入表單選項按鈕 v同樣地在(B) (C) (D)插入選項按鈕 v選按(A) 的選項按鈕 兩次出現另一小視窗，將 “起使狀態”改為未選擇選項按鈕 Radio物件的說明v重要的屬性*checked: true or false *name*type:radio*valuev事件*onClickvname: 同一題目的選項按鈕 必須是同一名字，如範例一其選項按鈕 的
9、名字皆為R1。但是每一選項按鈕 的真正名字必須依照順序加上編碼，如範例一的第一選項按鈕在JavaScript中應稱為 R10vvalue:在JavaScript中使用 R1.value 是得不到任何值，反而得到錯誤訊息。必須以R11.value才能得到真正的值。v由於R1?是屬於array的觀念，我們等到下一堂課再談此物件Radio物件上的onClick事件v使用變數 a1來代表所選擇的答案v因此使用onclick的事件與變數a1的結合，來告知JavaScript程式使用者做何種單一選擇，會比較容易讓初學者瞭解，而且方便程式的設計。如：v當使用者選擇答案(a)時，程式就讓 a1=“a”*編寫函
10、式 checkAnsv先將檢查答案按鈕的onclick的事件內容改為*onclick= checkAns()vcheckAns()的功能在判斷a1*如果等於a 顯示 正確*如果等於b顯示錯誤，二氧化錳當去極劑也當氧化劑。*如果等於c顯示錯誤，石墨當陰極。*如果等於d顯示錯誤，當氧化劑者有氯化銨與二氧化錳。*如果不等於a, b, c or d顯示你（妳）忘記選擇第一題答案，請先選擇答案如何檢驗忘記選擇v在function checkAns()之前加入，如：function checkAns()switch (a1) 如果a1等於a case a : alert(正確); break;如果a1等於
11、b case b : alert(錯誤，二氧化錳當去極劑也當氧化劑。);break;如果a1等於c case c: alert(錯誤，石墨當陰極。);break;如果a1等於d case d: alert(錯誤，當氧化劑者有氯化銨與二氧化錳。);break;如果a1不等於a, b, c or d default:alert(你（妳）忘記選擇第一題答案，請先選擇答案);break; 為什麼 a1未被定義呢？v變數a1只存活在選項按鈕 onclick事件發生的地方。若沒特別聲明當事件發生後，a1記憶的內容將不會被傳入函數裡。此種變數稱為 Local Variable 。解決方式有兩種方式：*將a1
12、置於傳喚函數的名單中如ufunction checkAns(a1)*將a1改為Global Variable，如下一張投影片。Global Variable vsLocal VariablevGlobal Variable即在程式任何角落皆存在的變數，通常在函式的外面宣告，如： var a1=0var a1=0 function checkAns()vLocal Variable只有在函式裡才存活的變數，一旦在函式外變數內容就不存在，而且消失之。通常在函式內宣告，如function checkAns() var a1 =c=c練習一v請使用IE開啟test-hw1.htmv請將 test-hw
13、1.htm 的題目拷貝在test1.htm裡，當成第二題。v然後以 test-hw1.htm 的答案提示做出類似test1.htm的單選式網頁試題檢查函式v注意：*第二題必須要有自己的函式，如checkAns2()*第二題選擇按鈕的族群名稱為R2*第二題必須要有自己的按鈕*第二題在onclick事件中的變數是 a2JS Homework 6-3vHW 6-3： (20%)*請完成 test1.htm *請將 test-hw1.htm 的題目拷貝在test1.htm裡，當成第二題。*然後以 test-hw1.htm 的答案提示做出類似test1.htm的單選式網頁試題檢查函式，注意：u第二題必須
14、要有自己的函式，如checkAns2()u第二題選擇按鈕的族群名稱為R2u第二題必須要有自己的按鈕u第二題在onclick事件中的變數是 a2JS Homework 6-4vHW 6-4： (10%)*請利用dice1.gif dice6.gif設計一個擲骰子的遊戲*需要一個圖片物件及按鈕物件*圖片原先放的是dice.gif的圖片*按一下按鈕會讓圖片任意出現diec1.gif dice6.gif的圖片。*即按下按鈕之後，去呼叫一函式。而此函式會自動產生16的任意整數，然後依照所產生的數字更換圖片的內容。作業繳交方式v此作業將與下一作業一起合算為一份，兩份作業一起總分為100分v將js-6整個目錄上傳至WWW，並在目錄框架中為其增加新的超連結JS Homework 6v請在12月16日午夜十二點以前在BB寫出你的個人網址並請助教檢查*12月16日午夜十二點以前滿分100分*12月16日午夜十二點以後就不需要繳交，以0分計算
