J4DOM编程-window对象.ppt

第4讲 DOM编程 window对象 回顾 请简述一下JavaScript脚本执行的原理在JavaScript中有哪些控制语句及其含义 如何创建一个有参函数并实现函数调用 本讲问题 解释名词 根节点 子节点 和 相邻节点 window对象常用的属性有哪些 请解释setTimeout 方法的功能 本讲任务 演示示例1 广告窗口特效 演示示例2 时钟显示特效 制作广告窗口特效 制作时钟显示特效 本讲目标 会运用DOM模型查找某个HTML元素会使用window对象的open 方法制作不同风格样式的广告窗口会使用window对象的setTimeout 方法和Date对象制作日期显示效果 HTML文档的树状结构 根节点 根节点的子节点 有什么办法对HTML中的内容进行动态改变呢 演示示例3 动态改变HTML中的内容 使用DocumentObjectModel 相邻节点 什么是DOM DOM DocumentObjectModel 它是W3C国际组织的一套Web标准 它定义了访问HTML文档对象的一套属性 方法和事件 functionchangeLink document getElementById myAnchor innerHTML 搜狐 document getElementById myAnchor href 淘宝 修改内容 修改属性 HTML文档的每个节点都是对象 类似WinForm中的控件 都具备属性 方法和事件 定位链接元素 对象 DOM对象模型 1 window窗口对象 location地址对象 FORM表单对象 浏览器对象的分层结构 Text表单元素 document文档对象 DOM对象模型 2 浏览器对象的分层结构 Window对象常用的属性 常用的属性 常用的方法onLoad事件 在窗口或框架完成文档加载时触发 window对象常用的方法和事件 如何使用window对象 1 functionopenwindow window status 系统当前状态 您正在注册用户 if window screen width 1024 示例完整代码 在窗口状态栏中设置文本 设置窗口的高度 使用open方法打开新窗口 弹出警告对话框 弹出确认对话框 关闭当前窗口 添加单击事件 window是最顶层的根 所以在编写时可以省略例如 window open google htm 可简写为 open google htm 同理close 方法也是如此 如何使用window对象 2 1 open 打开窗口的url 窗口名 窗口特征 窗口的特征如下 可以任意组合 height 窗口高度width 窗口宽度top 窗口距离屏幕上方的像素值left 窗口距离屏幕左侧的像素值toolbar 是否显示工具栏 yes为显示menubar scrollbars 表示菜单栏和滚动栏resizable 是否允许改变窗口大小 yes或1为允许location 是否显示地址栏 yes或1为允许status 是否显示状态栏内的信息 yes或1为允许 我们需要预先制作好注册页面 假设为register html 打开注册窗口的语句如下open register html 注册窗口 toolbar 0 location 0 status 0 menubar 0 width 700 height 550 scrollbars 1 通过open方法打开注册页面之后的效果 如何使用window对象 2 2 functionopenwindow window status 系统当前状态 您正在注册用户 if window screen width 1024 示例完整代码 使用Open方法打开注册新窗口 添加单击事件 如何使用window对象 3 functionopenwindow window status 系统当前状态 您正在注册用户 if window screen width 1024 用户注册退出 示例完整代码 使用超链接调用方法来打开注册新窗口 如何使用window对象 4 functionopenwindow open adv htm 广告窗口 toolbar 0 scrollbars 0 location 0 status 0 menubar 0 resizable 0 width 700 height 250 示例完整代码 窗口完成文档加载时触发打开广告窗口 如何使用window对象 5 functionopenwindow window status 系统当前状态 您正在注册用户 if window screen width 1024 H3 用户注册退出 示例完整代码 打开模式窗口 被打开窗口保持输入焦点 使用超链接调用方法来打开模式窗口 小结1 编写下图所示 具有自动打开广告窗口和在浏览器状态栏中显示 欢迎你 信息的页面 广告窗口 状态栏信息 练习答案 练习代码 Date对象做时钟显示 1 如何实现如演示示例3中所示的时钟效果 演示示例3 时钟效果演示 由于涉及到时间的显示问题 所以要用到日期对象Date 还有时间在不停地走 因此需要不断地调用一个函数 所以要用到Windows的定时器setTimeout 方法 Date对象做时钟显示 2 Date对象存储的日期为自1970年1月1日00 00 00以来的毫秒数 var日期对象 newDate 年 月 日等参数 例如 varmydate newDate July29 2007 10 30 00 如果没有参数 表示当前日期和时间例如 vartoday newDate Date对象做时钟显示 3 Date方法的分组 Date对象做时钟显示 4 用作Date方法的参数的整数范围 Date对象做时钟显示 5 1 functiondisptime varnow newDate varhour now getHours if hour 0 查看完整代码 获得当前日期和时间 获得小时 即当前是几点 月份数字0 11 注意 1 Date对象做时钟显示 5 2 上一页PPT示例中时钟不能动态改变 怎么办 由于时间在不停地走 所以应该每隔1秒调用显示时间的方法 如何解决 使用setTimeout 方法每隔1秒调用显示时间的方法 setTimeout的用法 setTimeout 调用的函数 指定的时间间隔 例 varmyTime setTimeout disptime 1000 每隔1000毫秒执行函数disptime 一次 Date对象做时钟显示 6 functiondisptime vartime newDate 获得当前时间varhour time getHours 获得小时 分钟 秒varminute time getMinutes varsecond time getSeconds document myform myclock value hour minute second varmyTime setTimeout disptime 1000 H2 当前时间 查看完整代码 设置文本框的内容为当前时间 设置定时器每隔1秒 1000毫秒 调用函数disptime 执行 小结2 编写如下图所示 具有在网页中指定位置显示动态时钟效果的页面 练习答案 练习代码 自动动态变化的时钟 history和location对象 1 history对象方法 back 方法相当于后退按钮forward 方法相当于前进按钮go 1 代表前进1页 等价于forward 方法go 1 代表后退1页 等价于back 方法 history和location对象 2 location对象属性方法 history和location对象 3 返回前进刷新首页跳转到其他版块新闻贴图网上谈兵IT茶馆教育大家谈 查看完整代码 添加选项改变事件 获取被选中的下拉菜单项value的值 常见错误 如何设置下拉菜单中的默认选中的第一项 如何使页面内容居中 插入一行一列的表格 然后居中 高度 宽度都为100 下拉菜单是否选中的办法 在option选项中添加selected属性即可 网上谈兵IT茶馆新闻贴图教育大家谈 总结 请简述HTML文档的树状结构 window对象有哪些常用的方法及其含义 请列举Date对象有哪些方法 请解释setTimeout方法适用场合 请列举location和history对象的常用方法