JavaScript 小知识-浏览器窗口中的几个对话框

小知识，大挑战！本文正在参与“程序员必备小知识”创作活动。

前文学习了 JavaScript 的窗口对象 上的一些属性和常用方法函数, 本文来学习 JavaScript 窗口的 对话框. 对话框用于和用户交互, 用来搜集用户提交的内容,

JavaScript 窗口对象-对话框

JavaScript 对话框的作用就如开头所述一样, 用来和浏览我们网页的用户进行交流, 比方说提示框, 选择和获取用户输入信息的功能.

JavaScript 的几个对话框

JavaScript 提供了 三个标准的对话框, 分别是 输入对话框, 选择对话框 和 弹出对话框

如上文学习的 window 窗口对象, 这个三个对话框 同样是基于 window 对象产生的, 是 window 上的对象的方法来使用.

分类

window 对象中的对话框

1. prompt(): 输入框

   弹出一个包含 [确定] 和 [取消]按钮的输入对话框, 在用户输入一些内容时点击 确定后可以返回输入的内容. 如果点击 取消 就返回 null. 而且还可以指定初始值.

2. confirm(): 确认框

   弹出一个包含 [确定] 和 [取消]按钮的输入对话框, 在用户确认选择后 如果点击 确定后可以返回 True. 如果点击 取消 就返回 false.

3. alert(): 弹出框

   就是一个弹出框, 包含一个 确定 按钮, 不点击确定无法进行下一步操作, 有点鸡肋, 建议尽量不用

演示:

如下: 定义三个对应的函数, 在按钮上绑定定义的方法, 在点击时就会调用这些方法, 弹出对话框.

<input type="button" onclick="show_alert" value="弹出对话框 alert, 请点击确定" />
<input type="button" onclick="show_prompt" value="弹出对话框 prompt, 请输入名称" />

<script language="JavaScript">
  function show_alert() {
    alert('我是一个弹出框, 请点击确定隐藏')
  }

  function show_prompt() {
    let name = prompt('请输入名称', '')
    if (name !== null && name !== '') {
      document.write('你好呀!' + name + '!')
    }
  }
</script>