由于我们将使用浏览器作为演示环境,让我们看看几个与用户交互的函数:alert、prompt 和 confirm。

alert
这个我们已经见过了。它显示一条消息,并等待用户按“OK”。
例如:
alert("Hello");
带有消息的迷你窗口称为模态窗口。 “模态”意味着访客在处理完该窗口之前,无法与页面的其他部分交互、按下其他按钮等。在这种情况下,必须按“OK”才能继续。
prompt
函数 prompt
接受两个参数:
result = prompt(title, [default]);
它显示一个模态窗口,其中包含一条文本消息、一个供访客输入的输入框,以及“OK/取消”按钮。
-
title
要显示给访客的文本。 -
default
可选的第二个参数,输入框的初始值。
语法中的方括号 […]
语法中 default
周围的方括号表示该参数是可选的,并非必需。
访客可以在 prompt
输入框中输入内容并按 “OK”,然后我们会在结果中得到该文本。或者,他们可以通过按 “取消” 按钮或 Esc
键来取消输入,此时结果将为 null
。
调用 prompt
时,会返回输入框中的文本;如果输入被取消,则返回 null
。
例如:
let age = prompt('How old are you?', 100); alert(`You are ${age} years old!`); // You are 100 years old!
第二个参数是可选的。但是如果我们不提供的话,Internet Explorer 会把 "undefined"
插入到 prompt。
我们可以在 Internet Explorer 中运行下面这行代码来看看效果:
let test = prompt("Test");
所以,为了 prompt 在 IE 中有好的效果,我们建议始终提供第二个参数:
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,点击取消或按下 Esc 键返回 false。
这些方法都是模态的:它们暂停脚本的执行,并且不允许用户与该页面的其余部分进行交互,直到窗口被解除。
上述所有方法共有两个限制:
- 模态窗口的确切位置由浏览器决定。通常在页面中心。
- 窗口的确切外观也取决于浏览器。我们不能修改它。
这就是简单的代价。还有其他一些方式可以显示更漂亮的窗口,并与用户进行更丰富的交互,但如果“花里胡哨”不是非常重要,那使用本节讲的这些方法也挺好。