設計自己需要的函式 (function) 與認識 if 邏輯的控制結構

設計自己需要的函式(function)與認識 if邏輯的控制結構李大偉交通大學

課程內容 • Java Script與HTML的關係 • 什麼是自訂函式—function（或是副程式）？ • 瞭解建立function的目的、語法 • 認識呼叫function的方法 • 認識函式中參數的用法 • 認識函式中return的語法 • 認識if的控制結構 • 瞭解什麼是 if ……else…… • 認識 if 的邏輯判斷語法

Math物件的內建函式 • 在上一堂課我們已經知道在數學的物件中有許多很好用的內建函式（predefined function）如： • result = Math.cos(3.14159) • lotto = Math.random( ) • X=Math.pow(3,7)

自己需要的函式(function) • 可是，有時候在某些科學領域，他們所需要的常用的函式，卻不在數學物件中可以發現，如在2D空間中計算兩個分子之間的距離

完整的函式宣告包括 函式的名稱參數的傳遞函式的起始符號及終了符號自訂函式function的格式 • <script language=JavaScript> • function distance(x1,y1,x2,y2) • //input: coordinates x1,y1,x2,y2 • //output: distance between molecule1 and molecule 2 • { • ……… • } • </script> • </head>

呼叫自訂函式 function • 呼叫(call)自訂函式function的語法跟呼叫(call)Math物件的內建函式非常類似，只不過在呼叫(call)自訂函式function不需要再叫此函式的父親，如： • 呼叫Math物件的sqrt：r = Math.sqrt(36); • 呼叫自訂函式distance：r = distance(1,1,3,4)

製作「計算分子間的距離」的表單 • 開啟FrontPage，將空白網頁以「index.htm」存於「桌面\WWW\js-5」 • 先在「一般」狀態，輸入標題「計算分子間的距離」，接著下面插入1×1的表格 • 在表格中選按「插入」「表單」「文字方塊」，然後將「提交」「重新輸入」刪除。 • 在此文字方塊前輸入「分子1與分子2間的距離：」 • 跳下一行後，選按「插入」「表單」「按鈕」，摽將「按鈕」改為「計算」 • 如右圖

命名「計算分子間的距離」上的物件 TYPE="text" NAME=“T1“ 文字方塊：其名為 “T1” <form name=“F1"> 表單：其名為 “F1” type= " button " " name="B1" > 按鈕：其名為“B1”

建立distance自訂函式 • 在html模式下，在</head>之前輸入 • <script language=JavaScript> • function distance(x1,y1,x2,y2) • //input: coordinates x1,y1,x2,y2 • //output: distance between molecule1 and molecule 2 • { • Var dxy; • dxy = ((x2-x1)^2+(y2-y1)^2)^0.5 • return dxy; • } • </script> 此為EXCEL中的公式，無法在JavaScript中使用請利用右邊的內建函數寫出此公式

return在 function所扮演的角色 • return的語法： • return + 變數 or return + 算式 • 在function的程式中如果有return存在，function的程式一執行到此即結束，並將return後所帶的算式之計算結果傳回當成呼叫此function的值。 • 若function的程式中如果沒有return存在，則function的程式將執行至終了符號「}」，然後回到原呼叫此function的地方，但是此時的function不等於任何值。

建立onClick的事件 • 在「HTML」狀態下，找到 <input type= " button " value= "計算" name="B1" > 在「B1」之後加入onClick事件處理，如： • onClick="T1.value=distance(1,1,4,5) “ • 試試看分子之間的距離是否等於5? • 作業一： • 現在x1,y1,x2,y2是固定值（1,1,4,5），請設計以文字方塊的詢問形式輸入x1,y1,x2,y2 • 下面三張投影片是示範

建立輸入x1,y1,x2,y3的文字方塊 • 在「分子1與分子2間的距離：」之前放置四個文字方塊，並且分別在文字方塊前輸入： • 分子1的x座標(x1)： • 分子1的y座標(y1)： • 分子2的x座標(x2)： • 分子2的y座標(y2)：

命名「計算分子間的距離」上的新物件 T2 T3 T4 T5

在「HTML」狀態下，找到 <input type="text" name="T2" size="20" > 在「>」之前加入onChange事件處理，如： onChange=“x1=T2.value “ 修正呼叫distance的指令 "T1.value=distance(1,1,4,5) “  ="T1.value=distance(x1,1,4,5) “ 試試看是否能在T2中任意輸入數字改變計算結果若能請繼續完成作業一。在T2建立onChange的事件

函式—function的用處 • 用來定義自己所需要的特定常用數學函式。 • 在不同的地方常常使用相同的程式時，可先將此程式寫為函式，然後直接呼叫之即可。 • 另外更重要的是當JavaScript的指令太長時，使得HTML主體程式不易閱讀，因此使用函式以簡化HTML主體程式

更新「加減乘除練習表」 • 請將「js-4」作業中的「加減乘除練習表」拷貝至此 • 移至剛剛的FrontPage，改為「HTML」模式，在</body>之前貼上剛剛選取的部分，結果應如右圖

在「HTML」模式下找到「出題」的按鈕物件，將其onClick後的指令全部拷貝在「HTML」模式下找到「出題」的按鈕物件，將其onClick後的指令全部拷貝再到</script>之前，建立quiz函式如下： function quiz() { 將剛剛拷貝「出題」的指令全貼於此 }; 再回到「出題」中的onClick改為 onClick=“quiz()” 在function quiz()中，所有文字方塊的物件都要加上父親物件的名字，如： T1.value=Math.floor((99+1)*Math.random());  F2.T1.value=Math.floor((99+1)*Math.random()); 沒有return指令的函式

增加「檢查答案」按鈕 • 在「一般」模式下，然後在「加減乘除練習表」的「出題」按鈕再增加一個「檢查」的按鈕，其物件的name應為「B3」如右圖

檢查答案的函式 • 在「檢查答案」的按鈕加上onClick的指令如下： • <input type="button" value="檢查答案" name="B3" onclick=check()> • 再到</script>之前，建立check函式的想法如下： • 先將F2.T1的值加上F2.T2的值存於P1 • 再將F2.T3的值存於P2 • 最後檢查P1等於P2 • 如果相等，將F2.T3的文字改為correct! • 如果不相等，將F2.T3的文字改為wrong!

if ( P1 == P2) { 執行相等成立時的任務如：將F2.T3的文字改為correct! } Else { 執行相等不成立時的任務如：將F2.T3的文字改為correct! } function check() { var P1=F2.T1.value+F2.T2.value; var P2=F2.T3.value; if (P1 == P2) {F2.T3.value="Correct!";} else {F2.T3.value="Wrong!";} } if指令的介紹

= = 等於 ! = 不等於 < 小於 <= 小於等於 > 大於 > = 大於等於 ! logical NOT && logical AND || logical OR 範例 if ( r > 2 && r <=5) {F2.T1.value=“good!”} else {F2.T1.value=“bad!”} 認識 if 的邏輯判斷語法

簡單式的 if 控制結構 • credit = “Good” • if (grade < 60){credit = “Fail”} credit = “Good” grade < 60 真假 credit = “Fail”

複和式的 if 控制結構 • if (grade < 60) • {credit = “Fail”} • else • {credit = “Good”} grade < 60 真假 credit = “Fail” credit = “Good”

想想看上一張投影片的函式有何錯誤？ 為什麼正確的答案還是顯示「Wrong!」呢？請使用parseInt的指令幫忙將F2.T1.value的純文字資料改為整數資料如： parseInt（F2.T1.value) 介紹新指令 parseInt( )：將純文字資料改為整數資料 parseFloat( )：將純文字資料改為實數資料修正上面的函式

JS Homework 5-1 • HW1：完成「計算分子間的距離」 (10%) • 請設計以文字方塊的詢問形式輸入 • X1:分子1的x座標 • Y1:分子1的y座標 • X2:分子2的x座標 • Y2:分子2的y座標 • 最後能計算出正確的分子間的距離 • 在「計算」按鈕的右邊再放一個按鈕「任意擺放分子」，當按下去時，可以在T2, T3, T4, T5任意產生0~10間的任意實數。

JS Homework 5-2 • HW2：完成「加減乘除練習表」的更新 • 完成「檢查答案」按鈕(15%) • 檢查加減乘除的結果 • 若該文字方塊答案正確，將內容改為Correct! • 若該文字方塊答案錯誤，將內容改為Wrong! • 增加「出題」按鈕的功能(15%) • 維持原來所有加減乘亂數的產生規則 • 唯有被除數必須為除數的整數倍N，其N的範圍為1~19的任意整數。注意仍然維持除數是2~9之間的任意整數。 • 需將加減乘除的結果，全部清乾淨如： • F2.T3.value=“ “;

JS Homework 5-3 • HW3：「是否為5或7的倍數？」的檢查 • 完成「檢查」按鈕 (10%) • 若該文字方塊的數字為7的倍數，將內容改為「此數為7的倍數」 • 若該文字方塊的數字為5的倍數，將內容改為「此數為5的倍數」 • 若該文字方塊的數字為5及7的公倍數，將內容改為「此數為5及7的公倍數」 • 若該文字方塊的數字不是5或7的倍數，將內容改為「此數不是5或7的倍數」 • 將「js-5」整個目錄上傳至WWW，並在目錄框架中為其增加新的超連結「JS Homework 5」

是否為5或7的倍數？ 是否為5的倍數？是否是否為7的倍數？是否為7的倍數？否是是否此數為5及7的公倍數此數為5的倍數此數為7的倍數此數不是5或7的公倍數

作業繳交方式 • 請在今天（12月9日）午夜十二點以前在BB寫出你的個人網址並請助教檢查，如 • http://s-web.cc.nctu.edu.tw/~u98250??? • 並且告訴助教何者超連結是「 Javascript Homework 4」作業，何者超連結是「Javascript Homework 5」作業 • 12月9日午夜十二點以前繳交滿分100分 • 12月9日午夜十二點以後就不需要繳交，以0分計算

設計自己需要的函式 (function) 與認識 if 邏輯的控制結構