8JavaScript_Window对象.ppt

WEB基础 浏览器对象简介 浏览器对象简介 window对象属性 window对象属性 window对象方法 window对象方法 飘浮广告示例 飘浮广告示例代码 时钟代码 setInterval的用法： setInterval （“调用的函数”,”定时的时间”） 例：var myTime＝ setInterval( “disptime( )”, 1000 ) ; 时钟代码 父窗口与子窗口 [window.]属性[window.]方法（参数） self.属性self.方法（参数） //当前窗口,与window含义相同 opener.属性opener.方法（参数） //open方法打开的窗口的源窗口 parent.属性parent.方法（参数） //当前窗口父窗口 top.属性top.方法（参数） //顶层窗口, 一般用来破坏框架 总结 介绍window对象常用的方法和属性。 还详细例举了open、setTimeout、 setInterval方法与适用场合。 讲解要点： 我们上网时，一般是在IE浏览器中，键入某个网址：如，然后打开google网页， 引出浏览器对象。为了让学员容易理解，不要1求过去完整而枯燥的概念定义。 1）整个浏览器窗口，称为window窗口对象。 2）窗口对象又包括上方的地址栏和下方的页面内容。地址栏称为location地址对象，表示网页的地址信息。 3）下方的页面内容代表整个网页文档，称为document文档对象，存放网页的文档信息。 4）文档对象又包含段落、图片、表单等。例如表单对象FORM 5) 总结：从这张图可以看出，浏览器对象是分层次的. 所以表单中的文本框完整的名称应该是： window.document.myform.text1 ，其中window可以省略，所以我们前面写为： document.myform.text1 就是这样来的。 描述层次结构的思想： 1）window窗口对象是代表整个浏览器窗口，是最顶层的根。 2）往下包括history历史对象（存放历史信息，可以前进后退的功能）、document文档对象、localtion地址对象。 3）网页文档往下又包含……. 让学员理解层次结构的思想。 讲解要点： 1）强调每个对象和我们前面学习的字符串对象、日期对象等一样， 只要是对象，都包含属性和方法，方法也就是该对象的一系列函数。 讲解步骤： 1）先演示效果：参见TG9-Source文件夹中的” setTimeout“用例 2）提问：如何实现随机漂浮的广告呢。 3）引导： 随机函数random b）漂浮在网页内容的上方（上一层），必须使用层DIV，z－index＝1 c）定时器函数settimeout( )反复跳转图片的位置。 4）介绍实现步骤： a）使用DreamWeaver加入层，z－index＝1，位于网页内容的上方 b) 层中插入一幅图片 c）再次回顾一下： settimeout（）的用法。 * JavaScript－08 window对象 目标 window对象 window对象属性及方法 对话框 状态栏 窗口操作 超时与时间间隔 框架操作 Window 窗口对象 location 地址对象 document 文档对象 FORM 表单对象 浏览器对象的分层结构 window.document.myform.text1 浏览器对象的分层结构 window对象 window对象介绍 简而言之，window对象是浏览器窗口对文档提供一个显示的容器，是每一个加载文档的父对象。window对象还是所有其他对象的顶级对象，通过对window对象的子对象进行操作，可以实现更多的动态效果。 window对象的使用方法 window对象代表当前打开的浏览器窗口，其作为顶级对象。window对象的方法和属性的调用和其它对象一样，区别是window对象不需要创建即可直使用。需要注意的是window对象名称是小写。 常用属性 设置或检索窗口底部的状态栏中的消息。 status 设置或检索窗口或框架的名称。 name 包含有关当前 URL 的信息。 location 包含有关客户端的屏幕和显示性能的信息。 screen 包含有关客户访问过的URL的信息。 history 表示给定浏览器窗口中的 HTML 文档。 document 说明 名称 常用属性 说明 名称 窗口上边界的Y坐标 screenY 窗口左边界的X坐标 screenX 窗口内容区的水平尺寸，px innerWidth 窗口内容区的垂直尺寸，px innerHeight 网页y-position的位置 pag