JavaScript alert() 函数

JavaScript alert() 语法

alert() 是 JavaScript 的一个全局函数（即 window 对象的方法），它用于弹出一个带有消息提示的对话框。

语法：

alert(message)

说明：

alert() 方法接收单个参数。

message（可选）：是一个字符串，用于提示的文本。如果省略，则显示为空（或者不显示任何文本）。

alert() 是 window 对象的方法，在使用时是可以省略 window 前缀。下面 2 种写法是等价的。

// 写法1
alert("Hello");

// 写法2
window.alert("Hello");

注意:

alert() 是 window 对象的方法，它只能在浏览器环境中使用，而不能在 Node.js 环境中使用。这是因为 Node.js 是没有 window 对象的。
alert() 执行之后，会阻塞后续程序的执行，除非我们手动关闭它。
如果想要输出一个结果来调试代码，我们并不建议使用 alert()，而是推荐使用 console.log()。

JavaScript alert() 摘要

属于	JavaScript window 对象
使用频率	中（应避免滥用）
官方文档	查看
MDN	查看

JavaScript alert() 示例

接下来，我们通过一个简单的例子来讲解一下 JavaScript alert() 方法是如何使用的。

示例：alert() 基本用法

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
    <button id="btn" type="button">欢迎</button>
    <script>
        const oBtn = document.getElementById("btn");
        oBtn.addEventListener("click", function() {
            alert("欢迎来到绿叶网！");
        });
    </script>
</body>
</html>

默认情况下，页面效果如下图所示。单击【欢迎】按钮之后，会弹出一个对话框，如下图所示。

alert() 示例效果1

alert() 示例效果2

分析：

上面例子实现的功能是：过了 2 秒钟后，输出一段文本。现在有了 ES6 箭头函数，一般情况下都是写成下面形式（推荐）。

oBtn.addEventListener("click", () => {
    alert("欢迎来到绿叶网！");
});

浏览器自带的对话框效果也并不理想，如果你想要实现绿叶网那样美观的对话框，可以考虑使用自定义样式来实现。

绿叶网的对话框效果

alert()、confirm() 与 prompt() 的区别

alert()、confirm() 和 prompt() 这 3 个都可以用于定义一个对话框，它们之间的区别如下。

alert()：仅提示文本。
confirm()：带提示文本和确认按钮，返回一个布尔值。
prompt()：带提示文本和输入框，返回一个字符串。

这 3 种对话框在实际开发中经常用到，不过大多数情况下不会采用浏览器默认的对话框，因为这些默认对话框外观真的是太丑了。为了更好的用户体验，我们都倾向于使用 div 元素来模拟出来，并且结合 CSS3、JavaScript 等来实现酷炫的动画效果。

下面就是使用 div 元素模拟出来的对话框，简约扁平，并且还带有各种 3D 动画，用户体验非常好。不过这种效果实现起来比较复杂，小伙伴们可以自行搜一下 “CSS 模拟对话框”。

模拟 alert() 的组件效果

模拟 confirm() 的组件效果

模拟 prompt() 的组件效果