1-3 閬:GぁX

另一種啟動 JavaScript 的方法,則是靠事件驅動,換言之,當瀏覽器讀入網頁後,即載入 JavaScript 程式碼,但必須等到使用者點選連結或啟動其他滑鼠事件,才能觸發 JavaScript 的執行。為方便和使用者進行互動,JavaScript 提供了三個內建的對話視窗: 本節將利用此三種內建的對話視窗來說明 JavaScript 如何以「事件驅動」的方式來執行。

Hint
所謂「滑鼠事件」(Mouse events),指的是能由瀏覽器偵測到的滑鼠動作,例如點選某一個連結、將游標移到一的影像上、游標的移動等。

舉例來說,我們也可以將 JavaScript 直接寫入網頁的連結(Links)之中,因此當使用者點選此連結,瀏覽器則執行相關的 JavaScript 程式。例如,我們可以定義某個特殊連結如下:

Example(alert01.htm):

當你按下上述連結,就會出現一個罵人的警告視窗,外觀如下:

你只能按「確定」按鈕以關閉此警告視窗。原網頁程式碼如下:

原始檔(alert01.htm):(灰色區域按兩下即可拷貝)
<html>
<head>
<meta HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=big5">
</head>

<body>
<h2 align=center>罵人的警告視窗</h2>
<hr>

<A href="javascript:alert('!@#$%^&amp;*!')">按了你會後悔喔!</A> 

<hr>
</body>
</html>

在上述範例中,我們是把 JavaScript 的程式碼直接寫在 href 的連結位置,直接呼叫 alert() 函數來產生警告視窗並顯示罵人訊息。這個範例顯示幾個重點:

我們也可以先執行一些簡單的運算,再將結果呈現在警告視窗,例如:

Example(alert02.htm):

上述範例的原始檔如下:

原始檔(alert02.htm):(灰色區域按兩下即可拷貝)
<html>
<head>
<meta HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=big5">
</head>

<body>
<h2 align=center>顯示網頁載入時間的警告視窗</h2>
<hr>

<script>
today = new Date();			// 產生日期物件
hour = today.getHours();		// 取得時數
minute = today.getMinutes();		// 取得分數
second = today.getSeconds();		// 取得秒數
string = "網頁載入時間是"+hour+"點"+minute+"分"+second+"秒";	// 連接字串
</script>
<a href="javascript:alert(string)">網頁載入時間</a>

<hr>
</body>
</html>

在上例中,我們先產生字串 string,當連結被按下去時,再將字串送至警告視窗。(有關於日期物件和各種時間的用法,會在後面詳述。)

若要執行的程式碼太多,不方便放至連結之中,或是同一段程式碼要反覆使用,此時我們就可以定義另外一個函數,並在連結中執行此函數,例如:

Example(alert03.htm):

上述範例的原始檔如下:

原始檔(alert03.htm):(灰色區域按兩下即可拷貝)
<html>
<head>
<meta HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=big5">
</head>

<body>
<h2 align=center>囉里叭唆的警告視窗</h2>
<hr>

<SCRIPT>
function talk() {
	alert("不是叫你不要按嗎?");
	alert("為什麼你又按了呢?");
	alert('如果每個小孩都像你一樣不聽話,');
	alert('那麼所有大人不就都抓狂了?!');
	alert('為了懲罰你,你必須再按20次 Enter 鍵!');
	for (i=0; i<20; i++)
		alert('第 ' + (i+1) + ' 次!');
	alert('以後要當乖小孩了!');
}
</SCRIPT>
<A href="javascript:talk()">這一次你真的會後悔!</A> 

<hr>
</body>
</html>

請注意在上例中,字串的並排是由「+」來達成,而數學的加法也是由「+」來達成,JavaScript 遇到「+」時,會先判斷左右兩個運算子是否全是數值,若是,則進行加法。若有一個運算子是字串,則執行字串的並排運算。(當然,在執行並排運算時,會將數值形態的運算元先轉換成字串。)

此外,由上述範例可以看出,JavaScript 可以用雙引號(")或單引號(')來定義字串的開始和結束。

在上述範例中,若改用無窮迴圈,那麼,使用者可能會真的很後悔按下此連結,因為唯一跳出的方法,就是以非常手段停止瀏覽器的執行。(在Windows平台可同時按 Ctrl、Alt、Del 三鍵來開啟工作管理員,以關閉瀏覽器。)例如:

Example(alert05.htm):

不信邪的同學,可以直接點選上述網頁的連結。上述範例的原始檔如下:

原始檔(alert05.htm):(灰色區域按兩下即可拷貝)
<html>
<head>
<meta HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=big5">
</head>

<body>
<h2 align=center>沒完沒了的警告視窗</h2>
<hr>

<script>
function talk() {
	alert('你要按一千次才能脫身...');
	for (i=0; i<1000; i++)
		alert('第 ' + (i+1) + ' 次!');
	alert('哈哈!你被我騙了...你還要按100次才能走人...');
	for (i=0; i<100; i++)
		alert('第 ' + (i+1) + ' 次!');
	alert('你真的按完了耶,太崇拜了!(不過你時間也太多了吧?^_^)');
}
</script>
<a href="javascript:talk()">有膽你就給我按看看!</a>

<hr>
</body>
</html>

由上述程式碼可以看出,我們可以定義一個簡單的函式 talk(),然後使用 "javascript:talk()" 直接呼叫此函式。

Hint
如果要快速跳出,請勿壓著Enter鍵,改以ESC鍵壓著,否則程式有可能會再執行一次。

警告視窗的功能只是在警告或是傳達訊息,使用者也只能按「確定」否則無法繼續。另一個具有「二選一」功能的內建視窗,是確認視窗,範例如下:

Example(confirm01.htm):

在上述範例中,若使用者按下「清大首頁」的連結後,會產生下列確認視窗:

此時若按下「確定」按鈕,網頁會連到清華大學首頁。若按下「取消」按鈕,則網頁維持不變。此範例的原始檔如下:

原始檔(confirm01.htm):(灰色區域按兩下即可拷貝)
<html>
<head>
<meta HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=big5">
</head>

<body>
<h2 align=center>使用確認視窗來確認連結動作</h2>
<hr>

<script>
function link2nthu() {
	answer = confirm("你確定要連到清大的首頁嗎?");
	if (answer)
		location.href="http://www.nthu.edu.tw";
}
</script>

<!-- 第一種方法:以函數來完成此項工作 -->
<a href="javascript:link2nthu()">清大首頁</a><br>

<!-- 第二種方法:將程式碼寫在連結內。若回傳值為真,則連至新位置 -->
<a href="javascript:if (confirm('你確定要連到交大的首頁嗎?')) location.href='http://www.nctu.edu.tw'">交大首頁</a><br>

<!-- 第三種方法:使用 onClick 來完成此項工作。若 onClick 的值為偽,則連結無作用 -->
<a href="http://www.ntu.edu.tw" onClick="return(confirm('你確定要連到台大的首頁嗎?'))">台大首頁</a>

<hr>
</body>
</html>

在上述範例中,我們使用了三種不同的方法來將確認視窗用於連結之中:

Hint
除了在用在上述範例之外,一般而言 onClick 可以觸發點擊事件,繼而執行 onClick 屬性字串中的程式碼。

提示視窗可以讓使用者輸入一列字串(所以又稱為輸入視窗),也是取得使用者輸入的最簡單方式。下面是提示視窗的範例:

Example(prompt01.htm):

當使用者按下「張老師的課程」時,會產生如下的提示視窗:

使用者可以輸入相關的課程代碼,按「確定」後,網頁就會連結到相關課程首頁。此範例的原始檔如下:

原始檔(prompt01.htm):(灰色區域按兩下即可拷貝)
<html>
<head>
<meta HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=big5">
</head>

<body>
<h2 align=center>使用輸入視窗來決定連結網址</h2>
<hr>

<script>
function link2course() {
	course = prompt("請輸入課程代碼:(webProgramming, scientificComputing, MSAR)", "webProgramming");
	if ((course=="webProgramming")||(course=="scientificComputing")||(course=="MSAR"))
		location.href="http://mirlab.org/jang/courses/" + course;
}
</script>

<a href="javascript:link2course()">張老師的課程</a>

<hr>
</body>
</html>

在上述範例中,我們使用 if 敘述來判斷使用者輸入的字串是否等於 "cs3431" 或 "cs3331" 或 "cs3334" 或 "cs5652" 或 "isa5571",若不是,則不發生任何事。若是,則造出相關網址,並將網頁連結到此網址。("||" 代表邏輯運算的「或」,而 "&&" 則代表邏輯運算的「且」,這部分會在後面章節詳述。)

Hint
事實上,alert()、confirm() 和 prompt() 都是 window 物件的方法,所以要呼叫這些方法,完整的寫法應該是 window.alert()、window.confirm() 和 window.prompt(),但是因為他們太常被用到,所以也可以省略 window 此物件,直接呼叫這些函數。

「事件驅動」的執行方式,是 JavaScript 在網頁中最常被使用的方式。下一節將介紹與表單相關的「事件驅動」執行方式。


JavaScript 程式設計與應用:用於網頁用戶端