JavaScript-函數,事件
函數 (Function)
「函數」(Functions)是所有的程式語言必備的功能。JavaScript 的函數可以分成內建函數及使用者定義的函數:
內建函數:又分成兩類
一般內建函數,如 parseInt() 和 parseFloat() 等。
與物件結合的函數,例如 Math.sin() 或 string.big()等,這類的函數又稱為物件的方法(Method)。
使用者定義的函數:也可以分一般函數與物件的方法兩類。
函數其實是一組編寫好了的程序,你可以自行定義它來做指定的工作。在定義了函數之後,當你要執行該函數的程序,只須呼叫它便可。
使用函數的好處是可以將一個大的程式分成多個小部份,方便管理及偵錯,還可以讓程式的每個部份都可以共用函數,以減少重複的程序。
如何定義函數:
語法: 定義函數
function是一個關鍵字,用來定義一個函數,而函數的名稱就寫在function之後。
function_name是該函數的名稱,用來表示該函數。
( )是左括號和右括號, 括號內是用來輸入參數的,如果沒有參數,括號內就不用寫任何東西。本篇稍後會講述參數。
{ 和 } 是左大括號和右大括號,函數的程序碼就寫在大括號範圍內。
函數的定義包含函數名稱 (Function name) 及輸入引數 (Input arguments),其基本格式如下:
|
輸入參數:
有時我們希望函數在不同的情況下有不同的結果,因此會用參數。將參數傳入函數, 成為函數內的變數,就可以根據這些變數的內容來做不同的工作。
定義一般函數的寫法:你可以傳入任何數目的參數,唯參數與參數之間須用逗號分隔 (,)。
|
傳回資料:
函數也可以傳回 (return) 資料, 通常這些資料是該函數的運算結果。
傳回資料的寫法:
|
事件 (Event)
事件是由系統轉化使用者的動作或系統訊息而得來的。使用者的動作例子包括:按下滑鼠鍵、確定送出表單...等。
在一個網頁內,事件通常是指由瀏覽器所偵測到使用者的特定動作,瀏覽器可以根據所偵測到的事件,來進行相關動作。舉例來說,使用者點選或移動滑鼠,或是瀏覽器的載入網頁,都可以看成是事件的產生。對於特定的事件,我們可以在瀏覽器內偵測得之,並以特定的程式來對此事件做出反應,此程式即稱為「事件處理器」(Event handlers),又稱為 Callback。
事件處理的好處就是不用在主程式內檢查某事件有否發生,我們只須把要做的工作連繫到事件,當某事件真的發生了,系統就自動把這個訊息送到程式,那就會自動執行要做的工作了。
JavaScript 的事件處理者通常是連繫著物件的,因此不同的物件就支援不同的事件處理者。以下是 JavaScript 常用的事件處理器:
|
例子說明:
首先為大家介紹一個關鍵字 this , this 其實是一個物件,它是指當時正在使用中的物件。例子中的 this 是在 input 的 HTML 標記範圍內,因此 this 就是指那個 input 物件了,那個 input 物件有 type、name 和 value 三個屬性,因此 this 也有這三個屬性了。用 this 的好處就是不用知道該物件的名稱也可以使用該物件。
onClick 是一個事件處理者,當使用者按下按鈕時,就會自動執行 onClick 屬性內容的 JavaScript 敘述。
bt_details(this) 是一個函數,輸入的參數就是一個物件 this ,亦即是該個 input 物件。
function bt_details(this_bt)
參數 this 會輸入到 this_bt 變數,成為一個物件型態的變數,而這個變數就儲存著該個 input 物件了,因此 this_bt 也有 type、name 和 value 三個屬性。
type="button"
JavaScript 定義了一個新的 <input> 類別 (Type),名叫 button ,是一個普通的按鈕。
常用的其他事件的列表 | |
---|---|
事件名稱 | 說明 |
onblur | An element loses focus |
onerror | An error occurs |
onfocus | An element gains focus |
onload | The document has completely loaded |
onreset | A form reset command is issued |
onscroll | The document is scrolled |
onselect | The selection of element has changed |
onsubmit | A form submit command is issued |
(參考來源)
http://www.9w2u.com/htmlbook.asp?book=2
http://welkingunther.pixnet.net/blog/post/32084577
http://ant4js.blogspot.com/2009/01/windowmthv6.html