2011-08-26 15:59:48

JavaScript-函數,事件

函數 (Function)
「函數」(Functions)是所有的程式語言必備的功能。JavaScript 的函數可以分成內建函數及使用者定義的函數:
內建函數:又分成兩類
一般內建函數,如 parseInt() 和 parseFloat() 等。
與物件結合的函數,例如 Math.sin() 或 string.big()等,這類的函數又稱為物件的方法(Method)。

使用者定義的函數:也可以分一般函數與物件的方法兩類。

函數其實是一組編寫好了的程序,你可以自行定義它來做指定的工作。在定義了函數之後,當你要執行該函數的程序,只須呼叫它便可。

使用函數的好處是可以將一個大的程式分成多個小部份,方便管理及偵錯,還可以讓程式的每個部份都可以共用函數,以減少重複的程序。

如何定義函數:
語法: 定義函數

function是一個關鍵字,用來定義一個函數,而函數的名稱就寫在function之後。
function_name是該函數的名稱,用來表示該函數。
( )是左括號和右括號, 括號內是用來輸入參數的,如果沒有參數,括號內就不用寫任何東西。本篇稍後會講述參數。
{ } 是左大括號和右大括號,函數的程序碼就寫在大括號範圍內。

函數的定義包含函數名稱 (Function name) 及輸入引數 (Input arguments),其基本格式如下:


function function_name(Input arguments) {
// 在大括號{ } 的範圍間寫入程序碼
...
return(output) // 非必要
}

輸入參數:
有時我們希望函數在不同的情況下有不同的結果,因此會用參數。將參數傳入函數, 成為函數內的變數,就可以根據這些變數的內容來做不同的工作。

定義一般函數的寫法:你可以傳入任何數目的參數,唯參數與參數之間須用逗號分隔 (,)。


function function_name(arg1, arg2, ..., argN) {
// arg1, arg2 至到 argN 都成為本函數的變數了
}

傳回資料:
函數也可以傳回 (return) 資料, 通常這些資料是該函數的運算結果。

傳回資料的寫法:


function function_name() {
// 用 return 關鍵字傳回資料
return data
//data 可以是任何型態的資料
}

事件 (Event)
事件是由系統轉化使用者的動作或系統訊息而得來的。使用者的動作例子包括:按下滑鼠鍵、確定送出表單...等。

在一個網頁內,事件通常是指由瀏覽器所偵測到使用者的特定動作,瀏覽器可以根據所偵測到的事件,來進行相關動作。舉例來說,使用者點選或移動滑鼠,或是瀏覽器的載入網頁,都可以看成是事件的產生。對於特定的事件,我們可以在瀏覽器內偵測得之,並以特定的程式來對此事件做出反應,此程式即稱為「事件處理器」(Event handlers),又稱為 Callback。

事件處理的好處就是不用在主程式內檢查某事件有否發生,我們只須把要做的工作連繫到事件,當某事件真的發生了,系統就自動把這個訊息送到程式,那就會自動執行要做的工作了。

JavaScript 的事件處理者通常是連繫著物件的,因此不同的物件就支援不同的事件處理者。以下是 JavaScript 常用的事件處理器:


事件處理器事件發生於
onBlur使用者離開某一欄,失去焦點時
onChange使用者改變某一欄的內容,改變物件選項或字串時
onClick使用者按下某個按鈕,點選某一個物件時
onFocus使用者的輸入焦點進入某一欄,得到焦點時
onLoad某一頁完全載入,瀏覽器載入網頁時
onMouseOver滑鼠游標在某個物件之上
onMouseOut滑鼠游標離開某個物件
onMouseup鬆開滑鼠按鈕時
onMouseDown按下滑鼠按鈕時
onSelect使用者選擇某一欄的內容
onSubmit使用者確定送出某表單
onUnload正在顯示的一頁被改變,瀏覽器離開網頁時

例子說明:

首先為大家介紹一個關鍵字 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