O 浏览器对象与特效培训讲义.pptVIP

* * 总结 浏览器对象是一个分层次的结构，window是顶层的根对象 打开窗口使用window对象的open( )方法 设置定时器，使用window对象的setTimeout( )方法 location对象的back( )和forward( )方法等同于前进、后退按钮 Javascript特效 * * * * * 讲解要点： 我们上网时，一般是在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）前面学习过的alert和prompt以及马上要讲的confird都是window对象的方法 2）重点讲解突出标注的三个新方法： confirm( ) 、open( ) 、close( )方法。 3）confirm弹出确认对话框，点击确定返回true ，取消返回false 4) open ( )和close( )用于打开一个新窗口或者关闭窗口，下面举例讲解，点击进入下一页幻灯片。 * 讲解步骤： 1）先演示效果：参见TG9-Source文件夹中的” open方法 1“用例 2）提问：我们应该使用哪些方法？引导学员的思路。 3）讲解代码。 4）告诉学员：除了这种方式外，我们还见过一些广告方式的窗口，进入下一页幻灯片。 * 讲解步骤： 1）先演示效果：参见TG9-Source文件夹中的” open方法 2“用例 2）提问：打开的窗口外观与一般窗口有哪些不一样，？ 引导学员回答：没有菜单栏、地址栏、状态栏、滚动条等。 3）介绍open方法的具体用法，重点是有关窗口特征参数的含义。 3）讲解代码。 4）告诉学员：除了这种方式外，我们还见过一些广告方式的窗口，进入下一页幻灯片。 5）open(“url”,”窗口名”,”窗口特征”)，其中窗口名一般省略，设置为空 ” “ * * * 讲解步骤： 1）先演示效果：参见TG9-Source文件夹中的” setTimeout“用例 2）提问：如何实现随机漂浮的广告呢。 3）引导： 随机函数random b）漂浮在网页内容的上方（上一层），必须使用层DIV，z－index＝1 c）定时器函数settimeout( )反复跳转图片的位置。 4）介绍实现步骤： a）使用DreamWeaver加入层，z－index＝1，位于网页内容的上方 b) 层中插入一幅图片 c）再次回顾一下： settimeout（）的用法。 * 讲解要点： 1.定义函数move 2.不象表单元素，一般依靠名称属性name获取表单元素，层HTML元素一般依靠ID名称获得层对象，即调用document文档对象的getElementById( ) 方法， 如本例：document.getElementById(Layer1) 3.回顾left和top的含义：指定层的起点位置坐标。 4.讲解setTimeout（）反复循环调用函数Move（），从而实现随机漂浮的效果 * 强调bgColor背景色属性，后面将讲解相关例子。 * * 讲解步骤： 1）先演示效果：参见TG9-Source文件夹中的” document对象“用例 2）提问：如何实现？。 3）引导：a) 利用document对象的背景色属性 b)鼠标悬停事件onMouseOver事件 4）讲解代码 * 讲解要点： 将history历史对象和IE浏览器中的前进后退按钮联系起来讲解。 back( )方法： 相当于后退按钮 forward（）方法：相当于前进按钮