返回列表下一主題上一主題發帖

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

小誌

　暱稱: 小誌
　頭銜: 曾經也是水電工

管理員 Rank: 9 Rank: 9 Rank: 9

帖子: 1176
主題: 394
精華: 113
積分: 1747
點名: 1
作業系統: Vista
軟體版本: Office 2003
閱讀權限: 200
性別: 男
來自: 台灣
註冊時間: 2010-5-1
最後登錄: 2024-4-7

2021牛年全勤獎章好學求知勳章熱烈參與勳章 2017 雞年全勤獎章 2018 狗年全勤獎章 2019 豬年全勤獎章 2020鼠年全勤獎章

1^# 跳轉到 » 正序看帖

打印

字體大小: tT

發表於 2010-5-12 13:15 | 只看該作者

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

prompt, confirm, 函式

大罐的不好嗎？

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

confirm() 函式
confirm()函式其參數的應用與alert()函式相同，參數的內容都將會顯示在蹦現的訊息視窗中而成為所謂的『提示訊息』，但不同的是，confirm()函式具有回傳值，其格式如下：
confirm()函式使用格式

X = confirn(提示參數)

複製代碼

其中回傳值由瀏覽者按下哪一個回覆按鈕來決定，而回傳值的內容則是一個布林值：『是(true)』或『否(false)』：

若瀏覽者按下『確定』按鈕，則x等於「true」；若瀏覽者按下『取消』按鈕，則x等於「false」，有了confirm()函式的回傳值，我們就可以知道瀏覽者按下哪一個按鈕，再加上判斷敘述就可以決定程式執行的路徑：

<HTML>
<HEAD>
<TITLE>大罐的ㄍㄢˇ不好？</TITLE>
</HEAD>
<BODY>
<SCRIPT Language="JavaScript">
x=confirm("大罐的ㄍㄢˇ不好？")
if (x)
{
alert("大罐的吃較久");
}
else
{
alert("ㄚ我就找無小罐的！");
}
</SCRIPT>
</BODY>
</HTML>

複製代碼

實做學習
請設計一JavaScript程式，當瀏覽者進站時出現一訊息視窗詢問瀏覽者是否需要知道進站時間，若瀏覽者按下『確定』按鈕，則出現另一訊息視窗告知進站時間；若瀏覽者按下『取消』按鈕，則結束程式執行。

<HTML>
<HEAD>
<TITLE>confirm()函式應用</TITLE>
</HEAD>
<BODY>
<SCRIPT Language="JavaScript">
//詢問是否告知進站時間
x=confirm("告訴你進站時間好嗎？")
//判斷按下哪一個按鈕
if (x)
{
//建立日期時間物件
intime=new Date();
//取得小時資料
inhours=intime.getHours();
//取的分鐘資料
inminutes=intime.getMinutes();
//組合進站時間訊息
msg="您的進站時間："+inhours+"時"+inminutes+"分";
//告知進站時間
alert(msg);
}
</SCRIPT>
</BODY>
</HTML>

複製代碼

樓主熱帖

心安，平安
發表任何無意義的感謝或灌水文章一律砍,珍惜帳號,請詳閱版規!!

小誌

　暱稱: 小誌
　頭銜: 曾經也是水電工

管理員 Rank: 9 Rank: 9 Rank: 9

帖子: 1176
主題: 394
精華: 113
積分: 1747
點名: 1
作業系統: Vista
軟體版本: Office 2003
閱讀權限: 200
性別: 男
來自: 台灣
註冊時間: 2010-5-1
最後登錄: 2024-4-7

2021牛年全勤獎章好學求知勳章熱烈參與勳章 2017 雞年全勤獎章 2018 狗年全勤獎章 2019 豬年全勤獎章 2020鼠年全勤獎章

2^#

發表於 2010-5-12 13:23 | 只看該作者

尊姓大名？
你有沒有在進入網站時被詢問過「尊姓大名」過呢？我想你應該常常遇過才對！這個可以讓瀏覽者輸入資料的視窗稱之為『輸入視窗（inputbox）』，它是由JavaScript所提供的一個輸入函式：

prompt() 函式
prompt()函式與confirm()函式相同，都會先顯示一個視窗，但不同的是prompt()函式所顯示的視窗中含有一個輸入的欄位，呼叫prompt()函式的基本格式如下：
prompt()函式使用格式

X = prompt(提示參數)

複製代碼

參數的內容都將會顯示在蹦現的訊息視窗中而成為所謂的『提示訊息』，同時，在輸入的欄位內會有一段預設的輸入資料「undefined」，以下是輸入視窗的組成說明：

預設提示文字：這是當我們呼叫prompt()函式時JavaScript自動產生在輸入視窗內的提示文字，我們不能加以更改。
提示訊息內容：我們呼叫函式所指定的提示參數內容。
輸入欄位：讓瀏覽者輸入相關資料的欄位。
預設輸入內容：這是當我們呼叫prompt()函式時JavaScript自動產生在輸入欄位內的資料內容。
輸入確認按鈕：瀏覽者在輸入欄位輸入資料後，若按下確定按鈕則可將輸入欄位內的資料傳回程式使用。
輸入取消按鈕：如果瀏欄者按下取消按鈕，則回傳給程式一個空值(null)。

預設輸入內容，雖然我們呼叫prompt()函式時，JavaScript會自動在輸入欄位內產生預設的資料內容「undefined」，但是，這個預設的資料內容我們也可以自己指定，其格式如下：
prompt()函式使用格式

X = prompt(提示參數,預設輸入內容)

複製代碼

如果我們呼叫的敘述是：

x = prompt(“請輸入年齡”,20)

複製代碼

則這些參數與輸入視窗的關係如下圖：

實做學習
使用prompt()函式，讓網頁載入時蹦現一個輸入視窗，讓瀏覽者輸入姓名，並利用瀏覽者所輸入的資料蹦現一個訊息視窗向瀏覽者打招呼。

<HTML>
<HEAD>
<TITLE>prompt()函式</TITLE>
</HEAD>
<BODY>
<SCRIPT Language="JavaScript">
//彈出輸入視窗
x=prompt("請問尊姓大名？","無名氏");
//蹦現問候視窗
alert(x+"你好");
</SCRIPT>
</BODY>
</HTML>

複製代碼

上圖是理想的執行結果，瀏覽者在輸入欄位中輸入自己的姓名並且按下確定按鈕，萬一瀏覽者不想填入資料而直接按下取消按鈕，或是輸入名字卻按下取消按鈕呢？此時將會出現下圖的結果：

為何為這樣呢？因為瀏欄者按下取消按鈕，則回傳給程式一個空值(null)，此時JavaScript就自作聰明的把回傳值資料設定為『null』，因此在程式碼第8行，我們呼叫alert()函式所出現的訊息內容『x+”你好”』就變成了『”null”+”你好”』，所以在訊息視窗中的內容就成為『null你好』！該如何解決這個錯誤呢？很簡單，我們只要加上一個if判斷敘述來判斷就行了，我們先判斷輸入視窗中傳回是否有傳回值，如果有資料回傳我們再顯示執行蹦出訊息的視窗。

<HTML>
<HEAD>
<TITLE>prompt()函式</TITLE>
</HEAD>
<BODY>
<SCRIPT Language="JavaScript">
//彈出輸入視窗
x=prompt("請問尊姓大名？","無名氏");
if(x) //判斷是否有回傳資料
{
//蹦現問候視窗
alert(x+"你好");
}
</SCRIPT>
</BODY>
</HTML>

複製代碼

心安，平安
發表任何無意義的感謝或灌水文章一律砍,珍惜帳號,請詳閱版規!!

TOP

靜思自在 : 知識要用心體會，才能變成自己的智慧。

返回列表下一主題上一主題