JavaScript入門撇步獨家分享(16)訊息框

JavaScript入門撇步獨家分享(16)訊息框

 

JavaScript入門撇步獨家分享(16)訊息框
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課程是你唯一選擇

從Java課程的角度看C++,不同以往思維的程式語言

Java課程被譽為一生必學的事,你有聽說嗎?

達內時代科技教育集團簡介

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

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

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

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

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

 

 

發佈留言

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

這個網站採用 Akismet 服務減少垃圾留言。進一步瞭解 Akismet 如何處理網站訪客的留言資料