交互：alert、prompt、confirm

由于我们将浏览器用作演示环境，因此让我们看看几个与用户交互的函数：alert、prompt 和 confirm。

alert

这个函数我们已经见过。它显示一条消息并等待用户按“确定”。

例如

alert("Hello");

带有消息的迷你窗口称为模态窗口。“模态”一词表示访问者无法与页面的其余部分交互、按其他按钮等，直到他们处理完窗口。在本例中，即直到他们按“确定”。

prompt

函数 prompt 接受两个参数

result = prompt(title, [default]);

它显示一个带有文本消息、一个供访问者输入的输入字段以及确定/取消按钮的模态窗口。

title

向访问者显示的文本。

默认

可选的第二个参数，输入字段的初始值。

访问者可以在提示输入字段中输入内容并按确定。然后我们在 result 中获取该文本。或者，他们可以通过按取消或按 Esc 键取消输入，然后我们得到 null 作为 result。

对 prompt 的调用返回输入字段中的文本，如果取消输入，则返回 null。

例如

let age = prompt('How old are you?', 100);

alert(`You are ${age} years old!`); // You are 100 years old!

let test = prompt("Test");

let test = prompt("Test", ''); // <-- for IE

confirm

语法

result = confirm(question);

函数 confirm 显示一个模态窗口，其中包含一个 question 和两个按钮：确定和取消。

如果按确定，则结果为 true，否则为 false。

例如

let isBoss = confirm("Are you the boss?");

alert( isBoss ); // true if OK is pressed

摘要

我们介绍了 3 个与访问者交互的特定于浏览器的函数

alert

显示一条消息。

prompt

显示一条消息，要求用户输入文本。它返回文本，或者如果单击取消按钮或 Esc，则返回 null。

confirm

显示一条消息并等待用户按“确定”或“取消”。它返回 true 表示确定，返回 false 表示取消/Esc。

所有这些方法都是模态的：它们暂停脚本执行，并且不允许访问者与页面的其余部分交互，直到窗口被关闭。

上述所有方法都有两个共同的限制

1. 模态窗口的确切位置由浏览器决定。通常，它位于中心。
2. 窗口的确切外观也取决于浏览器。我们无法修改它。

这就是简单性的代价。还有其他方法可以显示更漂亮的窗口并与访问者进行更丰富的交互，但如果“花里胡哨”并不重要，那么这些方法就可以很好地工作。