Web APIs-day04 day04_WebAPIs

WebAPIs 删除节点使用父节点对象 removeChild 子节点对象 创建节点可以使用innerHTML或createElement 给元素注册事件的方式有传统方式和事件监听解绑事件使用removeEventListener 事件冒泡可以通过事件对象 stopPropagation 来阻止默认行为可以通过事件对象 preventDefault 来阻止获取鼠标在页面中的坐标使用事件对象 pageX和事件对象 pageY 昨日复习 正文 单击此处标题样式微软雅黑24号 删除节点使用父节点对象 removeChild 子节点对象 创建节点可以使用innerHTML或createElement 给元素注册事件的方式有传统方式和事件监听解绑事件使用removeEventListener 事件冒泡可以通过事件对象 stopPropagation 来阻止默认行为可以通过事件对象 preventDefault 来阻止获取鼠标在页面中的坐标使用事件对象 pageX和事件对象 pageY 昨日复习 正文 单击此处标题样式微软雅黑24号 Contents 目 录 常用的键盘事件BOM概述window对象的常见事件定时器JS执行机制location对象navigator对象history对象 能够掌握键盘事件的相关应用能够说出什么是BOM能够知道浏览器的顶级对象window能够写出页面加载事件以及注意事项能够写出两种定时器函数并说出区别能够说出JS执行机制能够使用location对象完成页面之间的跳转能够知晓navigator对象涉及的属性能够使用history提供的方法实现页面刷新 目标 TARGET 键盘事件 要点提示 常用的键盘事件 掌握程度 应用 1 1常用的键盘事件 判断用户按下哪个键 要点提示 keyCode判断用户按下哪个键 掌握程度 应用 1 2keyCode判断用户按下哪个键 触发事件 要点提示 模拟京东按键输入内容案例 掌握程度 应用 1 3模拟京东按键输入内容案例 练习 检测用户是否按下了s键 如果按下s键 就把光标定位到搜索框里面 提示 给document绑定keyup事件判断keyCode是否是s键触发文本框的焦点事件 5分钟 1 3模拟京东按键输入内容案例 案例巩固练习 放大快递单号 要点提示 模拟京东快递单号查询 上 掌握程度 应用 1 4模拟京东快递单号查询 上 练习 当我们在文本框中输入内容时 文本框上面自动显示大字号的内容 提示 获取要操作的元素 文本框 放大盒子 给文本框注册keyup事件判断value值是否为空为空则隐藏提示盒子不为空则显示提示盒子 并把value值作为提示盒子的内容 5分钟 1 4模拟京东快递单号查询 上 案例巩固练习 keyup改为keydown案例完善 要点提示 模拟京东快递单号查询 下 掌握程度 应用 2 1模拟京东快递单号查询 下 练习 失去焦点 隐藏提示盒子 获得焦点 内容不为空则显示提示盒子 提示 给文本框注册失去焦点事件隐藏提示盒子给文本框注册获得焦点事件判断文本框内容 显示提示盒子 5分钟 2 1模拟京东快递单号查询 下 案例巩固练习 浏览器对象模型 要点提示 BOM导读 掌握程度 了解 2 2BOM导读 DOM和BOM对比介绍BOM的顶级对象 要点提示 BOM概述 掌握程度 理解 2 3BOM概述 load事件DOMContentLoaded事件 要点提示 页面加载事件 掌握程度 应用 2 4页面加载事件 1 load事件和DOMContentLoaded事件有什么区别 2 4页面加载事件 课堂问答 课堂问答 resize事件window innerWidth 要点提示 调整窗口大小事件 掌握程度 应用 3 1调整窗口大小事件 炸弹定时器 要点提示 定时器之setTimeout 掌握程度 应用 3 2定时器之setTimeout 回调函数 要点提示 5秒之后自动关闭的广告 掌握程度 应用 3 3回调函数以及5秒之后自动关闭的广告 练习 5秒钟之后自动关闭广告元素 提示 获取要操作的元素 广告 开启定时器回调函数中 隐藏广告 5分钟 3 3回调函数以及5秒之后自动关闭的广告 案例巩固练习 清除诈弹定时器 要点提示 清除定时器clearTimeout 掌握程度 应用 3 4清除定时器clearTimeout 闹钟定时器 要点提示 定时器之setInterval 掌握程度 应用 3 5定时器之setInterval 上午复习 常用的键盘事件有keyup keydown keypress键盘事件中 通过事件对象的keyCode属性可以知道按下的是哪个键BOM中的顶级对象是window页面中所有内容加载完之后触发的事件是window onload页面中DOM结构加载完触发的事件是DOMContentLoaded窗口大小发生变化触发的事件是window onresize 正文 单击此处标题样式微软雅黑24号 上午复习 常用的键盘事件有keyup keydown keypress键盘事件中 通过事件对象的keyCode属性可以知道按下的是哪个键BOM中的顶级对象是window页面中所有内容加载完之后触发的事件是window onload页面中DOM结构加载完触发的事件是DOMContentLoaded窗口大小发生变化触发的事件是window onresize 正文 单击此处标题样式微软雅黑24号 倒计时 要点提示 倒计时效果 掌握程度 应用 4 1倒计时效果 练习 使用定时器 每隔1秒改变时分秒盒子中的内容 提示 获取要操作的元素 时分秒盒子 封装1个获取当前时分秒的函数开启闹钟定时器 每隔1秒调用1次函数 5分钟 4 1倒计时效果 案例巩固练习 清除闹钟定时器 要点提示 清除定时器clearInterval 掌握程度 应用 4 2清除定时器clearInterval 发送短信倒计时效果 要点提示 发送短信案例 掌握程度 应用 4 3发送短信案例 练习 点击按钮后 禁用按钮 按钮的内容有倒计时变化 倒计时结束按钮恢复 提示 初始化秒数 给按钮注册单击事件禁用按钮开启闹钟定时器 每隔1秒 判断剩余秒数是否等于0等于0 则恢复按钮和按钮内容 剩余秒数不等于0 则改变按钮内容 并秒数自减 5分钟 4 3发送短信案例 案例巩固练习 this的指向 要点提示 this指向问题 掌握程度 应用 4 4this指向问题 js执行机制 要点提示 js同步和异步 掌握程度 理解 5 1js同步和异步 同步任务和异步任务 要点提示 同步任务和异步任务执行过程 掌握程度 理解 5 2同步任务和异步任务执行过程 事件循环 要点提示 js执行机制 掌握程度 理解 5 3js执行机制 location对象URL 要点提示 location对象常见属性 掌握程度 应用 5 4location对象常见属性 5分钟之后跳转页面 要点提示 5秒钟之后跳转页面 掌握程度 应用 6 15秒钟之后跳转页面 练习 5秒钟之后 页面自动跳转 提示 定义全局变量保存剩余秒数开启定时器 每隔1秒执行判断剩余秒数秒数为0 则使用location对象跳转页面不为0 则显示倒计时内容 秒数自减 5分钟 6 15秒钟之后跳转页面 案例巩固练习 获取URL参数 要点提示 获取URL参数 掌握程度 应用 6 2获取URL参数 location对象的方法跳转页面替换地址重新加载 要点提示 location常见方法 掌握程度 应用 6 3location常见方法 根据浏览器信息展示不同页面 要点提示 navigator对象 掌握程度 了解 6 4navigator对象 前进后退 要点提示 history对象 掌握程度 应用 6 5history对象 今日复习 常用的键盘事件有keyup keydown keypress页面中所有内容加载完之后触发的事件是window onload页面中DOM结构加载完触发的事件是DOMContentLoaded使用setTimeout 开启的定时器 时间间隔一到代码只会执行1次使用setInterval 开启的定时器 时间一到代码就会执行使用clearTimeout 和clearInterval 可以清除定时器使用location对象的href属性可以获取或设置URL使用location对象的reload 方法可以重新加载页面使用history对象的go 方法可以实现页面前进或后退 正文 单击此处标题样式微软雅黑24号 今日复习 常用的键盘事件有keyup keydown keypress页面中所有内容加载完之后触发的事件是window onload页面中DOM结构加载完触发的事件是DOMContentLoaded使用setTimeout 开启的定时器 时间间隔一到代码只会执行1次使用setInterval 开启的定时器 时间一到代码就会执行使用clearTimeout 和clearInterval 可以清除定时器使用location对象的href属性可以获取或设置URL使用location对象的reload 方法可以重新加载页面使用history对象的go 方法可以实现页面前进或后退 正文 单击此处标题样式微软雅黑24号 目