《浏览器对象》PPT课件.ppt

第6章 浏览器对象,教学目标,本章主要介绍常用的浏览器对象，通过本章的学习，使学生掌握浏览器对象的层次关系、熟悉窗口window对象、文档document对象和表单form对象。,教学要求,学习重点,浏览器对象的层次关系 window对象的常用属性和方法 document对象的常用属性和方法 form对象的常用属性和方法,本章目录,6.1 【案例21】打开和关闭窗口 6.2 【案例22】打开狭长窗口 6.3 【案例23】在页面中自定义背景色 6.4 【案例24】大小写字母变换 6.5 综合实训,6.1 【案例21】案例效果,设计一个有3个超链接的页面，单击这些链接可以打开、关闭新窗口以及关闭本窗口。效果图如图6.1所示。,图6.1 打开和关闭窗口案例运行效果图,主要代码如下： function openwin( ) mywin=window.open(“about:blank“,“,“width=300,height=300,resizable=no“); 打开新窗口 关闭新窗口 关闭本窗口 ,代码设计,相关知识,浏览器对象的层次关系,图6.2 浏览器对象的层次关系图,相关知识,window对象概述 window对象代表的是打开浏览器窗口。通过window对象可以控制窗口的大小和位置，弹出对话框的类型、打开窗口与关闭窗口，还可以控制窗口上是否显示地址栏、工具栏和状态栏等栏目，对于窗口中的内容，window对象可以控制是否重载网页、是否返回上一个文档或前进到下一个文档。,相关知识,打开window对象的open( )方法的语法格式 windowVar=window.open(url,windowname,windowfeature); url：指向一个目标窗口的url，也就是在某个浏览器窗口中创建这个新的窗口。 windowname：是创建窗口对象的名字，赋予窗口对象一个名字是为了以后通过调用该名字来访问该窗口对象。 windowfeature：是一个用逗号分隔的字符串，列举了窗口的特征，见表6-1。,相关知识,表6-1 窗口的特征,相关知识,window.close( )关闭指定的浏览器窗口。 如果不带窗口引用调用close( )函数，JavaScript就关闭当前窗口。在事件处理程序中，必须指定window.close( )，而不能仅仅使用close( )，因为不带对象名字的close( )调用等价于document.close( )。,6.2 【案例22】案例效果,在装载“案例22.htm”页面的同时，自动打开宽和高均为200像素的新窗口“popu1.htm”，此窗口于5秒后自动关闭；单击“案例22.htm”中的超链接文字“使用超链接打开狭长窗口”能够打开高为100像素的狭长的窗口，打开的位置精确地控制在屏幕的左上角。效果图如图6.3所示。,图6.3 打开和关闭窗口效果图,代码设计,(1) 新建网页“案例22.htm”，编写如下源代码： 打开和关闭窗口 function openMywin(theURL,winName,features) window.open(theURL,winName,features); 使用超链接打开狭长窗口 ,代码设计,（2）修改网页“popu1.htm”，在间添加以下源代码： function closeit( ) setTimeout(“window.close( )“,5000) ,代码设计,(3) 在网页“popu1.htm”的标签中添加代码onload =“closeit( )”，即修改后的源代码如下所示： ,相关知识,window对象的属性 表6-2给出了window对象的属性。,表6-2 window对象的属性,相关知识,window对象的方法 除了属性之外，window对象还拥有很多方法。window对象的方法见表6-3。,表6-3 window对象的方法,6.3 【案例23】案例效果,获取在“提示对话框”中输入的RGB颜色代码，并在“确认对话框”中进一步确定其值是否有效(不为空值和null值)，若为有效值即可将页面的背景色改成自定义的RGB颜色，同时将页面的标题设置为“在页面中自定义背景色”，否则就返回到“提示对话框”中待输入状态。效果图如图6.4、图6.5和图6.6所示 。,案例效果,图6.4 在提示对话框中输入颜色值效果图,图6.5 弹出确认对话框效果图,图6.6 在页面中自定义背景色案例运行效果图,代码设计, function welcome( ) var i=0; document.write(“请注意页面的背景色“); /在页面中输出引号内的文本 while (!i) var color=“请输入要显示的背景色(请输入有效值)：“; var default_color=“#ffffff“; var name=prompt(color,default_color); /弹出提示对话框 i=confirm(“确认你输入的颜色是“+name+“吗？“); /弹出确认对话框 if (name= =“)|(name= =null) i=0; document.bgColor=(“+name+“); /设置背景颜色 document.title=“在页面中自定义背景色“; ,相关知识,document对象概述 文档对象(document)代表浏览器窗口中的文档，该对象是window对象的子对象，由于window对象是DOM对象模型中的默认对象，因此window对象中的方法和子对象不需要使用window来引用。通过document对象可以访问HTML文档中包含的任何HTML标记并可以动态地改变HTML标记中的内容，例如表单、图像、表格和超链接等。该对象在JavaScript 1.0版本中就已经存在，在随后的版本中又增加了几个属性和方法。,相关知识,document对象的属性见表6-4。,表6-4 document对象的属性,相关知识,document对象的方法见表6-5。,表6-5 document对象的方法,相关知识,document对象的事件如表6-5所示。,表6-5 document对象的事件,6.4 【案例24】案例效果,网页中的表单由以下控件组成：一个下拉框，列表选项分别为“请选择项目”、“第1项”、“第2项”、“第3项”，其对应的值分别为Please select items (默认为已选状态)、First Choice、Second Choice、Third Choice；一个文本框，用来显示选择的列表选项项目，例如在下拉框中选择“第1项”，文本框中即显示First Choice；一组单选按钮，当选中【大写】单选按钮时，文本框中的字母都会变成大写，当选中【小写】单选按钮时，文本框中的字母都会变成小写，如图6.7、图6.8所示。,案例效果,图6.7 大小写字母变换案例运行效果图1,图6.8 大小写字母变换案例运行效果图2,代码设计,(1) 使用FrontPage网页编辑器，新建网页“案例24.htm”。选择【插入】|【表单】菜单命令，创建名称为myForm的表单，选择【插入】|【表单】|【下拉框】菜单命令，下拉框属性的设置如图6.9所示。,图6.9 设置【下拉框属性】,代码设计,（2）选择【插入】|【表单】|【文本框】菜单命令，在下拉框右边插入一个文本框，文本框属性设置如图6.10所示。,图6.10 设置【文本框属性】,代码设计,（3）换行，选择【插入】|【表单】|【选项按钮】菜单命令，在下面添加一组单选按钮，文字标签分别为“大写”和“小写”，单选按钮属性设置如图6.11和图6.12所示。,图6.11 设置“大写”【选项按钮属性】,图6.12 设置“小写”【选项按钮属性】,代码设计,(4) 在“案例24.htm”文件中修改间控件所需响应事件的代码，代码如下： 请选择项目 第1项 第2项 第3项 将选择的内容转换为： 大写 小写 ,代码设计,(5) 在“案例24.htm”文件的间添加如下代码： function disPlay(parts) myForm.T1.value=parts.optionsparts.selectedIndex.value; parts.selectedIndex=0; function convertAllFields(caseChange) if (caseChange=“upper“) document.myForm.T1.value = document.myForm.T1.value.toUpperCase( ) else document.myForm.T1.value = document.myForm.T1.value.toLowerCase( ) ,相关知识,form对象概述 表单对象(form)是文档对象的一个元素，它含有多种格式的对象储存信息，使用它可以在JavaScript脚本中编写程序进行文字输入，并可以用来动态改变文档的行为。form对象在HTML中的表示方式如下所示： ,相关知识,form对象引用格式如下所示 。 方法一：通过表单名访问表单。 例如：document.mytable( ) 方法二：通过数组访问表单 。 例如：document.forms0 document.forms1 document.forms2,相关知识,form元素控件的引用格式如下所示。 方法一：通过表单访问元素。 例如： (2) 方法二：通过数组访问元素。 例如：document.form1.elements0 (3) 方法三：使用document.getElementById( )方法。 例如：document.getElementById(“name“).value=“a“,相关知识,form窗体对象的属性对应于页面中表单的属性，其具体属性见表6-7。,表6-7 form窗体对象的属性,相关知识,表单元素对象的基本属性和基本方法见表6-8和表6-9。,表6-8 表单元素对象的属性,表6-9 表单元素对象的方法,相关知识,表单元素的属性和方法的引用基本格式如下所示。 (1) 表单名.元素名或数组.属性。 (2) 表单名.元素名或数组.方法。,相关知识,form常用事件见表6-10。,表6-10 表单元素对象的事件,6.5 综合实训,鼠标在页面上移动时能在相应位置“捕捉鼠标位置”处显示鼠标当前位置的数值，通过选择单选按钮【12小时制】或【24小时制】，可以在文本框中动态显示当前时间，小时、分、秒数都以两位数字表示。效果图如图6.13、图6.14所示。,图6.13 综合实训案例运行效果图1,图6.14 综合实训案例运行效果图2,代码设计,(1) 使用FrontPage网页编辑器，新建网页“表单综合实训.htm”。在设计视图下插入文本框、单选按钮组和相应文字，网页设计界面如图6.15所示。,图6.15 网页界面设计图,代码设计,在代码视图下修改代码，本案例主要代码如下所示： 表单综合实训 function mousemove( ) p1.innerHTML= window.event.clientX+“,“+window.event.clientY; function showMilitaryTime( ) if (document.form1.R10.checked) return true; return false; ,代码设计,function showHours(hour) if (showMilitaryTime( ) if (hour12) hour=hour-12; if (hour=0) hour=12; if (hour10) return(“0“+hour); else return(hour); else if (hour10) return(“0“+hour); else return(hour); ,function showMinutes(minutes) if (minutes10) return(“0“+minutes); else return(minutes); function showSeconds(second) if (second10) return(“0“+second); else return(second); function showMark( ) if (showMilitaryTime( ) if (now.getHours( )=12) return(“ AM“); else return(“ PM“); else ret