《HTML教程》-第8章 常用对象简介_第1页
《HTML教程》-第8章 常用对象简介_第2页
《HTML教程》-第8章 常用对象简介_第3页
《HTML教程》-第8章 常用对象简介_第4页
《HTML教程》-第8章 常用对象简介_第5页
已阅读5页，还剩42页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

BOM（BrowserObjectModel）浏览器对象模型BOM浏览器对象模型是JavaScript操作浏览器的接口，其核心是window对象。在JavaScript中window对象有着双重角色，其一是作为JavaScript的全局对象，无论是全局变量还是全局函数都存在于window对象中。其二是作为访问浏览器的接口对象。在Ajax编程中有时会用到操作浏览器的应用，这些应用绝大部分已经被浏览器实现，但有时需要由程序来实现时，就会用到这些知识，比如检测浏览器是否允许Cookie，程序打开指定地址的页面等，所以本章对BOM对象模型进行简单简介。BOM对象模型以window对象为核心，主要包括：window对象、Screen对象、Location对象、History对象、Navigator对象和Document对象。除BOM对象之外，还有Date对象、Math对象、String对象、Array对象（见5.4节）、RegExp、Map和Set等对象。8.1window对象Window对象是JavaScript层级中的顶层对象，代表一个浏览器窗口或一个框架，会在<body>或<frameset>每次出现时被自动创建。它还包括许多与浏览器操作有关的对象，作为JavaScript的全局容器，所有全局对象、函数和变量都会成为window对象的成员，而且window对象还内置了许多属性和方法。8.1.1获得窗口尺寸有两个属性可用于获得窗口的内部尺寸：◆innerHeight——浏览器窗口的内部高度，以像素为单位。◆innerWidth——浏览器窗口的内部宽度，以像素为单位。这里需要注意的是，浏览器窗口（也称为视口），是不包括工具栏和滚动条的。还要注意的是，对于IE浏览器8及以下版本的浏览器，不能使用这两个属性获得浏览器窗口的大小，只能使用下面的属性：◆document.documentElement.clientHeight◆

document.documentElement.clientWidth或者

◆

document.body.clientHeight

◆

document.body.clientWidth其中，document为window对象的一个属性，它指向Document对象。如果要获得浏览器窗口的内部尺寸，比较实用的方法是：varwidth=window.innerWidth||document.documentElement.clientWidth||document.body.clientWidth;

varheight=window.innerHeight||document.documentElement.clientHeight||document.body.clientHeight;8.1.2窗口操作

窗口操作的方法比较多，这里只介绍打开、关闭、移动和调整窗口大小四个方法。其他方法如果用到可以查阅相关书籍或网站。1、打开窗口

Window对象提供了open()方法用于打开窗口，或者查找已经存在的窗口。Open()函数原型如下：open(URL,name,features,replace)注：window对象是默认的全局对象，凡是window本身的属性和方法都可以直接访问，而无需指明window对象。但由于document对象也有一个open()方法，所以使用open()方法时，为了避免混淆要使用window.open()。参数说明：◆URL——可选的字符串参数，指定要在新窗口中显示的文档的URL地址。如果省略则打开一个空窗口。◆name——可选的字符串参数，指定打开窗口的名称。若该名称已经存在，则返回已存在窗口的引用，而不是新打开一个窗口。而且该名称可用作标记<a>和<form>的属性target的值。◆features——可选的字符串参数，指定打开的窗口要显示的特征。如果省略则显示所有标准的特征。如果窗口不是新打开的窗口，而是一个已经存在的窗口，则该参数被忽略。所有窗口特征如表8-1所示。◆replace——可选的布尔型参数，指定加载到窗口的URL是作为窗口的浏览历史的新记录，还是替换浏览器历史的当前条目。true表示替换，false表示不替换。实例该实例通过新打开的窗口显示浏览器窗口的内部宽度和高度。要实现这一功能，只需要使用window对象的open()函数打开一个窗口，在窗口中显示一个可以获取当前窗口内部尺寸的页面却可，代码如清单8-1所示。首先要编写一个在窗口中打开的页面，这里称之为getWindowSize.html，清单8-1打开新窗口并显示窗口的内部尺寸<script> window.open('getWindowSize.html','mywindow','width=800,height=500');</script>调用open()方法，指定了窗口要打开的页面地址getWindowSize.html，和窗口名称mywindow，并指定了新打开窗口的宽度和高度width=800,height=500。这里需要注意的是open()函数的features参数的格式，是以逗号分隔的“键-值”对。下面就是要编写getWindowSize.html用于显示窗口的内部尺寸。其完整代码如清单8-2所示。首先声明了获取窗口内部尺寸的getViewSize()函数，它的内容比较简单。选使用innerWidth和innerHeight属性或IE的属性获得窗口的尺寸（见8.1.1节），然后查找文档中id为con的div，并把检测到的宽度和高度显示在div中。window.onload=function(){getViewSize();};的功能是在网页加载完成时调用刚才编写的getViewSize()函数，以显示检测结果。window.onresize=function(){location.reload();};的作用是在窗口大小发生改变时，重新进行检测。resize事件在窗口尺寸发生改变时触发，这里调用getViewSize()对窗口的当前大小进行重新检测，以看到窗口的实时大小。2、改变窗口尺寸resizeBy()方法按照指定的像素调整窗口的大小。resizeTo()把窗口的大小调整到指定的宽度和高度。方法原型如下：resizeBy(width,height)参数说明：◆width——必选参数。要使窗口宽度增加的像素值。正数放大窗口，负数减小窗口。◆height——可选参数。要使窗口高度增加的像素值。正数放大窗口，负数减小窗口。resizeTo(width,height)参数说明：◆width——必需参数。要调整到的窗口的宽度，以像素为单位。◆height——可选参数。要调整到的窗口的高度，以像素计单位。这两个方法较为简单，其示例在后面给出。3、与用户交互

这一部分内容比较重要，是Web应用与用户交互的部分，可以警告用户、收集用记信息等。在任何Web应用前端开发中是必不可少的组成部分，主要包括alert()、confirm()和prompt()三个方法。表8-2与用户交互的window方法方法原型说明alert()alert(message)功能：弹出一个提示窗。message：字符串，为提示窗显示的内容。confirm()confirm(message)功能：弹出带有“确定”和“取消”按钮的提示窗。按“确定”按钮时返回true，否则返回false。message：字符串，为提示窗显示的内容。prompt()prompt(text,defaultText)功能：弹出带有提示消息、输入文本框和“确定”按钮的提示窗。返回用户输入的内容。text：要显示的提示消息，字符串，可以为空。defaultText：默认的输入文本，字符串，可以为空。下面通过一个例子演示上面的窗口操作方法，示例代码如清单8-3所示。这里只列出了JavaScript代码，HTML代码没有列出，请读者参数随书源码Listing8-2.html。8.1.3定时操作这也是window对象提供的非常重要的操作，在实际工作中用的比较多。比如网页计时器，Ajax中的信息提示框等。这里涉及以下四个方法：setInterval()、setTimeout()、clearInterval()和clearTimeout()，方法说明如表8-3所示。表8-3window对象定时操作的方法方法原型说明setInterval()setInterval(code,millisec)功能：按照指定的周期（以毫秒计）来调用函数或计算表达式。参数：code：要执行的代码或表达式，必选参数。millisec：执行的时间间隔，以毫秒计。setTimeout()setTimeout(code,millisec)功能：在指定的毫秒数后调用函数或计算表达式。参数：code：要执行的函数或表达式。millisec：指定要等待的毫秒数。clearInterval()clearInterval(id)功能：取消由setInterval()方法启动的定时器。参数：id为setInterval()方法启动的定时器ID。clearTimeout()clearTimeout(id)功能：取消由setTimeout()方法设置的timeout。参数：id为setTimeout()启动的timeout的ID。看起来有四个方法，其实只有两个。这是两对方法：setInterval()和clearInterval()是一对方法，用于启动和取消定时器。setTimeout()和clearTimeout()是一对方法，用于启动和取消timeout。下面通过两个例子说明这两对方法的用法。实例一——网页电子时钟在网页中显示一个电子时钟，并且可以随时停止和启动这一时钟。运行效果如图8-1所示。左图为初始状态，右图为计时状态。图8-1电子时钟要完成电子时钟功能，首先要取得系统的当前时间。JavaScript中Date对象代表系统的当前时间，获得当前时间后，取得当前时间中的时、分和秒，构造成“时：分：秒”的格式显示在网页中即可，所需要的代码如下：functiontimer(){ //获得系统的当前时间 vart=newDate(); //获取当前时间的时分钞 varh=t.getHours(); varm=t.getMinutes(); vars=t.getSeconds();//格式化时分秒 h=format(h); m=format(m); s=format(s); //构造"时：分：秒"格式并显示在容器中 vartime=h+":"+m+":"+s; document.getElementById("timer").innerHTML=time;}由于当前时间中的时分秒可能返回小于10的数，为了统一显示为两位数字，所以需要对时分秒进行格式化。要做的工作是对于小于10的数，前面添加字符0，构造成以“0”开头的字符串，代码如下：functionformat(n){ if(n<10){ n='0'+n;} returnn;}有了上面两个方法还是无法实现电子时钟，因为timer()方法执行一次就退出了，不能连续显示当前的时间。解决办法就是利用setInterval()函数，每隔1秒调用一次timer()函数，就可以实现连续显示时间的电子时钟了。代码如下：functionstart(){ timer_id=setInterval(timer,1000);}这里的setInterval()函数有一个返回值timer_id，它就是当前定时器（注意不是我们实现的电子时钟）的ID，clearInterval()函数要用它终止这个计时器。所以，停止时钟的代码如下：functionstop(){ clearInterval(timer_id);}以上是自定义电子时钟的全部JavaScript代码。完整的代码如清单8-4所示，对应的源代码为Listing8-3.html。实例二——自定义消息提示框通常的做法是：在一个div（或者其他元素中）中显示操作结果，并在一定时间后自动消失。从出现到消失本身有一定的动画效果，容易吸引用户的注意。下面我们来制作一个这样的消息提示框。注意：使用这个消息提示框有一个重要前提，那就是在当前网页中必须存在指定的容器元素（如div），而且该元素在网页初始化时必须是隐藏的。制作这样一个消息提示框需要知道两个要素：

（1）要显示的消息msg；

（2）显示消息的容器obj。要把消息msg显示在容器中可以使用元素的innerHTML属性，代码如下：obj.innerHTML=msg;把消息显示在容器中之后就是要设置容器的样式，使其醒目并尽量美观。这里我们把它做成绿色边框、黄色背景和红色的字体，并使文字左右居中，上下居中，需要的代码如下，并把每条CSS语句加以注释：varcssText="padding-top:5px;" +"padding-bottom:5px;"//设置上下padding相等使其垂直居中 +"text-align:center;"//文本水平居中 +"background:yellow;"//设置黄色背景 +"color:red;"//设置红色字体 +"border:1pxsolidgreen;";//设置绿色边框然后通过style的cssText属性将上面定义的CSS样式应用到指定的容器元素，如这里的obj，代码如下：obj.style.cssText=cssText;这里大家不要引起歧义，等号右边的cssText是自定的变量，存放定义的CSS样式，而等号左边的cssText为style属性的一个属性，二者意义不同。接下来就是要把原本隐藏的容器obj显示出来，这里使用将style的display属性设置为block实现，代码如下：obj.style.setProperty("display","block");setProperty()函数的用法见6.5节。接下来是我们的重点，就是利用setTimeout()方法在指定的时间内使消息容器消失（不再显示）。隐藏元素的方法是使display属性

人人文库> 全部分类> 教育资料 > 作文作品

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论