JavaScript初學者該知道的事(16)訊息框

 

 

你知道JavaScript裡的三種訊息框,它們的各功能是啥嗎?今天介紹給你!

 

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初學者該知道的事(13)函式中的參數

JavaScript初學者該知道的事(14)函式中使用多重參數

JavaScript初學者該知道的事(15)函式回傳

Java真的和Python不一樣嗎?天啊!!!

高薪像做夢?!Java課程讓你夢想成真!

上完 Java課程,高薪,專業,工程師,三個願望一次滿足

達內教育海外合作企業

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

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

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

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

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

arrow
arrow
    創作者介紹
    創作者 Uder.chain 的頭像
    Uder.chain

    娶了UI設計師的Python工程師-北歐生活

    Uder.chain 發表在 痞客邦 留言(0) 人氣()