第15章 JavaScript对象编程_第1页
第15章 JavaScript对象编程_第2页
第15章 JavaScript对象编程_第3页
第15章 JavaScript对象编程_第4页
第15章 JavaScript对象编程_第5页
已阅读5页，还剩102页未读， 继续免费阅读

下载本文档

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

文档简介

本章要求：第15章JavaScript对象编程熟悉Window对象的属性及方法熟悉各种对话框的使用掌握窗口的打开与关闭技术掌握通过Window对象控制窗口熟悉Window窗口对象的常用事件掌握IE浏览器常见的几种窗口模块的创建熟悉文档对象的基本概念掌握文档对象常用的属性、方法和事件掌握使用文档对象实现的几种常见功能掌握如何在JavaScript中访问表单及表单域熟悉表单验证方法了解DOM的基本概念熟悉DOM与XML的关系掌握DOM节点的操作主要内容1.Window窗口对象2.Document文档对象3.JavaScript与表单操作4.DOM对象5.综合实例——通过JS操作XML实现分页第15章JavaScript对象编程15.1.1Window对象15.1.2对话框（Dialog）15.1.3窗口对象常用操作15.1Window窗口对象Window对象代表的是打开的浏览器窗口，通过Window对象可以控制窗口的大小和位置、由窗口弹出的对话框、打开窗口与关闭窗口，还可以控制窗口上是否显示地址栏、工具栏和状态栏等栏目。对于窗口中的内容，Window对象可以控制是否重载网页、返回上一个文档或前进到下一个文档。在框架方面，Window对象可以处理框架与框架之间的关系，并通过这种关系在一个框架处理另一个框架中的文档。Window对象还是所有其他对象的顶级对象，通过对Window对象的子对象进行操作，可以实现更多的运态效果。Window对象作为对象的一种，也有着其自己的方法和属性。1．Window对象的属性顶层Window对象是所有其他子对象的父对象，它出现在每一个页面上，并且可以在单个JavaScript应用程序中被多次使用。15.1.1Window对象为了便于读者的学习，本节将Window对象中的属性以表格的形式进行详细说明。Window对象的属性以及说明如表15-1所示。表15-1 Window对象的属性属性描述document对话框中显示的当前文档frames表示当前对话框中所有frame对象的集合location指定当前文档的URLname对话框的名字status状态栏中的当前信息defaultstatus状态栏中的当前信息top表示最顶层的浏览器对话框parent表示包含当前对话框的父对话框opener表示打开当前对话框的父对话框closed表示当前对话框是否关闭的逻辑值self表示当前对话框screen表示用户屏幕，提供屏幕尺寸、颜色深度等信息navigator表示浏览器对象，用于获得与浏览器相关的信息方法描述alert()弹出一个警告对话框confirm()在确认对话框中显示指定的字符串prompt()弹出一个提示对话框open()打开新浏览器对话框并且显示由URL或名字引用的文档，并设置创建对话框的属性close()关闭被引用的对话框focus()将被引用的对话框放在所有打开对话框的前面blur()将被引用的对话框放在所有打开对话框的后面scrollTo(x,y)把对话框滚动到指定的坐标scrollBy(offsetx,offsety)按照指定的位移量滚动对话框setTimeout(timer)在指定的毫秒数过后，对传递的表达式求值setInterval(interval)指定周期性执行代码moveTo(x,y)将对话框移动到指定坐标处moveBy(offsetx,offsety)将对话框移动到指定的位移量处resizeTo(x,y)设置对话框的大小resizeBy(offsetx,offsety)按照指定的位移量设置对话框的大小print()相当于浏览器工具栏中的“打印”按钮navigate(URL)使用对话框显示URL指定的页面status()状态条，位于对话框下部的信息条Defaultstatus()状态条，位于对话框下部的信息条

2．Window对象的方法除了属性之外，Window对象还拥有很多方法。Window对象的方法以及说明如表15-2所示。表15-2 Window对象的方法3．Window对象的使用Window对象可以直接调用其方法和属性，例如：window.属性名window.方法名（参数列表）Window是不需要使用new运算符来创建的对象。因此，在使用Window对象时，只要直接使用“Window”来引用Window对象即可，代码如下：window.alert（"字符串"）；window.document.write（"字符串"）；在实际运用中，JavaSctipt允许使用一个字符串来给窗口命名，也可以使用一些关键字来代替某些特定的窗口。例如，使用“self”代表当前窗口、“parent”代表父级窗口等。对于这种情况，可以用这些字符串来代表“window”，代码如下：parent.属性名parent.方法名（参数列表）对话框是响应用户某种需求而弹出的小窗口，本节将介绍几种常用的对话框：警告对话框、询问回答对话框及提示对话框。1．警告（Alert）在页面显示时弹出警告对话框主要是在<body>标签中调用Window对象的alert()方法实现的，下面对该方法进行详细说明。利用Window对象的alert()方法可以弹出一个警告框，并且在警告框内可以显示提示字符串文本。语法：window.alert(str)参数str表示要在警告对话框中显示的提示字符串。用户可以单击警告对话框中的“确定”按钮来关闭该警告对话框。不同浏览器的警告对话框样式可能会有些不同。15.1.2对话框（Dialog

【例15-1】在浏览器打开时，弹出警告对话框。代码如下：<html><head><title>警告对话框的应用</title><metahttp-equiv="Content-Type"content="text/html;charset=gb2312"></head><bodyonLoad="al()"><scriptlanguage="javascript">functional(){ window.alert("弹出警告对话框!");}</script></body></html>运行结果如图15-1所示。图15-1警告对话框的应用注意：警告对话框是由当前运行的页面弹出的，在对该对话框进行处理之前，不能对当前页面进行操作，并且其后面的代码也不会被执行。只有将警告对话框进行处理后（如单击“确定”或者关闭对话框），才可以对当前页面进行操作，后面的代码也才能继续执行。说明：也可以利用alert()方法对代码进行调试。当弄不清楚某段代码执行到哪里，或者不知道当前变量的取值情况，便可以利用该方法显示有用的调试信息。2．弹出询问回答对话框window对象的confirm()方法用于弹出一个询问回答为是或否问题的对话框。该对话框中包含有两个按钮（在中文操作系统中显示为“确定”和“取消”，在英文操作系统中显示为“OK”和“Cancel”），当用户单击了确定按钮，返回值为true，单击“取消”按钮，返回值为false。语法：window.confirm(question)window：Window对象。question：要在对话框中显示的纯文本。通常，应该表达程序想要让用户回答的问题。返回值：如果用户单击了“确定”按钮，返回值为true；如果用户单击了“取消”按钮，返回值为false。【例15-2】本例主要实现在页面中弹出“确定要关闭浏览器窗口”对话框，代码如下：<scriptlanguage="javascript"> varbool=window.confirm("确定要关闭浏览器窗口吗？"); if(bool==true){ //如果用户单击了确定按钮 window.close(); //关闭窗口 } </script>运行结果如图15-2所示。图15-2询问对话框3．提示（Prompts）利用Window对象的Prompt()方法可以在浏览器窗口中弹出一个提示框。与警告框和确认框不同，在提示框中有一个输入框。当显示输入框时，在输入框内显示提示字符串，在输入文本框显示缺省文本，并等待用户输入，当用户在该输入框中输入文字后，并单击“确定”按钮时，返回用户输入的字符串，当单击“取消”按钮时，返回null值。语法：mpt(str1，str2)str1：为可选项。表示字符串(String)，指定在对话框内要被显示的信息。如果忽略此参数，将不显示任何信息。str2：为可选项。表示字符串(String)，指定对话框内输入框（input）的值（value）。如果忽略此参数，将被设置为undefined。【例15-3】当浏览器打开时，在文本框中输入数据并单击“显示对话框”按钮，会弹出一个提示对话框，输入数据后，单击“确定”按钮后，返回相应的数据。代码如下：<script>functionrdl_doClick(){varoMessage=document.all("oMessage");oMessage.value=mpt(oMessage.value,"返回的信息");}</script><inputid=oMessagetype=textsize=40value="请在此输入信息"><br><br><inputtype=buttonvalue="显示对话框

"onclick="rdl_doClick();">运行结果如图15-3和图15-4所示。

图15-3弹出提示对话框

图15-4单击“确定”按钮后返回信息1．移动窗口下面介绍几种移动窗口的方法。（1）moveTo()方法利用moveTo()方法可以将窗口移动到指定坐标(x,y)处。语法：window.moveTo(x,y)x：窗口左上角的x坐标。y：窗口左上角的Y坐标。例如，将窗口移动到指定到坐标（300,300）处，代码如下：window.moveTo(300,300)说明：

moveTo()方法是Navigator和IE都支持的方法，它不属于W3C标准的DOM。15.1.3窗口对象常用操作（2）resizeTo()方法利用resizeTo()方法可以将当前窗口改变成(x,y)大小，x、y分别为宽度和高度。语法：window.resizeTo(x,y)x：窗口的水平宽度。y：窗口的垂直宽度。例如，将当前窗口改变成(300,200)大小，代码如下：window.moveTo(300,200)（3）screen对象screen对象是JavaScript中的屏幕对象，反映了当前用户的屏幕设置。该对象的常用属性如表15-3所示。表15-3 screen对象的常用属性例如，使用screen对象设置屏幕属性，代码如下：window.screen.width//屏幕宽度window.screen.height//屏幕高度window.screen.colorDepth//屏幕色深window.screen.availWidth//可用宽度window.screen.availHeight//可用高度(除去任务栏的高度)属性说明width用户整个屏幕的水平尺寸，以像素为单位height用户整个屏幕的垂直尺寸，以像素为单位pixelDepth显示器的每个像素的位数colorDepth返回当前颜色设置所用的位数，1代表黑白；8代表256色；16代表增强色；24/32代表真彩色。8位颜色支持256种颜色，16位颜色（通常叫做“增强色”）支持大概64000种颜色，而24位颜色（通常叫做“真彩色”）支持大概1600万种颜色availHeight返回窗口内容区域的垂直尺寸，以像素为单位availWidth返回窗口内容区域的水平尺寸，以像素为单位【例15-4】本实例是在窗口打开时，将窗口放在屏幕的左上角，并将窗口从左到右以随机的角度进行移动，当窗口的外边框碰到屏幕四边时，窗口将进行反弹。代码如下：<scriptlanguage="JavaScript">window.resizeTo(300,300) //指定将窗口改变的大小window.moveTo(0,0) inter=setInterval("go()",1); varaa=0varbb=0vara=0varb=0functiongo() try{ if(aa==0) a=a+2; if(a>screen.availWidth-300) aa=1; if(aa==1) a=a-2; if(a==0) aa=0; if(bb==0) b=b+2; if(b>screen.availHeight-300) bb=1; if(bb==1) b=b-2; if(b==0) bb=0; window.moveTo(a,b); catch(e){}</script>运行结果如图15-5和图15-6所示。图15-5窗口移动前的效果图15-6窗口移动后的效果2．改变窗口大小利用window对象的resizeBy()方法可以实现将当前窗口改变指定的大小(x,y)，当x、y的值大于0时为扩大，小于0时为缩小。语法：window.resizeBy(x,y)x：放大或缩小的水平宽度。y：放大或缩小的垂直宽度。【例15-5】本实例在打开index.htm文件后，在该页面中单击“单击此链接打开一个自动改变大小的窗口”超链接，在屏幕的左上角将会弹出一个“改变窗口大小”的窗口，并动态改变窗口的宽度和高度，直到与屏幕大小相同为止。编写用于实现打开窗口特殊效果的JavaScript代码。自定义函数go1()，用于打开指定的窗口，并设置其位置和大小。代码如下：<scriptlanguage=JavaScript>varwinheight,winsize,x;functiongo1(){ winheight=100; winsize=100; x=5; win2=window.open("melody.htm","","scrollbars='no'"); win2.moveTo(0,0); win2.resizeTo(100,100); go2();自定义函数go2()，用于动态改变窗口的大小，代码如下：functiongo2() if(winheight>=screen.availHeight-3) x=0 win2.resizeBy(5,x) winheight+=5 winsize+=5 if(winsize>=screen.width-5){ winheight=100 winsize=100 x=5 return setTimeout(“go2()”,50)</script>运行结果如图15-7和图15-8所示。图15-7改变窗口大小图15-8改变窗口大小在本实例中，首先利用window对象的open方法来打开一个已有的窗口，然后利用screen对象的availHeight属性来获取屏幕可工作区域的高度，再利用moveTo()和resizeTo()方法来指定窗口的位置及大小，并利用resizeBy()方法使窗口逐渐变大，直到窗口大小与屏幕的工作区大小相同。3．窗口滚动利用window对象的scroll()方法可以指定窗口的当前位置，从而实现窗口滚动效果。语法：scroll(x,y);x：屏幕的横向坐标。y：屏幕的纵向坐标。Window对象中有3种方法可以用来滚动窗口中的文档，这3种方法的使用如下：window.scroll（x,y）window.scrollTo（x,y）window.scrollBy（x,y）以上3种方法的具体解释如下：scroll()：该方法可以将窗口中显示的文档滚动到指定的绝对位置。滚动的位置由参数x和y决定，其中x为要滚动的横向坐标，y为要滚动的纵向坐标。两个坐标都是相对文档的左上角而言的，即文档的左上角坐标为（0,0）。scrollTo()：该方法的作用与scroll()方法完全相同。Scroll()方法是JavaScript1.1中所规定的，而scrollTo()方法是JavaScript1.2中所规定的。建议使用scrollTo()方法。scrollBy：该方法可以将文档滚动到指定的相对位置上，参数x和y是相对当前文档位置的坐标。如果参数x的值为正数，则向右滚动文档，如果参数x值为负数，则向左滚动文档。与此类似，如果参数y的值为正数，则向下滚动文档，如果参数y的值为负数，则向上滚动文档。【例15-6】本实例是在打开页面时，当页面出现纵向滚动条时，页面中的内容将从上向下进行滚动，当滚动到页面最底端时停止。代码如下：<scriptlanguage="JavaScript">varposition=0;functionscroller(){if(true){position++;scroll(0,position);clearTimeout(timer);vartimer=setTimeout("scroller()",10);}}scroller();</script>运行结果如图15-9所示。图15-9窗口自动滚动

4．访问窗口历史利用history对象实现访问窗口历史，history对象是一个只读的URL字符串数组，该对象主要用来存储一个最近所访问网页的URL地址的列表。语法：[window.]perty|method([parameters])history对象的常用属性以及说明如表15-4所示。表15-4 history对象的常用属性属性描述length历史列表的长度，用于判断列表中的入口数目current当前文档的URLnext历史列表的下一个URLprevious历史列表的前一个URLhistory对象的常用方法以及说明如表15-5所示。表15-5 History对象的常用方法

例如，利用history对象中的back()方法和forward()方法来引导用户在页面中跳转，代码如下：<ahref="javascript:window.history.forward();">forward</a><ahref="javascript:window.history.back();">back</a>还可以使用history.go()方法指定要访问的历史记录。若参数为正数，则向前移动；若参数为负数，则向后移动。例如：<ahref="javascript:window.history.go(-1);">向后退一次</a><ahref="javascript:window.history.back(2);">向后前进两次/a>使用history.length属性能够访问history数组的长度，可以很容易地转移到列表的末尾。例如：<ahref="javascript:window.history.go(window.historylength-1);">末尾</a>方法描述back()退回前一页forward()重新进入下一页go()进入指定的网页5．控制窗口状态栏下面介绍几种控制窗口状态栏的方法。（1）status()方法改变状态栏中的文字可以通过window对象的status()方法实现。status()方法主要功能是设置或给出浏览器窗口中状态栏的当前显示信息。语法：window.status=str（2）defaultstatus()方法语法：window.defaultstatus=strstatus()方法与defaultstatus()方法的区别在于信息显示时间的长短。Defaultstatus()方法的值会在任何时间显示，而status()方法的值只在某个事件发生的瞬间显示。【例15-7】本实例在状态栏中使用JavaScript编写一个文字从右向左依次弹出的效果，当页面显示后状态栏中的文字将会从右边向左边一个一个的弹出，等文字在状态栏中全部输出完毕后，程序将会清空状态栏中的文字。然后重复执行文字从右向左依次弹出的操作。代码如下：<scriptlanguage="JavaScript">varmessage="欢迎来到明日科技主页，

请您提出宝贵意见！

" //状态栏信息varposition=150 //位置vardelay=10 //弹出文字的间隔时间varstatusobj=newstatusMessageObject()functionstatusMessageObject(p,d){ this.msg=message; this.out=""; this.pos=position; this.delay=delay; this.i=0; this.reset=clearMessage;}functionclearMessage() //清空信息 this.pos=POSITION;functionbrush(){ for(statusobj.i=0;statusobj.i<statusobj.pos;statusobj.i++) { statusobj.out+=""; }

if(statusobj.pos>=0) statusobj.out+=statusobj.msg; else statusobj.out=statusobj.msg.substring(-statusobj.pos,statusobj.msg.length); window.status=statusobj.out; statusobj.out=""; statusobj.pos--; if(statusobj.pos<-(statusobj.msg.length)) { statusobj.reset(); } setTimeout('brush()',statusobj.delay);}functionouttext(space,position){ varmsg=statusobj.msg; varout=""; for(vari=0;i<position;i++) { out+=msg.charAt(i); } for(i=1;i<space;i++) { out+=""; } out+=msg.charAt(position); window.status=out; if(space<=1)position++; if(msg.charAt(position)==''){ position++;} space=100-position; } elseif(space>3) { space*=.75; } else { space--; } if(position!=msg.length) { varcmd="outtext("+space+","+position+")"; scrollID=window.setTimeout(cmd,statusobj.delay); } else window.status=""; space=0; position=0; cmd="outtext("+space+","+position+")"; scrollID=window.setTimeout(cmd,statusobj.delay); returnfalse } returntrue}outtext(100,0);运行结果如图15-10所示。图15-10状态栏的文字设置15.2Document文档对象15.2.1文档对象概述15.2.2文档对象的常用属性、方法与事件15.2.3Document对象的应用15.2.1文档对象概述文档对象（document）代表浏览器窗口中的文档，该对象是window对象的子对象，由于window对象是DOM对象模型中的默认对象，因此window对象中的方法和子对象不需要使用window来引用。通过document对象可以访问HTML文档中包含的任何HTML标记并可以动态的改变HTML标记中的内容。例如表单、图像、表格和超链接等。该对象在JavaScript1.0版本中就已经存在，在随后的版本中又增加了几个属性和方法。document对象层次结构如图15-11所示。图15-11document对象层次结构15.2.2文档对象的常用属性、方法与事件本节将详细介绍文档对象（Document对象）常用的属性、方法和事件。1．Document对象的常用属性Document对象常用的属性及说明如表15-6所示。表15-6 Document对象属性及说明属性说明alinkColor链接文字的颜色，对应于<body>标记中的alink属性all[]存储HTML标记的一个数组(该属性本身也是一个对象)anchors[]存储锚点的一个数组。(该属性本身也是一个对象)bgColor文档的背景颜色，对应于<body>标记中的bgcolor属性cookie表示cookie的值fgColor文档的文本颜色(不包含超链接的文字)对应于<body>标记中的text属性值forms[]存储窗体对象的一个数组(该属性本身也是一个对象)fileCreatedDate创建文档的日期fileModifiedDate文档最后修改的日期fileSize当前文件的大小lastModified文档最后修改的时间images[]存储图像对象的一个数组(该属性本身也是一个对象)linkColor未被访问的链接文字的颜色，对应于<body>标记中的link属性links[]存储link对象的一个数组(该属性本身也是一个对象)vlinkColor表示已访问的链接文字的颜色，对应于<body>标记的vlink属性title当前文档标题对象body当前文档主体对象readyState获取某个对象的当前状态URL获取或设置URL2．Document对象的常用方法Document对象的常用方法和说明如表15-7所示。表15-7 Document对象方法及说明方法说明close文档的输出流open打开一个文档输出流并接收write和writeln方法的创建页面内容write向文档中写入HTML或JavaScript语句writeln向文档中写入HTML或JavaScript语句，并以换行符结束createElement创建一个HTML标记getElementById获取指定id的HTML标记3．Document对象的常用事件多数浏览器内部对象都拥有很多事件，下面将以表格的形式给出常用的事件及何时触发这些事件。JavaScript的常用事件如表15-8所示。表15-8 JavaScript的常用事件事件何时触发onabort对象载入被中断时触发onblur元素或窗口本身失去焦点时触发onchange改变<select>元素中的选项或其他表单元素失去焦点，并且在其获取焦点后内容发生过改变时触发onclick单击鼠标左键时触发。当光标的焦点在按钮上，并按下回车键时，也会触发该事件ondblclick双击鼠标左键时触发onerror出现错误时触发onfocus任何元素或窗口本身获得焦点时触发onkeydown键盘上的按键（包括Shift或Alt等键）被按下时触发，如果一直按着某键，则会不断触发。当返回false时，取消默认动作onkeypress键盘上的按键被按下，并产生一个字符时发生。也就是说，当按下Shift或Alt等键时不触发。如果一直按下某键时，会不断触发。当返回false时，取消默认动作onkeyup释放键盘上的按键时触发onload页面完全载入后，在Window对象上触发；所有框架都载入后，在框架集上触发；<img>标记指定的图像完全载入后，在其上触发；或<object>标记指定的对象完全载入后，在其上触发onmousedown单击任何一个鼠标按键时触发onmousemove鼠标在某个元素上移动时持续触发onmouseout将鼠标从指定的元素上移开时触发onmouseover鼠标移到某个元素上时触发onmouseup释放任意一个鼠标按键时触发onreset单击重置按钮时，在<form>上触发onresize窗口或框架的大小发生改变时触发onscroll在任何带滚动条的元素或窗口上滚动时触发onselect选中文本时触发onsubmit单击提交按钮时，在<form>上触发onunload页面完全卸载后，在Window对象上触发；或者所有框架都卸载后，在框架集上触发本节主要通过使用Document对象的属性和方法来演示一些常用的实例，例如链接文字颜色设置、获取并设置URL等实例，本章将对Document对象常用的应用进行详细介绍。1．链接文字颜色设置链接文字颜色设置通过使用alinkColor属性、linkColor属性和vlinkColor属性来实现。（1）alinkColor属性该属性用来获取或设置当链接获得焦点时显示的颜色。语法：[color=]document.alinkcolor[=setColor]setColor：设置颜色的名称或颜色的RGB值，setColor是可选项。color：字符串变量，用来获取颜色值，color是可选项。（2）linkColor属性该属性用来获取或设置页面中未单击的链接的颜色。语法：[color=]document.linkColor[=setColor]setColor：设置颜色的名称或颜色的RGB值，setColor是可选项。color：字符串变量，用来获取颜色值，color是可选项。15.2.3Document对象的应用

（3）vlinkColor属性该属性用来获取或设置页面中单击过的链接的颜色。语法：[color=]document.vlinkColor[=setColor]setColor：设置颜色的名称或颜色的RGB值，setColor是可选项。color：字符串变量，用来获取颜色值，color是可选项。【例15-8】本示例分别设置了超链接3个状态的文字颜色。代码如下。<body><fontsize="10pt"face="隶书"><aid="a1"href="">JavaScript论坛</a></font><scriptlanguage="JavaScript">document.vlinkColor="#00CCFF";document.linkColor="green";document.alinkColor="000000";</script></body>当未单击超链接时超链接字体的颜色为绿色如图15-12所示，当单击超链接时超链接字体的颜色为黑色如图15-13所示，当单击过超链接时超链接的字体颜色为淡蓝色如图15-14所示。图15-12未单击链接时为绿色图15-13单击链接时为黑色图15-14已单击链接时为淡蓝色2．文档前景色和背景色设置文档前景色和背景色的设置可以使用gbColor属性和fgColor属性来实现。（1）bgColor属性该属性用来获取或设置页面的背景颜色。语法：[color=]document.bgColor[=setColor]setColor：设置颜色的名称或颜色的RGB值，setColor是可选项。color：字符串变量，用来获取颜色值，color是可选项。（2）fgColor属性该属性用来获取或设置页面的前景颜色，即为页面中文字的颜色。语法：[color=]document.fgColor[=setColor]setColor：设置颜色的名称或颜色的RGB值，setColor是可选项。color：字符串变量，用来获取颜色值，color是可选项。【例15-9】本示例每间隔一秒将改变文档的前景色和背景色。代码如下。<body>背景自动变色<scriptlanguage="javascript">varArraycolor=newArray("#00FF66","#FFFF99","#99CCFF","#FFCCFF","#FFCC99","#00FFFF","#FFFF00","#FFCC00","#FF00FF");varn=0;functionturncolors(){ n++; if(n==(Arraycolor.length-1))n=0; document.bgColor=Arraycolor[n]; //设置页面的背景颜色 document.fgColor=Arraycolor[n-1]; //设置页面的文字颜色 setTimeout("turncolors()",1000);}turncolors();</script></body>当运行示例时文档的前景色和背景色如图15-15所示，在间隔一秒后文档的前景色和背景色将会自动改变为如图15-16所示的颜色。图15-15自动变色前图15-16自动变色后3．获取并设置URL获取并设置URL主要可以使用URL属性来实现，该属性是用来获取或设置当前文档的URL。语法：[url=]document.URL[=setUrl]url：字符串表达式，用来存储当前文档的URL。url是可选项。setUrl：字符串变量，用来设置当前文档的URL。setUrl是可选项。【例15-10】本示例在页面中显示了当前文档的URL，并可以通过文本框来输入需要跳转页面的URL，单击“跳转”按钮将跳转到新的页面。代码如下：<body><scriptlanguage="javascript"> <!-- document.write("<b>当前页面的URL: </b>"+document.URL); functionsetURL(t) { document.URL=t; varu=document.URL; returnu; } --></script> <p>

输入要跳转的页面URL:<inputname="titleName"type="text"><inputname="Input"value="跳转"onClick="setURL(titleName.value)"type="button"></p></p></body>运行结果如图15-17所示。图15-17显示当前页面的URL4．在文档中输出数据在文档中输出数据可以使用write方法和writeln方法来实现。（1）write方法该方法用来向HTML文档中输出数据，其数据包括字符串、数字和HTML标记等。语法：document.write(text);参数text表示在HTML文档中输出的内容。（2）writeln方法该方法与write方法作用相同，唯一的区别在于writeln方法在所输出的内容后，添加了一个回车换行符。但回车换行符只有在HTML文档中<pre></pre>标记（此标记把文档中的空格、回车、换行等表现出来）内才能被识别。语法：document.writeln(text);参数text表示在HTML文档中输出的内容。【例15-11】本示例使用write方法和writeln方法在页面中输出了几段文字。代码如下。<body><scriptlanguage="javascript"> <!-- document.write("使用write方法输出的第一段内容！"); document.write("使用write方法输出的第二断内容<hrcolor='#003366'>"); document.writeln("使用writeln方法输出的第一段内容！"); document.writeln("使用writeln方法输出的第二断内容<hrcolor='#003366'>"); --></script><pre><scriptlanguage="javascript"> <!-- document.writeln("在pre标记内使用writeln方法输出的第一段内容！"); document.writeln("在pre标记内使用writeln方法输出的第二段内容"); --></script></pre></body>运行效果如图15-18所示图15-18在文档中输出数据5．获取文本框并修改其内容获取文本框并修改其内容可以使用getElementById()方法来实现。getElementById()方法可以通过指定的id来获取HTML标记，并将其返回。语法：sElement=document.getElementById(id)sElement：用来接收该方法返回的一个对象。id：用来设置需要获取HTML标记的id值。【例15-12】本示例在页面加载后的文本框中将会显示“初始文本内容”，当单击按钮后将会改变文本框中的内容。代码如下。<body><scriptlanguage="javascript"> <!-- functionc1() { vart=document.getElementById("txt"); t.value="修改文本内容" } --></script><inputtype="text"id="txt"value="初始文本内容"/><inputtype="button"value="更改文本内容"name="btn"onclick="c1();"/></body>运行结果如图15-19和图15-20所示。图15-19显示按钮和文本框图15-20获取并修改文本内容15.3JavaScript与表单操作15.3.1在JavaScript中访问表单15.3.2在JavaScript中访问表单域15.3.3表单的验证在扫描检测与操作表单域之前，首先应当确定要访问的表单，JavaScript中主要有3种访问表单的方式，分别如下：通过document.forms[]按编号访问。通过document.forms[]按名称访问。按照正规元素检索机制（例如，使用document.formname）。在支持DOM的浏览器中，使用document.getElementById()。例如，对于下面定义的表单：<formname="form1"method="post"action="">

驱动器名称:<inputtype="text"name="text1">

<inputtype="button"name="Button1"value="驱动器类型"onclick="dtype(document.form1.text1)"></form>可以使用window.document.forms[0]、window.document.forms[‘form1’]或者window.document.form1等方式来访问该表单。15.3.1在JavaScript中访问表单每个表单都包含一个表单的聚集，例如，要访问下面的表单域：<formname="form1"method="post"action="">

驱动器名称:

<inputtype="text"name="text1">

<inputtype="button"name="Button1"value="驱动器类型"onclick="dtype(document.form1.text1)"></form>可以通过elements[]进行访问。因此，对于前面定义的表单，可以使用window.document.forms.elements[0]引用第一个域。还可以使用名称访问表单域，window.document.forms.text1或者window.document.forms.elements["text1"]访问第一个域。15.3.2在JavaScript中访问表单域验证表单中输入的内容是否符合要求是JavaScript最常用的功能之一。在提交表单前进行表单验证，可以节约服务器的处理器周期，为用户节省等待的时间。表单验证通常发生在内容输入结束，表单提交之前。表单的onsubmit事件处理器中有一组函数负责验证。如果输入中包含非法数据，处理器会返回false，显示一条信息，同时取消提交。如果输入的内容合法，则返回true，提交正常进行。本节将介绍一些表单验证常用的技术。1．验证表单内容是否为空【例15-13】下面制作一个简单的用户登录界面，并且验证用户名和密码不能为空，如果为空则给出提示。运行结果如图15-21所示。图15-21提示请输入用户名15.3.3表单的验证具体步骤如下：（1）首先，设计登录页面，效果如图15-21所示。（2）通过javascript脚本判断用户和密码是否为空，具体代码如下：<scriptlanguage="javascript">functioncheckit(){ //自定义函数 if(.value==""){ //判断用户名是否为空 alert("请输入用户名!"); .select(); returnFALSE;}if(form1.pwd.value==""){ //判断密码是否为空 alert("请输入密码!"); form1.pwd.select(); returnFALSE; } returnTRUE;}</script>（3）通过“登录”按钮的onclick事件调用自定义函数checkit()，代码如下：<inputtype="image"name="imageField"onclick="returncheckit();"src="images/dl_06.gif"/> //登录按钮事件<inputtype="image"name="imageField2"onclick="form.reset();returnFALSE;"src="images/dl_07.gif"/>//取消事件2．验证表单中的email地址是否正确【例15-14】本例通过javascript脚本和正则表达式来验证email地址格式，运行结果如图15-22所示。图15-22验证email地址格式验证Email地址的正则表达式如下：/\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*/具体步骤如下：（1）使用JavaScript编写一个用于检测Email地址是否正确的函数checkemail()，该函数只有一个参数email，用于获取输入的Eamil地址，返回值为TRUE或FALSE。代码如下：<scriptlanguage="javascript">functioncheckemail(email){ varstr=email; //在JavaScript中，正则表达式只能使用"/"开头和结束，不能使用双引号 varExpression=/\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*/; varobjExp=newRegExp(Expression); if(objExp.test(str)==TRUE){ returnTRUE; }else{ returnFALSE;</script>（2）调用checkemail()函数判断Email地址是否正确，并显示相应的提示信息。关键代码如下：<scriptlanguage="javascript">functioncheck(form1){ if(form1.email.value==""){ alert("请输入Email地址!");form1.email.focus();return; } if(!checkemail(form1.email.value)){ alert("您输入的Email地址不正确!");form1.email.focus();return; } form1.submit();</script>15.4DOM对象15.4.1DOM概述15.4.2DOM对象结点属性15.4.3节点的几种操作15.4.4获取文档中的指定元素15.4.5与DHTML相对应的DOMDOM是DocumentObjectModel（文档对象模型）的缩写，它是由W3C(WorldWideWeb委员会)定义的。下面分别介绍各个单词的含义。Document（文档）创建一个网页并将该网页添加到Web中，DOM就会根据这个网页创建一个文档对象。如果没有document（文档），DOM也就无从谈起。Object（对象）对象是一种独立的数据集合。例如文档对象，即是文档中元素与内容的数据集合。与某个特定对象相关联的变量被称为这个对象的属性。可以通过某个特定对象去调用的函数被称为这个对象的方法。Model（模型）模型代表将文档对象表示为树状模型。在这个树状模型中，网页中的各个元素与内容表现为一个个相互连接的节点。DOM是与浏览器或平台的接口，使其可以访问页面中的其他标准组件。DOM解决了Javascript与Jscript之间的冲突，给开发者定义了一个标准的方法，使他们来访问站点中的数据、脚本和表现层对象。15.4.1DOM概述1．DOM分层文档对象模型采用的分层结构为树形结构，以树节点的方式表示文档中的各种内容。先以一个简单的HTML文档说明一下。代码如下：<html><head><title>标题内容</title></head><body><h3>三号标题</h3><b>加粗内容</b></body></html>以上文档可以使用图15-23对DOM的层次结构进行说明。图15-23文档的层次结构通过图15-23可以看出，在文档对象模型中，每一个对象都可以称为一个节点(Node)，下面将介绍一下几种节点的概念。根节点在最顶层的<html>节点，称为是根节点。父节点一个节点之上的节点是该节点的父节点(parent)。例如，<html>就是<head>和<body>的父节点，<head>就是<title>的父节点。子节点位于一个节点之下的节点就是该节点的子节点。例如，<head>和<body>就是<html>的子节点，<title>就是<head>的子节点。兄弟节点如果多个节点在同一个层次，并拥有着相同的父节点，这几个节点就是兄弟节点(sibling)。例如，<head>和<body>就是兄弟节点，<he>和<b>就是兄弟节点。后代一个节点的子节点的结合可以称为是该节点的后代(descendant)。例如，<head>和<body>就是<html>的后代，<h3>和<b>就是<body>的后代。叶子节点在树形结构最底部的节点称为叶子节点。例如，“标题内容”、“3号标题”和“加粗内容”都是叶子节点。在了解节点后，下面将介绍文档模型中节点的三种类型。元素节点：在HTML中，<body>、<p>、<a>等一系列标记，是这个文档的元素节点。元素节点组成了文档模型的语义逻辑结构。文本节点：包含在元素节点中的内容部分，如<p>标签中的文本等等。一般情况下，不为空的文本节点都是可见并呈现于浏览器中的。属性节点：元素节点的属性，如<a>标签的href属性与title属性等等。一般情况下，大部分属性节点都是隐藏在浏览器背后，并且是不可见的。属性节点总是被包含于元素节点当中。2．DOM级别W3C在1998年10月标准了DOM第一级，它不仅定义了基本的接口，其中包含了所有HTML接口。在2000年11月标准化了DOM第二级，在第二级中不但对核心的接口升级，还定义了使用文档事件和Css样式表的标准的API。Netscape的Navigator6.0浏览器和Microsoft的InternetExplorer5.0浏览器，都支持了W3C的DOM第一级的标准。目前，Netscape、Firefox（FF火狐浏览器）等浏览器已经支持DOM第二级的标准，但InternetExplorer（IE）还不完全支持DOM第二级的标准在DOM中通过使用节点属性可以对各节点进行查询，查询出各节点的名称、类型、节点值、子节点和兄弟节点等。DOM常用的节点属性如表15-9所示。表15-9 DOM常用的节点属性15.4.2DOM对象结点属性属性说明nodeName节点的名称nodeValue节点的值，通常只应用于文本节点nodeType节点的类型。parentNode返回当前节点的父节点。childNodes子节点列表firstChild返回当前节点的第一个子节点lastChild返回当前节点的最后一个子节点previousSibling返回当前节点的前一个兄弟节点nextSibling返回当前节点的后一个兄弟节点attributes元素的属性列表1．访问指定节点使用getElementById方法来访问指定id的节点，并用nodeName属性、nodeType属性和nodeValue属性来显示出该节点的名称、节点类型和节点的值。【例15-15】本示例在页面弹出的提示框中，显示了指定节点的名称、节点的类型和节点的值。代码如下：<head><title>访问指定节点</title></head><bodyid="b1"><h3>三号标题</h3><b>加粗内容</b><scriptlanguage="javascript"> <!-- varby=document.getElementById("b1"); //访问id为“b1”的节点 varstr; str="节点名称:"+by.nodeName+"\n"; //获取节点名称 str+="节点类型:"+by.nodeType+"\n"; //获取节点类型 str+="节点值:"+by.nodeValue+"\n"; //获取节点值 alert(str); //弹出显示对话框 --></script></body>程序运行结果如图15-24所示。图15-24显示指定节点名称、类型和值2．遍历文档树遍历文档树通过使用parentNode属性、firstChild属性、lastChild属性、previousSibling属性和nextSibling属性来实现。【例15-16】本实例在页面中，通过相应的按钮可以查找到文档的各个节点的名称、类型和节点值。代码如下：<head><title>遍历文档树</title></head><body><h3id="h1">三号标题</h3><b>加粗内容</b><formname="frm"action="#"method="get">节点名称：<inputtype="text"id="na"/><br/>节点类型：<inputtype="text"id="ty"/><br/>节点的值：<inputtype="text"id="va"/><br/><inputtype="button"value="父节点"onclick="txt=nodeS(txt,'parent');"/><inputtype="button"value="第一个子节点"onclick="txt=nodeS(txt,'firstChild');"/><inputtype="button"value="最后一个子节点"onclick="txt=nodeS(txt,'lastChild');"/><br><inputname="button"type="button"onclick="txt=nodeS(txt,'previousSibling');"value="前一个兄弟节点"/><inputtype="button"value="最后一个兄弟节点"onclick="txt=nodeS(txt,'nextSibling');"/><inputtype="button"value="返回根节点"onclick="txt=document.documentElement;txtUpdate(txt);"/></form><scriptlanguage="javascript">functiontxtUpdate(txt) window.document.frm.na.value=txt.nodeName; //获取节点名称 window.document.frm.ty.value=txt.nodeType; //获取节点类型 window.document.frm.va.value=txt.nodeValue; //获取节点的值 functionnodeS(txt,nodeName) //判断当用户单击不同的按钮显示相应的节点信息 switch(nodeName) case"previousSibling": if(txt.previousSibling) txt=txt.previousSibling; }else alert("无兄弟节点"); break; case"nextSibling": if(txt.nextSibling) txt=txt.nextSibling; }else alert("无兄弟节点"); break; case"parent": if(txt.parentNode) txt=txt.parentNode; }else alert("无父节点"); break; case"firstChild": if(txt.hasChildNodes()) txt=txt.firstChild; }else alert("无子节点");break; case"lastChild": if(txt.hasChildNodes()) { txt=txt.lastChild; }else alert("无子节点") break; } txtUpdate(txt); returntxt; } vartxt=document.documentElement; txtUpdate(txt); functionar() { varn=document.documentElement; alert(n.length); } --></script></body>运行结果如图15-25和图15-26所示。图15-25当前文档的根节点图15-26当前文档的第一个子节点1．节点的创建创建新节点创建新的节点先通过使用文档对象中的createElement()方法和createTextNode()方法，生成一个新元素，并生成文本节点。最后通过使用appendChild()方法将创建的新节点添加到当前节点的末尾处。appendChild()方法将新的子节点添加到当前节点的末尾。语法：obj.appendChild（newChild）参数newChild表示新的子节点。15.4.3节点的几种操作【例15-17】本示例在页面回载后自动显示“创建新节点”文本内容，并通过使用<b>标记将该文本加粗。代码如下：<bodyonload="createChild()"><scriptlanguage="javascript"> <!-- functioncreateChild() { varb=document.createElement("b"); //创建新生成的节点元素 vartxt=document.createTextNode("创建新节点！"); //创建节点文本 //将新结点b添加到页面上 b.appendChild(txt); document.body.appendChild(b); } --></script></body>运行结果如图15-27所示。图15-27创建新节点创建多个节点创建多个节点通过使用循环语句，利用createElement()方法和createTextNode()方法生成新元素并生成文本节点。最后通过使用appendChild()方法将创建的新节点添加到页面上。【例15-18】本示例在页面加载后，自动创建多个<p>节点，并每个节点中显示不同的文本内容。代码如下：<bodyonload="dc()"><scriptlanguage="javascript"><!-- functiondc() { varaText=["第一个节点","第二个节点","第三个节点","第四个节点","第五个节点","第六个节点"]; for(vari=0;i<aText.length;i++) //遍历节点 { varce=document.createElement("p"); //创建节点元素 varcText=document.createTextNode(aText[i]); //创建节点文本 //将新结点添加到页面上 c

人人文库> 全部分类> 应用文书 > 事务文书

温馨提示

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

最新文档

评论

0/150

提交评论