JavaScript入門之事件、cookie、定時等

一篇關於“JavaScript語言入門”的文章涵蓋了JavaScript語言中許多最基礎的內容，從建立指令碼標籤到使用注釋、把JavaScript檔案包含到HTML文檔中、定義變數、使用運算子、定義數組、使用條件陳述式、定義函數和使用迴圈等。本文從上一篇文章結束的地方開始，解釋其他的一些基本的JavaScript語言概念，繼續為初學者提供對語言的基礎理解。本文提及的基礎內容能夠讓你更好地理解所使用的庫，知道如何就究竟要不要使用庫做出決定，甚至有可能會給你帶來一些編寫自己的庫的勇氣。文章自始至終都在提供例子來說明語言是如何?其各個方面的。

事件

事件(event)是使用JavaScript語言來把任何類型的互動加入到網頁中的觸媒，每個HTML元素都有你可用來觸發JavaScript代碼的相關事件。例如，input域就有很多可能的事件：你可以關聯focus(焦點)事件，在有人點擊或是跳轉到input域上時就觸發JavaScript代碼，或是你可以關聯一個blur(失焦)事件，當有人點擊一個已獲得焦點的input域的外部或是從該域跳轉出去時觸發JavaScript代碼。在關聯事件之後，就會出現無限的可能性。例如，blur事件會觸發檢查input域中的資料是否有效JavaScript代碼，如果無效的話，就有一條內聯的訊息被顯示出來，作為一種自動的反饋。下面的代碼提供了一個例子，說明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';"/>
這裡的input域帶有一個預設的值，因此，當在網頁瀏覽器中查看該域時，這一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 onmouseover、onmouseout、onclick

try...catch和throw

try...catch語句提供了一種檢測代碼錯誤的方式，這樣就無需把錯誤發送給瀏覽器或是給出一種自訂的錯誤。如果某個JavaScript錯誤沒有被包含在一個try...catch語句的內部的話，則任何後繼的JavaScript代碼就都不能被執行了，而瀏覽器則不得不使用自己的方式來處理和顯示該錯誤。這一語句的try部分被用來執行JavaScript代碼，catch部分則處理可能會在try部分出現的錯誤。在執行一些在某些瀏覽器中可能不能正常工作的代碼時，你可以使用這一語句構造。如果這種代碼放在try...catch語句的內部的話，那麼在有錯誤返回時，它只是被忽略不執行，catch部分則會處理該錯誤。這一錯誤有可能確實給出一個錯誤資訊，或是什麼也不做，這取決於使用者是否需要知道錯誤的出現。

使用try...catch來處理錯誤

該語句的catch部分還可以包含一個預設的錯誤對象參數，這一錯誤對象返回與在語句的try部分出現的錯誤相關的資訊。錯誤對象有兩個屬性：message和line。message提供的文本描述了發生的確切錯誤;line提供了錯誤出現的確切程式碼數。清單1給出了一個try...catch語句例子，該例子使用一個錯誤對象來通知錯誤訊息和行數。當然，這種資訊只有在調試狀態下才是比較有用的，但是在不依賴瀏覽器的處理的情況下，而又打算給使用者提供關於某個已發生錯誤的反饋時，這些屬性就變得很有用了。

清單1. 在try...catch語句中使用錯誤對象來調式錯誤 複製代碼 代碼如下:try
{
// 試圖在這裡執行產生錯誤的代碼
}
catch(err)
{
var txt = err.message +'\n';
txt += err.line;
alert(txt);
}

使用throw語句來建立錯誤異常

try...catch構造提供了非常棒的錯誤處理功能，不過你還可以採取更進一步的做法，那就是使用throw語句。throw語句允許你基於某些條件來建立錯誤異常，這種方式提供了最佳的機會來建立更加方便使用的錯誤資訊，這些錯誤資訊準確且是用通俗易懂的語言來描述的。清單2給出了一個簡單的例子，說明了如何使用throw語句來在try...catch語句的try部分建立一個基於條件的錯誤異常。

清單2. 使用throw語句來建立錯誤異常
複製代碼 代碼如下:<script type="text/javascript">
var x=prompt("What type of music is Led Zeppelin?","");
try
{
if(x != 'rock and roll')
{
throw "Err1";
}
}
catch(er)
{
if(er=="Err1")
{
alert("Sorry, you're wrong.");
}
}
</script>

需要注意的一點是，try、catch和throw都是小寫：使用大寫會產生一個JavaScript錯誤。

建立彈出框

JavaScript允許你建立幾種類型的彈出框，最常見的一些類型——也是這裡要談論的顯示框——是警告框、確認框和提示框。

警告框

警告框並不常用於它們的最初目的，它們是一種快速方便地顯示分頁錯誤、警告或是其他重要訊息的方式。目前，警告框最常用來作為調試JavaScript代碼的方式，所以公平地來講，它們還是有著自己的位置所在的——只是這一最佳做法不是用於最初打算的目的罷了。而且，如果你使用 Mozilla Firefox、Apple Safari或是Google Chrome的話，那麼可以只用console.log就可以達到調試的目的了。所以底線是，當所有其他的做法都失敗了的話，警告框是一個可行的替代方案，能夠完成任務。建立一個警告框非常的容易：只要把alert函數當作一行代碼錄入，並給它傳遞一個參數，其就會使用你傳遞給它的任何值來開啟一個視窗。例如，你可以錄入一個簡單的串，或是你可以使用警告框來顯示作為參數傳遞給它的變數的值，這是一個很好的說明警告框如何用來做調試的例子。下面是一個很基礎的例子，說明如何使用alert函數來產生一個警告框。

alert("This can be a variable or a simple text string");
確認框

確認框被用來驗證使用者在網站上所做的選擇。例如，如果你是web應用的開發人員，而某個使用者選擇了刪除他或她的使用者帳號的話，則在允許使用者繼續提交請求之前對這一選擇進行確認會是一個很好的考慮。

通常情況下，confirm函數會寫在某個條件陳述式的內部，首先確認使用者是否打算要繼續所做的選擇，接著，基於該決定來確定是否要執行JavaScript代碼。下面的例子把confirm函數用在條件中，以此來確定要執行哪一段JavaScript代碼： 複製代碼 代碼如下:if(confirm("Click for a response"))
{
alert('You clicked OK');
}
else
{
alert('You clicked Cancel');
}

提示框

在尋找一種快速的提出問題，並允許使用者提供一個答案的方式時，不要找別的，提示框就最合適了。通常情況下，現在的web開發人員都選擇定製的內聯快顯視窗。雖然是這樣，但提示框依然存在，它們依然有著自己的一席之地，特別是在調試的時候。prompt函數被用來產生一個提示框，其有兩個參數，第一個參數是一個自訂的文本串，這通常是一個問題或是提示用做出某種響應的陳述;第二個參數是一個文本串，其被用作顯示在提示框中的預設的輸入文本。這一預設值是可選的，且你可在運行時改變它。下面是一個prompt函數的列子，該函數被用來向使用者提出一個問題，然後在一個警告框中顯示使用者的響應，顯示用到的是從prompt函數中返回的值。 複製代碼 代碼如下:var response=prompt("What is your favorite band?","Led Zeppelin");
if (response!=null && response!="")
{
alert("response: "+ response);
}

使用cookie

cookie的存在是為了在用戶端儲存資料，這樣你的JavaScript代碼在過後就可以檢索和重用這些資料。如果使用得當的話，把資料存放區在使用者的電腦上會有許多的好處。你可以使用cookie來定製使用者的體驗，確定如何基於之前的行為來給他們呈現資訊等等。cookie使用的例子包括了儲存訪問者的名稱或是其他相關資訊，這些資訊過後可用來顯示在網站上。cookie是一個存放在訪問者的web瀏覽器中的文字檔，其包含了一對名稱-值、一個到期日，以及其應該發送給的伺服器的域和路徑。

建立cookie

建立cookie很簡單：你只需要確定想要存放的資訊、存放的時間長度，以及為將來的引用命名該cookie就可以了。不過，雖然建立它是很簡單，但文法卻有些難整，你需要給出正確的文法，它才能正常地起作用。下面的代碼展示了一個如何建立cookie和把資料存放在其中的例子。

document.cookie =
'cookiename=cookievalue; expires=Sat, 3 Nov 2001 12:30:10 UTC; path=/'
存放在cookie中的串的第一部分是一對名-值，即cookiename=cookievalue這部分，一個分號(;)把這一名值對和第二部分隔開來。串的第二部分是以正確格式書寫的到期日，後面跟著一個分號來把它和第三部分，也就是最後一部分分開來，這一部分是路徑。

從cookie中檢索出資料

把資料存放在cookie中所需的文法有些麻煩，但在以後的時間裡通過名稱來檢索cookie的值卻是很容易。下面是通過名稱來檢索cookie值的做法。

alert(document.cookie);
這一代碼從當前域中取得cookie;不過域中可能存放了多個cookie，document.cookie是一個數組，因此，要檢索某個特定的cookie的話，你需要正確地找到目標。你很走運：清單3中的自訂函數使得這一過程變得很容易，只要把cookie名稱作為參數傳進去，接著就可以收到cookie的值了。

清單3. 從已儲存的cookie中檢索資料
複製代碼 代碼如下:function getCookie(c_name)
{
var i,x,y;
var cookieArray = document.cookie.split(";");
for (i=0;i
{
x = cookieArray[i].substr(0,cookieArray[i].indexOf("="));
y = cookieArray[i].substr(cookieArray[i].indexOf("=")+1);
x = x.replace(/^\s+|\s+$/g,"");
if(x == c_name)
{
return unescape(y);
}
}
}
alert(getCookie('cookiename'));

正如你所見到的那樣，cookie提供了強大的功能，能夠為訪問者建立定製的體驗，也可以只是儲存資料以備以後使用。

定時

JavaScript提供了幾個函數來讓你控制和設定某些行為的執行時間，這類函數中最常見的是：

1. setInterval

2. clearInterval

3. setTimeout

4. clearTimeout

setInterval函數

在某些情況下，JavaScript代碼需要反覆執行但又無需任何的使用者互動，setInterval函數可以讓你很容易就做到這一點。setInterval有兩個必需的和一個可選的參數，第一個必要參數是你想要重複執行的代碼(code)，第二個參數是毫秒(milliseconds)，其定義了JavaScript代碼每次執行的間隔時間長度。第三個選擇性參數是一個可傳遞給函數調用的實際參數，這一函數調用是通過code參數來指定的。一開始你可能會覺得所設定的間隔時間長度有些奇怪，因為它被定義成毫秒。因此，如果你希望每間隔一秒鐘運行一次的話，就是要1000毫秒，兩秒就是2000毫秒，如此類推。表2列出了每個參數及其在setInterval函數中的作用。

表2. setInterval函數的可用參數

參數必需的還是可選的　描述

code必需的 setInterval函數要執行的JavaScript代碼;

這一代碼可以是定製的或是一個函數調用。

milliseconds 必需的 每兩次代碼執行之間的間隔時間長度，以毫秒為單位。

argument　 可選的 是一個很有用的參數，當函數被用作code參數時，

可用來把實際參數傳遞給該函數。

下面的代碼提供了這樣的一個例子，即如何使用setInterval函數來每隔10秒鐘就執行一次另一個函數，並把一個參數傳遞給該函數。這樣argument的值就可以在執行函數的內部被訪問，該參數可以是一個變數、對象，或是一個簡單的文本串，如該例子中展示的那樣： 複製代碼 代碼如下:setInterval(myFunction, 10000, 'sample');
function myFunction(myArg)
{
alert('myFunction argument value: '+ myArg);
}

如果你想要終止這樣的一種間隔執行的話，語言也為此提供了一個函數。

clearInterval函數

終止間隔行為需要用到clearInterval函數，不過在最初建立間隔行為時必須要包含一個變數，這樣之後的clearInterval才能引用它。下面的代碼提供了一個例子，說明clearInterval函數如何引用之前為最初的setInterval設定的變數： 複製代碼 代碼如下:var myInterval = setInterval(myFunction, 10000, 'sample');
function myFunction(myArg)
{
alert('myFunction argument value: '+ myArg);
clearInterval(myInterval);
}

正如你所見到的那樣，最初的setInterval函數被指派了一個變數名，其名稱為myInterval。在這以後你就可以使用myInterval來引用setInterval，並可改變這一變數，或是使用clearInterval函數來停止最初的間隔執行函數。在這一例子中，這一函數只被調用了一次，因為clearInterval函數在該函數第一次調用時就執行了。

setTimeout函數

在可以基於某個時間約束來執行代碼方面，setTimeout函數類似於setInterval函數，甚至其參數也是和setInterval的一樣的(參見表2)。不過，最大的不同則是setTimeout函數只執行代碼一次而不是重複執行。這裡的例子說明了如何使用setTimeout函數來在10秒鐘之後執行一個函數。 複製代碼 代碼如下:setTimeout(myFunction, 10000, 'sample');
function myFunction(myArg)
{
alert('myFunction argument value: '+ myArg);
}

在你希望執行某些代碼，但又不想立刻執行的時候，setTimeout很有用，其實質上就是一種延遲代碼執行的方式。

clearTimeout函數

如果出於某些原因，你改變了主意，需要取消setTimeout設定的延遲行為的話，則clearInterval函數可用來處理這一工作。與clearInterval函數一樣，要為setTimeout函數指派一個變數名稱，這樣過後clearTimeout就可以引用它並停止它所設定的行為。下面的代碼提供的例子說明了如何使用clearTimeout來停止setTimeout設定的調用： 複製代碼 代碼如下:var myTimeout = setTimeout(myFunction, 10000, 'sample');
function myFunction(myArg)
{
alert('myFunction argument value: '+ myArg);
clearTimeout(myTimeout);
}

在這一例子中，你給最初的setTimeout函數指派了一個變數名稱，其被命名為myTimeout。接著你就可以使用myTimeout來引用setTimeout函數並使用clearInterval函數來停止它。

結論

JavaScript語言可以說是最受歡迎的語言之一，現在你明白這是為什麼了。這一簡單而又豐富的指令碼語言帶來了如此之多的可能性，它提供的工具允許網站訪問者和下載後的網頁進行互動，這一功能非常的強大。本文為理解JavaScript語言的基本原理奠定了基礎：接下來要做的事情就是把這些概念付諸實踐，並開始探索JavaScript對象。