資料結構
網路
關係資料庫管理系統 (RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝學
法學使用事件解釋彈出訊息
我們可以使用彈出框嚮應用使用者顯示彈出訊息。在本教程中，我們將學習JavaScript中不同型別的彈出框。
JavaScript中共有三種不同型別的彈出框。
警告框
確認框
提示框
下面我們將逐一學習所有彈出框。
警告框
我們可以使用 `window.alert()` 方法顯示警告框。它只是在彈出框中顯示訊息。
當我們需要向用戶傳送一些訊息時，可以使用警告框。例如，當用戶登入應用程式時，它會顯示“您已成功登入”之類的訊息。
語法
使用者可以按照以下語法在JavaScript中顯示警告框。
alert(message)
引數
message − 要在警告框中顯示的訊息。
示例
在這個例子中，當用戶點選按鈕時，我們呼叫 `showAlert()` 函式。`showAlert()` 函式使用 `alert()` 方法顯示警告框。
在輸出中，使用者可以看到，當我們按下按鈕時，它會顯示帶有作為引數傳遞的訊息的警告框。當我們在警告框中按下“確定”按鈕時，它會消失。
<html>
<body>
<h2> Showing the alert message using the <i> alert box. </i> </h2>
<button onclick = "showAlert()"> Show Alert Message </button>
</body>
<script>
// function to show alert
function showAlert() {
alert("This is the important message");
}
</script>
</html>
確認框
當我們需要使用者的確認時，可以使用確認框。例如，在刪除一些重要資料之前，我們需要使用者的確認。
我們可以使用 `window.confirm()` 方法顯示確認框。確認框包含兩個按鈕，分別包含文字“確定”和“取消”。如果使用者按下“取消”按鈕，則返回false；否則返回true。
語法
使用者可以按照以下語法在JavaScript中顯示確認框。
confirm(message);
引數
message − 要在確認框中顯示的確認訊息。
返回值
它根據使用者按下“確定”還是“取消”按鈕返回true和false布林值。
示例
在這個例子中，我們使用了 `window` 物件的 `confirm()` 方法來顯示確認框。此外，根據使用者按下確認框的“確定”或“取消”按鈕，我們還會在螢幕上向用戶顯示不同的訊息。
<html>
<body>
<h2> Showing the confirm box using the <i> confirm() </i> method.</h2>
<p id = "output"> </p>
<button onclick = "showConfirm()"> Show Confirm box </button>
</body>
<script>
let message = "Kindly confirm once by pressing the ok or cancel button!";
// function to show confirm box
function showConfirm() {
// showing the confirm box with the message parameter
let returnValue = confirm(message);
let output = document.getElementById("output");
// According to the returned boolean value, show the output
if (returnValue) {
output.innerHTML += "You pressed the ok button.";
} else {
output.innerHTML += "You pressed the cancel button.";
}
}
</script>
</html>
提示框
提示框是JavaScript中顯示彈出訊息的第三種方法。提示框是 `alert()` 和確認框的增強版。它在框中顯示訊息並獲取使用者的輸入。此外，它還包含“確定”和“取消”按鈕來提交輸入值。
語法
使用者可以按照以下語法使用提示框在JavaScript中獲取使用者輸入。
prompt(message, placeholder);
我們在上述語法中呼叫了靜態 `prompt()` 方法。
引數
message − 要在輸入框上方顯示的訊息。
Placeholder − 要在輸入框中顯示的文字。
返回值
如果使用者按下“確定”按鈕，它將返回輸入值；否則返回null。
示例
在這個例子中，我們建立了 `takeInput()` 函式，該函式向用戶顯示提示框。我們使用提示框從使用者處獲取姓名輸入。
當用戶在輸入值後按下“確定”按鈕時，我們在螢幕上顯示使用者的輸入。
<html>
<body>
<h2> Showing the prompt box using the <i> prompt() </i> method. </h2>
<p id = "output"> </p>
<button onclick = "takeInput()"> Show Prompt box </button>
</body>
<script>
let message = "Enter your name";
// function to take input using the prompt box
function takeInput() {
// showing the prompt with the message parameter
let returnValue = prompt(message, "Shubham");
let output = document.getElementById("output");
if (returnValue) {
output.innerHTML += "Your good name is " + returnValue;
} else {
output.innerHTML +=
"You pressed the cancel button, or you entered the null value";
}
}
</script>
</html>
在本教程中，我們學習了所有三種不同的彈出框以及示例。如果只需要顯示訊息，可以使用警告框；如果只需要使用者的確認，則應使用確認框；如果需要彈出框中的輸入值或帶有某些值的確認，則應使用提示框。
748 次瀏覽
