JavaScript 对话框

　　

第 3 章　 Alert、confirm 及 prompt 對話盒

　作者: 伍新華 Email: [e-mail]

---

　

　　對話盒 (dialog box) 是用來向觀看者顯示一些訊息, 通常用者要作出一些回應 (例如按對話盒中的 [確定] ), 才可繼續操作。

　　 JavaScript 內有三類對話盒, alert、confirm及prompt, 分別使用以下三個 method:

window.alert( )　 window.confirm( )　 window.prompt( )

　　這三個都是屬於 window 的 method, 我們一般都會簡略為 alert( )、confirm( ) 及 prompt( )。

　　 在本書前面的例子, 筆者都避免使用太多複雜的程式, 讓讀者有較多時間適應, 在這一章開始, 例子中會使用 function 及 if statement, 讀者請開始參看第4、5、6、7章的程式理論。

　 　

　

　Alert 對話盒

　　 Alert (提示) 對話盒是一個訊息對話盒, 向觀看者顯示一些文字, 觀看者按 [確定] 就可繼續操作。

　

1.　直接出現的 alert 對話盒

　　 首先請你看最簡單的造出對話盒的方法, 這是將 alert( ) 放在

示範網頁 : 第二部份

這是 alert1.htm

2.　載入這檔案時, 留意網頁執行至 alert( ) 這一項會停下來, 出現一個 alert 對話盒。

3.　請你按 [確定], 留意網頁隨後部份會繼續出現。

　

　　 產生這對話盒是以下的一句, 在對話盒顯示的文字是一個 argument, 放在隨後的 ( ) 及要放在 " " 內。

　

　

2.　以按鈕方式叫出 alert 對話盒

　　 我們也可以用按鈕的方式叫出這 alert 對話盒, 請看以下例子。

　

練習-25　用按鈕叫出 alert 對話盒

1.　請用瀏覽器開啟示範磁碟中的 , 這檔案有以下內容:

示範網頁: alert2.htm

　　onClick="alert('電視機全部七折')" >

　　onClick="alert('錄像機全部六折' )" >

2.　請你試試兩個按鈕的反應。

　

　

3.　用條件來叫出 alert 對話盒

　　 以上兩個例子的對話盒都是沒有實際用途, 筆者只是用來示範 alert( ) 的操作方式, 以下是例子是設定一個條件, 若有某一個情況, 就會有 alert 對話盒出現。

　

練習-26　用 alert 對話盒提示觀看者轉換螢幕解像度

　 這處假定你設定一個網頁, 圖片是使用 800x600 螢幕解像度, 網頁開啟時, 會有一個 JavaScript 檢查觀看者的螢幕解像度, 若左右少於 800 點或 (OR) 上下少於 600 點, 就會有對話盒提示觀看者提高解像度。

1.　試驗這網頁前, 請你先將螢幕的解像度設為 640x480, 然後用瀏覽器開啟示範磁碟中的 , 這檔案有以下內容。

示範網頁:

這是 alert3.htm

2.　若網頁開啟時, 螢幕解像度是 640x480, 你應看到 alert 對話盒出現。請你改變電腦的螢幕解像度, 例如 720x480、864x480、800x600 等等, 再載入這網頁, 看有什麼效果。

(在「視窗-98」, 調校螢幕解像度後, 無需重新啟動就立刻生效, 你在瀏覽器中選 [重新整理] (Reload) 來重新載入網頁, 就可立刻看到效果。)

　

1.　這 JavaScript 使用以下的 if statement:

if(condition) { method 或 function }

　　 這一句的 condition 就是我們設定的條件, 若這 condition 是 TRUE, 就會執行隨後的 method 或 function, 若這 method 或 function 只有一句, 可以略去 { 及 }。

2.　這例子的 condition 是以下的一句:

screen.width < 800 || screen.height < 600

　　第一個條件是 screen.width 少於 800 , 第二個條件是 screen.height 少於 600, 兩個條件用 || (OR) 來連結, 表示兩個條件只要其中一個是 TRUE, 今次的 condition 會是 TRUE, 這會引發隨後 alert( ) 這一個 method。

　　有關 if statement 的使用, 隨後會有詳細說明。

3.　用同樣的方法及原理, 你可檢查 pixelDepth 或 colorDepth 等資料, 然後向觀看者作出提議。

　

4.　對話盒內的文字分行及跳格

　　要在對話盒的文字分行來顯示, 你是不能使用以下的 script, 因為一個 argument 不能分行, 也不能使用 HTML 的

標籤。

　　要分行或加入跳格位, 可使用以下三個控制碼 ( n 代表 new line, r 代表 return, t代表 tab ) :

\n	跳去下行。 (在 IE 及 Netscape, 這控制碼使到文字跳去下行及最左端, 若要跳兩行就用 \n \n。)
\r	這是游標回位, 在 IE 及 Netscape, 這控制碼與 \n 有相同效果。
\n \r 或 \r \n	在 IE 及 Netscape, 這會跳兩行。
\t	加一個跳格位。

　 　　留意使用 \n \r 時, 兩個參數要有空格分開, 若使用 \n\r, IE 會作為一個參數來處理 (跳一行), Netscape 則作兩個 (跳兩行)。

　

　　例如使用以下的 script:

　　會有以下對話盒:

圖 3-1　在 alert 對話盒內的分行

　

　

---

　 Confirm 對話盒

　　在前一節你看過 alert 對話盒, 在這處讓我們看 confirm 對話盒, 這對話盒有兩個鍵: [確定] 及 [取消], 我們要用 function 來設定每個鍵的功用, 這兩個鍵才會生效。

　　Confirm 對話盒的兩個選擇鍵是由操作系統造出來, 無論你用英文或中文版的瀏覽器, 在「中文視窗」會是 [確定] 及 [取消], 在英文版 Windows 會是 [OK] 及 [Cancel]。

　　confirm( ) 是一個 method, 屬 window 的 property, 有這格式: window.confirm("顯示字句 "), 但可簡為 confirm("顯示字句 ")。

　

1.　 Confirm 對話盒示範

練習-27　 confirm( ) 使用示範

　　 這處首先請你試驗以下簡單的 confirm 對話盒, 看這 method 如何操作。

1.　請用瀏覽器開啟示範磁碟中的 , 這檔案有以下內容:

示範網頁

2.　網頁開啟後, 你應見到一個 confirm 對話盒。

3.　請你按 [確定] 按鈕, 這對話盒收起, 沒有任何反應。請重新載入這 confirm1.htm 檔案, 今次按 [取消] 按鈕, 也應沒有反應, 因為這兩個按鈕在這例子中還未定義。

　

2.　 與 if ... else statement 一起使用

　　 上個例子的單純 confirm 對話盒是沒有用途的, 因為 confirm 對話盒要與 if ... else 一起使用, 觀看者按 [確定] 就代表選擇 TRUE, 按 [取消] 就代表選擇 FALSE, 這就可讓觀看者作出選擇, 請看以下例子。

　

練習-28　 Confirm 對話盒的條件設定 (1)

　　 在這練習, 你看到如何設定一個 confirm 對話盒, 並為 [確定] 及 [取消] 這兩個按鈕設下 if...else 反應。

1.　請用瀏覽器開啟示範磁碟中的 , 這檔案有以下內容:

示範網頁

 

2.　載入這網頁後, 你應見到 confirm 對話盒的出現, 請你先試驗 [確定] 這按鈕, 然後重新載入這網頁, 再試驗 [取消] 按鈕, 看有什麼文走出來。

　

　　 當 confirm( ) 與 if ... else 一起使用時, 有以下語法:

if (confirm(" 對話盒顯示文字 ") )
　　　　　 { 反應 1 }　　　　　　← 按 [確定] 有這反應
　　 else 　 { 反應 2 }　　　　　　 ←按 [取消] 有這反應

　　若 { } 內的句子只有一句, 可以省去 { }, 這處你要留意, 我們按 [取消], 實際是引發 else 的 反應 2 , 若不設定 else 的反應, 就沒有反應, 感覺上就好像是取消這對話盒。

　

3.　用按鈕叫出 confirm 對話盒

練習-29　 Confirm 對話盒的條件設定 (2)

　　 在前面的練習, 你看過如何為 confirm 對話盒設下 if ... else 反應, 在這處例子, confirm 對話盒是放在一個 function之內, 觀看者在這對話盒作出反應, 就可決定 function 的反應, 今次例子是觀看者可選擇是否載入一幅圖片。

1.　請用瀏覽器開啟示範磁碟中的 , 這檔案有以下內容:

示範網頁:

 

blank.gif name=authorPic width=150 height=150>

 

2.　網頁中有一個 [看作者相片] 的按鈕, 請你按一下, 就會有一個 confirm 對話盒出現, 請你按 [確定], 應見到網頁載入一幅圖片。

3.　請重新載入檔案及按 [看作者相片] 的按鈕, 在出現的對話盒中按 [取消], 看與按 [確定] 有可不同。

　

1.　在這例子, 筆者使用以下的一句造出一個圖片位置:

blank.gif name=authorPic >

　　 筆者將這圖片位置命名為 authorPic, 是一幅空白的圖片。

2.　筆者設定一個名為 confirmChoice( ) 的 function 來叫出一個 confirm 對話盒, 如下:

function confirmChoice( )
{　　 if ( confirm ("作者樣貌可能令人看後覺得不安, 真的要看? ") )
　　　　　　 { document.authorPic.src="author.jpg " }
}

　　 觀看者按 [確定] 就會引發以下反應:

document.authorPic.src="author.jpg"

　　 這是將 author.jpg 這圖片作為 authorPic 這圖片位置的圖片來源 (src)。

3.　前面說過 confirm 對話盒有以下語法:

if (confirm(" 對話盒顯示文字 ") )
　　　　　 { 反應 1 }　　　　　　← 按 [確定] 有這反應
　　 else 　 { 反應 2 }　　　　　　 ←按 [取消] 有這反應

　　這例子沒有設定 else 的反應, 觀看者按 [取消], 對話盒就會收起, 不會有其他反應。

　

4.　Confirm 對話盒的 return false

　　在 confirm 對話盒選 [取消], 實際是傳回一個 false 值, 若我們是使用 onClick來叫出這 confirm 對話盒, 這 false 值就傳回給這 onClick, 這會取消 onClick 的操作, 請參看 練習-81 的例子。

　

　

---

　 Prompt 對話盒

　　 Prompt 是提示輸入, 這類對話盒是用來提示觀看者輸入一些資料, 請先以下簡單的例子。

　

1.　單純的 prompt 對話盒

練習-30　單純的 prompt 對話盒

　　 在這練習, 你看到如何造出一個 prompt 對話盒。

1.　請用瀏覽器開啟示範磁碟中的 , 這檔案有以下內容:

示範網頁

　　onClick='prompt("請輸入你的名字", "你的名字 ") '>

2.　網頁開啟後, 你會見到一個按鈕, 按一下會走出 圖3-3 的對話盒, 請你試在對話盒中的文字框輸入文字, 然後按 [確定] 或 [取消], 你應不見有任何反應, 因為這要有其他設定來配合。

　

　　Prompt 對話盒有以下語法:

　

　　 這處有兩個 argument, 用 , 來分隔, 第二個 argument 是預設在文字框中出現的文字。

　

　

2.　捕捉在 prompt 對話盒輸入的文字

　

練習-31　捕捉在prompt對話盒輸入的文字

　　 Prompt 對話盒的用途是讓觀看者輸入一些資料, 我們可以捕捉這些資料, 然後放在網頁其他地方使用, 這網頁示範這個使用方式。

1.　請用瀏覽器開啟示範磁碟中的 , 這檔案有以下內容:

示範網頁

2.　網頁開啟時, 會先出現一個對話盒, 請你輸入一些文字, 按 [確定], 你會見到這文字在網頁中出現。

3.　請你重新載入這網頁, 在對話盒輸入文字, 又或不輸入文字, 按 [取消] 按鈕, 留意在網頁出現的應是: Hello, null , welcome! 。

　

1.　 留意這 JavaScript 中這一句:

inputText=prompt("請輸入你的名字 ", " ")

　　 這處用一個 inputText 的變數來代表觀看者輸入的文字, 例如輸入的文字是 Peter Wong, inputText 就代表了 Peter Wong, 隨後用 document.write( ) 或其他方法就可顯示或使用這名稱。

2.　假若按 [取消], 就會傳回一個 null 字。

3.　在中文版 IE, 在對話盒輸入中文字, 可能引致在 document.write( ) 內隨後的文字不能顯示, 在這例子, 你試在 IE 中, 在對話盒輸入一些中文字, welcome! 這字不會出現, 輸入英文字不會有這現象, Netscape 沒有這情況出現。

　

　

3.　用 prompt 對話盒在 form 中輸入資料

　　在 form 的一章會說到如何設定讓觀看者輸入資料的表單, 我們可以設定一些驗証 (validation) 的方法, 若在某項目中觀看者漏了輸入, 就會走出一個 prompt 對話盒來讓觀看補回資料。 若你看這例子有困難, 可以學習完第13章 再回來看這例子。

　　這處是示範 prompt 對話盒的操作, 所以對 validation 的部份簡化了, 詳細驗証操作請看 form 的一章。

　

練習-32　用 prompt 對話盒輸入 form 的資料

1.　請你將示範磁碟中的 檔案複製去硬碟, 用「記事本」開啟這檔案, 在 action 的一項填上你的電郵地址, 例如:

action=

2.　請用瀏覽器開啟硬碟中你的 , 這檔案有以下內容:

示範網頁

method="post"
　　action="mailto:[e-mail]" enctype="text/plain"
　　onSubmit="checkNo( )">

你要訂的數量:

2.　 網頁開啟後, 你應見到以下顯示:

　　 請你在文字框中填上任何數字, 然後按 [送出資料] 的按鈕, 有以下提示對話盒:

圖 3-4　要你確定是否寄出表單資料的對話盒

　

　　若你按 [確定], 就會叫出郵寄的功能, 若你使用 IE4, 就會叫出 Outlook 來寄出以上網頁中的表單資料, 郵寄目標是 action= "mailto: . . . " 後的電郵地址, 你使用自己的地址, 稍後就會收到郵件, 若你不改這示範網頁的地址, 就會寄了來本公司。

　　若你只要看這 prompt 對話盒的示範, 可按 [取消], 這就不會寄出表單的資料。

3.　請你重新載入這網頁, 不填入任何資料, 就按 [送出資] 的按鈕, 就會叫出以下的 prompt 對話盒:

圖 3-5　 Prompt 對話盒

　　請你填入一個數字, 例如 10, 按 [確定], 就會見到 圖3-4 的對話盒, 請你將這對話盒拉開, 就會看到下面的文字框已填上10:

4.　看完這數字, 你可在對話盒中按 [取消], 不用寄出資料。

　

　　筆者不解釋這例子的操作, 你看完第 13章 再回來看這例子, 就會明白了。

　

　

4.　Prompt 對話盒的按鈕的傳回值

　　Prompt 對話盒中有 [確定] 與 [取消] 的按鈕, 按 [確定] 的按鈕就會傳回觀看者輸入的資料, 按 [取消] 按鈕又會傳回什麼呢? 請看以下例子。

　

練習-33　Prompt 對話盒內按鈕的傳回值

　　在這練習, 你要看在prompt對話盒中, 輸入資料及不輸入資料就按 [確定] 及按 [取消], 會傳回什麼資料呢?

1.　請用瀏覽器開啟示範磁碟中的 , 這檔案有以下內容。

2.　網頁開啟後, 你會見到一個 prompt 對話盒, 請你試試以下四個情況, 看在 alert 對話盒中有什麼顯示 (這是 prompt 對話盒傳回的資料）。

1.　不輸入任何字符, 按 [取消]。
2.　不輸入任何字符, 按 [確定]。
3.　輸入一個數字或字母, 例如 123, 按 [取消]。
4.　輸入一個數字或字母, 例如 123, 按 [確定]。

　

　　以上說的四個試驗, 分別有以下結果:

1.　null
2.　　　　　　(沒有任何資料)
3.　null
4.　123

　　從以上試驗可知道, 按 [取消] 按鈕會傳回 null, 留意這 null 是一個變數, 不是 "null" 文字。按 [確定] 就會傳回文字框的文字, 若文字框沒有資料就空出來 (即是 "" )。

　　我們有時要使用上述的傳回值來檢查用者是否有輸入資料, 或是按了 [取消], 請參看練習-45。

　

---

( 第 3 章 完 )