第8章 浏览器对象

第8章浏览器对象第8章浏览器对象【学习目标】本章主要介绍常用的浏览器对象，通过本章的学习，读者可以达到以下学习目的：●熟悉窗口对象（Window）●熟悉文档对象（document）●熟悉表单对象（form）8.1窗口（Window）对象Window对象概述Window对象的属性和方法打开和关闭窗口定时打开窗口在HTML中打开对话框应用极为普遍，但也有一些缺陷。用户浏览器决定对话框的样式，设计者左右不了其对话框的大小及样式，但JavaScript给了程序这种控制权。在JavaScript中可以使用Window对象来实现对对话框的控制。Window对象概述Window对象代表的是打开的浏览器窗口。通过Window对象可以控制窗口的大小和位置、由窗口弹出的对话框、打开窗口与关闭窗口，还可以控制窗口上是否显示地址栏、工具栏和状态栏等栏目。对于窗口中的内容，Window对象可以控制是否重载网页、返回上一个文档或前进到下一个文档。在框架方面，Window对象可以处理框架与框架之间的关系，并通过这种关系在一个框架处理另一个框架中的文档。Window对象还是所有其他对象的顶级对象，通过对Window对象的子对象进行操作，可以实现更多的运态效果。Window对象作为对象的一种，也有着其自己的方法和属性。Window对象的属性和方法1．Window对象的属性顶层Window对象是所有其他子对象的父对象，它出现在每一个页面上，并且可以在单个JavaScript应用程序中被多次使用。为了便于读者的学习，本节将Window对象中的属性以表格的形式进行详细说明。Window对象的属性以及说明如表8.1所示。Window对象的属性和方法2．Window对象的方法除了属性之外，Window对象还拥有很多方法。Window对象的方法以及说明如表8.2所示。打开和关闭窗口通过JavaScript脚本的open()方法和close()方法可以打开和关闭新窗口。下面主要介绍open()方法，其语法格式如下。WindowVar=window.open(url,windowname[,location]);WindowVar：当前打开窗口的句柄。如果open()方法成功，则WindowVar的值为一个Window对象的句柄，否则WindowVar的值是一个空值。url：目标窗口的URL。如果URL是一个空字符串，则浏览器将打开一个空白窗口，允许用write()方法创建动态HTML。windowname：window对象的名称。location：对窗口属性进行设置，其可选参数如表8.3所示。打开和关闭窗口例8.1下面设计一个有三个超链接的页面，单击这些链接时可以打开、关闭新窗口，以及关闭本身窗口，程序代码如下。htmlheadmetahttp-equiv=Content-Typecontent=text/html;charset=gb2312/title打开和关闭窗口/title/headscriptlanguage=javascriptvarmywindow;functionopenmywindow(){mywindow=open(mywindow.html,myWindow,height=80,width=300,top=10,left=0);}functionclosemywindow(){mywindow.close();}/scriptbodypAhref=javascript:openmywindow()打开新窗口/A/ppAhref=javascript:closemywindow()关闭新窗口/A/ppAhref=javascript:close()关闭本窗口/A/p/body/html（1）在上述代码中，A…/A的href属性指定的是JavaScript语句，意思是单击这个超链接时就执行其指定的JavasSript脚本。（2）函数openmywindow()调用window对象的open方法打开一个大小为80*300的新窗口。（3）由于变量mywindow是全局变量，因此mywindow.close();这行代码的就是关闭函数openmywindow()所打开的新窗口。课堂练习1首先弹出输入对话框提示用户输入姓名，然后弹出确认对话框确认是否已经成年，如果成年弹出“欢迎光临”警告对话框，进入页面后，状态栏显示“欢迎***”；否则弹出“未成年人请先离开！”警告对话框。定时打开窗口定时打开窗口主要使用window对象setTimeout()方法，其语法格式如下。setTimeout（function,milliseconds）function：要调用的JavaScript自定义函数名称。milliseconds：设置超时时间（以毫秒为单位）。例8.2下面设计一个页面，5秒钟后自动打开另一个窗口，程序代码如下。htmlheadmetahttp-equiv=Content-Typecontent=text/html;charset=gb2312/title定时打开窗口/title/headbodyscriptlanguage=javascript!--functionpp(){window.open(mywindow.html,new,height=190,width=775,top=30,left=30);}setTimeout(pp(),5000);--/script/body/html课堂练习2熟练掌握Window对象属性和方法的使用（1）网页中有“开始滚动”按钮、“停止滚动”按钮和“滚动状态栏”按钮。按钮下方为一定篇幅的文字。（2）编写函数，实现页面每隔500毫秒向下滚动10像素，并设置当单击“开始滚动”按钮时调用此函数（3）当单击“停止滚动”按钮时页面停止滚动（4）编写函数实现状态栏文字“JavaScript&Ajax网页开发技术”从左向右滚动，单击“滚动状态栏”按钮时调用该函数Navigator对象Navigator对象通常用于检测浏览器和操作系统的类型属性：appName：浏览器的名字userAgent：浏览器用于HTTP请求的user-agent值方法：javaEnabled()：检测当前的浏览器是否支持并启用了JavaHistory对象History对象保存浏览器的网页历史记录信息属性：Length：浏览器历史记录中的URL个数方法：Back()：后退到上一页面Forward()：前进到下一个页面Location对象定位到某一个URL：Window.location=“”课堂练习3打开网页时会同时出现一个广告窗口，8秒后该广告窗口自动关闭课堂练习4当打开网页时，浏览器的窗口自动由小变大，当单击页面中的“打开”窗口链接时，会弹出一个由小变大的新窗口。新窗口中有一个可用于关闭该窗口的链接，当关闭新窗口时会弹出一个警告对话框，显示欢送用户信息课堂练习5熟练掌握各种浏览器对象属性和方法的使用（1）弹出输入对话框，提示用户输入年龄，并将获取的值保存到一个变量中（2）判断年龄的大小，如果大于等于18岁则打开新的窗口，新窗口的宽为400px，高为200px，有状态栏，并设置状态栏的文字为“欢迎光临”在打开新窗口后自动关闭原来窗口如果年龄小于18岁，则弹出警告对话框，显示“对不起，禁止访问！”8.2文档(document)对象Window对象概述document对象概述document对象的常用属性、方法和事件文档对象的应用document对象概述文档对象（document）代表浏览器窗口中的文档，该对象是window对象的子对象，由于window对象是DOM对象模型中的默认对象，因此window对象中的方法和子对象不需要使用window来引用。通过document对象可以访问HTML文档中包含的任何HTML标记并可以动态的改变HTML标记中的内容。例如表单、图像、表格和超链接等。该对象在JavaScript1.0版本中就已经存在，在随后的版本中又增加了几个属性和方法。document对象层次结构如图8.3所示。document对象的常用属性、方法和事件1．document对象的属性document对象常用的属性及说明如表8.4所示。document对象的常用属性、方法和事件2．document对象的方法document对象的常用方法和说明如表8.5所示。3．document对象的事件文档对象有onload事件和onunload事件。onload事件发生于装载网页后，onunload事件发生于离开网页前。文档对象的应用例8.3单击页面中的按钮后打开一个新窗口，并在窗口中输出新的内容如图8.4所示。程序代码如下：htmlheadmetahttp-equiv=Content-Typecontent=text/html;charset=gb2312/title打开新窗口并输出内容/titlescriptlanguage=javascript!--functionoc(){vardw;dw=window.open();dw.document.open();dw.document.write(htmlheadtitle一个新的窗口/title);dw.document.write(/headbody);dw.document.write(imgname='i1'src='flower.jpg'width='400'height='200'br)dw.document.write(富贵牡丹br);dw.document.write(/body/html);dw.document.close();}--/script/headbodyinputtype=buttonvalue=打开一个新文档onclick=oc();//body/html课堂练习6设置若干超链接（百度、Google、新浪、网易、雅虎、CSDN）和一个按钮，单击按钮弹出新窗口，在新窗口中显示原文档的链接个数（document.links.length），并将原文档中的链接地址输出到新文档课堂练习7页面上有图片区域和6个按钮：第一张、上一张、下一张、最后一张、幻灯片播放、停止播放。要求单击这些按钮时可以实现相应的功能。使用JavaScript完成多媒体控制音频视频Flash动画课堂练习8为课堂练习7添加声音，在幻灯片切换时加入声音使用JavaScript操作CookieCookie写入Cookie读取删除CookieCookie对象的有效期限课堂练习9页面运行时判断浏览器端是否存在已有的用户名，如果没有，则创建，如果有，则输出“你好，***，欢迎光临”。8.3表单(form)对象认识表单对象form对象的属性、方法和事件认识表单对象表单对象是文档对象的一个元素，它含有多种格式的对象储存信息，使用它可以在JavaScript脚本中编写程序进行文字输入，并可以用来动态改变文档的行为。在页面中定义表单后，通常需要使用JavaScript语言验证表单数据，在JavaScript中验证表单数据需要使用窗体对象的属性、方法和事件。JavaScript语言的最大优点在于可以处理页面中的表单，可以在表单数据提交服务器之前对用户输入的数据进行有效的检查，如果不符合规则，则弹出错误提示对话框，告知用户错误信息。由于这些验证工作都是在客户端完成，当用户输入正确信息后浏览器才会将这些信息提交到服务器端，这样处理可以降低系统的复杂性，提高了页面加载速度。form对象包含一个elements数组，elements[]数组中的每个元素用于表示表单元素的