JavaScript 基础
Document
运算符
深入数据和类型
函数进阶
原型、继承
类
浏览器存储
Web API
事件
错误处理
异步编程
网络请求
模块
练习
实例
工具与规范
软件架构模式
设计模式
交互意味着网页可以向用户提供信息,更能从用户获取信息。
$$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)
练习
- 你开了一家宠物公司,你需要收集以下的数据,并最终展示出来,设计你的程序吧:
- 用户的姓名
- 宠物名
- 宠物是否雄性
$$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}`)
$$