JavaScript入門之事件、cookie、定時等
一篇關(guān)于“JavaScript語言入門”的文章涵蓋了JavaScript語言中許多最基礎(chǔ)的內(nèi)容，從創(chuàng)建腳本標(biāo)簽到使用注釋、把JavaScript文件包含到HTML文檔中、定義變量、使用運算符、定義數(shù)組、使用條件語句、定義函數(shù)和使用循環(huán)等。本文從上一篇文章結(jié)束的地方開始，解釋其他的一些基本的JavaScript語言概念，繼續(xù)為初學(xué)者提供對語言的基礎(chǔ)理解。本文提及的基礎(chǔ)內(nèi)容能夠讓你更好地理解所使用的庫，知道如何就究竟要不要使用庫做出決定，甚至有可能會給你帶來一些編寫自己的庫的勇氣。文章自始至終都在提供例子來說明語言是如何實現(xiàn)其各個方面的。
事件
事件(event)是使用JavaScript語言來把任何類型的交互加入到網(wǎng)頁中的觸媒，每個HTML元素都有你可用來觸發(fā)JavaScript代碼的相關(guān)事件。例如，input域就有很多可能的事件：你可以關(guān)聯(lián)focus(焦點)事件，在有人點擊或是跳轉(zhuǎn)到input域上時就觸發(fā)JavaScript代碼，或是你可以關(guān)聯(lián)一個blur(失焦)事件，當(dāng)有人點擊一個已獲得焦點的input域的外部或是從該域跳轉(zhuǎn)出去時觸發(fā)JavaScript代碼。在關(guān)聯(lián)事件之后，就會出現(xiàn)無限的可能性。例如，blur事件會觸發(fā)檢查input域中的數(shù)據(jù)是否有效的JavaScript代碼，如果無效的話，就有一條內(nèi)聯(lián)的消息被顯示出來，作為一種自動的反饋。下面的代碼提供了一個例子，說明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域帶有一個缺省的值，因此，當(dāng)在網(wǎng)頁瀏覽器中查看該域時，這一input域顯示文本“Enter your email address”。在有人點擊或是跳轉(zhuǎn)到該域時，為了讓缺省值消失，focus事件被用來把域的值設(shè)置成一個空串。如果有人點擊或是跳轉(zhuǎn)到input域的外部的話，blur事件就被用來再次顯示缺省文本，如果你沒有這樣做的話，那么留下的就是他們自己輸入的文本了。
每個HTML元素都有與自身相關(guān)的事件。表1列出了一些最常見的HTML元素及其相關(guān)事件。
表1. 常見元素及其相關(guān)事件
元素 事件
body onload、onunload
input onfocus、onblur、onchange、onkeydown、onkeypress、onkeyup
form onsubmit
img onmouseover、onmouseout、onclick
try...catch和throw
try...catch語句提供了一種檢測代碼錯誤的方式，這樣就無需把錯誤發(fā)送給瀏覽器或是給出一種自定義的錯誤。如果某個JavaScript錯誤沒有被包含在一個try...catch語句的內(nèi)部的話，則任何后繼的JavaScript代碼就都不能被執(zhí)行了，而瀏覽器則不得不使用自己的方式來處理和顯示該錯誤。這一語句的try部分被用來執(zhí)行JavaScript代碼，catch部分則處理可能會在try部分出現(xiàn)的錯誤。在執(zhí)行一些在某些瀏覽器中可能不能正常工作的代碼時，你可以使用這一語句構(gòu)造。如果這種代碼放在try...catch語句的內(nèi)部的話，那么在有錯誤返回時，它只是被忽略不執(zhí)行，catch部分則會處理該錯誤。這一錯誤有可能確實給出一個錯誤信息，或是什么也不做，這取決于用戶是否需要知道錯誤的出現(xiàn)。
使用try...catch來處理錯誤
該語句的catch部分還可以包含一個缺省的錯誤對象參數(shù)，這一錯誤對象返回與在語句的try部分出現(xiàn)的錯誤相關(guān)的信息。錯誤對象有兩個屬性：message和line。message提供的文本描述了發(fā)生的確切錯誤;line提供了錯誤出現(xiàn)的確切代碼行數(shù)。清單1給出了一個try...catch語句例子，該例子使用一個錯誤對象來通知錯誤消息和行數(shù)。當(dāng)然，這種信息只有在調(diào)試狀態(tài)下才是比較有用的，但是在不依賴瀏覽器的處理的情況下，而又打算給用戶提供關(guān)于某個已發(fā)生錯誤的反饋時，這些屬性就變得很有用了。
清單1. 在try...catch語句中使用錯誤對象來調(diào)式錯誤
- try
- {
- // 試圖在這里執(zhí)行產(chǎn)生錯誤的代碼
- }
- catch(err)
- {
- var txt = err.message +'\n';
- txt += err.line;
- alert(txt);
- }
使用throw語句來創(chuàng)建錯誤異常
try...catch構(gòu)造提供了非常棒的錯誤處理功能，不過你還可以采取更進一步的做法，那就是使用throw語句。throw語句允許你基于某些條件來創(chuàng)建錯誤異常，這種方式提供了***的機會來創(chuàng)建更加用戶友好的錯誤信息，這些錯誤信息準確且是用通俗易懂的語言來描述的。清單2給出了一個簡單的例子，說明了如何使用throw語句來在try...catch語句的try部分創(chuàng)建一個基于條件的錯誤異常。
清單2. 使用throw語句來創(chuàng)建錯誤異常
- <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都是小寫的：使用大寫會產(chǎn)生一個JavaScript錯誤。
創(chuàng)建彈出框
JavaScript允許你創(chuàng)建幾種類型的彈出框，最常見的一些類型——也是這里要談?wù)摰娘@示框——是警告框、確認框和提示框。
警告框
警告框并不常用于它們的最初目的，它們是一種快速方便地顯示頁面錯誤、警告或是其他重要消息的方式。目前，警告框最常用來作為調(diào)試JavaScript代碼的方式，所以公平地來講，它們還是有著自己的位置所在的——只是這一***做法不是用于最初打算的目的罷了。而且，如果你使用 Mozilla Firefox、Apple Safari或是Google Chrome的話，那么可以只用console.log就可以達到調(diào)試的目的了。所以底線是，當(dāng)所有其他的做法都失敗了的話，警告框是一個可行的替代方案，能夠完成任務(wù)。創(chuàng)建一個警告框非常的容易：只要把alert函數(shù)當(dāng)作一行代碼錄入，并給它傳遞一個參數(shù)，其就會使用你傳遞給它的任何值來打開一個窗口。例如，你可以錄入一個簡單的串，或是你可以使用警告框來顯示作為參數(shù)傳遞給它的變量的值，這是一個很好的說明警告框如何用來做調(diào)試的例子。下面是一個很基礎(chǔ)的例子，說明如何使用alert函數(shù)來產(chǎn)生一個警告框。
- alert("This can be a variable or a simple text string");
確認框
確認框被用來驗證用戶在網(wǎng)站上所做的選擇。例如，如果你是web應(yīng)用的開發(fā)者，而某個用戶選擇了刪除他或她的用戶帳號的話，則在允許用戶繼續(xù)提交請求之前對這一選擇進行確認會是一個很好的考慮。
通常情況下，confirm函數(shù)會寫在某個條件語句的內(nèi)部，首先確認用戶是否打算要繼續(xù)所做的選擇，接著，基于該決定來確定是否要執(zhí)行JavaScript代碼。下面的例子把confirm函數(shù)用在條件中，以此來確定要執(zhí)行哪一段JavaScript代碼：
- if(confirm("Click for a response"))
- {
- alert('You clicked OK');
- }
- else
- {
- alert('You clicked Cancel');
- }
提示框
在尋找一種快速的提出問題，并允許用戶提供一個答案的方式時，不要找別的，提示框就最合適了。通常情況下，現(xiàn)在的web開發(fā)者都選擇定制的內(nèi)聯(lián)彈出窗口。雖然是這樣，但提示框依然存在，它們依然有著自己的一席之地，特別是在調(diào)試的時候。prompt函數(shù)被用來產(chǎn)生一個提示框，其有兩個參數(shù)，***個參數(shù)是一個自定義的文本串，這通常是一個問題或是提示用做出某種響應(yīng)的陳述;第二個參數(shù)是一個文本串，其被用作顯示在提示框中的缺省的輸入文本。這一缺省值是可選的，且你可在運行時改變它。下面是一個prompt函數(shù)的列子，該函數(shù)被用來向用戶提出一個問題，然后在一個警告框中顯示用戶的響應(yīng)，顯示用到的是從prompt函數(shù)中返回的值。
- var response=prompt("What is your favorite band?","Led Zeppelin");
- if (response!=null && response!="")
- {
- alert("response: "+ response);
- }
使用cookie
cookie的存在是為了在客戶端存儲數(shù)據(jù)，這樣你的JavaScript代碼在過后就可以檢索和重用這些數(shù)據(jù)。如果使用得當(dāng)?shù)脑?，把?shù)據(jù)存儲在用戶的計算機上會有許多的好處。你可以使用cookie來定制用戶的體驗，確定如何基于之前的行為來給他們呈現(xiàn)信息等等。cookie使用的例子包括了存儲訪問者的名稱或是其他相關(guān)信息，這些信息過后可用來顯示在網(wǎng)站上。cookie是一個存放在訪問者的web瀏覽器中的文本文件，其包含了一對名稱-值、一個到期日期，以及其應(yīng)該發(fā)送給的服務(wù)器的域和路徑。
創(chuàng)建cookie
創(chuàng)建cookie很簡單：你只需要確定想要存放的信息、存放的時長，以及為將來的引用命名該cookie就可以了。不過，雖然創(chuàng)建它是很簡單，但語法卻有些難整，你需要給出正確的語法，它才能正常地起作用。下面的代碼展示了一個如何創(chuàng)建cookie和把數(shù)據(jù)存放在其中的例子。
- document.cookie =
- 'cookiename=cookievalue; expires=Sat, 3 Nov 2001 12:30:10 UTC; path=/'
存放在cookie中的串的***部分是一對名-值，即cookiename=cookievalue這部分，一個分號(;)把這一名值對和第二部分隔開來。串的第二部分是以正確格式書寫的到期日期，后面跟著一個分號來把它和第三部分，也就是***一部分分開來，這一部分是路徑。
#p#
從cookie中檢索出數(shù)據(jù)
把數(shù)據(jù)存放在cookie中所需的語法有些麻煩，但在以后的時間里通過名稱來檢索cookie的值卻是很容易。下面是通過名稱來檢索cookie值的做法。
- alert(document.cookie);
這一代碼從當(dāng)前域中取得cookie;不過域中可能存放了多個cookie，document.cookie是一個數(shù)組，因此，要檢索某個特定的cookie的話，你需要正確地找到目標(biāo)。你很走運：清單3中的自定義函數(shù)使得這一過程變得很容易，只要把cookie名稱作為參數(shù)傳進去，接著就可以收到cookie的值了。
清單3. 從已存儲的cookie中檢索數(shù)據(jù)
- 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提供了強大的功能，能夠為訪問者創(chuàng)建定制的體驗，也可以只是存儲數(shù)據(jù)以備以后使用。
定時
JavaScript提供了幾個函數(shù)來讓你控制和設(shè)置某些行為的執(zhí)行時間，這類函數(shù)中最常見的是：
1. setInterval
2. clearInterval
3. setTimeout
4. clearTimeout
setInterval函數(shù)
在某些情況下，JavaScript代碼需要反復(fù)執(zhí)行但又無需任何的用戶交互，setInterval函數(shù)可以讓你很容易就做到這一點。setInterval有兩個必需的和一個可選的參數(shù)，***個必需的參數(shù)是你想要重復(fù)執(zhí)行的代碼(code)，第二個參數(shù)是毫秒(milliseconds)，其定義了JavaScript代碼每次執(zhí)行的間隔時長。第三個可選參數(shù)是一個可傳遞給函數(shù)調(diào)用的實際參數(shù)，這一函數(shù)調(diào)用是通過code參數(shù)來指定的。一開始你可能會覺得所設(shè)置的間隔時長有些奇怪，因為它被定義成毫秒。因此，如果你希望每間隔一秒鐘運行一次的話，就是要1000毫秒，兩秒就是2000毫秒，如此類推。表2列出了每個參數(shù)及其在setInterval函數(shù)中的作用。
表2. setInterval函數(shù)的可用參數(shù)
參數(shù) 必需的還是可選的 描述
code 必需的 setInterval函數(shù)要執(zhí)行的JavaScript代碼;
這一代碼可以是定制的或是一個函數(shù)調(diào)用。
milliseconds 必需的 每兩次代碼執(zhí)行之間的間隔時長，以毫秒為單位。
argument 可選的 是一個很有用的參數(shù)，當(dāng)函數(shù)被用作code參數(shù)時，
可用來把實際參數(shù)傳遞給該函數(shù)。
下面的代碼提供了這樣的一個例子，即如何使用setInterval函數(shù)來每隔10秒鐘就執(zhí)行一次另一個函數(shù)，并把一個參數(shù)傳遞給該函數(shù)。這樣argument的值就可以在執(zhí)行函數(shù)的內(nèi)部被訪問，該參數(shù)可以是一個變量、對象，或是一個簡單的文本串，如該例子中展示的那樣：
- setInterval(myFunction, 10000, 'sample');
- function myFunction(myArg)
- {
- alert('myFunction argument value: '+ myArg);
- }
如果你想要終止這樣的一種間隔執(zhí)行的話，語言也為此提供了一個函數(shù)。
clearInterval函數(shù)
終止間隔行為需要用到clearInterval函數(shù)，不過在最初創(chuàng)建間隔行為時必須要包含一個變量，這樣之后的clearInterval才能引用它。下面的代碼提供了一個例子，說明clearInterval函數(shù)如何引用之前為最初的setInterval設(shè)定的變量：
- var myInterval = setInterval(myFunction, 10000, 'sample');
- function myFunction(myArg)
- {
- alert('myFunction argument value: '+ myArg);
- clearInterval(myInterval);
- }
正如你所見到的那樣，最初的setInterval函數(shù)被指派了一個變量名，其名稱為myInterval。在這以后你就可以使用myInterval來引用setInterval，并可改變這一變量，或是使用clearInterval函數(shù)來停止最初的間隔執(zhí)行函數(shù)。在這一例子中，這一函數(shù)只被調(diào)用了一次，因為clearInterval函數(shù)在該函數(shù)***次調(diào)用時就執(zhí)行了。
setTimeout函數(shù)
在可以基于某個時間約束來執(zhí)行代碼方面，setTimeout函數(shù)類似于setInterval函數(shù)，甚至其參數(shù)也是和setInterval的一樣的(參見表2)。不過，***的不同則是setTimeout函數(shù)只執(zhí)行代碼一次而不是重復(fù)執(zhí)行。這里的例子說明了如何使用setTimeout函數(shù)來在10秒鐘之后執(zhí)行一個函數(shù)。
- setTimeout(myFunction, 10000, 'sample');
- function myFunction(myArg)
- {
- alert('myFunction argument value: '+ myArg);
- }
在你希望執(zhí)行某些代碼，但又不想立刻執(zhí)行的時候，setTimeout很有用，其實質(zhì)上就是一種延遲代碼執(zhí)行的方式。
clearTimeout函數(shù)
如果出于某些原因，你改變了主意，需要取消setTimeout設(shè)置的延遲行為的話，則clearInterval函數(shù)可用來處理這一工作。與clearInterval函數(shù)一樣，要為setTimeout函數(shù)指派一個變量名稱，這樣過后clearTimeout就可以引用它并停止它所設(shè)定的行為。下面的代碼提供的例子說明了如何使用clearTimeout來停止setTimeout設(shè)定的調(diào)用：
- var myTimeout = setTimeout(myFunction, 10000, 'sample');
- function myFunction(myArg)
- {
- alert('myFunction argument value: '+ myArg);
- clearTimeout(myTimeout);
- }
在這一例子中，你給最初的setTimeout函數(shù)指派了一個變量名稱，其被命名為myTimeout。接著你就可以使用myTimeout來引用setTimeout函數(shù)并使用clearInterval函數(shù)來停止它。
結(jié)論
JavaScript語言可以說是***的語言之一，現(xiàn)在你明白這是為什么了。這一簡單而又豐富的腳本語言帶來了如此之多的可能性，它提供的工具允許網(wǎng)站訪問者和下載后的網(wǎng)頁進行交互，這一功能非常的強大。本文為理解JavaScript語言的基本原理奠定了基礎(chǔ)：接下來要做的事情就是把這些概念付諸實踐，并開始探索JavaScript對象。
原文：http://select.yeeyan.org/view/213582/211146
【編輯推薦】
