3-3：內建對話視窗

聽老師講解

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

本節及利用此三種內建的對話視窗來說明 JavaScript 如何以「事件驅動」的方式來執行。

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

當你按下上述連結，就會出現一個警告視窗，其程式碼如下：

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

上述範例的完整原始檔案 (alert1.asp) 如下： 

<%title="警告視窗 (Alert Window)"%>
<!--#include file="head.inc"-->
<hr>

<script>
today = new Date();
hour = today.getHours();
minute = today.getMinutes();
second = today.getSeconds();
prepand = (hour>=12)? "下午":"上午";
hour = (hour>=12)? hour-12:hour;
string = "現在是"+prepand+hour+"點"+minute+"分"+second+"秒";
</script>

<a href="javascript:alert(string)">現在時間</a>

<hr>
<!--#include file="foot.inc"-->
在上例中，我們先產生字串 string，當連結被案下去時，在將字串送至警告視窗。（有關於時間和日期的用法，會在後面詳述。）

若要執行的程式碼太多，不方便放至連結之中，此時我們就可以定義另外一個函數，並在連結中執行此函數，例如：

這一次你真的會後悔！

其程式碼如下：

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

此外，在上例中，若改用無窮迴圈，那麼，使用者可能會真的很後悔按下此連結，因為唯一跳出的方法，就是以非常手段停止瀏覽器的執行。（在 Windows 95/98/NT 上，可同時按 Ctrl、Alt、Del 三鍵來達成。）

與警告視窗功能相近的內建對話視窗，還有確認視窗和輸入視窗。下面是確認視窗的範例：

上述範例的完整原始檔案 (confirm1.asp) 如下： 

<%title="確認視窗 (Confirm Window)"%>
<!--#include file="head.inc"-->
<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>
<!--#include file="foot.inc"-->
在上述範例中，我們使用了三種不同的方法來將確認視窗用於連結之中，請詳細閱讀，以發覺他們的相同和相異之處。 下面是確認視窗的範例：

上述範例的完整原始檔案 (prompt1.asp) 如下： 

<html>
<body>

<h2 align=center> 輸入視窗 (Prompt Window) </h2>
<hr>

<script>
function link2course() {
	course = prompt("請輸入課程編號：(cs3431, cs3331, cs3334, or cs5652)", "cs3431");
	if (course != null)
		location.href="http://neural.cs.nthu.edu.tw/jang/courses/" + course;
}
</script>

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

<hr>
<!--#include file="foot.inc"-->

</body>
</html>

此外，使用 JavaScript 和 VBScript 有下列幾點不同：

有關 VBScript，會在後面說明。

範例總整理

回到「第 3 章：JavaScript/JScript」