返回列表 上一主題 發帖

[教學] (教學第10篇)confirm() 與 prompt() 函式

[教學] (教學第10篇)confirm() 與 prompt() 函式

大罐的不好嗎?
1.png
2010-5-12 13:06

『大罐的ㄍㄢˇ不好?大罐的吃較久(台語)』,相信大家對這句對白一定很熟悉!你在偷笑哦!其實,這是一個標準的是否問答題,當我們利用alert()函式蹦現一個歡迎視窗時,在視窗中只有一個『確定』按鈕,也就是說,瀏覽者只有一個選擇:按下確定按鈕來結束訊息視窗後方能進行瀏覽動作,如果我們要產生一個問答題,讓瀏覽者有兩種選擇時該怎麼辦?

confirm() 函式
confirm()函式其參數的應用與alert()函式相同,參數的內容都將會顯示在蹦現的訊息視窗中而成為所謂的『提示訊息』,但不同的是,confirm()函式具有回傳值,其格式如下:
confirm()函式使用格式
  1. X = confirn(提示參數)
複製代碼
其中回傳值由瀏覽者按下哪一個回覆按鈕來決定,而回傳值的內容則是一個布林值:『是(true)』或『否(false)』:
1-1.png
2010-5-12 13:16

若瀏覽者按下『確定』按鈕,則x等於「true」;若瀏覽者按下『取消』按鈕,則x等於「false」,有了confirm()函式的回傳值,我們就可以知道瀏覽者按下哪一個按鈕,再加上判斷敘述就可以決定程式執行的路徑:
  1. <HTML>
  2. <HEAD>
  3. <TITLE>大罐的ㄍㄢˇ不好?</TITLE>
  4. </HEAD>
  5. <BODY>
  6. <SCRIPT Language="JavaScript">
  7. x=confirm("大罐的ㄍㄢˇ不好?")
  8. if (x)
  9. {
  10. alert("大罐的吃較久");
  11. }
  12. else
  13. {
  14. alert("ㄚ我就找無小罐的!");
  15. }
  16. </SCRIPT>
  17. </BODY>
  18. </HTML>
複製代碼
實做學習
請設計一JavaScript程式,當瀏覽者進站時出現一訊息視窗詢問瀏覽者是否需要知道進站時間,若瀏覽者按下『確定』按鈕,則出現另一訊息視窗告知進站時間;若瀏覽者按下『取消』按鈕,則結束程式執行。
1-2.png
2010-5-12 13:14
  1. <HTML>
  2. <HEAD>
  3. <TITLE>confirm()函式應用</TITLE>
  4. </HEAD>
  5. <BODY>
  6. <SCRIPT Language="JavaScript">
  7. //詢問是否告知進站時間
  8. x=confirm("告訴你進站時間好嗎?")
  9. //判斷按下哪一個按鈕
  10. if (x)
  11. {
  12. //建立日期時間物件
  13. intime=new Date();
  14. //取得小時資料
  15. inhours=intime.getHours();
  16. //取的分鐘資料
  17. inminutes=intime.getMinutes();
  18. //組合進站時間訊息
  19. msg="您的進站時間:"+inhours+"時"+inminutes+"分";
  20. //告知進站時間
  21. alert(msg);
  22. }
  23. </SCRIPT>
  24. </BODY>
  25. </HTML>
複製代碼
心安,平安   為了論壇的永續經營,您不妨 贊 助 論 壇
發表任何無意義的感謝或灌水文章一律砍,珍惜帳號,請詳閱版規!!
請詳閱 論壇版規愛惜帳號,一起創造美好的學習討論空間。

尊姓大名?
你有沒有在進入網站時被詢問過「尊姓大名」過呢?我想你應該常常遇過才對!這個可以讓瀏覽者輸入資料的視窗稱之為『輸入視窗(inputbox)』,它是由JavaScript所提供的一個輸入函式:
1.png
2010-5-12 13:21

prompt() 函式
prompt()函式與confirm()函式相同,都會先顯示一個視窗,但不同的是prompt()函式所顯示的視窗中含有一個輸入的欄位,呼叫prompt()函式的基本格式如下:
prompt()函式使用格式
  1. X = prompt(提示參數)
複製代碼
參數的內容都將會顯示在蹦現的訊息視窗中而成為所謂的『提示訊息』,同時,在輸入的欄位內會有一段預設的輸入資料「undefined」,以下是輸入視窗的組成說明:
1-1.png
2010-5-12 13:21


  • 預設提示文字:這是當我們呼叫prompt()函式時JavaScript自動產生在輸入視窗內的提示文字,我們不能加以更改。
  • 提示訊息內容:我們呼叫函式所指定的提示參數內容。
  • 輸入欄位:讓瀏覽者輸入相關資料的欄位。
  • 預設輸入內容:這是當我們呼叫prompt()函式時JavaScript自動產生在輸入欄位內的資料內容。
  • 輸入確認按鈕:瀏覽者在輸入欄位輸入資料後,若按下確定按鈕則可將輸入欄位內的資料傳回程式使用。
  • 輸入取消按鈕:如果瀏欄者按下取消按鈕,則回傳給程式一個空值(null)。
預設輸入內容,雖然我們呼叫prompt()函式時,JavaScript會自動在輸入欄位內產生預設的資料內容「undefined」,但是,這個預設的資料內容我們也可以自己指定,其格式如下:
prompt()函式使用格式
  1. X = prompt(提示參數,預設輸入內容)
複製代碼
如果我們呼叫的敘述是:
  1. x = prompt(“請輸入年齡”,20)
複製代碼
則這些參數與輸入視窗的關係如下圖:
1-2.png
2010-5-12 13:22


實做學習
使用prompt()函式,讓網頁載入時蹦現一個輸入視窗,讓瀏覽者輸入姓名,並利用瀏覽者所輸入的資料蹦現一個訊息視窗向瀏覽者打招呼。
  1. <HTML>
  2. <HEAD>
  3. <TITLE>prompt()函式</TITLE>
  4. </HEAD>
  5. <BODY>
  6. <SCRIPT Language="JavaScript">
  7. //彈出輸入視窗
  8. x=prompt("請問尊姓大名?","無名氏");
  9. //蹦現問候視窗
  10. alert(x+"你好");
  11. </SCRIPT>
  12. </BODY>
  13. </HTML>
複製代碼
1-3.png
2010-5-12 13:25

上圖是理想的執行結果,瀏覽者在輸入欄位中輸入自己的姓名並且按下確定按鈕,萬一瀏覽者不想填入資料而直接按下取消按鈕,或是輸入名字卻按下取消按鈕呢?此時將會出現下圖的結果:
1-4.png
2010-5-12 13:25

為何為這樣呢?因為瀏欄者按下取消按鈕,則回傳給程式一個空值(null),此時JavaScript就自作聰明的把回傳值資料設定為『null』,因此在程式碼第8行,我們呼叫alert()函式所出現的訊息內容『x+”你好”』就變成了『”null”+”你好”』,所以在訊息視窗中的內容就成為『null你好』!該如何解決這個錯誤呢?很簡單,我們只要加上一個if判斷敘述來判斷就行了,我們先判斷輸入視窗中傳回是否有傳回值,如果有資料回傳我們再顯示執行蹦出訊息的視窗。
  1. <HTML>
  2. <HEAD>
  3. <TITLE>prompt()函式</TITLE>
  4. </HEAD>
  5. <BODY>
  6. <SCRIPT Language="JavaScript">
  7. //彈出輸入視窗
  8. x=prompt("請問尊姓大名?","無名氏");
  9. if(x) //判斷是否有回傳資料
  10. {
  11. //蹦現問候視窗
  12. alert(x+"你好");
  13. }
  14. </SCRIPT>
  15. </BODY>
  16. </HTML>
複製代碼
心安,平安   為了論壇的永續經營,您不妨 贊 助 論 壇
發表任何無意義的感謝或灌水文章一律砍,珍惜帳號,請詳閱版規!!

TOP

        靜思自在 : 有智慧才能分辨善惡邪正;有謙虛才能建立美滿人生。
返回列表 上一主題