文章详情

  • 游戏榜单
  • 软件榜单
关闭导航
热搜榜
热门下载
热门标签
php爱好者> php文档>JavaScript 对话框

JavaScript 对话框

时间:2006-07-14  来源:pascal4123

  

第 3 章  Alert、confirm 及 prompt 對話盒

德嘉書業 / 德嘉資訊科技 (www.takka.com.hk) 作者: 伍新華 Email: [email protected]

3.1 Alert 對話盒

3.2 Confirm 對話盒

3.3 Prompt 對話盒

 

  對話盒 (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章的程式理論。

   

 

3.1 Alert 對話盒

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

 

1. 直接出現的 alert 對話盒

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

<p> <h1> <font color=blue>示範網頁 : 第二部份 </font>
<p> 這是 alert1.htm </h1>
</body> </html>

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

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

 

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

 

 

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

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

 

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

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

<html> <body bgcolor=oldlace text=blue>
<h1> 示範網頁: alert2.htm </h1>
<p> </br> <center>

<form>
<input type="button" value="本周特價 "
  onClick="alert('電視機全部七折')" >

<input type="button" value="下周特價預告 "
  onClick="alert('錄像機全部六折' )" >
</form>

</center>
</body> </html>

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

 

 

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

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

 

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

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

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

<html> <body bgcolor=pink text=blueviolet>
<h1> 示範網頁: </h1> <p> </br>

<h2> 這是 alert3.htm </h2>
</body> </html>

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 的 <p> 標籤。

  要分行或加入跳格位, 可使用以下三個控制碼 ( 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 對話盒內的分行

 

 

3.2  Confirm 對話盒

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

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

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

 

1.  Confirm 對話盒示範

練習-27  confirm( ) 使用示範

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

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

<html> <body bgcolor=lightcyan text=red> <h1> 示範網頁 </h1>

</body> </html>

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

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

 

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

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

 

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

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

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

<html> <body bgcolor=cyan text=red> <h1> 示範網頁 </h1>

</body> </html>  

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. 請用瀏覽器開啟示範磁碟中的 confirm3.htm , 這檔案有以下內容:

<html> <head>

<body bgcolor=pink text=blueviolet>
<h1> <font color=blue> 示範網頁: </font> </h1> <p> </br>

<form>
<input type="button" value=" 看作者相片 " onClick="confirmChoice( ) " >
</form> 

<img src=blank.gif name=authorPic width=150 height=150>

</body> </html>  

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

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

 

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

<img src=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 的例子。

 

 

3.3  Prompt 對話盒

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

 

1. 單純的 prompt 對話盒

練習-30 單純的 prompt 對話盒

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

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

<html> <body bgcolor=beige text=red>
<h1> 示範網頁 </h1> <p> <br>

<form>
<input type=button value="試驗 Prompt 對話盒 "
  onClick='prompt("請輸入你的名字", "你的名字 ") '>
</form>

</body> </html>

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

 

  Prompt 對話盒有以下語法:

 

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

 

 

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

 

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

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

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

<html> <body bgcolor=beige text=red> <h1> 示範網頁 </h1> <p> <br>



</body> </html>

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. 請你將示範磁碟中的 prompt3.htm 檔案複製去硬碟, 用「記事本」開啟這檔案, 在 action 的一項填上你的電郵地址, 例如:

action="mailto:[email protected]"

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

<html> <head>

</head> <body bgcolor=bisque text=red> <h1> 示範網頁 </h1> <p>

<form name="orderBox" method="post"
  action="mailto:[email protected]" enctype="text/plain"
  onSubmit="checkNo( )">

你要訂的數量:
<input type="text" name="itemNo" size=5 value="">

<input type="submit" value=" 送出資料">
</form>

</body> </html>

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. 請用瀏覽器開啟示範磁碟中的 prompt4.htm, 這檔案有以下內容。

<html> <body>

</body></html>

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

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

 

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

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

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

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

 

( 第 3 章 完 )

相关阅读 更多 +
排行榜 更多 +
辰域智控app

辰域智控app

系统工具 下载
网医联盟app

网医联盟app

运动健身 下载
汇丰汇选App

汇丰汇选App

金融理财 下载