不可錯過的JavaScript課程(16)訊息框

不可錯過的JavaScript課程(16)訊息框

JavaScript的訊息框分成alert.confirm.prompt三種,今天就讓我們一起來學~

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("感謝您選擇繼續瀏覽我們的網頁！");
}