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三种弹窗方式，这也正应对了三种交互方式，即询问，确认和告知。

课后作业

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

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

07.JavaScript弹窗——alert、prompt、confirm相关推荐

js中的弹窗alert、confirm和prompt
转载:http://blog.csdn.net/cui_angel/article/details/7784211 alert() 弹出个提示框 (确定) confirm() 弹出个确认框 (确定,取 ...
javascript 重写alert、confirm、prompt 等提示宽框
基于浏览器的提示太丑了,易U开发了各种提示主要包括: alert,error,success,notice,confirm,prompt 等方法 demo:http://www.yxsss.com/u ...
ios webview html交互卡死,iOS 之webview 的js交互（alert、confirm、prompt）弹窗造成界面卡死...
概述:当iOS客户端中webView 与js交互,在主线程执行js脚本时,而js脚本存在alert().confirm().prompt()这三种弹窗时会造成iOS界面卡死. 1.造成卡死时的代码如下 ...
JavaScript三种弹出框（alert，confirm和prompt）
JavaScript三种弹出框(alert,confirm和prompt)用法举例 http://blog.csdn.net/lucky51222/article/details/45604681 我 ...
js弹窗的3种方式：alert、confirm、prompt
先上代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w ...
WKWebView Safari调试、JS互调、加载进度条、JS中alert、confirm、prompt
主要内容 Safari调试 swift/OC与JS互调增加加载进度条支持JS中alert.confirm.prompt Safari调试设置 -> safari --> 高级,开启J ...
jquery自定义对话框alert、confirm和prompt
jQuery Alert Dialogs,又一个基于jQuery的提示框插件,主要包括Alert.Confirm.prompt这三种,还有一个高级范例,可以在提示框内嵌入HTML语言,可以自定义风格样 ...
基于Selenium2+Java的UI自动化（6）-操作Alert、confirm、prompt弹出框
alert.confirm.prompt这样的js对话框在selenium1 时代处理起来比价麻烦,常常要用autoit来帮助处理. 而现在webdriver对这些弹出框做了专门的处理,使用selen ...
Dorado7 notify非alert 输入框prompt confirm layer dialoger，layer.msg，toast效果，几秒关闭layer.load layer.open
IDEA-layer 方式一:layer.alert() layer.alert("当前行的下标:" + row.username, {icon: 0}); icon=0 1 2 ...
python中prompt的意思_selenium+Python(alert 、confirm 、prompt 的处理)
alert\confirm\prompt 弹出框操作主要方法有: text 返回 alert/confirm/prompt 中的文字信息 accept 点击确认按钮 dismiss 点击取消按钮,如果 ...

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