DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> JavaScript基礎知識 >> JavaScript入門之事件、cookie、定時等
JavaScript入門之事件、cookie、定時等
編輯:JavaScript基礎知識     
一篇關於“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對象。
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved