JavaScript函數(function)
函數 (function) 是 JavaScript 中的功能模組，一些重複性的工作皆可放在函數之中，需要進行這些工作時，再進行呼叫相關函數即可。
基本的函數定義如下
function 函數名稱(參數列) {
相關陳述;
}
定義函數使用關鍵字 (keyword) function ，其後空一格接函數的識別字 (identifier) 名稱與小括弧，小括弧內為可有可無的參數列 (parameter list) ，其後為成對的大括弧，大括弧裡頭放置相關的功能陳述。所謂的參數 (parameter) 係指傳遞給函數的資料，函數可依此資料進行相關工作。
程式範例1如下:
|
<!DOCTYPE html>
<html lang="en"> <head> <meta charset="utf-8" /> <title></title> <!--選擇器的取法 id="div1" => #div1 class="div1" =>.div1 --> <style> #div1{ position: absolute; left: 250px; top: 50px; width: 80px; height: 80px; color: #f00; background: #00ff21; } </style> </head> <body> <div id="div1" > test </div> </body> </html> <script> //把"hahaha"的值塞入"div1"的標籤內 document.getElementById("div1").innerHTML = "hahaha"; //1.宣告函數(無參數) function test() { window.alert("測試函數"); }; //呼叫函數才能執行 window.test(); //2.宣告函數(帶參數) function add(x, y) { var sum = x + y; window.alert(x + " + " + y + " = " + sum); } //呼叫函數才能執行 window.add(3, 4); //3.宣告函數(帶參數、有回傳值) function add2(x, y) { var sum = x + y; return sum; } //把add2(3, 7)函數計算後的值塞入"div1"的標籤內 document.getElementById("div1").innerHTML = add2(3, 7); </script> |
呈現效果:
圖一:
圖二:
圖三:
HTML 常用之使用者操作元件
凡是GUI形式（Graphical User Interface，圖形使用者界面)的程式環境幾乎都會提供一些讓使用者操作的元件(widget)[window dage]，HTML環境常用的有:按鈕、文字輸入框、文字輸入區、單選項、複選項、下拉選單、上傳選單...
單選項 http://www.webtech.tw/info.php?tid=93
複選項 http://www.webtech.tw/info.php?tid=94
下拉選單 http://www.webtech.tw/info.php?tid=92
使用 CSS 語法的 position:absolute; 座標定位方法
程式範例2如下:
<!DOCTYPE html>
<html lang="en"> <head> <meta charset="utf-8" /> <title></title> <!--使用div 置中--> <style> .table{ position: absolute; width: 300px; height: 500px; top: 50%; left: 50%; background: #e76ac2; margin-top: -250px; margin-left: -150px; } </style> </head> <body> <!--HTML 常用之使用者操作元件--> <div class="table"> 資料調查表:<br><hr> 姓名: <input type="text" > <br><hr> 性別: 男<input type="radio" value="男" name="sex"> 女<input type="radio" value="女" name="sex"> X <input type="radio" value="X" name="sex"> <br><hr> 住址: <textarea rows="3" cols="30"></textarea> <br><hr> 興趣:<br> <input type="checkbox" value="看書">看書<br> <input type="checkbox" value="打球">打球<br> <input type="checkbox" value="看電視">看電視<br> <input type="checkbox" value="購物">購物<br> <hr> 居住地點: <select> <option>台北市</option> <option>新北市</option> <option>桃園市</option> <option>台中市</option> <option>台南市</option> <option>高雄市</option> </select> <br><hr> 照片上傳:<input type="file"> <br><hr> <div> <input type="button" value="完成"> <input type="button" value="取消"> </div> </div> </body> </html> |
呈現效果:
改用<table>標籤呈現資料調查表:
程式範例3如下:
作法:
1.架構階層排出來會比較好寫code
2.<table></table>內資料先做出來
3.再慢慢調樣式(css 的style)
<!DOCTYPE html>
<html lang="en"> <head> <meta charset="utf-8" /> <title>資料調查表(列表顯示)</title> <style> .table{ position: absolute; width: 500px; height: 400px; top: 50%; left: 50%; background: #f7d534; margin-top: -250px; margin-left: -200px; border-color: #0ff; } .table_title{ text-align: center; font-size: 24px; height: 50px; } .row_title{ text-align: right; width: 100px; height: 30px; } .botton{ text-align: center; } </style> </head> <body> <table border="1" class="table"> <!--8個--> <tr > <td colspan="2" class="table_title" >資料調查表</td> </tr> <tr> <td class="row_title">姓名: </td> <td> <input type="text" > </td> </tr> <tr> <td class="row_title">性別: </td> <td> 男<input type="radio" value="男" name="sex"> 女<input type="radio" value="女" name="sex"> X <input type="radio" value="X" name="sex"> </td> </tr> <tr> <td class="row_title">地址: </td> <td> <textarea rows="3" cols="30"></textarea> </td> </tr> <tr> <td class="row_title">興趣: </td> <td> <input type="checkbox" value="看書">看書<br> <input type="checkbox" value="打球">打球<br> <input type="checkbox" value="看電視">看電視<br> <input type="checkbox" value="購物">購物<br> </td> </tr> <tr> <td class="row_title">居住地點: </td> <td> <select> <option>台北市</option> <option>新北市</option> <option>桃園市</option> <option>台中市</option> <option>台南市</option> <option>高雄市</option> </select> </td> </tr> <tr> <td class="row_title">照片上傳: </td> <td> <input type="file"> </td> </tr> <tr> <td colspan="2"> <div class="botton"> <input type="button" value="完成"> <input type="button" value="取消"> </div> </td> </tr> </table> </body> </html> |
呈現效果:
事件觸發(event)
當視覺化的元件被使用者操作時，系統會因應元件種類與操作的方式，產生一個"事件"。事件本身也是一個物件，它標誌著使用者在元件上的動作。我們可以因應某些特定的事件做一些自動化的工作。(若沒作，事件物件會在一定的時間後系統會消滅)
事件處理模式
1.將要做的自動化工作包裝成一個函數(這個函數稱為事件處理函數)
2.在要反應事件的元件上以"事件屬性"的方式指定事件處理函數。
w3C提供處理監聽器事件的方法
程式範例4如下:
<!DOCTYPE html>
<html lang="en"> <head> <meta charset="utf-8" /> <title></title> </head> <body> name:<input type="text" id="showMessage" onclick="showMessage()" value="文字" > <button onclick="do_something()" class="btn">按鈕</button> </body> </html> <script> //設定按鈕的觸發事件 function do_something() { window.alert("測試按鈕事件..."); } //設定按鈕的觸發事件(取得value值) function showMessage() { var data = document.getElementById("showMessage").value; var showMsg = window.prompt(data, "測試文字事件"); alert(showMsg); } </script> |
呈現效果如下:
事件進階(System)
注意!!不盡然所有的事件都是使用者操作元件造成的，有些"系統事件"是網頁運行到某種階段或發生外在環境改變時會由系統觸發，如:
window物件有一個onload事件，這個事件會在網頁下載完成時由系統觸發。
程式範例5如下:
呈現效果如下:
沒有留言:
張貼留言