07.JavaScript弹窗——alert、prompt、confirm

JavaScript 常用交互

---

章节目录
上一篇：《数据类型》
下一篇:《类型转换》

---

JavaScript主要执行在浏览器端，不论在学习过程中还是在浏览过程中，如果能够和浏览器进行交互，则会有非常好的学习、浏览体验。

浏览器最基础的交互方式，就是通过弹窗询问、收集、展示一些信息给用户，这就需要用到三个基础的函数：alert、prompt和confirm。

alert()

alert()函数已经多次出现在我们前面章节中，它会在浏览器中间偏上的位置弹出一个小窗口，显示一些代码中定义好的信息，并等待用户点击确定。

例如：

alert("快点我");

代码执行结果如下图：

我们通常称这个弹出的窗口为对话框，实际上它的学名叫做模态窗（modal），模态框的作用是强制要求用户和窗体交互，否则无法继续操作页面的其他部分。

例如上面的弹窗，如果我们不点击“确定”按钮，弹窗就不会消失，我们也没有办法操作页面。

模态窗的特性提醒我们：
不要在页面中加入过多的alert()，用户不喜欢被强制交互！
尤其注意在循环中的弹窗！
当然，调试的时候怎么用都是无所谓的~

prompt()

alert的主要作用是提醒或告知用户一条消息，如果希望得到用户更多的反馈，就需要使用prompt。

prompt可以使浏览器弹出一个带有标题和输入框的弹窗，通过弹窗的输入框就能得到用户输入的数据。

prompt语法：

msg =  prompt(title,[default])

title

弹窗的标题，通常是提示语句或者疑问句，例如：请输入年龄、您今年几岁了？

default

弹窗可以通过default赋予初始值。

语法中的[...]
依照语法编写的惯例，[]中的内容表示可选内容，也就是说不是必须的。

举个栗子：

let age = prompt('请输入您的年龄？',18);
let name = prompt('请输入您的名字。','特朗普');
alert(`${name}今年${age}岁了。`);

代码执行结果如下：

输入框中的默认值就是18和“特朗普”，也就是我们预设的数值。

如果我们点击弹窗的确定按钮，输入框中的值就会被返回，如果我们点击取消就会返回null，也就是空值。

例如，我们在前两次弹窗中都点击取消，那么最中结果就是：

默认值问题
在不同的浏览器中，对默认值的处理不尽相同
例如在IE浏览器中，如果我们不设置默认值，那么就会填充undefined
为了安全和规范，建议时时刻刻都不要忘了设置默认值

confirm()

confirm用于向用户发送一个选择性问题，这个问题只有是否两个答案，例如：你确定是18岁？

语法：

result = confirm(question);

question

question是confirm函数要显示的问题。

举个栗子：

let age = prompt("请输入您的年龄？",18);
let res = confirm(`确认您只有${age}岁吗？`);
alert(res);

代码执行结果：

以上案例同时使用了prompt、confirm、alert三种弹窗方式，这也正应对了三种交互方式，即询问，确认和告知。

课后作业

请创建一个询问用户姓名的弹窗，并在用户输入后弹出用户姓名。

---

章节目录
上一篇：《数据类型》
下一篇:《类型转换》

---