设计自己需要的函式（function）与认识if逻辑的控制结构.pptVIP

設計自己需要的函式(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間的距離：」 跳下一行後，選按「插入」「表單」「按鈕」，摽將「按鈕」改為「計算」 如右圖 命名「計算分子間的距離」上的物件 form name=“F1 表單：其名為 “F1” TYPE=text NAME=“T1“ 文字方塊：其名為 “T1” 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 在T