交互意味着网页可以向用户提供信息，更能从用户获取信息。

$$tip

虽然 JavaScript 的几个交互函数过于简陋，在实际项目中很少使用，但在开发阶段却能很方便地帮助开发与调试

$$

alert

alert 显示一个带确认按钮的警告对话框，并且属于模态窗口（modal，处理窗口前不能与其他部分交互）。

$$edit$$
$$jsdemo$$
alert("三眼鸭的编程教室")

alert 会默认将参数转成 string 类型，有些对象类型的数据的显示可能会不太理想。

$$edit$$
$$jsdemo$$
alert({ x: 1 })

prompt

prompt 显示一个输入框，带有确认和取消两个按钮，prompt 也是模态窗口。

prompt 接收两个参数，并返回一个值：

result = prompt(text, value);

• text：提示用户输入文件的字符串，可选参数。
• value：输入框中的默认值，可选参数。
• result：用户输入内容的字符串，点取消会返回 null 。

$$edit$$
$$jsdemo$$
let age = prompt("请输入你的年龄")
alert(age)

$$tip

prompt 返回的总是一个字符串类型，即使你自认为输入的是一个数字。对于这种情况可以用 Number 转换成数字类型。

$$

$$edit$$
$$jsdemo$$
let age = prompt("请输入你的年龄：")
alert(typeof age) // string

// 转换成数字类型
age = Number(age)

alert(typeof age) // number

confirm

confirm 显示一个确认框，带有确认和取消两个按钮，comfirm 也是模态窗口。

result = confirm(text)

• text：提示的文本。
• result：确认返回 true ，取消返回 false 。

$$edit$$
$$jsdemo$$
let result = confirm("你喜欢上班吗？")
alert(result)

---

练习

1. 你开了一家宠物公司，你需要收集以下的数据，并最终展示出来，设计你的程序吧：

• 用户的姓名
• 宠物名
• 宠物是否雄性

$$demo <button onclick="collect()">收集数据</button> <script> function collect() { let name = prompt("请输入你的姓名：") let petName = prompt("请输入宠物的名字：") let isMale = confirm("宠物是雄性吗？")

    alert(`用户名：${name}\n宠物名：${petName}\n宠物是否雄性：${isMale}`)
}

</script> $$

$$answer

$$jsdemo$$
$$edit$$
let name = prompt("请输入你的姓名：")
let petName = prompt("请输入宠物的名字：")
let isMale = confirm("宠物是雄性吗？")

alert(`用户名：${name}\n宠物名：${petName}\n宠物是否雄性：${isMale}`)

$$