JavaScript語言入門: 事件，cookie，定時等

本篇文章，作為系列的第 2 部分，繼續講解 HTTP://www.aliyun.com/zixun/aggregation/33906.html">JavaScript 的基礎知識，內容包括事件、 try...catch 語句 、cookie 的使用和定時函數等。

第一篇 "開始使用 JavaScript 語言" 文章涵蓋了 JavaScript 語言中許多最基礎的內容，從創建腳本標籤到使用注釋、把 JavaScript 檔包含到 HTML 文檔中、定義變數、使用運算子、定義陣列、使用條件陳述式、 定義函數和使用迴圈等。 本文從上一篇文章結束的地方開始，解釋其他的一些基本的 JavaScript 語言概念，繼續為初學者提供對語言的基礎理解。 本文提及的基礎內容能夠讓你更好地理解所使用的庫，知道如何就究竟要不要使用庫做出決定，甚至有可能會給你帶來一些編寫自己的庫的勇氣。 從頭到尾都有完成所有這些的代碼示例。

事件

事件是使用 JavaScript 語言對網頁添加任何交互性類型的催化劑。 每個 HTML 元素都有觸發可用的相關事件來觸發 JavaScript 代碼。 例如，一個 input 欄位有許多可能的事件：當某人按一下或轉入一個 input 欄位，您可以關聯 focus 事件來觸發 JavaScript 代碼，或者當有人轉出或按一下一個有針對性的 input 欄位之外時，您可以關聯一個 blur 事件來觸 發 JavaScript 代碼。 當您已經關聯好事件後，可能性是無窮的。 例如，blur 事件可以觸發 JavaScript 代碼來檢查 input 欄位是否有正確資料，如果沒有，則線上顯示一條資訊作為自動回饋。 以下代碼提供了一個 focus 和 blur 事件在一個 input 欄位內能用於顯示預設文本的示例：

<input type="text" name="email" value="Enter your email address" onfocus="this.value = '';" onblur="if(this.value == '') this.value = 'Enter your email address';" />

在這裡有一個擁有預設值的 field 欄位，當在 web 瀏覽器查看時，input 欄位顯示了文本"Enter your email address"。 當某人按一下或轉入這個欄位時，為了能讓這個預設文本消失，使用 focus 事件並設置一個空字串的欄位值。 如果某人轉出或按一下 input 欄位以外的地方，使用 blur 事件來再次顯示預設文本，否則，留下它們的自訂文本。

每個 HTML 元素都有與它相關聯的時間。 表 1 列出了一些最常見的 HTML 元素和與之相關聯的事件。

表 1. 常見元素及其相關聯的事件

元素 事件 body onload, onunload input onfocus, onblur, onchange, onkeydown, onkeypress, onkeyup form onsubmit img onmous eover, onmouseout, onclick

Try...catch 和 throw

Try...catch 語句提供了一個不需向瀏覽器發送錯誤或顯示一個自訂錯誤就能測試代碼的方法。 如果一個 JavaScript 錯誤不在 try...catch 語句內，則不執行任何一個進行中的 JavaScript 代碼，並且瀏覽器保持它處理和顯示錯誤的原形式。 使用語句的 try 部分來執行 JavaScript 代碼；catch 部分處理 try 部分也許已經出現的錯誤。 當執行也許在某些瀏覽器中沒有運作的代碼時，可以使用這個結構。 如果這個代碼在 try...catch 語句內，很簡單它就不執行。 這個錯誤可以是一個真實的錯誤資訊，或者它也許什麼都不做，這基於使用者是否需要知道它已出現。

用 try...catch 處理錯誤

語句的 catch 部分也包括一個錯誤物件的預設參數。 這個錯誤物件返回發生在 try 語句部分的相關錯誤資訊。 這個錯誤物件有兩個屬性：message 和 line。 message 提供陳述發生的確切錯誤的文本，line 提供錯誤發生的代碼的確切行。 清單 1 顯示了 try...catch 語句的示例，它使用了那個錯誤的物件來警告那條資訊和行。 當然，這條資訊僅對正在調試的環境有用，但是當試圖向使用者對錯誤提供回饋而不依賴于瀏覽器處理錯誤時，這些屬性就能變得有用。

清單 1. 在 try...catch 語句中使用那個錯誤物件來調試錯誤

try { // Attempt to execute code that produces an error here } catch(err) { var txt = err.message +'\n'; txt += err. line; alert(txt); }

用 throw 語句處理錯誤異常

try...catch 結構提供強大的處理錯誤能力，但是您可以通過使用 throw 語句使它更進一步。 throw 語句讓您基於某些場合下創建錯誤異常，這為用準確和淺顯的可讀語言創建更友好的使用者錯誤資訊提供了很好的機會。 清單 2 顯示了如何使用 throw 語句創建一個錯誤異常的示例，這個錯誤異常是基於 try...catch 語句的 try 部分中的情況。