JavaScript alert弹窗基础教程与完整示例

alert 弹窗实现结果

执行以下 JavaScript 代码后，会在浏览器页面触发一个模态警告框，用户点击“确定”后方可继续操作：

准备条件

1. 文本编辑器：如系统自带的记事本、写字板，或使用 VS Code、EditPlus 等高级编辑器。
2. 现代浏览器：推荐使用 Chrome、Firefox、Edge 或 Safari（不再依赖老旧的 IE 内核）。

真实操作步骤

第1步：编写核心脚本代码

目的：调用 alert() 函数向用户显示指定的文本信息。

动作：创建一个包含 <script> 标签的代码片段。将具体代码写入其中：

<script type="text/javascript">
alert("我是提示文字！");
</script>

第2步：构建 HTML 文件框架

目的：将脚本嵌入标准的 HTML 结构中，以便浏览器解析。

入口：在文本编辑器中新建文档。

动作：复制以下完整代码到文件中：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Alert 测试</title>
</head>
<body>
    <h1>欢迎体验 JavaScript</h1>

    <script type="text/javascript">
        alert("我是提示文字！");
    </script>
</body>
</html>

第3步：保存并验证运行

目的：生成可被浏览器读取的文件并查看效果。

参数：文件后缀必须为 .html 或 .htm，例如命名为 alert.html。

操作：双击该 HTML 文件，或在浏览器中打开它即可看到效果。

语法原理解析

• 脚本包裹：<script type="text/javascript"> 标记代码块的开始，</script> 表示结束。所有的 JavaScript 逻辑语句必须放置在两个标签之间。
• 函数调用：alert() 是 JS 提供的标准内置函数，用于弹出一个带“确定”按钮的系统级对话框。
• 字符串规范：传递给 alert 的文字内容必须使用双引号 " " 或单引号 ' ' 括起来，且结尾的分号 ; 标志着这条语句的结束。

完成判断与排错

如果双击打开文件后没有弹出窗口，通常是以下原因导致：

1. 浏览器安全拦截：部分浏览器禁止直接通过本地文件系统（file:// 协议）运行涉及交互的脚本。建议使用 Live Server 插件开启本地服务器访问，或在设置中允许本地资源的脚本运行。
2. 编码问题：若弹出的中文出现乱码，请确保编辑器保存文件时选择了 UTF-8 编码。
3. 路径错误：检查文件是否确实以 .html 结尾且没有被系统隐藏后缀。

以上就是 JavaScript alert 弹窗的详细教程，更多关于 JavaScript 基础知识的资料请关注本站其它相关文章！