JavaScript解释使用事件的弹出消息

我们可以使用弹出框向应用程序用户显示弹出信息。我们将在本教程中了解不同类型的JavaScript弹出框。

以下是JavaScript中三种不同类型的弹出框。

Alert box
确认框
提示框

下面我们将逐一了解所有的弹出框。

Alert Box

我们可以使用window.alert()方法显示提示框。它只是在弹出框中显示信息。

当我们需要给用户一些信息的时候，我们可以使用警报框。例如，当用户登录到应用程序时，它会显示一个类似 “您已成功登录 “的消息。

语法

用户可以按照下面的语法，在JavaScript中显示提示框。

alert(message)

参数

message – 它是一个显示在警报框内的信息。

示例

在这个例子中，我们在用户点击按钮时调用showAlert()函数。showAlert()函数使用alert()方法来显示警报框。

在输出中，用户可以观察到，当我们按下按钮时，它显示了警报框，其中有作为参数传递的信息。当我们按下警报框中的’ok’按钮时，它就消失了。

<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()方法来显示确认框。确认框包含了两个按钮，分别是ok和cancel的文字。如果用户按下取消按钮，它将返回false；否则返回true。

语法

用户可以按照下面的语法来显示JavaScript中的确认框。

confirm(message);

参数

message – 这是一个确认信息，显示在确认框中。

返回值

它根据用户是按下确定还是取消按钮来返回真和假的布尔值。

示例

在这个例子中，我们使用窗口对象的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()和confirms框的高级版本。它在盒子上显示信息并接受用户的输入。此外，它还包含确定和取消按钮来提交输入值。

语法

用户可以按照下面的语法来使用提示框，在JavaScript中接受用户输入。

prompt(message, placeholder);

我们在上面的语法中调用了静态提示（）方法。

参数

message – 它是一个显示在输入框上方的信息。
占位符 – 它是一个要在输入框中显示的文本。

返回值

如果用户按了确定按钮，它将返回输入值；否则为空。

示例

在这个例子中，我们创建了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>