day04_WebAPIs.ppt

Web APIs,删除节点使用 父节点对象.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.2 keyCode判断用户按下哪个键,触发事件,要点提示,模拟京东按键输入内容案例,掌握程度：应用,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.2 BOM导读,DOM和BOM对比介绍BOM的顶级对象,要点提示,BOM概述,掌握程度：理解,2.3 BOM概述,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,发送短信倒计时效果,要点提示,发送短信案例,掌握程度：应用,