第5章客户端脚本编程课件

第5章 客户端脚本编程关于客户端脚本在网页中嵌入的脚本有两种类型：一种是在服务器端执行的，由服务器将脚本执行的结果传递给浏览器，称为服务器端脚本。例如，要读取服务器上某个数据库中的一部分内容，这样的程序代码需要在服务器上执行。另外一种是在客户端浏览器上执行的，它是由服务器将脚本的内容传送给浏览器，再由浏览器执行，称为客户端脚本。例如，让一幅图片窗口中不断移动。不同脚本处理方式示意html文档服务器端脚本客户端脚本html文档服务器端浏览器端客户端脚本传送执行结果传送源代码本章内容 浏览器支持的对象模型 窗口对象的使用 文档对象的使用 常用事件的处理 表单元素的使用本章目录5.3 控制浏览器窗口 5.2 浏览器对象模型5.3.1 与用户交互 5.3.2 查阅当前URL 5.3.3 使用定时器 5.4 控制Web页 5.5 常见事件处理 5.3.5 打开一个新窗口 5.3.4 使用窗口的History列表 5.3.6 窗口的事件控制 5.1 客户端脚本 5.6 表单处理 5.7 应用举例 本章小结 习题5.1 客户端脚本 由于客户端提供的都是以对象的形式出现的，所以在这里先介绍以下几个概念。1对象 2事件 3事件过程1对象 浏览器上显示的每个文档都可以看作一个对象，显示该文档的窗口也可以看作一个对象，组成每一个网页的各种元素也可以看成是一个对象。1对象 每个对象都有一些属性、事件和方法。对象的属性用于体现对象的表现形式和操作特性。在浏览器所支持的对象模型中，各种对象中往往包含一些子对象，对于子对象的使用是通过对它的相应属性的操作来实现。每个对象可以接受一些事件，如鼠标的单击、聚焦等。每个对象也有一些方法，用于操作该对象或其中的子对象。2事件 对于网页中的各种对象，能响应一些事件，编写网页时通过编写事件过程就可以控制用户的操作。如当用户单击表单中的按钮时，引发该按钮的单击事件。3事件过程当某一事件发送时，系统能自动执行事先编写好的程序过程，这样的程序过程称为事件过程可以使用以下三种方式来为某个对象指出当某一事件发生时该执行的程序指定名称的事件过程 在对象标签中直接嵌入执行代码 指定脚本所对应的事件过程 指定名称的事件过程 即定义一个具有特殊名称的过程，它与对象相联系，形式为：对象名称_事件名称例如：B1_onClick表示对于对象B1，当单击事件（Click）发生时执行该过程。指定名称的事件过程 网页内容 显示按钮指定名称的事件过程 浏览结果双击网页文件时首先显示如左图单击其中按钮时，显示如右图提示单击这里测试一下在对象标签中直接嵌入执行代码 当执行的代码较短时，可以不定义单独的过程，而直接把要执行的语句嵌入作为事件名称的属性。网页改为如下形式：单击这里测试一下指定脚本所对应的事件过程指使用标签的for属性指出脚本所面向的对象，而用event属性指出引用脚本的事件。网页形式如下：MsgBox 你单击了这个按钮。单击这里测试一下返回本章目录5.2 浏览器对象模型VBScript和其它脚本语言一样，可以方便地访问浏览器所支持的对象模型中的各种对象。窗口（WINDOW）超链接（LINK）框架（FRAME）历史（HISTORY）文档（DOCUMENT脚本（script）导航器（NAVIGATOR位置（LOCATION）表单（form）元素（ELEMENT页内链接(ANCHOR)5.2 浏览器对象模型浏览器所支持的对象包括：1窗口 2框架 3历史 4文档 5事件（Event）6导航器 7位置对象 1窗口 窗口对象（WINDOW）是最外层的对象，可以看到在窗口对象中有一个文档对象（DOCUMENT），文档中又有一些表单（form），表单中又有一些表单元素（ELEMENT）等等。窗口对象包含有许多属性、方法和事件。2框架 窗口可以包含一个或多个框架（Frame），这取决于你是否在Web页中使用了标签。在Frames数组中包含了一个你所定义的框架元素（从0开始编号）。例如，下面的语句获取窗口中每个框架的名字。For intI=0 to frames.length-1 Strname=frames(intI).nameNext由于以上语句总是用在某个框架中，实际使用时在frames前加“parent.”，请看例子。单击这里测试一下3历史 每个窗口都有一个历史对象（History），它包含着在这个窗口中显示过的每个Web页的列表。4文档 模型中的另一个主要对象是文档，它代表了在实际窗口所看到的Web页，包括在该页上所看到的文本、链接、表单等等。一个文档对象包含大量的属性和方法。对此将在第4小节中作一讨论。5事件（Event）一个Event对象会在每次事件发生时自动产生，它提供了关于事件的有价值的信息，并且可以作为window对象的一个属性进行访问。6导航器 每个窗口都有一个导航器（Navigator）对象，它包含了Web浏览器的信息。包括浏览器程序名称（AppName），浏览器版本号（AppVersion），所有用户信息(userAgent)等属性。7位置对象 每个窗口都有一个位置对象，定义了它所包含Web页的URL（网页地址）。当使用框架将一个窗口分成几个部分时，每一个部分可以看成是一个窗口对象。因为，在每个部分中可以装入一个网页文件。返回本章目录5.3 控制浏览器窗口 在脚本语言中，使用浏览器所支持的各种对象的有关属性、事件和方法，可以实现许多实际的应用，本节主要讨论WINDOW对象中除文档对象外的其它对象的使用。文档对象的使用将在下一节中讨论。一个窗口对象包含有许多属性、方法和事件，通过使用窗口对象的属性、方法和事件，可以实现各种实际的应用。窗口对象的属性、方法和事件属性：Name parent self top location defaultstatus status frames history navigator document screen 方法：Alert confirm prompt open close setTimeout clearTimeout navigator 事件 OnLoad onUnload onbeforeunload onblur onerror onfocus onhelp onresize onscroll 5.3 控制浏览器窗口 以下分别讨论5.3.1 与用户交互 5.3.2 查阅当前URL 5.3.3 使用定时器 5.3.4 使用窗口的History列表 5.3.5 打开一个新窗口 5.3.6 窗口的事件控制 5.3.1 与用户交互 可以用窗口对象的alert和confirm方法来代替MsgBox函数，或者用窗口对象的prompt方法代替InputBox函数，来实现和用户的直接交互。1Alert 方法 2Confirm 方法 3Prompt 方法1 Alert 方法 窗口对象的alert 方法用于向用户显示一个消息框，其使用格式如下：alert 提示字符串例：单击这里测试一下2 Confirm 方法 窗口对象的Confirm方法用于向用户提出一个回答为“是”或“否”的问题。其使用形式为：Result=confirm 提示字符串当执行到这一行时，如果用户选择确定，返回TRUE，如果用户选择取消，则返回FALSE。Confirm 方法举例 网页内容 if confirm(你希望继续吗?)then alert 你选择了继续 else alert 你选择了结束 end if Confirm 方法举例 浏览结果本例浏览时将首先显示如左图所示的提示框。当单击确定时，显示如右图所示的提示框。单击这里测试一下3Prompt 方法 窗口对象的prompt方法允许用户输入一个字符串。使用格式如下：result=prompt 提示字符串，初始值用result 存放用户输入的字符串，当用户单击取消时返回空。Prompt 方法举例 网页内容Prompt 方法举例 浏览结果本例浏览时首先显示如左图所示的输入框，若此时单击取消，则显示如右图所示的提示框。单击这里测试一下5.3.2 查阅当前URL 窗口对象中location对象包含许多属性，通过这些属性，可以获得有关当前窗口的URL（统一资源定位器）信息。如下例所示。5.3.2 查阅当前URL 网页内容 strOutput=location:&location&vbCrLf stroutput=stroutput&协议：&location.protocol&vbCrLf stroutput=stroutput&主 机 地 址：&location.host&vbCrLf stroutput=stroutput&主 机 名 称：&location.hostname&vbCrLf stroutput=stroutput&端 口 号：&location.port&vbCrLf stroutput=stroutput&路 径 名：&location.pathname MsgBox stroutput协议名5.3.2 查阅当前URL 浏览结果其中：protocol表示协议，hostname表示主机名，port表示端口，pathname表示路径名。左图是双击网页文件时的显示，右图是浏览器中输入地址后的显示。单击这里测试一下5.3.3 使用定时器 通 过 窗 口 对 象 的 setTimeOut和ClearTimeout方法，可以使用定时器来控制某些对象的动作。如让状态行上显示当前时间、显示滚动的文字，让某一图片按一定的速度移动等等。5.3.3 使用定时器 SetTimeOut的使用格式如下：创建的时钟标识=settimeout(“过程名”,间隔时间,“脚本语言名称”)其中，间隔时间以毫秒为单位，即1000毫秒为1秒。作用是当指定的时间间隔到来时，自动调用指定的过程。5.3.3 使用定时器 ClearTimeout的作用是清除设置的时钟，其使用格式为：ClearTimeout 时钟标识使用定时器举例 网页内容 dim TimerID sub updatestatus cleartimeout TimerID status=time TimerID=settimeout(updatestatus,100,”VBScript”)end sub TimerID=settimeout(updatestatus,100,”VBScript”)设置时钟清除时钟状态行显示时钟等待时间到使用定时器举例 浏览结果本例中采用每100毫秒更新一次状态行的内容，即将新的时间值显示在状态行上。浏览结果如图。单击这里测试一下5.3.4 使用窗口的History列表 窗口对象中的History对象有forward、back和go等三个方法，分别可以在历史的列表中进行向前，向后和定位到某一页。可以通过length求得历史列表的长度。当使用框架时，使用History对象非常有效。5.3.5 打开一个新窗口 窗口对象的open方法用以打开一个新的窗口，并同时装入一个Web页，使用形式如下：open 网页地址，新窗口名称，窗口参数窗口参数用于指出新打开的窗口具有的特性，包括：是否有工具条（toolbar），是否有地址栏(location)，是否有目录（directories），是否有状态行(status)，是否有菜单行（menubar），是否有滚动条(scrollbars)，及窗口是否可以改变大小（resizeable）窗口宽度和高度（width,height）等。5.3.5 打开一个新窗口 例如：window.open L5_8.html,MyWindow,toolbar=no,status=yes,width=250,height=100将打开一个没有工具条和地址栏的新窗口，显示网页L5_8.html。5.3.5 打开一个新窗口 打开的新窗口如图所示。它没有工具条也没有地址栏。5.3.6 窗口的事件控制 使用窗口的事件，可以实现一些功能。以下代码实现当用户关闭窗口或从本网页转到另一网页时显示再见信息：sub window_onbeforeunload()alert(再见！)end sub返回本章目录单击这里测试一下5.4 控制Web页 文档对象有许多属性和方法，通过这些属性和方法的使用，可以控制Web页的显示。文档对象的主要属性有：LinkColor aLinkColor vLinkColor bgColor fgColor anchors links forms location lastModified title cookie referrer 5.4 控制Web页 文档对象的主要事件有：Onafterupdate onbeforeupdate onclick ondblclickondragstart onerrorupdateerror onhelp onkeydown onkeypress onkeyup onmousedown onmousemove onmouseout onmouseup onreadystatechange onrowenter onrowexit onselectstart 5.4 控制Web页 文档对象的主要方法有：Write writeln close clear open 以下通过一些例子来说明这些属性和方法的使用。1 显示页内链接目标的名称网页内容 第一个Anchor第一章内容 第二个anchor第二章内容 第三个anchor第三章内容定义了三个页内链接目标逐个显示三个页内链接目标的名称1 显示页内链接目标的名称浏览结果单击这里测试一下1 显示页内链接目标的名称用类似的方法可以获得网页中定义的各超链接的有关信息。如第一个链接的地址可写成如下形式：document.links(0).href其 中：href 为 地 址，其 它 的 还 有protocol、hostname、Port和Pathname，分别表示协议、主机名、端口和路径名等。2改变文档的背景色 网页内容 document.bgcolor=document.abc.text.value2改变文档的背景色 浏览结果浏览时窗口中将出现一个文本框和命令按钮，当输入表示颜色的值“00ff00”，并单击“改变颜色”按钮后，显示如图所示，其中背景为绿色。单击这里测试一下2改变文档的背景色 浏览结果如在文本框中输入“YELLOW”，并单击“改变颜色”按钮后，显示如图所示，其中背景为黄色。用类似的方法可以改变文件的fgColor、linkColor、aLinkColor、vLinkColor等颜色。3文档的事件控制 使用文档对象的事件，可以实现许多功能。以下是实现了让用户不能选取网页中的文字的代码。function Document_onselectstart()alert(不能选择其中的文字！)window.event.returnvalue=falseend function这是不能被选中的文字！单击这里测试一下4表单的递交 在表单递交前进行必要的数据检查，可以减少不必要的网络传输。如图在显示表单后，若用户没有输入姓名时就直接单击提交按钮，这时应让系统显示如右图提示框，而不直接提交。具体地有三种方式可以实现（1）指定表单的递交处理代码 网页内容 请输入你的姓名：调用函数在后面定义（1）指定表单的递交处理代码 网页内容（续）function isformvalid if form1.T1.valueempty then isformvalid=True else alert 你没有在文本框中输入姓名。isformvalid=False end if end function 4表单的递交 本例浏览时，首先显示窗口如左图所示，当用户没有在文本框中输入内容时直接按提交，这时将显示如右图所示的提示框，并取消提交操作。单击这里测试一下（2）改写递交事件过程 网页内容 function form1_onSubmit()set theform=Document.form1 if theform.txt1.value=then Msgbox 你没有在文本框中输入姓名。form1_onSubmit=False end if end function 请输入你的姓名：单击这里测试一下（3）用按钮控制表单的递交 网页内容 请输入你的姓名：if form1.T1.valueempty then form1.submit else alert 你没有在文本框中输入姓名。end if 单击这里测试一下三种方式比较对于本例中的代码，尽管单击按钮时将进行数据检查，合法后提交，不合法显示对话框。但是，当在文本框中直接按回车时，会跳过这一处理而直接提交。返回本章目录5.5 常见事件处理 各种对象有不同的事件集合，以下通过举例来说明以下常用的几个事件的使用。1处理onFocus事件 2处理onmouseover事件 3处理onkeypress事件 4处理onChange事件5处理onselect事件 1处理onFocus事件 对象获得焦点时将发生onFocus事件。如单击文本框准备输入时将发生该事件。请看下例：sub T1_onFocus status=请输入姓名 end sub 鼠标在T1中时状态行显示“请输入姓名”1处理onFocus事件 浏览时显示如图：单击这里测试一下2处理onmouseover事件 当鼠标移过某一对象时，就会发生这一事件。dim i i=i+1 alert 鼠标第&i&次移过了B1按钮.试试把鼠标移过该 2处理onmouseover事件 本例中，当鼠标第1次移过按钮时，显示“鼠标第1次移过B1按钮”，再次移过时显示如图：类似的事件有onmousedown、onmouseup、onmouseout、onmousemove 等分别表示鼠标按下、鼠标释放、鼠标移出和鼠标移动。单击这里测试一下3处理onkeypress事件 当从键盘上按下键时，就会发生此事件。通过它可以实现字符的屏蔽。如下例：一个不能输入引号的文本框：单击这里测试一下输入双引号时3处理onkeypress事件 本例中当在文本框中输入引号时，通过脚本来控制取消该符号。同样，可以编写出只允许输入数字的文本框，只允许输入字母的文本框等。类似的事件有onkeydown和onkeyup，分别表示键盘按下和键盘释放。4处理onChange事件当文本框中内容改变后，若焦点移出文本框，则发生该事件。sub T1_onChange alert 你改变了文本框的内容 end sub 4处理onChange事件本例中显示一个文本框，当改变文本框并将焦点移向其它位置时，显示一对话框。本事件只有当焦点移出文本框对象时才发生。验证本例中代码时，先在文本框中修改原有内容，然后在窗体的其它位置单击即可。单击这里测试一下5处理onselect事件当在文本框中选取文字时，发生该事件。供选择用的文本框：5处理onselect事件本例浏览时，可以先在文本框中输入一些内容，再通过键盘或鼠标选取其中的内容，这时，将显示结果如图所示。单击这里测试一下返回本章目录5.6 表单处理 表单处理的主要内容是获取某一表单域的内容或将某一内容放入表单域。这里，关键是要知道各种类型的表单域分别有哪些属性，及可以使用哪些方法。以下列出了各种类型表单元素所具有的常用属性、事件和方法。命令按钮元素类型：Button 属性：form name value enabled 方法：Click focus 事件：onclick onFocus 复选框元素类型：Check 属性：form name value checked defaultcheck enabled 方法：Click focus 事件：onclick onFocus 单选按钮元素类型：Radio属性：form name value checked enabled 方法：Click focus 事件：onclick onFocus 密码输入框元素类型：Password属性：form name value defaultValue enabled 方法：Focus blur select 事件：onclick onFocus 单行文本输入框元素类型：Text 属性：form name value defaultValue enabled 方法：Focus blur select 事件：OnFocus onBlur onChange onSelect 文本区域元素类型：Textarea 属性：form name value defaultValue enabled 方法：Focus blur select 事件：OnFocus onBlur onChange onSelect 下拉列表框元素类型：Select 属性：Name length options selectindex方法：Focus blur 事件：Onfocus onblur onchange onselect onclick 隐藏对象元素类型：Hidden 属性：Name value 方法：事件：获取表单域的内容 要获取表单域的内容的一般形式如下：Document.myform.myfield.property其中：myform为表单名称，myfield为表单域名称，property为属性名称。如想得到表单“abc”中的名称为“T1”的文本框的值。可使用如下形式：Document.abc.T1.value获取同名对象的值当表单中有相同名称的对象时，各对象的引用可使用数组形式。如一组单选按钮，它们的名称一定是相同的，为了测试是哪一个被选中，可使用循环逐个判断它的checked属性，循环的次数可以用对象的length属性来控制，如例所示。获得一个单选按钮选择 网页内容 sub rr for i=0 to form1.R1.length-1 if form1.R1(i).checked then alert 你选择了&form1.R1(i).value end if next end sub对表单中的各单选按钮R1(i)进行逐个判断，若其checked属性为真，表示它是被选中的，则输出其值。获得一个单选按钮选择 网页内容 你的爱好是：养猫养狗养鸟养鱼 定义了四个单选按钮获得一个单选按钮选择 为每一个单选按钮设置了onclick事件所要执行的代码，即调用名称为rr的子过程。在子过程中对表单中的各单选按钮R1(I)进行逐个判断，若其checked属性为真，表示它是被选中的，此时输出其对应的值。单击这里测试一下获得一个单选按钮选择 在判断各个元素时，也可以使用for each循环来实现。即把函数rr改写成如下形式。sub rr for each i in form1.R1 if i.checked then alert 你选择了&i.value end if next end sub获得一个单选按钮选择 另一种方式是把单选按钮作为参数传递给函数，这样在函数中只需直接输出其值了。即把函数改为：sub rr(ra)alert 你选择了&ra.valueend sub各单选按钮的定义形式改为：养猫其中的me表示对象自身。单击这里测试一下获得一个列表框的选择 对于列表框来说，当用户进行选择时，将发生onchange（改变）事件，通过这一事件，可以输出实际选择的内容。sub lst_onchange alert 你的爱好是：&form1.lst.value end sub 你的爱好是：获得一个列表框的选择 你的爱好是：养猫 养狗 养鸟 养鱼 获得一个列表框的选择 本例浏览时首先显示如右图所示的下拉列表框，当选择“养鸟”时将显示如右图所示信息框。单击这里测试一下返回本章目录5.7 应用举例 客户端脚本编程的实际例子非常多，但作为一个实用的例子，往往除了实现功能本身之外，还要加上许多防止用户操作产生错误的控制代码，因此，往往篇幅较大，不适合于作为教材中使用，本节只介绍几个小的例子，更进一步的讨论请参见有关的书籍。例1：购物总价计算 网页内容sub total()t=0for i=0 to document.forms(0).c1.length-1 if document.forms(0).c1(i).checked then if isnull(document.forms(0).t1(I).value)then alert“你没有正确输入所选商品的价格！”else t=t+document.forms(0).t1(i).value end if end ifnext document.forms(0).t2.value=tend sub计算总价的函数例1：购物总价计算 网页内容商品选构 书  价格 鞋  价格 食品 价格 定义表单计算总价的按钮例1：购物总价计算 本例设置了一组复选按钮让用户选择相应的商品，为每一商品设置了一个文本框，用于让用户输入对应的价格，提交前单击“总价”按钮，可以计算出所选商品的总价。浏览结果如图所示。单击这里测试一下例2：菜单的动态改变 本例试图通过把用户输入的文本作为列表框中的选项，实现动态地改变列表框的内容。当列表框中的项目个数超过5时，例中将第1项删除。例2：菜单的动态改变 网页内容 动态改变的菜单项 第一个菜单项 菜单列表框文本框按钮以下是单击按钮的处理函数例2：菜单的动态改变 网页内容if form1.T1.valueempty then set e=document.createElement(option)document.form1.abc.add e e.text=form1.T1.value e.value=form1.T1.value if document.form1.abc.length5 then document.form1.abc.remove 0 end if else alert 文本框中不能为空。end if建立对象添加对象设置新对象属性删除列表中第一项例2：菜单的动态改变 本例中使用了文档对象的CreateElement方法，通过它可以动态地建立列表框中的表项对象“option”，形式为：set e=document.createElement(“option”)例中接着使用列表框对象的add方法，把表项对象添加到列表框中，形式为：document.form1.abc.add e其中：form1为表单名称，abc为列表框名称，e为动态建立的表项对象的名称。例2：菜单的动态改变 表项对象有两个属性，即value(值)和text(文本)，对应如下形式：文本例中对两个属性分别进行赋值。最后再通过列表框的length属性求列表框中列出的项目个数，若其值大于5，则使用列表框的remove方法删除最前面的一个元素。形式如下：document.form1.abc.remove 0其中form1为表单名，abc为列表框名。例2：菜单的动态改变 浏览时可在文本框中逐一输入要添加的选项名称，单击“添加”后，再选择下拉列表框，可得到如图所示的结果。单击这里测试一下例3：动态设置命令按钮的标题 网页内容课程表输入sub setb(vv)for each i in document.abc.R1 if i.checked=true then vv.value=i.value end if nextend sub定义子程序将选中按钮的值作为参数对象的值例3：动态设置命令按钮的标题 网页内容 星期一 星期二 星期三 星期四 星期五 定义表格的表头例3：动态设置命令按钮的标题 网页内容（用脚本形成表格其余部分）for j=1 to 5 document.write select case j case 1 document.write 上午1-2节 case 2 document.write 3-4节 case 3 document.write 下午5-6节 case 4 document.write 7-8节 case 5 document.write 晚 上 end select 共5行形成各行中第一列内容例3：动态设置命令按钮的标题 网页内容（用脚本形成表格其余部分）for i=1 to 5 document.write next next计991、2班  信 981  东大远程 分5列每个单元格中放置一个按钮放置三个单选按钮例3：动态设置命令按钮的标题 网页内容（续）例3：动态设置命令按钮的标题 本例首先显示一个空白的课程表，并所列出供选择的班级，用户选择班级后再单击课程表中的各位置，这时，所选班级名称将出现在表中，如图所示。单击这里测试一下例3：动态设置命令按钮的标题 本例各按钮在调用子过程setb时使用了一个参数me，它把按钮自身作为参数传递给子过程。返回本章目录本章小结 本章介绍了：浏览器支持的各种对象所具有的属性、方法和事件；以及在脚本语言中如何使用这些属性、方法和事件；实现与用户的交互；实现对浏览器窗口的控制；实现对网页的控制。返回本章目录习题1请观察以下网页代码的输出。学习VBScript你好 document.write“我学习VBScript”sub window_Onload()msgbox“欢迎你!”End sub习题2请改写例5-22中的代码，能实现删除按钮上的显示。（提示，可以另外放置一个复选框指出是否删除状态，在子过程中根据它的选中状态确定相应的操作）。3例5-20中的代码，当在输入价格的文本框中输入字符时，将产生错误，请修改该网页，当输入不正确时，给出提示。习题4设计一个简单的算术考试程序，首先用随机函数产生一个简单的算术式显示在文本框中，等待用户在另一文本框中输入答案，同时打开定时器，控制每题的答题时间，当用户输入答案后单击完成，程序自动判断正确性，并显示得分。返回本章目录