手把手教你JavaScript(16):三種訊息框

手把手教你JavaScript(16):三種訊息框
手把手教你JavaScript(16):三種訊息框

想學JavaScript卻不知從何下手?看完這一系列教學文一定對你的程式之路很有幫助的!!(16)

JavaScript 提供三種訊息框:alert、confirm、prompt,介紹如下:

Alert警告提示框

當要確保信息傳遞給用戶時,就使用 Alert 警告提示框。JavaScript 的訊息框提供了一個「確定」按鈕,讓使用者關閉該訊息框後才可以繼續進行操作。

Alert 警告提示框採用單個參數,即彈出框中顯示的文字,如下例子:

alert("Do you really want to leave this page?");

prompt提示訊息框

JavaScript 的 prompt 提示訊息框用於讓用戶在進入頁面之前,必須先輸入訊息。

當 prompt 提示訊息框跳出時,用戶在輸入訊息後必須點擊「確定」或「取消」才能繼續。

如果用戶點擊「確定」,該框將顯示使用者輸入的訊息如果用戶單擊「取消」,則顯示「null」

如下例子,當使用者進入網頁時,網頁就會跳出一個 prompt提示訊息框,訊息框上顯示「你今年幾算?」,然後讓使用者輸入數字。若使用者輸入歲數並且按下「確定」後,訊息框將會顯示「你今年_歲」;若使用者沒有輸入訊息或是按「取消」,則顯示「你今年null歲」。

// result = prompt(確認訊息框顯示問題);
let age = prompt('你今年幾算?');

alert(`你今年 ${age} 歲!`); // 你今年_歲!

confirm確認訊息框

JavaScript 的 confirm 確認訊息框通常用於讓用戶驗證或接受某些內容。
彈出confirm確認訊息框時,用戶必須點擊「確定」或「取消」才能繼續。
如果用戶單擊「確定」,則該框將回傳 true。如果 用戶單擊「取消」,則該框將回傳 false。

如下例子,當使用者進入網頁時,網頁就會跳出一個 confirm 確認訊息框,訊息框上顯示「請問你確定要離開此頁嗎?」,然後讓使用者輸入「確定」或「取消」。若使用者輸入「確定」後,訊息框將會顯示「感謝您的造訪,再見!」;若使用者沒有輸入訊息或是按「取消」,則顯示「感謝您選擇繼續瀏覽我們的網頁!」。

var result = confirm("請問你確定要離開此頁嗎?");
if (result == true) {
  alert("感謝您的造訪,再見!");
}
else {
  alert("感謝您選擇繼續瀏覽我們的網頁!");
}

 

更多關於JavaScript的文章請點下方連結喔~

 

 

 

其他閱讀

手把手教你JavaScript(14):在函式中使用多重參數

手把手教你JavaScript(15):函式回傳

不可不知!!SEO優化人員和前端工程師必讀的語意標記入門!!

重新學習UI UX Python課程 打好基礎輕鬆領高薪

有一個傳說 來上Java課程還能任高薪職缺 媒合率竟高達百分之90

人工智慧讓你看清肥胖的原因 讓Python課程教你如何做到

美國NASDAQ上市公司、外商IT教育培訓企業

2天考取Google Ads證照!新手廣告投放攻略

擺脫設備工程師血汗職涯, 零基礎的我成功轉職 Python 資料工程師

44歲媽咪順利轉職網頁設計師, 家庭事業都得意

零基礎如何花 14 小時考取 GoogleAds 認證?五種 GoogleAds 廣告不藏私攻略

從無到有 挑戰14小時取得Google證照

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *