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教學13.函式中的參數

JavaScript教學14.在函式中使用多重參數

JavaScript教學15.函式回傳

有了它人人都可精準選角拍電影?交給人工智慧準沒錯?

還不懂Python的你趕緊看過來,為你獻上基礎介紹(一)

還不懂Python的你趕緊看過來,為你獻上基礎介紹(二)

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

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

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

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

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

全球首屆元宇宙時裝周,複刻20年前的失敗?

全球首屆元宇宙時裝周, 遇到瓶頸 複刻20年前的失敗? 目錄 元宇宙時裝周參與盛況 叫好不叫座?新興技術的行銷瓶頸 由虛擬實境平台 Decentraland 所舉辦的「元宇宙時裝週」(Metaverse Fashion Week...