Document

Download Report

Transcript Document 

第5章 客户端脚本编程
关于客户端脚本
• 在网页中嵌入的脚本有两种类型：
– 一种是在服务器端执行的，由服务器将脚本
执行的结果传递给浏览器，称为服务器端脚
本。例如，要读取服务器上某个数据库中的
一部分内容，这样的程序代码需要在服务器
上执行。
– 另外一种是在客户端浏览器上执行的，它是
由服务器将脚本的内容传送给浏览器，再由
浏览器执行，称为客户端脚本。例如，让一
幅图片窗口中不断移动。
不同脚本处理方式示意
服务器端
浏览器端
传送执行结果
服务器端脚本
html文档
客户端脚本
html文档
客户端脚本
传送源代码
本章内容
• 浏览器支持的对象模型
• 窗口对象的使用
• 文档对象的使用
• 常用事件的处理
• 表单元素的使用
本章目录
5.4 控制Web页
5.1 客户端脚本
5.5 常见事件处理
5.2 浏览器对象模型
5.6 表单处理
5.3 控制浏览器窗口
5.7 应用举例
5.3.1 与用户交互
本章小结
5.3.2 查阅当前URL
习题
5.3.3 使用定时器
5.3.4 使用窗口的History列表
5.3.5 打开一个新窗口
5.3.6 窗口的事件控制
5.1 客户端脚本
• 由于客户端提供的都是以对象的形式出
现的，所以在这里先介绍以下几个概念。
1．对象
2．事件
3．事件过程
1．对象
• 浏览器上显示的每个文档都可以看作一
个对象，显示该文档的窗口也可以看作
一个对象，组成每一个网页的各种元素
也可以看成是一个对象。
1．对象
• 每个对象都有一些属性、事件和方法。
• 对象的属性用于体现对象的表现形式和操作特
性。在浏览器所支持的对象模型中，各种对象
中往往包含一些子对象，对于子对象的使用是
通过对它的相应属性的操作来实现。
• 每个对象可以接受一些事件，如鼠标的单击、
聚焦等。
• 每个对象也有一些方法，用于操作该对象或其
中的子对象。
2．事件
• 对于网页中的各种对象，能响应一些事
件，编写网页时通过编写事件过程就可
以控制用户的操作。如当用户单击表单
中的按钮时，引发该按钮的单击事件。
3．事件过程
• 当某一事件发送时，系统能自动执行事
先编写好的程序过程，这样的程序过程
称为事件过程
• 可以使用以下三种方式来为某个对象指
出当某一事件发生时该执行的程序
–指定名称的事件过程
–在对象标签中直接嵌入执行代码
–指定脚本所对应的事件过程
指定名称的事件过程
• 即定义一个具有特殊名称的过程，它与
对象相联系，形式为：
对象名称_事件名称
• 例如：
B1_onClick
• 表示对于对象B1，当单击事件（Click）
发生时执行该过程。
指定名称的事件过程
•网页内容
<html>
<script language="VBScript">
<!-Sub B1_onClick
MsgBox "你单击了这个按钮。"
显示按钮
End Sub
-->
</script>
<form> <input name="B1" type="button" value=" 单 击
这里"></form>
</html>
指定名称的事件过程
•浏览结果
双击网页文件时首先显示如左图
单击其中按钮时，显示如右图提示
单击这里
测试一下
在对象标签中直接嵌入执行代码
• 当执行的代码较短时，可以不定义单独的过程，
而直接把要执行的语句嵌入作为事件名称的属性。
网页改为如下形式：
<html>
<form>
<input name="B1" type="button" value="单击这里"
onclick='MsgBox " 你 单 击 了 这 个 按 钮 。 " '
language="VBScript">
</form>
</html>
单击这里
测试一下
指定脚本所对应的事件过程
• 指使用<script>标签的for属性指出脚本所面向
的对象，而用event属性指出引用脚本的事件。
网页形式如下：
<html>
<script language="VBScript“
for="B1" event="onclick">
MsgBox "你单击了这个按钮。"
</script>
<form>
<input name="B1" type="button" value="单击这里">
</form>
单击这里
</html>
返回本
章目录
测试一下
5.2 浏览器对象模型
VBScript 和
其它脚本语
言一样，可
以方便地访
问浏览器所
支持的对象
模型中的各
种对象。
窗口（WINDOW）
框架（FRAME）
历史（HISTORY）
导航器（NAVIGATOR
位置（LOCATION）
脚本（script）
文档（DOCUMENT
超链接（LINK）
页内链接(ANCHOR)
表单（form）
元素（ELEMENT
5.2 浏览器对象模型
• 浏览器所支持的对象包括：
1．窗口
2．框架
3．历史
4．文档
5．事件（Event）
6．导航器
7．位置对象
1．窗口
• 窗口对象（WINDOW）是最外层的对象，
可以看到在窗口对象中有一个文档对象
（DOCUMENT），文档中又有一些表单
（ form）， 表 单 中 又 有 一 些 表 单 元 素
（ELEMENT）等等。窗口对象包含有许
多属性、方法和事件。
2．框架
• 窗口可以包含一个或多个框架（Frame），这
取决于你是否在Web页中使用了<Frameset>标
签。在Frames数组中包含了一个你所定义的框
架元素（从0开始编号）。例如，下面的语句
获取窗口中每个框架的名字。
For intI=0 to frames.length-1
Strname=frames(intI).name
Next
单击这里
测试一下
由于以上语句总是用在某个框架中，实际使用时在
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函数，来实现和
用户的直接交互。
1．Alert 方法
2．Confirm 方法
3．Prompt 方法
1． Alert 方法
• 窗口对象的alert 方法用于向用户显示一个消息
框，其使用格式如下：
alert 提示字符串
单击这里
• 例：
测试一下
<html>
<script language="VBScript">
<!-alert "这是可以代替MsgBox函数的提示框"
-->
</script>
</html>
2． Confirm 方法
• 窗口对象的Confirm方法用于向用户提出
一个回答为“是”或“否”的问题。其
使用形式为：
Result=confirm 提示字符串
• 当执行到这一行时，如果用户选择确定，
返回TRUE，如果用户选择取消，则返回
FALSE。
Confirm 方法举例
• 网页内容
<html>
<script language="VBScript">
if confirm("你希望继续吗?") then
alert "你选择了继续"
else
alert "你选择了结束"
end if
</script>
</html>
Confirm 方法举例
• 浏览结果
本例浏览时将首先显示如左图所示的提示框。
当单击确定时，显示如右图所示的提示框。
单击这里
测试一下
3．Prompt 方法
• 窗口对象的prompt方法允许用户输入一
个字符串。使用格式如下：
result=prompt 提示字符串，初始值
• 用result 存放用户输入的字符串，当用户
单击取消时返回空。
Prompt 方法举例
• 网页内容
<html>
<script language="VBScript">
<!-strname=prompt("输入你的姓名：","张三")
if isnull(strname) then '若输入框中没有任何符号，
则strName=empty为true
alert "你选择了取消输入"
else
alert "嗨," & strName
end if
-->
</script>
</html>
Prompt 方法举例
• 浏览结果
本例浏览时首先显示如左图所示的输入框，若
此时单击取消，则显示如右图所示的提示框。
单击这里
测试一下
5.3.2 查阅当前URL
• 窗口对象中location对象包含许多属性，
通过这些属性，可以获得有关当前窗口
的URL（统一资源定位器）信息。如下
例所示。
5.3.2 查阅当前URL
• 网页内容
协议名
<html><script language="VBScript">
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
</script></html>
&
&
&
&
&
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 时钟标识
使用定时器举例
• 网页内容
设置时钟
等待时间到
清除时钟
<script language="VBScript">
dim TimerID
sub updatestatus
状态行显示时钟
cleartimeout TimerID
status=time
TimerID=settimeout("updatestatus",100,”VBScript”)
end sub
TimerID=settimeout("updatestatus",100,”VBScript”)
</script>
使用定时器举例
• 浏览结果
–本例中采用每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=y
es,width=250,height=100"
• 将打开一个没有工具条和地址栏的新窗口，
显示网页L5_8.html。
5.3.5 打开一个新窗口
• 打开的新窗口如图所示。它没有工具条
也没有地址栏。
5.3.6 窗口的事件控制
• 使用窗口的事件，可以实现一些功能。
以下代码实现当用户关闭窗口或从本网
页转到另一网页时显示再见信息：
<script language="VBScript">
sub window_onbeforeunload()
单击这里
alert ("再见！")
测试一下
end sub
</script>
返回本
章目录
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． 显示页内链接目标的名称
• 网页内容
定义了三个页
内链接目标
<html>
<a name="喜"> 第一个Anchor</A>第一章内容<BR>
<a name="怒"> 第二个anchor</A>第二章内容<BR>
<a name="哀"> 第三个anchor</a>第三章内容<BR>
<script language="VBScript">
<!-for intindex=0 to document.anchors.length-1
alert document.anchors(intindex).name
next
-->
逐个显示三个页内链
</script>
接目标的名称
</html>
1． 显示页内链接目标的名称
• 浏览结果
单击这里
测试一下
1． 显示页内链接目标的名称
• 用类似的方法可以获得网页中定义的各
超链接的有关信息。如第一个链接的地
址可写成如下形式：
document.links(0).href
• 其 中 ： href 为 地 址 ， 其 它 的 还 有
protocol、hostname
、Port 和
Pathname，分别表示协议、主机名、端
口和路径名等。
2．改变文档的背景色
• 网页内容
<html>
<script
language="VBScript"
for="B1"
event="onclick">
document.bgcolor=document.abc.text.value
</script>
<form name="abc">
<input type="text" name="text">
<input name="B1" type="button" value="改变颜色">
</form>
</html>
2．改变文档的背景色
•浏览结果
浏览时窗口中将出现一个文本框和命令按钮，
当输入表示颜色的值“00ff00”，并单击“改
变颜色”按钮后，显示如图所示，其中背景为
绿色。
单击这里
测试一下
2．改变文档的背景色
• 浏览结果
如在文本框中输入“YELLOW”，并单击“改
变颜色”按钮后，显示如图所示，其中背景
为黄色。
• 用类似的方法可以改
变文件的fgColor、
linkColor、aLinkColor、
vLinkColor等颜色。
3．文档的事件控制
• 使用文档对象的事件，可以实现许多功能。以
下是实现了让用户不能选取网页中的文字的代码。
<html>
<script language="VBScript">
function Document_onselectstart()
alert ("不能选择其中的文字！")
window.event.returnvalue=false
end function
</script>
<body>
这是不能被选中的文字！
单击这里
</body>
测试一下
</html>
4．表单的递交
• 在表单递交前进行必要的数据检查，可以减少
不必要的网络传输。
• 如图在显示表单后，若用户没有输入姓名时就
直接单击提交按钮，这时应让系统显示如右图提
示框，而不直接提交。
• 具体地有三种方式可以实现
（1）指定表单的递交处理代码
•网页内容
调用函数在后面定义
<html>
<form
name="form1"
action="http://localhost/L7_1.asp"
language="javascript"
onsubmit="return
isformvalid()">
请输入你的姓名：
<input name="T1" type="text" size=10>
<input
name="btnsubmit"
type="submit"
value="提交">
（1）指定表单的递交处理代码
•网页内容（续）
<script language="VBScript">
function isformvalid
if form1.T1.value<>empty then
isformvalid=True
else
alert "你没有在文本框中输入姓名。"
isformvalid=False
end if
end function
</script>
</form></html>
4．表单的递交
• 本例浏览时，首先显示窗口如左图所示，
当用户没有在文本框中输入内容时直接
按提交，这时将显示如右图所示的提示
框，并取消提交操作。
单击这里
测试一下
（2）改写递交事件过程
•网页内容
<html><body>
<script language="VBScript">
单击这里
function form1_onSubmit()
测试一下
set theform=Document.form1
if theform.txt1.value="" then
Msgbox "你没有在文本框中输入姓名。"
form1_onSubmit=False
end if
end function
</script><form name="form1">
请输入你的姓名：<input type="text" NAME="txt1">
<input type="submit" value="提交">
</form></body></html>
（3）用按钮控制表单的递交
•网页内容
<html>
<form name="form1" action="http://localhost/L7_1.asp">
请输入你的姓名：
<input name="T1" type="text" size=10>
<input name="B1" type="button" value="提交">
<script language="VBScript" for="B1" event="onClick">
if form1.T1.value<>empty then
form1.submit
else
单击这里
alert "你没有在文本框中输入姓名。"
end if
测试一下
</script></form></html>
三种方式比较
• 对于本例中的代码，尽管单击按钮时将
进行数据检查，合法后提交，不合法显
示对话框。但是，当在文本框中直接按
回车时，会跳过这一处理而直接提交。
返回本
章目录
5.5 常见事件处理
• 各种对象有不同的事件集合，以下通过
举例来说明以下常用的几个事件的使用。
1．处理onFocus事件
2．处理onmouseover事件
3．处理onkeypress事件
4．处理onChange事件
5．处理onselect事件
1．处理onFocus事件
• 对象获得焦点时将发生onFocus事件。如单击
文本框准备输入时将发生该事件。 请看下例：
<html>
<script language="VBScript">
sub T1_onFocus
鼠标在T1中时
status="请输入姓名"
状态行显示
end sub
“请输入姓名”
</script>
<form name="form1">
<input type=text value="张三" name="T1">
<input type=button value=" 显 示 " name="B1"
onclick="alert '喂' & T1.value">
</form></html>
1．处理onFocus事件
• 浏览时显示如图：
单击这里
测试一下
2．处理onmouseover事件
• 当鼠标移过某一对象时，就会发生这一事件。
<html>
<script language="VBscript">
dim i
</script>
<script
language="VBScript"
for="B1"
event="onmouseover">
i=i+1
alert "鼠标第" & i & "次移过了B1按钮."
</script>
<form name="form1">
试试把鼠标移过该
<input name="B1" type="button" value="按钮">
</form></html>
2．处理onmouseover事件
• 本例中，当鼠标第1次移过按钮时，显示
“鼠标第1次移过B1按钮”，再次移过时显
示如图：
单击这里
测试一下
• 类似的事件有onmousedown、onmouseup、
onmouseout、onmousemove 等分别表示鼠
标按下、鼠标释放、鼠标移出和鼠标移动。
3．处理onkeypress事件
•当从键盘上按下键时，就会发生此事件。通过
它可以实现字符的屏蔽。如下例：
<html><body>
<form name="form1" onsubmit="null">
输入双引
一个不能输入引号的文本框：<br>
号时
<input
type="text"
NAME="T1"
language="VBScript"
onKeypress="if window.event.keycode=34 then
window.event.returnvalue=false">
</form>
</body></html>
单击这里
测试一下
3．处理onkeypress事件
•本例中当在文本框中输入引号时，通过脚
本来控制取消该符号。同样，可以编写出
只允许输入数字的文本框，只允许输入字
母的文本框等。
•类似的事件有onkeydown和onkeyup，分别
表示键盘按下和键盘释放。
4．处理onChange事件
• 当文本框中内容改变后，若焦点移出文本框，
则发生该事件。
<html>
<script language="VBScript">
sub T1_onChange
alert "你改变了文本框的内容"
end sub
</script>
<form name="form1">
<input type=text value="张三" name="T1">
<input type=button value="显示内容" name="B1"
onclick="alert '喂' & T1.value">
</form></html>
4．处理onChange事件
• 本例中显示一个文本框，当改变文本框并将焦
点移向其它位置时，显示一对话框。
• 本事件只有当焦点移出文本框对象时才发生。
验证本例中代码时，先在文本框中修改原有内容，
然后在窗体的其它位置单击即可。
单击这里
测试一下
5．处理onselect事件
• 当在文本框中选取文字时，发生该事件。
<html><body>
<form name="form1" onsubmit="null">
供选择用的文本框：<br>
<input
type="text"
NAME="T1"
language="VBScript"
onselect='alert "你准备选择其中的内容"'>
</form>
</body></html>
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属性来控制，如例所示。
获得一个单选按钮选择
• 网页内容
<html>
<script language="VBScript">
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) 进行
</script>
逐个判断，若其checked属性为真，
表示它是被选中的，则输出其值。
获得一个单选按钮选择
• 网页内容
<form name="form1">
你的爱好是：
< input name="R1" type="radio"
onclick="rr()">养猫
< input name="R1" type="radio"
onclick="rr()">养狗
<
input
name="R1"
value="birds"onclick="rr()">养鸟
< input name="R1" type="radio"
onclick="rr()">养鱼
</form>
</html>
定义了四个单
选按钮
value="cats"
value="dogs"
type="radio"
value="fish"
获得一个单选按钮选择
• 为每一个单选按钮设置了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.value
end sub
单击这里
测试一下
• 各单选按钮的定义形式改为：
<
input
name=“R1”
onclick=“rr(me)”>养猫
type=“radio”
• 其中的me表示对象自身。
value=“cats”
获得一个列表框的选择
• 对于列表框来说，当用户进行选择时，将发生
onchange（改变）事件，通过这一事件，可以
输出实际选择的内容。
<html>
<script language="VBScript">
sub lst_onchange
alert "你的爱好是：" & form1.lst.value
end sub
</script>
<form name="form1">
你的爱好是：
获得一个列表框的选择
<form name="form1">
你的爱好是：
<Select name="lst">
<option value="cats">养猫
<option value="dogs">养狗
<option value="birds">养鸟
<option value="fish">养鱼
</select>
</form></html>
获得一个列表框的选择
• 本例浏览时首先显示如右图所示的下拉
列表框，当选择“养鸟”时将显示如右
图所示信息框。
单击这里
测试一下
返回本
章目录
5.7 应用举例
• 客户端脚本编程的实际例子非常多，但
作为一个实用的例子，往往除了实现功
能本身之外，还要加上许多防止用户操
作产生错误的控制代码，因此，往往篇
幅较大，不适合于作为教材中使用，本
节只介绍几个小的例子，更进一步的讨
论请参见有关的书籍。
例1：购物总价计算
• 网页内容
计算总价的
函数
<html><head>
<script language="VBScript">
sub total()
t=0
for 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 if
next
document.forms(0).t2.value=t
end sub
</script>
</head>
例1：购物总价计算
• 网页内容
定义表单
<body>商品选构<hr>
<form method="POST">
<p><input type="checkbox" name="C1" value="ON"> 书
&nbsp&nbsp
价格<input type="text" name="T1" size="8"><br>
<input type="checkbox" name="C1" value="ON"> 鞋
&nbsp&nbsp
价格<input type="text" name="T1" size="8"><br>
<input type="checkbox" 计算总价
name="C1" value="ON"> 食 品
&nbsp
的按钮 size="8"><br>
价格<input type="text" name="T1"
<input
type="button"
value="
总
价
"
onclick="total()">
<input type="text" name="t2" size="10"><br>
<input type="submit" value="提交" name="B1">
<input type="reset" value="重选" name="B2"></p>
</form></body></html>
例1：购物总价计算
• 本例设置了一组复选按钮让用户选择相
应的商品，为每一商品设置了一个文本
框，用于让用户输入对应的价格，提交
前单击“总价”按钮，可以计算出所选
商品的总价。
• 浏览结果如图所示。
单击这里
测试一下
例2：菜单的动态改变
• 本例试图通过把用户输入的文本作为列
表框中的选项，实现动态地改变列表框
的内容。
• 当列表框中的项目个数超过5时，例中将
第1项删除。
例2：菜单的动态改变
• 网页内容
<html>
<form name="form1“>
动态改变的菜单项
文本框 <select name="abc">
<option value="a">第一个菜单项</option> 菜单列
表框
</select>
<input name="T1" type="text" size=40>
<input name="B1" type="button" value="添加">
<
script
language="VBScript"
for="B1"
event="onClick">
按钮
以下是单击按
钮的处理函数
例2：菜单的动态改变
建立对象
• 网页内容
if form1.T1.value<>empty 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.length>5 then
document.form1.abc.remove 0
end if
else
删除列表中
alert "文本框中不能为空。"
第一项
end if
</script>
</form></html>
例2：菜单的动态改变
• 本例中使用了文档对象的CreateElement方法，
通过 它 可以 动 态地 建 立列 表 框中 的 表项 对象
“option”，形式为：
set e=document.createElement(“option”)
• 例中接着使用列表框对象的add方法，把表项对
象添加到列表框中，形式为：
document.form1.abc.add e
• 其中：form1为表单名称，abc为列表框名称，e
为动态建立的表项对象的名称。
例2：菜单的动态改变
• 表项对象有两个属性，即value(值)和text(文本)，
对应如下形式：
<option value=“值”>文本</option>
• 例中对两个属性分别进行赋值。
• 最后再通过列表框的length属性求列表框中列
出的项目个数，若其值大于5，则使用列表框
的remove方法删除最前面的一个元素。形式如
下：
document.form1.abc.remove 0
• 其中form1为表单名，abc为列表框名。
例2：菜单的动态改变
• 浏览时可在文本框中逐一输入要添加的
选项名称，单击“添加”后，再选择下
拉列表框，可得到如图所示的结果。
单击这里
测试一下
例3：动态设置命令按钮的标题
• 网页内容
<html><head>
<title>课程表输入</title>
<script language="VBScript">
sub setb(vv)
for each i in document.abc.R1
if i.checked=true then
vv.value=i.value
end if
next
end sub
</script>
</head>
定义子程序
将选中按钮
的值作为参
数对象的值
例3：动态设置命令按钮的标题
• 网页内容
<body bgcolor="#FFFFFF">
<form method="POST" name="abc">
<table align="center" border="1" width="92%">
<tr align="center">
<td width="18%" colspan="2"> </td>
<th width="17%">星期一 </th>
<th width="15%">星期二 </th>
<th width="16%">星期三 </th>
<th width="16%">星期四 </th>
<th width="18%">星期五 </th>
定义表格的
表头
例3：动态设置命令按钮的标题
•网页内容（用脚本形成表格其余部分）
形成
各行
中第
一列
内容
<script>
共5行
for j=1 to 5
document.write "<tr align='center'>"
select case j
case 1
document.write "<td width='7%' rowspan='2'>上
午</td><td>1-2节</td>"
case 2
document.write "<td>3-4节</td>"
case 3
document.write "<td width='7%' rowspan='2'>下
午</td><td>5-6节</td>"
case 4
document.write "<td>7-8节</td>"
case 5
document.write "<td width='18%' colspan='2'>
晚 上</td>"
end select
例3：动态设置命令按钮的标题
分5列
•网页内容（用脚本形成表格其余部分）
for i=1 to 5
document.write "<td><input type='button' value='
' "
document.write " name='B1' onclick='setb(me)'>"
next
next
每个单元格中
放置三个单选
</script>
放置一个按钮
</table>
按钮
<div align="center"><center><p><input type="radio"
value="计991、2班" checked name="R1">计991、2班
&nbsp;&nbsp; <input type="radio" name="R1" value="
信 9 8 1 " > 信 9 8 1 & nbsp;&nbsp; <input
type="radio"
name="R1" value="东大远程">东大远程</p>
</center></div>
例3：动态设置命令按钮的标题
•网页内容（续）
<div
align="center"><center><p><input
type="submit" value="提交"
name="B2"><input type="reset" value="复
原" name="B3"></p>
</center></div>
</form>
</body>
</html>
例3：动态设置命令按钮的标题
• 本例首先显示一个空白的课程表，并所
列出供选择的班级，用户选择班级后再
单击课程表中的各位置，这时，所选班
级名称将出现在表中，如图所示。
单击这里
测试一下
例3：动态设置命令按钮的标题
• 本例各按钮在调用子过程setb时使用了一
个参数me，它把按钮自身作为参数传递
返回本
给子过程。
章目录
本章小结
• 本章介绍了：
– 浏览器支持的各种对象所具有的属性、方法
和事件；
– 以及在脚本语言中如何使用这些属性、方法
和事件；
– 实现与用户的交互；
– 实现对浏览器窗口的控制；
– 实现对网页的控制。
返回本
章目录
习题
1．请观察以下网页代码的输出。
<html><HEAD>
<title> 学习VBScript</title>
</head>
</body>
你好<BR>
<script language=VBScript>
document.write “我学习VBScript<BR>”
sub window_Onload()
msgbox “欢迎你!”
End sub
</script>
</body></html>
习题
2．请改写例5-22中的代码，能实现删除按
钮上的显示。（提示，可以另外放置一
个复选框指出是否删除状态，在子过程
中根据它的选中状态确定相应的操作）。
3．例5-20中的代码，当在输入价格的文本
框中输入字符时，将产生错误，请修改
该网页，当输入不正确时，给出提示。
习题
4．设计一个简单的算术考试程序，首先用
随机函数产生一个简单的算术式显示在
文本框中，等待用户在另一文本框中输
入答案，同时打开定时器，控制每题的
答题时间，当用户输入答案后单击完成，
程序自动判断正确性，并显示得分。
返回本
章目录