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