编辑“︁JavaScript对话框”︁

= JavaScript对话框 =

'''JavaScript对话框'''是浏览器对象模型（BOM）提供的一组简单交互方法，允许开发者通过弹出窗口与用户进行即时交互。这些对话框是模态的（即会阻塞代码执行直到用户响应），常用于提示、确认或接收用户输入。

== 类型与基本用法 ==
JavaScript提供了三种原生对话框方法，均通过<code>window</code>对象调用：

=== 1. alert() ===
显示警告对话框，包含消息和"确定"按钮。

<syntaxhighlight lang="javascript">
// 基本语法
window.alert("消息内容");

// 示例
alert("文件保存成功！");
</syntaxhighlight>

'''输出效果'''：弹出窗口显示"文件保存成功！"文本和确定按钮。

=== 2. confirm() ===
显示确认对话框，包含消息、"确定"和"取消"按钮，返回布尔值。

<syntaxhighlight lang="javascript">
// 基本语法
let result = confirm("确认删除此项目？");

// 示例使用
if (confirm("确定要提交表单吗？")) {
    console.log("用户点击了确定");
} else {
    console.log("用户点击了取消");
}
</syntaxhighlight>

'''输出效果'''：弹出窗口显示问题，用户选择确定返回<code>true</code>，取消返回<code>false</code>。

=== 3. prompt() ===
显示输入对话框，包含消息、输入框和按钮，返回用户输入或null。

<syntaxhighlight lang="javascript">
// 基本语法
let userInput = prompt("提示信息", "默认值");

// 示例
let name = prompt("请输入您的姓名", "张三");
console.log(name || "用户未输入");
</syntaxhighlight>

'''输出效果'''：弹出窗口显示输入框，用户点击取消返回<code>null</code>，否则返回输入字符串。

== 技术细节 ==

=== 执行阻塞特性 ===
对话框会阻塞JavaScript执行和页面渲染，直到用户响应。这意味着：

<mermaid>
graph TD
    A[显示对话框] --> B[代码暂停执行]
    B --> C{用户响应?}
    C -->|是| D[继续执行后续代码]
</mermaid>

=== 样式限制 ===
浏览器原生对话框的样式不可自定义，这是其最大局限性。现代Web开发通常使用CSS自定义模态框替代。

== 实际应用案例 ==

=== 表单提交确认 ===
<syntaxhighlight lang="javascript">
document.querySelector("form").addEventListener("submit", function(e) {
    if (!confirm("确认提交敏感数据？")) {
        e.preventDefault(); // 取消表单提交
    }
});
</syntaxhighlight>

=== 简易身份验证 ===
<syntaxhighlight lang="javascript">
let attempts = 0;
while (attempts < 3) {
    let password = prompt("请输入管理员密码:");
    if (password === "secret123") {
        alert("验证成功！");
        break;
    }
    attempts++;
}
</syntaxhighlight>

== 进阶注意事项 ==

1. '''用户体验问题'''：过度使用对话框会破坏用户体验，建议仅在必要时使用
2. '''移动端差异'''：某些移动浏览器可能以不同方式呈现对话框
3. '''异步替代方案'''：现代开发推荐使用Promise封装：

<syntaxhighlight lang="javascript">
async function customConfirm(message) {
    return new Promise(resolve => {
        // 这里实际应使用CSS自定义模态框
        resolve(window.confirm(message));
    });
}
</syntaxhighlight>

4. '''对话框计数限制'''：部分浏览器会阻止连续过多的对话框弹出

== 数学表达 ==
对话框的阻塞特性可以用执行时间公式表示：
<math>
T_{total} = T_{display} + \max(T_{user}, T_{timeout})
</math>
其中：
* <math>T_{display}</math> = 显示延迟
* <math>T_{user}</math> = 用户响应时间
* <math>T_{timeout}</math> = 系统超时时间

== 浏览器兼容性 ==
所有现代浏览器完全支持这三种对话框方法，包括：
* Chrome 1+
* Firefox 1+
* Safari 3+
* Edge 12+
* Opera 7+

== 替代方案 ==
对于需要更好用户体验的场景，推荐使用以下技术替代原生对话框：
* CSS/HTML自定义模态框
* 第三方UI库（如SweetAlert2）
* 通知API（非阻塞式提示）

[[Category:编程语言]]
[[Category:JavaScript]]
[[Category:Javascript BOM]]