javascript对象及系统对象课件.ppt

1、第9章 javascript对象与系统对象学习目标n理解系统对象的分层结构n掌握window对象的几个方法浏览器对象简介 2-1 http:/Window 窗口对象location地址对象document文档对象FORM表单对象浏览器对象的分层结构window.document.myform.text1 Window 窗口对象是所有页面内窗口对象是所有页面内容的根对象，在编程时常常省略容的根对象，在编程时常常省略浏览器对象简介 2-2q浏览器对象的分层结构浏览器对象的分层结构location 对象对应对象对应IE浏览器中的地址栏；浏览器中的地址栏；history 对应对应IE浏览器中的前进浏览

2、器中的前进/后退按钮后退按钮9.3 浏览器窗口对象window nwindow是JavaScript的最顶层对象，代表了客户端的一个浏览器窗口或一个框架，一个独立的浏览器窗口或一个框架就是一个window对象。 n对象名window在引用时可以省略，例如我们使用过的alert()方法是由window对象提供的，写全了应该是window.alert()window对象的方法创建弹出式窗口创建弹出式窗口createPopup()n弹出式pop-up窗口也是一个wondow对象，通过window对象的document子对象及其body对象可设置窗口中显示的内容，但弹出式窗口仅是一个没有边框及任何界面

3、元素不可移动的空白区域，类似于漂浮在页面上的面板或画布，鼠标单击pop-up窗口外的任意位置即可关闭该窗口。 弹出式窗口的应用说明n必须放在函数中使用，使用步骤如下：n使用createPopup()方法创建窗口对象n窗口中子对象document.body的获取n必要时，使用子对象的style属性中的各种样式设置属性设置弹出窗口的外观n使用子对象的innerHTML属性设置弹出窗口中要显示的文本信息n使用窗口对象的show()方法设置窗口的显示位置和大小，show()方法的参数有5个，分别是：x坐标,y坐标, 宽度, 高度, 窗口位置所参照的页面中对象弹出式窗口应用举例n课本例题h9-6.htm

4、l，定义函数内容如下：n创建窗口，使用变量p表示n获取窗口中的document.body子对象，使用变量pbody表示n设置窗口的背景色style.backgroundColor为红色n设置窗口的边框style.border为黑色实线1像素n设置窗口中的显示内容为这是一个pop-up窗口！在pop-up外面点击即可关闭！n设置窗口在浏览器窗口中(50,80)坐标处显示，大小为200*50n当点击窗口中的按钮时调用上面函数n设置窗口显示的位置：以按钮对象为参照物，坐标值(50,80)处复习与提高n请大家创建一个弹出式窗口，具体要求如下：n设置窗口背景色为浅灰色n设置窗口中显示的内容为“HTML用

5、于在页面中插入各种元素”n设置窗口的显示位置为浏览器窗口中横坐标30，纵坐标20，显示大小为宽100，高30n在页面中添加一个段落“网页制作中要使用的基本知识包含三个模块，分别是html、css和javascript”，当光标悬停在”html”上方时，显示弹出窗口n上面窗口的显示位置有什么问题？如何解决授课任务1. window对象中的setInterval()方法的功能及应用方法2. window对象中的setTimeout()方法的功能及应用方法3.图片轮换特效的设计过程实现3循环定时器循环定时器n循环定时器方法格式：n id=setInterval( code, millisec) ns

6、etInterval()方法用于创建一个循环定时器，并按参数millisec指定的毫秒数为周期，循环调用执行code指定的代码或函数，直到浏览器关闭或调用clearInterval()方法结束。 n结束循环定时器的方法格式： clearInterval( id )循环定时器举例n创建页面文件time.html，在其中创建id为time的文本框，宽度为40个字符n定义函数time1()，获取当前日期时间，并在文本框中显示该日期时间，使用循环定时器方法设置每间隔1000毫秒调用函数一次n观察文本框中时间秒数的变化n在文本框右侧增加按钮“结束定时器”n定义函数clear1()，使用clearInte

7、rval()结束上面定时器，点击按钮时调用函数clear1()4延时定时器延时定时器n延时定时器方法格式：n id=setTimeout ( code, millisec) nsetTimeout()方法用于创建一个延时定时器，仅在参数millisec指定的毫秒数之后调用执行一次code指定的代码，并返回所创建定时器的ID值作为取消延时定时方法的参数。 n结束循环定时器的方法格式： clearTimeout ( id )n举例n将上例中的setInterval()方法修改为setTimeout()方法，观察程序的执行结果；如何修改能让时间自动变化？定时器应用小实例-图片轮换n图片轮换的关键点：

8、n如何确定图像区域中的新图像n多长时间轮换一幅图n所有图片命名规则：共同名字+下标n设图像区域id为img1，则在脚本中使用document. getElementById(img1).src即可设置新图片。n更换图片的规律：n若当前正在显示的是第n幅图，则接下来要显示的一定是第n+1幅图，若n+1值超出了最大下标，则从第一幅图重新开始；n每次函数调用时都要使用上次图片的下标值，所以表示下标的变量必须设置为什么变量？页面中的元素n在页面中设置一个盒子divimg，盒子居中，宽度和高度根据要显示的图片确定n在盒子divimg中设置一个图片元素，要求如下：n元素设置name和id为img1n显示的

9、图片文件为给定图片中的第一幅定义函数imgswitch()n定义全局变量i,并设置初值为第一幅图的序号值1n函数定义：n全局变量i增值n判断i的值是否超过最后一幅图的序号值，若超过则将i值变换为1n设置序号为i的图片作为图片区域中的内容n使用循环定时器设置每间隔1秒钟调用函数一次n思考：如何使用延时定时器完成每间隔1秒钟调用函数一次？图片轮换中滤镜的应用n网页中经常使用css中的滤镜设置一些特殊效果，例如在图片或网页轮换中可以设置每幅图或每个页面切换进来时采用的滤镜效果，如矩形从大到小，矩形从小到大，圆形大小等n滤镜filter:revealTrans：n两个主要参数：duration设置效果

10、的持续时间(秒)；transition设置效果样式，取值范围023；n在图片区域中设置该滤镜样式n在轮换函数中应用滤镜（使用apply()方法）和播放滤镜（使用play()方法）。n该滤镜主要支持有IE内核的浏览器，所以应用和播放之前先使用if(document.all)条件判断浏览器是否是IE内核的滤镜应用页面及函数修改n页面图像区域增加样式filter:revealTrans(duration=2,transition=1)n函数中，在更换图片之后判断浏览器是否是IE内核的，若是，则应用如下代码完成滤镜的应用和播放n图像区域. filters.revealTrans.apply();n图像

11、区域.filters.revealTrans.play();复习回顾n图片轮换中在脚本代码中要更换的是哪个元素的什么属性的取值？n本页面中要换的图片文件由文件名中的哪一部分决定？如何得到这一部分的取值？n图片切换的滤镜特效需要在样式中使用哪个样式属性定义？需要定义的两个参数是什么，作用如何？取值范围如何？盒子的定位n没有设置定位的盒子都按照普通流方式出现在浏览器窗口中，所谓普通流就是浏览器将层按照盒子在代码中的顺序和嵌套关系显示出来n定位的应用属性取值及描述 position position绝对定位：absolute；相对定位：relativetop/bottomtop/bottom必须配合

12、position使用，对不同定位方式偏移量的取值和含义有所不同。 偏移量取值可以是相像素和百分比形式left/rightleft/right z-index z-index决定层的先后顺序及覆盖关系(值越大越靠前)相对定位（Relative-1.html）n先设计3个普通流布局的盒子，id选择符分别是div1,div2,div3盒子大小400 x100，边距填充都是0，背景色随意设计n修改div2样式， 设置为相对定位，观察效果#div2 position:relative; top:20px; left:50px; div1div3div2左侧空出左侧空出50px50px上边空出上边空出20

13、px20px相对定位续n将第二个盒子设置为向左浮动，继续观察效果n去掉第二个盒子的向左浮动，再将三个盒子都设置居中，继续观察页面效果n将第二个盒子的定位坐标设置为0、0，再观察页面效果相对定位应用及原理n总结n使用相对定位的元素，无论是否移动，都将占据原来的位置。n相对定位的元素不会影响其它元素。n计算偏移量top、left的参照物是元素移动前所在位置。n设置了相对定位的盒子，可以设置居中，也可以设置浮动绝对定位应用（Absolute-1.html）n先设计3个普通流布局的盒子，盒子大小400 x100，边距填充都是0，背景色随意设计n修改div2样式，设置为绝对定位，观察效果#div2 po

14、sition:absolute; top:20px; left:50px; div1div3div2距浏览器窗口左距浏览器窗口左侧空出侧空出50px50px距浏览器窗口上距浏览器窗口上边空出边空出20px20px绝对定位续n设置div2居中，能否实现？n修改div3盒子的宽度为500px，高度为200px；将绝对定位的div2盒子移动到未设置定位的div3盒子中，观察效果n继续修改div3盒子的定位方式为绝对定位，top为60px，left为100px，观察效果n继续修改div3盒子定位方式为相对定位，top为20，left为100，观察效果n将div3设置为居中，观察效果n去掉div3的居中

15、，设置left为20，向左浮动，观察效果绝对定位的原理n绝对定位的元素会脱离文档流，不再占据位置。n元素被绝对定位后，后面的元素就会视它不存在，从而占据其位置。n上面的示例中，因为div2所在的容器是浏览器，所以 top:20px;是距离浏览器窗口的上端为20px； left:50px;是距离浏览器窗口的左端为50px。 div1绝对定位的元素包含在容器中-1div3div2距浏览器左边框距浏览器左边框50px50px距浏览器上边框距浏览器上边框20px20pxn修改absolute-1.html文件n修改div3盒子的宽度为500px，高度为200pxn将绝对定位的div2盒子移动到未设置定

16、位的div3盒子中，观察效果div3绝对定位的元素包含在容器中-2div1div2距包含框左侧距包含框左侧50px50px距包含框上边距包含框上边20px20pxn修改absolute-1.html文件n修改div3盒子定位方式为相对定位，top和left为0n观察效果div3绝对定位的元素包含在容器中-3div1div2距包含框左侧距包含框左侧50px50px距包含框上边距包含框上边20px20pxn修改absolute-1.html文件n修改div3盒子的定位方式为绝对定位，top为60px，left为100pxn观察效果绝对定位的原理说明n计算绝对定位元素的偏移量，有以下三种情况：n当绝

17、对定位元素没有包含的元素时，参照物是浏览器窗口；n当绝对定位元素包含在普通流的父容器时，参照物是浏览器窗口；n当绝对定位元素包含在绝对定位或相对定位的父容器时，参照物是父容器。n当页面中需要存在绝对定位的元素时，往往不是将其直接在浏览器窗口中绝对定位，这种做法会因为窗口大小的变化而出现问题。最常用的做法是将绝对定位的元素包含在相对定位的元素中，相对定位的父元素坐标值设置为0、0即可。根据用户选择的数字序号显示图片n打开图片特效1/image.html文件代码n设置divimg居中，观察数字序号的位置是否发生变化n去掉divimg居中，设置向右浮动，观察数字序号位置是否发生变化n说明divimg

18、使用了怎样的定位方式？里面的数字序号又使用了怎样的定位方式？根据用户选择的数字序号显示图片n样式文件中需要做的修改：n将divimg层定义为相对定位，默认坐标0n增加class类选择符.num的定义，样式要求：n宽25px,高25px,边距0,填充0,背景色#333,文本颜色#fff,字号10pt,加粗,文本行高25px,居中,鼠标手状,绝对定位,纵坐标160pxn增加id选择符#num1,#num2,#num3,#num4，设置横坐标分别是10px,40px,70px,100pxnimage.html文件中需要做的修改n在层divimg中插入四个子层，id分别是num1,num2,num3,

19、num4,同时引用class类选择符num脚本代码要做的修改n修改函数imageswitch()的代码n在设置图片之后设置当前显示图片的序号层背景色为#f33,其它图片序号层背景色为#333n定义带参数的函数cleartm(num)，函数体功能：n将参数num的值设置为全局变量index的值，同时设置为当前要显示的图片n通过循环设置当前显示图片的序号层背景色为#f33,其它图片序号层背景色为#333n通过clearTimeout()方法终止延时定时器设置的函数imgchange()的调用过程n修改image.htmln当鼠标移动到图片序号层上时调用函数cleartm(),同时传递参数n当鼠标移

20、走时，调用函数imageswitch()，继续进行图片轮换显示漂浮广告的制作n制作漂浮广告的几个要点：n漂浮广告总是使用盒子设置的，盒子的初始位置及高度和宽度根据页面具体要求设置，漂浮是指盒子在页面中的移动n盒子的移动是通过改变其左上角顶点坐标值进行的，横坐标和纵坐标都可以改变n盒子的移动方向可通过两个方向变量控制，两个变量分别控制水平和垂直方向的移动，如果向右或向下移动，则相应的横坐标和纵坐标值增大，需要两个变量为+1，向左或向上移动，两个变量为-1n两个方向变量值的更改是当层的边框移动到窗口可见范围之外时n程序开始运行时必须获取当前窗口的宽度和高度n当页面打开时广告就出现即函数是在页面的o

21、nload事件发生时执行的。此处盒子需要使用哪种定位形式？为什么？漂浮广告函数定义n定义全局变量gox=1;goy=1;设置移动的方向n函数定义n使用document.documentElement.clientWidth/clientHeight分别获取窗口的宽度和高度;n获取盒子元素后，使用元素.offsetWidth/offsetHeight分别获取盒子的左上角顶点坐标值n在条件判断之后设置盒子的移动方向n使用元素.style.top/left重新设置盒子的左上角顶点坐标值，要有单位pxn设置每间隔多长时间调用函数一次n使用window.onload完成函数的初次调用获取页面或窗口高度和

22、宽度说明document.documentElement.clientWidth：获取窗口宽度document.documentElement.clientHeight：获取窗口高度document.body.clientWidth：获取的宽度值是浏览器窗口宽度-页面默认的左右边距值-页面左右边框宽度，若页面边距和边框设置为0，同document.body.clientHeight：获取页面内容的高度document.documentElement.offsetWidth同，都是针对整个窗口的document.documentElement.offsetHeight同若页面内容没有边框，则do

23、cument.body.offsetWidth同clientWidthdocument.body.offsetHeight同clientHeight若页面内容有边框，则document.body.offsetWidth-左右边框宽=clientWidthdocument.body.offsetHeight-上下边框宽=clientHeight总结ndocumentElement下的offsetWidth和clientWidth结果中包含页面的边距和边框所占的宽度值；而body下的offsetWidth只包含页面边框所占的宽度值，不包含页面边距所占的宽度值；body下的clientWidth不包含页面边距和边框所占宽度值document.body.scrollWidth，获取的是滚动条可滚动的区域的宽度document.body.scrollHeight，获取的是滚动条可滚动的区域的高度将sysy.html页面窗口缩小后观察漂浮广告的效果注意：documentElement.scrollWidth/scrollHeight容易失去控制，不建议使用，演示效果进行说明