6.1 课前导读
6.2 课堂教学
6.3 上机练习
6.4 课后作业第 6课 VBScript的对象编程
6.1 课前导读
VBScript是基于对象的程序设计语言,但它并不是真正面向对象的程序设计语言,因为它不具有面向对象的程序设计语言的全部特征 。 在面向对象的程序设计语言中,程序员可以自己定义对象；而在
VBScript中,对象是系统定义好的,可以直接使用 。
VBScript采用的是面向对象,事件驱动编程机制,
因此,必须理解对象以及对象的属性,事件和方法等概念 。
6.2 课堂教学
6.2.1 对象的属性、事件和方法
6.2.2 事件驱动程序设计
6.2.3 DHTML对象模型简介
6.2.3 DHTML的内部控件
6.2.1 对象的属性、事件和方法
1,对象的概念
2,对象的属性
3,对象的事件
4,对象的方法
VBScript采用的是面向对象,事件驱动编程机制,
因此,对象的概念是 VBScript最基本的概念之一 。
1,对象的概念在现实生活中,任何一个实体都可以视为一个对象 （ Object） 。 如一只气球是一个对象,一台电脑也是一个对象 。 一台电脑又可以拆分为主板,CPU,内存,
外设等部件,这些部件又都分别是对象,因此电脑对象可以说是由多个,子,对象组成的 。
从面向对象程序设计的角度来看,对象是具有属性 （ 数据 ） 和方法 （ 行为方式 ） 的实体 。 简单地说,
属性用于描述对象的一组特征,方法为对象实施一些动作,对象的动作则常常要触发事件,而触发事件又可以修改属性 。 一个对象建立以后,其操作就通过与该对象有关的属性,事件和方法来描述 。
VBScript所支持的对象有脚本对象 （ 如 Window对象,Document对象,Forms对象等 ） 和 DHTML内部控件
（ Button控件,Text控件等 ） 。
2,对象的属性在 VBScript中,每一种对象都有一组特定的属性 。
有许多属性可能为大多数对象所共有,如 Name属性定义对象的内部名称 。 还有一些属性只局限于个别对象才有,如只有文本框才有 maxLength属性,该属性用来确定用户可以在文本框中输入的字符数
3,对象的事件事件 （ Event） 就是对象上所发生的事情 。 在
VBScript中,事件是预先定义好的,能够被对象识别的动作,如单击 （ Click） 事件,双击 （ DblClick） 事件,装载 （ Load） 事件,鼠标移动 （ MouseMove） 事件等,不同的对象能够识别不同的事件 。 当事件发生时,
VBScript将检测两条信息,即发生的是哪种事件和哪个对象接收了事件 。
每种对象能识别一组预先定义好的事件,但并非每一种事件都会产生结果,因为 VBScript只是识别事件的发生 。 为了使对象能够对某一事件做出响应
（ Respont）,就必须编写事件过程 。
事件过程是一段独立的程序代码,它在对象检测到某个特定事件时执行 （ 响应该事件 ） 。 一个对象可以响应一个或多个事件,因此可以使用一个和多个事件过程对用户或系统的事件作出响应 。 程序员只需编写必须响应的事件过程,而其他无用的事件过程则不必编写,如命令按钮的,单击,（ Click） 事件比较常见,其事件过程需要编写,而其 MouseDown或 MouseUp
事件则可有可无,程序员可根据需要选择 。
4,对象的方法一般来说,方法就是要执行的动作 。 VBScript的方法与事件过程类似,可以是函数,也可以是过程,
它用于完成某种特定功能而不能响应某个事件 。 如
Window对象的关闭 （ Close） 方法,打开 （ Open） 方法等 。 每个方法完成某个功能,但其实现步骤和细节用户既看不到,也不能修改,用户能做的工作就是按照约定直接调用它们 。
方法只能在代码中使用,其用法依赖于方法所需的参数的个数以及它是否具有返回值 。 当方法不需要参数并且也没有返回值时,可用下面的格式调用对象方法：
对象名,方法名 参数 1,参数 2?
6.2.2 事件驱动程序设计
1,事件驱动模型机制
2,事件过程的调用方式
VBScript是一种基于事件驱动的编程语言,它可以对在浏览器中发生的很多事件做出响应 。
1,事件驱动模型机制事件驱动意味着系统中各个部分之间以及系统与应用程序之间通过,消息,进行通信,消息的发送与接收伴随着事件的发生,不同的消息与不同的事件相联系 。 应用程序通过与特定消息相对应的事件过程代码实现与用户的交互 。
VBScript代码是在浏览器中执行的,而浏览器是
Windows操作系统的一个应用程序 。 Windows操作系统正是基于事件驱动的,通过消息机制,系统与应用程序进行通信,协调它们的工作 。 当用户在浏览器中进行操作时 （ 如单击鼠标左键或按下键盘上的某个键 ）,
操作系统检测到该操作便向浏览器发送相应的消息,
后者接收到消息后,就在当前 VBScript应用程序中寻找对应的事件处理代码 —— 事件过程 。 如果该过程存在,执行该段代码,否则就交由浏览器处理 。
在事件驱动的程序设计中,程序员根据需要设计事件处理代码 —— 事件过程,而无需确定这些过程的执行顺序 。 当用户进行操作时,程序将执行相应的事件过程 。 这些事件的发生是随机的,依赖于用户的实际操作 。
需要注意的是,不必为所有的事件编写事件过程 。
例如在处理鼠标单击事件时,一般只需为对象的 Click
事件编写代码,而不必为 MouseDown和 MouseUp事件编写代码 。
2,事件过程的调用方式事件过程按其名称被识别,事件过程的命名规则是,on事件名,如 Click事件过程名为 onclick。 事件过程的定义与调用有如下 4种方式 。
(1) 通过 <SCRIPT>标记块实现为每个事件过程分配一个 <SCRIPT>标记块,然后使用 <SCRIPT>标记的 event属性调用事件过程,其语法格式为：
<SCRIPT for = 对象名 event = on 事 件 名
LANGUAGE = VBScript>
〈 事件过程代码 〉
</SCRIPT>
说明：此方式在第 4,5章中多次使用 。
(2) 在对象定义标记中设置事件过程通过在对象定义标记中设置事件过程可以直接调用事件过程代码,如下面代码：
<HTML>
<HEAD><TITLE>调用事件过程 </TITLE></HEAD>
<BODY><H3>调用事件过程 </H3><HR>
<INPUT type=button onclick = 'aa="这是按钮的单击事件 ":
msgbox aa'
value=确定 LANGUAGE=vbscript>
</BODY>
</HTML>
代码在浏览器中的 执行结果 。
(3) 在对象定义标记中调用事件过程在对象定义标记中设置事件过程属性可以调用命名 Sub过程 。 上述代码可以改为：
<HTML>
<HEAD><TITLE>调用事件过程 </TITLE>
<SCRIPT LANGUAGE=vbscript>
Sub mysub()
aa = "这是按钮的单击事件 "
msgbox aa
End Sub
</SCRIPT>
</HEAD>
<BODY><H3>调用事件过程 </H3><HR>
<INPUT type=button onclick=mysub value=确定 >
</BODY>
</HTML>
代码在浏览器中的 执行结果 。
(4) 单独定义事件过程这种方式对事件过程的命名有严格的要求,过程名必须是：
对象名 _on事件名通常在脚本的 <HEAD>块中定义事件过程,如上述代码可以改为：
<HTML>
<HEAD><TITLE>调用事件过程 </TITLE>
<SCRIPT LANGUAGE=vbscript>
Sub mybtn_onclick
aa = "这是按钮的单击事件 "
msgbox aa
End Sub
</SCRIPT>
</HEAD>
<BODY><H3>调用事件过程 </H3><HR>
<INPUT type=button name=mybtn value=确定 >
</BODY>
</HTML>
代码在浏览器中的 执行结果 。
6.2.3 DHTML对象模型简介
1,Window对象
2,Document对象
3,History对象
4,Navigator对象
5,Location对象
6.2.3 DHTML对象模型简介
DHTML即动态 HTML,所谓的,动态,不仅仅表现在网页的视觉展示方式上,更重要的是,它可以对网页中的内容进行控制与变化 。
严格说来,DHTML并不是什么新技术或标准的简称 。 换句话说,事实上并没有任何一种技术或标准就叫做 DHTML。 那到底什么是 DHTML呢？ 其实,DHTML是一些现有网页技术与标准的整合,通过它,网页设计者可以用一种新的方式创建网页 。 既然是现有网页技术与标准的整合,DHTML当然还是以 HTML语言为基础,
但是相较于过去单纯以 HTML来设计网页的方法,HTML
所带来的最大转变,在于它加入了,对象化,的网页技术特征 。
动态 HTML对象模型定义了用于描述网页及其内部元素的对象,每个对象都有描述其自身状态的属性和描述其行为的方法,它们也可以处理特定类型的事件 。
因此,网页设计者可通过 Script程序来控制或调用这些对象 。
window
screen frames history navigator location scripts document
link anchors forms
图 6-1 DHTML模型的层次结构如图 6-1所示,在 DHTML模型中最顶层的对象是
Window对象,其他对象可以看作是 Window对象的属性 。
其中,对于编程最重要的属性是 Document对象 。
Document对象表示浏览器中当前 HTML文档,通过该对象能够获得关于当前文档的信息,可以检测和修改当前 HTML文档的元素,还可以响应事件 。
Screen属性包含了客户端显示器的信息 。 通常网页设计要考虑到不同的屏幕分辨率,才能让用户看到最佳的效果,因此,需要获得用户显示器的信息,以便动态调整页面 。
Frames属性指定由给定文档或者与某个窗口对应文档定义的所有 Window对象 。 这是一个集合属性 。 它同时也是 Document对象的属性 。
History属性包含用户先前访问过的 URLs信息 。
Navigator属性包含了用户所使用的浏览器的属性,
例如浏览器的名称 。 Location属性包含了关于当前
URL的信息 。 Scripts属性返回当前文档的所有 Script
块,而不管 Script块是在 Body块还是在 Head块中 。
而 Document对象的 Link属性指定了 HTML文档中的连接 。 Anchors属性可以获得文档中的所有超链接 。
Forms属性是集合属性,返回文档中所有的表单元素 。
1,Window对象
Window对象表示浏览器中一个打开的窗口 。 通过引用该对象的属性可以控制脚本中其他对象的属性,
进而控制整个网页的外观以及对事件的响应 。 使用
Window对象 可以 获得当前窗口的状态信息,文档信息,
浏览器的信息,还可以响应发生在 IE中的事件 。
通常,浏览器在打开 HTML文档时,创建 Window对象 。 如果文档中定义了多个 Frames对象,则在文档中有多个 Frame标记 。 在这种情况下,浏览器为该文档创建一个父 Window对象,为每个 Frame标记创建一个子 Window对象 。 父 Window对象中发生的操作可以影响子 Window对象 。 如调用父 Window对象的 Close方法将不只关闭父窗口,所有的子窗口都会关闭 。
在脚本程序中使用 Window对象的属性,方法,集合时,一般不必标明 Window,而直接使用 。 比如,关闭窗口时,可以用代码 Close,而不必写为：
Window.Close。 只是为了增加程序的可读性,建议用户标明 Window对象 。
下面分别介绍 Window对象常用的属性,方法和事件,
(1) Window对象的属性
Window对象有多个属性,通过这些属性可以得到客户端浏览器属性,可以控制当前窗口的 HTML文档等等 。 其主要属性见表 6-1。
表 6-1 Window对象的属性名称 说明
Document属性 返回对当前 Document对象的引用，从而能够调用 Document对象的属性、方法，事件等
Event属性 返回对 Event对象的引用，从而能够调用 Event对象的属性。只能在事件过程中使用
History属性 返回对 History对象的引用。通过该属性，可以调用 History对象的属性、方法、事件等
Location属性 返回对 Location对象的引用。通过该属性，可以调用 Location
对象的属性、方法、事件等
Navigator属性 返回对 Navigator对象的引用。通过该属性,Navigator对象的属性、方法、事件等
Self属性 返回对当前窗口的引用，为只读属性
Status属性 返回和设置浏览器中状态栏显示的信息说明：
① 使用 Self属性就可以显式地引用当前 Window对象或者 Frame对象的方法,从而避免因表单与 Window对象重名引起的歧义,提高脚本代码的可读性 。
② 可以用如下代码在浏览器状态栏中提示用户正在加载网页：
Window.status = "正在加载网页 "
把上述代码放在 load事件过程中,就能够使用户看见提示信息 。
③ 使用 event对象时必须标明 Window对象：
Window.event。 Event 对象的 属性 有,button、
altKey,ctrlKey,shiftKey,toElement,
fromElement,returnValue,keyCode等等,用于返回事件发生时相应对象的状态,鼠标和键盘的状态 。
在特定的事件过程中,不是所有的属性都有意义 。
例如,Event的 fromElement和 toElement属性只在
mouseover和 mouseout事件处理函数中才有意义 。
(2) Window对象的方法
Window对象的方法用于显示提示信息,输入信息,
控制 HTML页面外观,触发和响应事件,显示 HTML页面等 。 其常用的方法见表 6-2。
表 6-2 Window对象的常用方法名称 说明
Alert方法 用于显示一个对话框，包括信息图标、提示信息和“确定”
按钮。
Close方法 用于关闭当前浏览器窗口。父 window对象调用 Close方法时，
会关闭所有的子窗口
Confirm方法 用于显示一个对话框，包括问号图标、提示信息、“确定”
按钮和“取消”按钮
open方法 用于打开一个新的浏览器窗口，并且加载由其 URL参数指定的 HTML文档
Prompt方法 用于显示一个输入对话框，包括提示信息和输入框
SetTimeout方法 用于定时执行某个函数或命令说明：
① Alert方法有些类似于 MsgBox函数产生的对话框,只是 Alert产生的含有图标,而且对话框标题为
,Microsoft Internet Explorer” ；前者不含有图标,对话框标题为,VBScript” 。 注意,用户无法更改使用该方法产生的对话框标题 。
② Confirm方法与 Alert,MsgBox产生的对话框不同,该方法产生的对话框有两个按钮,而且有返回值 。 单击,确定,按钮,该方法返回值为 True；单击
,取消,按钮,该方法返回值为 False。 注意,无法更改使用该方法产生的对话框标题 。
③ Prompt方法的语法如下：
Prompt([message[,inputDefault]])
其中,message是可选参数,是显示提示信息的字符串； InputDefault也是可选参数,显示缺省输入值 。 如果不指定 InputDefault参数,那么,对话框的输入框中将显示,undefined” 字样 。 该方法的返回值为用户输入的字符串 。 与 Alert,MsgBox一样,该方法产生的对话框标题无法更改 。
④ SetTimeout方法的语法如下：
SetTimeout("命令或过程 ",毫秒数 )
其作用是在指定的时间 （ 毫秒数 ） 后执行指定的
,命令或过程,。
⑤ open方法的语法如下：
window = 对象名,open([URL[,name[,features
[,replace]]]])
其中,URL参数指定了新窗口要加载的 HTML文档 。
如果不指定 URL参数,则加载一个空 HTML文档 。
name参数是可选的,用来指定新窗口的名称,以便别的 HTML文档通过超链接调用 。
Features参数是可选的,用于指定新窗口的样式,
有多个选项可以选择,各选项取值与说明见表 6-3。
表 6-3 Features参数的取值说明名称 说明
fullscreen 指定窗口是（ yes）否为全屏显示，默认值 no
channelmode 指定窗口是否为舞台模式
toolbar 指定窗口是否显示工具栏控件 (包括：前进、后退、停止等按钮 )
location 指定窗口是否显示 URL输入框
directories 指定窗口是否显示“链接”工具栏
status 指定窗口底部是否显示状态栏，缺省值为 yes
scrollbar 指定窗口是否显示垂直和水平滚动条
resizable 指定窗口是否显示最大、最小化按钮
width 指定窗口显示宽度，可以设置为 >=100的数
Height 指定窗口显示高度，可以设置为 >=100的数
top 指定窗口顶部的坐标
left 指定窗口左端的坐标
replace参数也是可选的,可以设置为 yes或者 no，
用于指定加载的 URL在浏览器历史记录中,是否替换原窗口的 URL记录 。
例如,可以用如下代码打开一个窗口：
Window.Open "titile.htm"
下述代码打开一个名为 title.htm的文档,新窗口不指定名称,显示工具栏,显示,链接,工具栏：
Window.Open "titile.htm",null,"fullscreen = no,
toolbar = yes,directories = yes"
(3) Window对象的事件
Window对象的事件分为：与加载或卸载网页有关的,与窗口状态有关的,与窗口中事件处理有关的 。
这些事件中常用的有 load,unload,resize。
Load事件与 Unload事件分别发生于网页的加载或卸载时,它们界定了一个 HTML文档的生命期 。
Load事件在 IE加载给定对象后立刻发生 。 该事件过程应在 <body>标记中声明 。 在网页的 Load事件处理函数中可以对网页做一些初始化工作,或者显示一些信息 。 例如,下面的代码可以在加载网页时显示对话框说明已经触发了 Load事件 。
<HTML>
<HEAD><TITLE>Load事件过程 </TITLE>
<SCRIPT LANGUAGE=vbscript>
Sub init()
MsgBox "正在加载网页，触发了 Load事件 "
End Sub
</SCRIPT>
</HEAD>
<body onload=init></body>
</HTML>
resize事件发生在用户调整浏览器窗口大小时,
可以在其事件过程中重新安排页面中各要素的显示位置和尺寸,以便增加网页对用户操作的敏感性,使交互界面更友好 。
Unload事件是在 IE关闭该网页时触发 。 可以在该事件过程中添加代码,保存有用的用户信息 。 比如,
在进行网上购物时,可以在网页的 Unload事件过程中,
统计购物的种类和数目等等 。 下面的代码可以在关闭网页时显示对话框说明已经触发了 Unload事件 。
<HTML>
<HEAD><TITLE>unLoad事件过程 </TITLE>
<SCRIPT LANGUAGE=vbscript>
Sub Leaving()
MsgBox "正在离开网页,触发了 Unload事件 "
End Sub
</SCRIPT>
</HEAD>
<body onunload=Leaving></body>
</HTML>
2,Document对象
Document对象代表了当前浏览器窗口中的 HTML文档,它是脚本对象模型中最为重要的对象 。 可以通过该对象检测 HTML文档中各元素的状态 （ 比如,颜色,
字体,发生的事件等 ）,并且可以更改这些元素的状态 。 在 HTML文档的任何位置都可以调用该对象 。
下面分别介绍 Document对象常用的属性,方法和事件 。
(1) Document对象的属性在 Document对象的属性中,有些是用来设置当前
HTML文档的状态,有些则是用来指示当前 URL的信息 。 其常用的属性见表 6-4。
表 6-4 Document对象的属性名称 说明
alinkcolor属性 用来得到或更改当前页面中所有超链接拥有焦点时（按下鼠标左键还没有松开）的颜色
bgColor属性 用来得到或更改当前页面的背景颜色
fgColor属性 用来得到或更改当前页面所有文本的颜色
vlinkColor 用来得到或更改访问过的超链接的颜色
cookie属性 用来得到或更改浏览器的一个 cookie值。
title属性 用来返回在 <title>标签中编写的文本，该文本一般作为浏览器的标题出现说明：
① 上述属性的颜色可以使用 IE颜色表中的值 。 对颜色值的调用既可以通过颜色名,又可以通过相应的十六进制数 。
② Cookie是由浏览器读取或写入硬盘的文本文件,
存放在特定的文件夹中 。 Cookie可以存放用户名和选项等配置信息,使得下一次请求同一页面时,脚本能找到上次存放在客户机上的数据,以调整用户配置 。
通常用 cookie来保存服务器发送来的字符串,以便在页面之间共享信息 。 在 VBScript
中,可以使用如下代码把该属性值设为指定值,然后显示出来：
document.cookie ="color=Yellow"
MsgBox(document.cookie)
(2) Document对象的方法
Document对象提供了多种方法控制网页的读写以及外观,常用的方法见表 6-5。
表 6-5 Document对象的方法名称 说明
clear方法 清空当前文档中的内容，一般用于动态生成网页的操作中
close方法 关闭当前文档
open方法 打开文档以便用 write或者 writeln方法写入新的文档内容
write方法 用于在当前文档中写入新的内容，在输出字符串末尾不包括回车标志
writeln方法 用于在当前文档中写入新内容，在输出字符串末尾包括回车标志说明：
① 与 window对象的 Open方法不同,Document对象的 open方法只是在当前浏览器窗口新建一个 HTML文档,
前者则新建一个浏览器窗口 。
在动态更改网页操作中,一般先调用 open方法在浏览器窗口中打开一个空的文档,然后,通过调用
write或者 writeln方法在文档中输入新的内容,然后,
调用 close方法关闭文档并显示它 。
② write方法和 writeln方法的区别在于 writeln
方法在输出字符串末尾添加了回车标志 。
(3) Document对象的事件
Document对象的事件中常见的有,click，
dblclick,keydown,keypress,keyup,mousedown、
mouseover,mouseout,mouseup等 。
在文档中与 Document对象相对应的 HTML标记是
<body>,所以,调用 Document对象的事件过程时要在
<body>标记中添加代码 。
3,History对象
History对象包含了用户访问过的 URL信息,通过这些信息可以使浏览器具有导航功能,使得用户可以很方便地在感兴趣的 URL之间切换 。
History对象不出现在网页上,因而没有对应的事件,只有一些属性和方法 。 以下分别介绍 History对象常用的属性,方法 。
(1) History对象的属性
History对象只有一个 Length属性 。 该属性返回用户访问过的 URL个数 。 该属性只读,在程序中不能对它进行赋值操作,使用频率并不高 。
(2) History对象的方法
History对象的方法用于在 URL历史记录中移动,
从而改变当前 URL。 它有三个方法,back方法,forward
方法和 go方法 。
back方法 。 该方法用于回溯浏览内容,等效于用户在浏览器中单击 n次,后退,按钮 。 其调用形式如下：
History.back n
其中,参数 n指定在 URL历史记录中回溯 URL的个数 。
例如：
window.history.back 1
该语句使得当前文档切换到最近一次访问过的 URL。
forward方法 。 该方法用于显示 URL历史记录表中下一个 URL的内容,等效于用户在浏览器中单击 n次
,前进,按钮 。 其调用形式如下：
History.forward n
其中,参数 n指在历史记录表中前移 URL的个数 。
go方法 。 该方法用于显示 URL历史记录表中特定
URL的内容 。 其调用形式如下：
History.go(delta | location)
其中,参数 delta是个整数,指定目标 URL的相对位置 。 参数 location是个字符串,指定目标 URL的一部分或者全部 。
说明：当参数 delta为 1时,相当于执行语句：
History.forward 1。 当参数 delta为 -1时,相当于执行语句,History.back 1。
4,Navigator对象
Navigator对象包含了客户端浏览器的信息,通过引用该对象的属性可以得到这些信息,在大多数情况下,客户端使用的浏览器类型是无法事先知道的 。
这就要求 HTML文档能够适应多种浏览器的特性,比如可能需要它同时适用于 IE和 Netscape浏览器 。 而事实上,浏览器之间的兼容性并不好 。 为此,我们可以设计两组页面,每组页面对应一种浏览器,由脚本程序判断页面是由哪种浏览器打开的,然后根据浏览器的信息打开相应的页面,以便用户获得最佳的浏览效果 。
Navigator对象不出现在网页上,因而没有对应的事件,只有一些属性和方法 。
(1) Navigator对象的属性
Navigator的属性包含了浏览器的名称,版本,
设置等 。 其中,较为常用的属性有 appCodeName、
appName,appVersion,cookieEnabled等 。
appCodeName属性 。 通过该属性可以得到浏览器类型代号 。 例如,对于 IE来说,该属性的返回值为
,Mozilla” 。
appName属性 。 通过该属性可以得到浏览器类型名称 。 例如,对于 IE来说,该属性的返回值为
,Microsoft Internet Explorer” 。
appVersion属性 。 通过该属性可以得到浏览器的版本号 。
cookieEnabled属性 。 由于 cookie可以存放一些有用的用户信息,所以,判断浏览器是否支持 cookie
很有用处 。
(2) Navigator对象的方法
Navigator对象支持两个方法,javaEnabled和
taintEnabled。 其中,前者可以用来确定浏览器是否支持 java编程语言 。 这样,脚本程序可以利用这条信息动态调整代码 。 对于不支持 java的,程序中原来用
java的部分,可以用 VBScript代码实现 。 后者可以用来确定浏览器是否支持数据 tainting。
5,Location对象
Location对象包含了当前 URL的信息 。 该对象不支持方法和事件 。 在其属性中,最常用的有 href、
pathname,search等属性 。
href属性 。 该属性用来返回或者设置当前完整的
URL。 通过该属性,能够实现网页间的少信息传递 。 同时,通过在脚本代码中改变该属性可以实现网页的动态切换 。
例如,可以用如下代码指定当前窗口的 URL：
Window.Location.href ="http://www.sohu.com"
href属性是 Location对象的缺省属性 。 也就是说,
下属代码等价：
Location = "../chap3/docExample.htm"
Location.href = "../chap3/docExample.htm"
pathname属性 。 该属性可用来设置当前文档的路径,通过它能够调用 Web根目录以外的文档 。
search属性 。 该属性用来返回 URL中嵌入的参数,
通过参数来实现网页间的信息交互 。 这种方式比起使用服务器端对象要简单一些 。 在 URL中嵌入参数的方法是在 URL后面加一个问号 (?),然后紧跟参数名称和参数值 。 例如：
http://www.SomeSite.com/cgi/UserRegister.exe?UserName="yangjing"
这 段 代 码 查 找 用 户 名 yangjing,由
UserRegister.exe返回相应结果 。
6.2.3 DHTML的内部控件
1,通用的属性、事件和方法 2,Button控件
3,Text控件 4,Password控件
5,Radio控件 6,Checkbox控件
7,Image控件 8,File控件
9,Submit控件和 Reset控件 10,Hidden控件
11,Select控件 12,TextArea控件
6.2.3 DHTML的内部控件
DHTML（ Dynamic Hyper Text Markup Language）
是 HTML的增强版,通过扩充 IE对象并结合 VBScript或
JScript而组成,与 HTML的区别是 DHTML的每个标记都作为对象处理 。 DHTML的内部控件是其预制的对象,由客户端浏览器直接提供,无需从服务器上下载 。
可以使用 <INPUT>,<SELECT>和 <TEXTAREA>等标记在网页中添加 DHTML的内部控件 。 其中,<SELECT>标记和 <TEXTAREA>标记分别添加列表框和多行文本区控件,
而 <INPUT>标记则可以在网页中添加多种 DHTML控件,
如第 4,5课中的例题所示 。
<INPUT>标记的语法结构如下：
<INPUT name = 名称 type = 类型名? language =
脚本语言名 >
说明：
① name属性指定控件的名称,用于在代码中引用该控件 。
② type属性指定控件的类型,其取值与对应的控件说明见表 6-6。
③ language属性指定控件的事件代码所使用的脚本语言名称,取值如 VBScript或 JScript。
格式中还包括其他一些属性,这些属性中有些是少数控件所特有的,有些则是控件所共有的,即通用的属性 。
表 6-6 type属性的取值说明取值 控件 说明
Button Button控件 命令按钮
Text Text控件 单行文本框
Password Password控件 口令输入框
Radio Radio控件 单选按钮
Checkbox Checkbox控件 复选框按钮
Image Image控件 图像
File File控件 多行文本框
Submit Submit控件 提交按钮，与 <FORM>标记一起使用，向服务器提交表单内容
Reset Reset控件 重置按钮，清除表单中的输入内容
Hidden Hidden控件 隐含标签，与 <FORM>标记一起使用，作为表单内容向服务器提交
1,通用的属性,事件和方法
(1) 通用属性常用的通用属性有,Disabled属性,Style属性,
Title属性,Value属性等 。 其说明见表 6-7。
表 6-7 内部控件的通用属性名称 说明
Disabled属性 可用性属性，取值为 True（默认）或 False，设置或返回控件是否响应用户事件。可以在 <INPUT>标记或代码中使用。
Style属性 样式属性，设置或返回控件的内嵌样式。可以在 <INPUT>标记或代码中使用。
Title属性 提示信息属性，设置或返回当鼠标在控件上移动时所显示的提示信息。可以在 <INPUT>标记或代码中使用。
Value属性 值属性，设置或返回控件当前状态的对应值。不同控件的值所表示的含义有所不同，如命令按钮的值是指按钮表面所显示的标题，而文本框的值是指文本框中的文本内容。该属性可以在
<INPUT>标记或代码中使用。
【 例 6-1】 通用属性的使用 。
在记事本中编写代码如下：
<HTML>
<HEAD><TITLE>通用属性的使用 </TITLE></HEAD>
<BODY><H3>通用属性的使用 </H3><HR>
请输入文本：
<INPUT name=Text1 type=Text disabled = False Size=20><P>
<INPUT type = Button name=Button1 title=不能修改文本 value=改变 >
<SCRIPT FOR=Button1 EVENT="onClick" LANGUAGE="VBScript">
If Button1.value = "改变 " then
Button1.style.fontFamily = "隶书 "
Button1.style.fontSize=24
Text1.disabled = False
Button1.title="可以修改文本 "
Button1.value = "还原 "
Else
Button1.style.fontFamily = "宋体 "
Button1.style.fontSize=18
Text1.disabled = True
Button1.title="不能修改文本 "
Button1.value = "改变 "
End If
</SCRIPT>
</BODY>
</HTML>
在浏览器中执行代码,显示结果 。
(2) 通用事件通用事件是指大多数控件都能响应的事件 。 通用事件的说明见表 6-8
表 6-8 内部控件的通用事件名称 说明
Focus事件 当控件收到焦点时，触发事件
Blur事件 当控件失去焦点时，触发事件
Click事件 当用户单击鼠标左键，然后抬起按键时，触发 Click事件；当控件处于激活状态时，按下 Enter或空格键，也将触发 Click事件
Dblclick事件 当用户双击鼠标左键，将触发 Click事件；
Mouseover事件 当鼠标移到控件（或对象）的上方时，将触发该事件
Mousemove事件 当鼠标移到控件（或对象）的上方时，将触发该事件
Mouseout事件 当鼠标从控件（或对象）内部移出时，将触发该事件
Mousedown事件 按下鼠标键时，将出发该事件
Mouseup事件 按下鼠标键，再松开时，将出发该事件
Keypress事件 当按下和松开某个 ASCII字符键时，拥有焦点的控件将会响应，事件过程将获得按键对应的 ASCII码
Keydown事件 当按下键盘上的某个键时，拥有焦点的控件将会响应，事件过程将获得按键对应的键值
Keyup事件 按下键盘上的某个键，当释放该键时，拥有焦点的控件将会响应，事件过程将获得按键对应的键值
【 例 6-2】 响应鼠标事件 。
在记事本中编写代码如下：
<HTML>
<HEAD><TITLE>使用鼠标事件 </TITLE></HEAD>
<BODY><H3>使用鼠标事件 </H3><HR>
<INPUT name=Button1 type=Button value=我是一个按钮 >
<P>
<INPUT name=Text1 type=Text Size=20>
<SCRIPT FOR=Button1 EVENT=onClick LANGUAGE="VBScript">
Text1.value = "我被单击了 "
</SCRIPT>
<SCRIPT FOR=Button1 EVENT=onMouseover LANGUAGE=VBScript>
Text1.Value = "鼠标指向了我 "
</SCRIPT>
<SCRIPT FOR=Button1 EVENT=onMousedown LANGUAGE=VBScript>
Text1.Value = "鼠标按下了 "
</SCRIPT>
<SCRIPT FOR=Button1 EVENT=onMouseout LANGUAGE=VBScript>
Text1.Value = "鼠标离开了 "
</SCRIPT>
</BODY>
</HTML> 在浏览器中执行代码,显示结果 。
【 例 6-3】 响应键盘事件 。
在记事本中编写代码如下：
<HTML>
<HEAD><TITLE>使用键盘事件 </TITLE></HEAD>
<BODY><H3>使用键盘事件 </H3><HR>
按键,<INPUT name=Text1 type=Text Size=20>
控制键,<INPUT name=Text2 type=Text Size=10><P>
ASCII码,<INPUT name=Text3 type=Text Size=10>
键值,<INPUT name=Text4 type=Text Size=10><P>
<SCRIPT FOR=Text1 EVENT=onKeypress LANGUAGE="VBScript">
Text3.value =window.event.Keycode
</SCRIPT>
<SCRIPT FOR=Text1 EVENT=onKeydown LANGUAGE=VBScript>
Text1.Value = ""
Text2.Value = ""
Text4.value = keycode
</SCRIPT>
<SCRIPT FOR=Text1 EVENT=onKeyup LANGUAGE=VBScript>
keycode=window.event.Keycode
alt=window.event.altKey
Ctrl=window.event.CtrlKey
Shift=window.event.ShiftKey
Select Case True
Case Alt
Text2.value = "Alt"
Text1.Value = chr(keycode)
Case Ctrl
Text2.value = "Ctrl"
Text1.Value = chr(keycode)
Case Shift
Text2.value = "Shift"
Text1.Value = chr(keycode)
End select
Select Case True
Case keycode=13
Text1.Value = "回车键 "
Case keycode=8
Text1.Value = "退格键 "
Case keycode=27
Text1.Value = "ESC"
End select
</SCRIPT>
</BODY>
</HTML> 在浏览器中执行代码,显示结果 。
说明：
① 在键盘事件中,VBScript通过 Window对象的
Event属性接受按键的 ASCII码值 （ Keypress事件 ） 或键值 （ Keydown事件和 Keyup事件 ） 。
② Window对象的 Event属性返回对 Event子对象的引用,引用的格式为：
key = window.event.Keycode
③ Event子对象的常用属性见表 6-9
表 6-9 vent子对象的常用属性属性名称 说明
button 返回事件发生时相应对象的状态
altKey 返回事件发生时 Alt键是否按下
ctrlKey 返回事件发生时 Ctrl键是否按下
shiftKey 返回事件发生时 Shift键是否按下
keyCode 返回事件发生时的按键
(3) 通用方法这里只介绍 Focus方法 。 Focus方法使得控件获得焦点,其语法格式为：
控件名,Focus
2,Button控件
Button控件又称为命令按钮,通常用来响应用户的命令 。 Button控件支持大多数的通用属性和事件,
其特有的属性有以下几种 。
① ReadOnly属性,返回或设置控件状态为只读 。
与 Disabled属性不同的是,ReadOnly属性允许控件接受焦点 。 可以在 <INPUT>标记或代码中使用
② OuterText属性,取值为字符串,用于将控件动态地更新为该字符串文本 。 如下述代码将按钮
Button1改为文本,欢迎进入聊天室,,
Button1.OuterText = "欢迎进入聊天室 "
③ OuterHTML属性,取值为字符串或 HTML标记
（ 除 <HTML>,<HEAD>,<TITLE>以外 ） 。 如下述代码将按钮 Button1改为 Text文本框控件：
Button1.OuterHTML = "<INPUT type = Text
value='还原 '>"
3,Text控件
Text控件又称为文本框,通常用来接收用户的输入或输出提示信息 。 Text控件支持大多数的通用属性和事件,其特有的属性有以下几种 。
① MaxLength属性,用于返回或设置用户可以输入的字符数 。 可以在 <INPUT>标记或代码中使用 。
② Size属性,用于返回或设置文本框的宽度 。
可以在 <INPUT>标记或代码中使用 。
Text控件所特有的事件有：
① Chang事件,改变文本内容,并转移焦点时触发该事件 。
② Select事件,选择文本内容时触发该事件 。
【 例 6-4】 响应 Chang事件 。
在记事本中编写代码如下：
<HTML>
<HEAD><TITLE>文本框的内容 </TITLE></HEAD>
<BODY><H3>文本框的内容 </H3><HR>
请输入文本,<INPUT name=Text1 type=Text value =原有内容
Size=20><P>
<INPUT type = Button name=Button1 value=确定 >
<SCRIPT FOR=Button1 EVENT=onClick LANGUAGE="VBScript">
Msgbox "文本框中的内容是," & Text1.Value
</SCRIPT>
<SCRIPT FOR=Text1 EVENT=onChange LANGUAGE="VBScript">
Button1.outerhtml = "文本框中的内容被改变了 "
</SCRIPT>
</BODY>
</HTML>
Chang事件的 使用情况 。
4,Password控件
Password控件与 Text控件类似,只是它不显示文本的内容,通常用于验证口令 。 当用户输入口令时,
键入的字符都以星号 （ *） 出现 。 Password控件所支持的属性和事件与 Text控件也大致相同 。
5,Radio控件
Radio控件又称为单选按钮 。 一般来说,单选按钮总是作为一个组 （ 单选按钮组 ） 的组成部分工作的 。
单选按钮组是一组相互排斥的单选按钮,选择一个单选按钮就会立即清除该组中的其它按钮 。 在单选按钮组中只能单击一个选项,这与收音机上按钮的作用相似,故又称收音机按钮 。
单选按钮支持常用的通用属性和事件,其特有的属性是 Checked。 Checked属性用于返回或设置单选按钮的状态,其取值为 True或 False。 若属性值为 True，
则该单选按钮处于被选中状态；若为 False（ 默认 ）,
则处于未选中状态 。
可以使用控件的 ID属性来区别单选按钮组中的按钮,也可以通过使用下标来区别如下例所示 。
【 例 6-5】 使用单选按钮组 。
在记事本中编写代码如下：
<HTML>
<HEAD><TITLE>使用单选按钮 </TITLE></HEAD>
<BODY><H3>使用单选按钮 </H3><HR>
<INPUT name=Text1 type=Text value =文本内容
Style={font:44} Size=20><P>
宋体 <INPUT type = Radio name=Radio checked=True>
黑体 <INPUT type = Radio name=Radio >
隶书 <INPUT type = Radio name=Radio >
楷体 <INPUT type = Radio name=Radio >
<SCRIPT FOR=Radio EVENT=onClick LANGUAGE=VBScript>
select case true
case Radio(0).checked
Text1.Style.fontFamily = "宋体 "
case Radio(1).checked
Text1.Style.fontFamily = "黑体 "
case Radio(2).checked
Text1.Style.fontFamily = "隶书 "
case Radio(3).checked
Text1.Style.fontFamily = "楷体 _GB2312"
end select
</SCRIPT>
</BODY>
</HTML>
在浏览器中执行代码,显示情况 。
6,Checkbox控件
CheckBox控件又称为复选框,其功能与单选按钮相似,就像一个开关,用于表明某个特定状态是选定
（ ON） 还是未选定 （ OFF） 状态 。 与单选按钮不同的是,可以同时选中多个复选框 。 复选框所支持的属性和事件与单选按钮相同,其 Checked属性用于返回或设置单选按钮的状态 。
【 例 6-6】 使用复选框 。
在记事本中编写代码如下：
<HTML>
<HEAD><TITLE>使用复选框 </TITLE></HEAD>
<BODY><H3>使用复选框 </H3><HR>
<INPUT name=Text1 type=Text
value =文本内容 Style={font:44} Size=20><P>
斜体 <INPUT type = checkbox name=chk>
粗体 <INPUT type = checkbox name=chk>
下划线 <INPUT type = checkbox name=chk>
删除线 <INPUT type = checkbox name=chk>
<SCRIPT FOR=chk EVENT=onClick LANGUAGE=VBScript>
If chk(0).checked Then
Text1.Style.Fontstyle = "italic"
Else
Text1.Style.Fontstyle = "normal"
End If
If chk(1).checked Then
Text1.Style.Fontweight = "bold"
Else
Text1.Style.Fontweight = "normal"
End If
Text1.Style.TextdecorationUnderline = chk(2).checked
Text1.Style.TextdecorationlineThrough = chk(3).checked
</SCRIPT>
</BODY>
</HTML> 在浏览器中执行代码,显示情况 。
7,Image控件
Image控件用于显示图形信息,就像 HTML中的 IMG
标记,其属性也类似 。 不同的是可以在代码中通过
,控件名,x” 和,控件名,y” 来设置或得到该控件的 x
和 y坐标 。
与 IMG标记的最大不同应该是 Image控件可以响应事件,Image控件支持多数的通用事件 。
8,File控件
File控件提供一个文本框和一个浏览按钮,用于查找文件 。 单击浏览按钮,打开,查找文件,对话框,
找到的文件及其路径名将显示在文本框中 。 File控件的 value属性将返回找到的文件及其路径名 。
File控件支持多数的通用属性和事件 。
9,Submit控件和 Reset控件这两个控件须和 <FORM>标记一起使用,分别提供
,提交,按钮 （ Submit控件 ） 和,取消,按钮
（ Reset控件 ） 。 单击,提交,按钮,将会向一个后端过程提交表单中的内容；单击,取消,按钮,则清除当前表单中的所有输入信息 。
Submit控件和 Reset控件支持多数的通用属性和事件 。
10,Hidden控件
Hidden控件也须和 <FORM>标记一起使用,用于存放用户信息 。 它在浏览器中是隐含的,其 value属性可以作为表单的内容提交给后端过程 。
Hidden控件支持多数的通用属性,其支持的事件只 有 两 个,afterupdate （ 提 交 后 ） 事件,
beforeupdate（ 提交前 ） 事件和 errorupdate（ 提交错误 ） 事件 。
11,Select控件
Select控件又称为列表框 。 当浏览者选择的项目较多时,如果用单选按钮来选择,占页面的区域就会较多,此时可以使用列表框 。 可以用 <SELECT>标记和
<OPTION>标记来设置列表框,其格式为：
<SELECT size=x name=列表框名称 multiple>
<OPTION selected value=选项值 1>
选项文本 1</OPTION>
<OPTION selected value=选项值 2>
选项文本 2</OPTION>
</SELECT>
说明：
① <SELECT>标记定义列表框 （ Select对象 ）,
而 <OPTION>标记定义列表框中的选项 （ Option对象 ） 。
② 列表框支持常用的通用属性和事件,其特有的属性见表 6-4。
表 6-4 列表框的属性属性名称 说明
size 数字，表示在带滚动条的列表框中一次可见的列表项数
name 列表框对象的名称
style 设置列表框的样式，如高度、宽度、字体等
"width:100px;height:50px"
multiple 可选项，加上本项表示可选多个选项，否则只能单选
length 返回列表框中的选项个数
selectedIndex 返回或设置那个选项被选取
③ Option对象的属性取值见表 6-5。
表 6-5 Option对象的属性取值属性名称 说明
selected 可选项，加上本项表示该项是预置的，同一个 <SELECT>
标记中只能有一个
value 指定选项的值
text 指定选项文本
④ 列表框对象至少包含一个选项 （ Option对象 ）
【 例 6-7】 使用列表框 。
在记事本中编写代码如下：
<HTML>
<HEAD><TITLE>使用列表框 </TITLE></HEAD>
<BODY><H3>使用列表框 </H3><HR>
<SELECT id=select1 style="width:100px" name=select1>
<OPTION value="Bei jings">北京 </OPTION>
<OPTION value="Shang hai">上海 </OPTION>
<OPTION value="Tian jin">天津 </OPTION>
<OPTION value="Chong qing">重庆 </OPTION>
</SELECT>
列表框中的选项个数,<INPUT type=text name=text1 size=3></P>
选定项的 Value值为,<INPUT type=text name=text2 size=10></P>
选定项的 text值为,<INPUT type=text name=text3 size=10></P>
<SCRIPT for=select1 EVENT=onclick LANGUAGE=vbscript>
i=select1.selectedindex
text1.value=select1.length
text2.value=select1.options(i).value
text3.value=select1.options(i).text
</SCRIPT>
</BODY>
</HTML>在浏览器中 显示效果 。
说明,size属性默认值为 1,Select控件只显示一行,即为下拉式列表框,此时 style属性的高度定义无效 。 若 size=x（ >1）,则 Select控件可显示多行,
为列表框,其高度为 x行,如果设置了 style属性的
height子属性,则高度由 height子属性值决定 。
【 例 6-8】 在例 6-7中使用 size属性。修改代码如下：
<HTML>
<HEAD><TITLE>使用列表框 </TITLE></HEAD>
<BODY><H3>使用列表框 </H3><HR>
<SELECT id=select1 size=2 style="width:100px;height:70px“
name=select1>
<OPTION value="Bei jings">北京 </OPTION>
<OPTION value="Shang hai">上海 </OPTION>
<OPTION value="Tian jin">天津 </OPTION>
<OPTION value="Chong qing">重庆 </OPTION>
</SELECT>
列表框中的选项个数,<INPUT type=text name=text1 size=3></P>
选定项的 Value值为,<INPUT type=text name=text2 size=10></P>
选定项的 text值为,<INPUT type=text name=text3 size=10></P>
<SCRIPT for=select1 EVENT=onclick LANGUAGE=vbscript>
i=select1.selectedindex
text1.value=select1.length
text2.value=select1.options(i).value
text3.value=select1.options(i).text
</SCRIPT>
</BODY>
</HTML> 在浏览器中 显示效果 。
12,TextArea控件
TextArea控件又称为多行文本框 。 在意见反馈栏中往往需要浏览者发表意见和建议,提供的输入区域一般较大,以便输入较多的文字 。
使用 <TEXTAREA>标记可以设置多行文本框,其格式为：
<TEXTAREA name=名称 rows=行数 cols=列数 >?
</TEXTAREA>
说明：
① 行数和列数是指不用滚动条就可看到的部分 。
② 在 <TEXTAREA>? </TEXTAREA>之间的内容是文本框的初始值,为多行文本框的 value属性值 。
【 例 6-9】 使用 TextArea控件 。
在记事本中编写代码如下：
<HTML>
<HEAD><TITLE>使用多行文本框 </TITLE></HEAD>
<BODY><H3>使用多行文本框 </H3><HR>
<textarea name=texa cols=20 rows=4>
这是文本框中的初始值 </textarea>
<INPUT type=button name=but value=确定 ></P>
<SCRIPT for=but EVENT=onclick LANGUAGE=vbscript>
msgbox texa.value
</SCRIPT>
</BODY>
</HTML>
在浏览器中 显示效果 。
6.3 上机练习
【 练习 6-1】 使用 window对象的方法,属性和事件设计的倒计时器 。
在记事本中编写代码如下：
<%@ Language=VBScript%>
<HTML>
<HEAD><TITLE>计时器 </TITLE></HEAD>
<SCRIPT LANGUAGE=vbscript>
' 定义一个显示剩余时间的子程序
Public m,q
q=1
Sub tick(k)
m=k-1
t1.value = TimeSerial(0,0,m)
if m =0 or q=0 then
exit sub
end if
window.settimeout,tick(m)”,1000 ‘ 设定执行函数 tick()的
‘ 定时间隔为 1秒
End Sub
</SCRIPT>
</HEAD>
<!--定义 Window对象的 load事件（加载该网页时）执行函数 tick()，继而引发函数 tick()中的
window.setTimeout("tick();",1000)
语句，从而使网页能在 1秒内刷新一次时间 -->
<BODY onload =tick(1*60) bgcolor=LightYellow>
<Center><FONT size=6 face=方正舒体 color= blue>
计时器 </FONT><HR>
剩余时间,<INPUT type=text name=t1 size=10>
<INPUT Type=button value=停止 id=a0>
<script for=a0 event=onclick Language=VBScript>
q=0
</script>
</BODY>
</HTML>
在浏览器中执行代码,显示结果 。
【 练习 6-2】 使用 Document对象与 History对象 。
在记事本中编写代码如下：
<HTML>
<HEAD><TITLE>使用 document的方法 </TITLE>
<SCRIPT LANGUAGE=vbscript>
Sub mybtn_onclick
document.writeln "<H3>使用 history的方法 </H3><HR>"
document.writeln "这是新文档的内容 <P>"
document.writeln "单击按钮将返回 "
document.write
"<INPUT type=button onclick='history.back 1' "
document.write "value=返回 LANGUAGE=vbscript>"
document.title="使用 history的方法 "
End Sub
</SCRIPT>
</HEAD>
<BODY><H3>使用 document的方法 </H3><HR>
<INPUT type=button name=mybtn value=确定 >
</BODY>
</HTML>
在浏览器中 显示效果 。
6.2 课堂教学
6.3 上机练习
6.4 课后作业第 6课 VBScript的对象编程
6.1 课前导读
VBScript是基于对象的程序设计语言,但它并不是真正面向对象的程序设计语言,因为它不具有面向对象的程序设计语言的全部特征 。 在面向对象的程序设计语言中,程序员可以自己定义对象；而在
VBScript中,对象是系统定义好的,可以直接使用 。
VBScript采用的是面向对象,事件驱动编程机制,
因此,必须理解对象以及对象的属性,事件和方法等概念 。
6.2 课堂教学
6.2.1 对象的属性、事件和方法
6.2.2 事件驱动程序设计
6.2.3 DHTML对象模型简介
6.2.3 DHTML的内部控件
6.2.1 对象的属性、事件和方法
1,对象的概念
2,对象的属性
3,对象的事件
4,对象的方法
VBScript采用的是面向对象,事件驱动编程机制,
因此,对象的概念是 VBScript最基本的概念之一 。
1,对象的概念在现实生活中,任何一个实体都可以视为一个对象 （ Object） 。 如一只气球是一个对象,一台电脑也是一个对象 。 一台电脑又可以拆分为主板,CPU,内存,
外设等部件,这些部件又都分别是对象,因此电脑对象可以说是由多个,子,对象组成的 。
从面向对象程序设计的角度来看,对象是具有属性 （ 数据 ） 和方法 （ 行为方式 ） 的实体 。 简单地说,
属性用于描述对象的一组特征,方法为对象实施一些动作,对象的动作则常常要触发事件,而触发事件又可以修改属性 。 一个对象建立以后,其操作就通过与该对象有关的属性,事件和方法来描述 。
VBScript所支持的对象有脚本对象 （ 如 Window对象,Document对象,Forms对象等 ） 和 DHTML内部控件
（ Button控件,Text控件等 ） 。
2,对象的属性在 VBScript中,每一种对象都有一组特定的属性 。
有许多属性可能为大多数对象所共有,如 Name属性定义对象的内部名称 。 还有一些属性只局限于个别对象才有,如只有文本框才有 maxLength属性,该属性用来确定用户可以在文本框中输入的字符数
3,对象的事件事件 （ Event） 就是对象上所发生的事情 。 在
VBScript中,事件是预先定义好的,能够被对象识别的动作,如单击 （ Click） 事件,双击 （ DblClick） 事件,装载 （ Load） 事件,鼠标移动 （ MouseMove） 事件等,不同的对象能够识别不同的事件 。 当事件发生时,
VBScript将检测两条信息,即发生的是哪种事件和哪个对象接收了事件 。
每种对象能识别一组预先定义好的事件,但并非每一种事件都会产生结果,因为 VBScript只是识别事件的发生 。 为了使对象能够对某一事件做出响应
（ Respont）,就必须编写事件过程 。
事件过程是一段独立的程序代码,它在对象检测到某个特定事件时执行 （ 响应该事件 ） 。 一个对象可以响应一个或多个事件,因此可以使用一个和多个事件过程对用户或系统的事件作出响应 。 程序员只需编写必须响应的事件过程,而其他无用的事件过程则不必编写,如命令按钮的,单击,（ Click） 事件比较常见,其事件过程需要编写,而其 MouseDown或 MouseUp
事件则可有可无,程序员可根据需要选择 。
4,对象的方法一般来说,方法就是要执行的动作 。 VBScript的方法与事件过程类似,可以是函数,也可以是过程,
它用于完成某种特定功能而不能响应某个事件 。 如
Window对象的关闭 （ Close） 方法,打开 （ Open） 方法等 。 每个方法完成某个功能,但其实现步骤和细节用户既看不到,也不能修改,用户能做的工作就是按照约定直接调用它们 。
方法只能在代码中使用,其用法依赖于方法所需的参数的个数以及它是否具有返回值 。 当方法不需要参数并且也没有返回值时,可用下面的格式调用对象方法：
对象名,方法名 参数 1,参数 2?
6.2.2 事件驱动程序设计
1,事件驱动模型机制
2,事件过程的调用方式
VBScript是一种基于事件驱动的编程语言,它可以对在浏览器中发生的很多事件做出响应 。
1,事件驱动模型机制事件驱动意味着系统中各个部分之间以及系统与应用程序之间通过,消息,进行通信,消息的发送与接收伴随着事件的发生,不同的消息与不同的事件相联系 。 应用程序通过与特定消息相对应的事件过程代码实现与用户的交互 。
VBScript代码是在浏览器中执行的,而浏览器是
Windows操作系统的一个应用程序 。 Windows操作系统正是基于事件驱动的,通过消息机制,系统与应用程序进行通信,协调它们的工作 。 当用户在浏览器中进行操作时 （ 如单击鼠标左键或按下键盘上的某个键 ）,
操作系统检测到该操作便向浏览器发送相应的消息,
后者接收到消息后,就在当前 VBScript应用程序中寻找对应的事件处理代码 —— 事件过程 。 如果该过程存在,执行该段代码,否则就交由浏览器处理 。
在事件驱动的程序设计中,程序员根据需要设计事件处理代码 —— 事件过程,而无需确定这些过程的执行顺序 。 当用户进行操作时,程序将执行相应的事件过程 。 这些事件的发生是随机的,依赖于用户的实际操作 。
需要注意的是,不必为所有的事件编写事件过程 。
例如在处理鼠标单击事件时,一般只需为对象的 Click
事件编写代码,而不必为 MouseDown和 MouseUp事件编写代码 。
2,事件过程的调用方式事件过程按其名称被识别,事件过程的命名规则是,on事件名,如 Click事件过程名为 onclick。 事件过程的定义与调用有如下 4种方式 。
(1) 通过 <SCRIPT>标记块实现为每个事件过程分配一个 <SCRIPT>标记块,然后使用 <SCRIPT>标记的 event属性调用事件过程,其语法格式为：
<SCRIPT for = 对象名 event = on 事 件 名
LANGUAGE = VBScript>
〈 事件过程代码 〉
</SCRIPT>
说明：此方式在第 4,5章中多次使用 。
(2) 在对象定义标记中设置事件过程通过在对象定义标记中设置事件过程可以直接调用事件过程代码,如下面代码：
<HTML>
<HEAD><TITLE>调用事件过程 </TITLE></HEAD>
<BODY><H3>调用事件过程 </H3><HR>
<INPUT type=button onclick = 'aa="这是按钮的单击事件 ":
msgbox aa'
value=确定 LANGUAGE=vbscript>
</BODY>
</HTML>
代码在浏览器中的 执行结果 。
(3) 在对象定义标记中调用事件过程在对象定义标记中设置事件过程属性可以调用命名 Sub过程 。 上述代码可以改为：
<HTML>
<HEAD><TITLE>调用事件过程 </TITLE>
<SCRIPT LANGUAGE=vbscript>
Sub mysub()
aa = "这是按钮的单击事件 "
msgbox aa
End Sub
</SCRIPT>
</HEAD>
<BODY><H3>调用事件过程 </H3><HR>
<INPUT type=button onclick=mysub value=确定 >
</BODY>
</HTML>
代码在浏览器中的 执行结果 。
(4) 单独定义事件过程这种方式对事件过程的命名有严格的要求,过程名必须是：
对象名 _on事件名通常在脚本的 <HEAD>块中定义事件过程,如上述代码可以改为：
<HTML>
<HEAD><TITLE>调用事件过程 </TITLE>
<SCRIPT LANGUAGE=vbscript>
Sub mybtn_onclick
aa = "这是按钮的单击事件 "
msgbox aa
End Sub
</SCRIPT>
</HEAD>
<BODY><H3>调用事件过程 </H3><HR>
<INPUT type=button name=mybtn value=确定 >
</BODY>
</HTML>
代码在浏览器中的 执行结果 。
6.2.3 DHTML对象模型简介
1,Window对象
2,Document对象
3,History对象
4,Navigator对象
5,Location对象
6.2.3 DHTML对象模型简介
DHTML即动态 HTML,所谓的,动态,不仅仅表现在网页的视觉展示方式上,更重要的是,它可以对网页中的内容进行控制与变化 。
严格说来,DHTML并不是什么新技术或标准的简称 。 换句话说,事实上并没有任何一种技术或标准就叫做 DHTML。 那到底什么是 DHTML呢？ 其实,DHTML是一些现有网页技术与标准的整合,通过它,网页设计者可以用一种新的方式创建网页 。 既然是现有网页技术与标准的整合,DHTML当然还是以 HTML语言为基础,
但是相较于过去单纯以 HTML来设计网页的方法,HTML
所带来的最大转变,在于它加入了,对象化,的网页技术特征 。
动态 HTML对象模型定义了用于描述网页及其内部元素的对象,每个对象都有描述其自身状态的属性和描述其行为的方法,它们也可以处理特定类型的事件 。
因此,网页设计者可通过 Script程序来控制或调用这些对象 。
window
screen frames history navigator location scripts document
link anchors forms
图 6-1 DHTML模型的层次结构如图 6-1所示,在 DHTML模型中最顶层的对象是
Window对象,其他对象可以看作是 Window对象的属性 。
其中,对于编程最重要的属性是 Document对象 。
Document对象表示浏览器中当前 HTML文档,通过该对象能够获得关于当前文档的信息,可以检测和修改当前 HTML文档的元素,还可以响应事件 。
Screen属性包含了客户端显示器的信息 。 通常网页设计要考虑到不同的屏幕分辨率,才能让用户看到最佳的效果,因此,需要获得用户显示器的信息,以便动态调整页面 。
Frames属性指定由给定文档或者与某个窗口对应文档定义的所有 Window对象 。 这是一个集合属性 。 它同时也是 Document对象的属性 。
History属性包含用户先前访问过的 URLs信息 。
Navigator属性包含了用户所使用的浏览器的属性,
例如浏览器的名称 。 Location属性包含了关于当前
URL的信息 。 Scripts属性返回当前文档的所有 Script
块,而不管 Script块是在 Body块还是在 Head块中 。
而 Document对象的 Link属性指定了 HTML文档中的连接 。 Anchors属性可以获得文档中的所有超链接 。
Forms属性是集合属性,返回文档中所有的表单元素 。
1,Window对象
Window对象表示浏览器中一个打开的窗口 。 通过引用该对象的属性可以控制脚本中其他对象的属性,
进而控制整个网页的外观以及对事件的响应 。 使用
Window对象 可以 获得当前窗口的状态信息,文档信息,
浏览器的信息,还可以响应发生在 IE中的事件 。
通常,浏览器在打开 HTML文档时,创建 Window对象 。 如果文档中定义了多个 Frames对象,则在文档中有多个 Frame标记 。 在这种情况下,浏览器为该文档创建一个父 Window对象,为每个 Frame标记创建一个子 Window对象 。 父 Window对象中发生的操作可以影响子 Window对象 。 如调用父 Window对象的 Close方法将不只关闭父窗口,所有的子窗口都会关闭 。
在脚本程序中使用 Window对象的属性,方法,集合时,一般不必标明 Window,而直接使用 。 比如,关闭窗口时,可以用代码 Close,而不必写为：
Window.Close。 只是为了增加程序的可读性,建议用户标明 Window对象 。
下面分别介绍 Window对象常用的属性,方法和事件,
(1) Window对象的属性
Window对象有多个属性,通过这些属性可以得到客户端浏览器属性,可以控制当前窗口的 HTML文档等等 。 其主要属性见表 6-1。
表 6-1 Window对象的属性名称 说明
Document属性 返回对当前 Document对象的引用，从而能够调用 Document对象的属性、方法，事件等
Event属性 返回对 Event对象的引用，从而能够调用 Event对象的属性。只能在事件过程中使用
History属性 返回对 History对象的引用。通过该属性，可以调用 History对象的属性、方法、事件等
Location属性 返回对 Location对象的引用。通过该属性，可以调用 Location
对象的属性、方法、事件等
Navigator属性 返回对 Navigator对象的引用。通过该属性,Navigator对象的属性、方法、事件等
Self属性 返回对当前窗口的引用，为只读属性
Status属性 返回和设置浏览器中状态栏显示的信息说明：
① 使用 Self属性就可以显式地引用当前 Window对象或者 Frame对象的方法,从而避免因表单与 Window对象重名引起的歧义,提高脚本代码的可读性 。
② 可以用如下代码在浏览器状态栏中提示用户正在加载网页：
Window.status = "正在加载网页 "
把上述代码放在 load事件过程中,就能够使用户看见提示信息 。
③ 使用 event对象时必须标明 Window对象：
Window.event。 Event 对象的 属性 有,button、
altKey,ctrlKey,shiftKey,toElement,
fromElement,returnValue,keyCode等等,用于返回事件发生时相应对象的状态,鼠标和键盘的状态 。
在特定的事件过程中,不是所有的属性都有意义 。
例如,Event的 fromElement和 toElement属性只在
mouseover和 mouseout事件处理函数中才有意义 。
(2) Window对象的方法
Window对象的方法用于显示提示信息,输入信息,
控制 HTML页面外观,触发和响应事件,显示 HTML页面等 。 其常用的方法见表 6-2。
表 6-2 Window对象的常用方法名称 说明
Alert方法 用于显示一个对话框，包括信息图标、提示信息和“确定”
按钮。
Close方法 用于关闭当前浏览器窗口。父 window对象调用 Close方法时，
会关闭所有的子窗口
Confirm方法 用于显示一个对话框，包括问号图标、提示信息、“确定”
按钮和“取消”按钮
open方法 用于打开一个新的浏览器窗口，并且加载由其 URL参数指定的 HTML文档
Prompt方法 用于显示一个输入对话框，包括提示信息和输入框
SetTimeout方法 用于定时执行某个函数或命令说明：
① Alert方法有些类似于 MsgBox函数产生的对话框,只是 Alert产生的含有图标,而且对话框标题为
,Microsoft Internet Explorer” ；前者不含有图标,对话框标题为,VBScript” 。 注意,用户无法更改使用该方法产生的对话框标题 。
② Confirm方法与 Alert,MsgBox产生的对话框不同,该方法产生的对话框有两个按钮,而且有返回值 。 单击,确定,按钮,该方法返回值为 True；单击
,取消,按钮,该方法返回值为 False。 注意,无法更改使用该方法产生的对话框标题 。
③ Prompt方法的语法如下：
Prompt([message[,inputDefault]])
其中,message是可选参数,是显示提示信息的字符串； InputDefault也是可选参数,显示缺省输入值 。 如果不指定 InputDefault参数,那么,对话框的输入框中将显示,undefined” 字样 。 该方法的返回值为用户输入的字符串 。 与 Alert,MsgBox一样,该方法产生的对话框标题无法更改 。
④ SetTimeout方法的语法如下：
SetTimeout("命令或过程 ",毫秒数 )
其作用是在指定的时间 （ 毫秒数 ） 后执行指定的
,命令或过程,。
⑤ open方法的语法如下：
window = 对象名,open([URL[,name[,features
[,replace]]]])
其中,URL参数指定了新窗口要加载的 HTML文档 。
如果不指定 URL参数,则加载一个空 HTML文档 。
name参数是可选的,用来指定新窗口的名称,以便别的 HTML文档通过超链接调用 。
Features参数是可选的,用于指定新窗口的样式,
有多个选项可以选择,各选项取值与说明见表 6-3。
表 6-3 Features参数的取值说明名称 说明
fullscreen 指定窗口是（ yes）否为全屏显示，默认值 no
channelmode 指定窗口是否为舞台模式
toolbar 指定窗口是否显示工具栏控件 (包括：前进、后退、停止等按钮 )
location 指定窗口是否显示 URL输入框
directories 指定窗口是否显示“链接”工具栏
status 指定窗口底部是否显示状态栏，缺省值为 yes
scrollbar 指定窗口是否显示垂直和水平滚动条
resizable 指定窗口是否显示最大、最小化按钮
width 指定窗口显示宽度，可以设置为 >=100的数
Height 指定窗口显示高度，可以设置为 >=100的数
top 指定窗口顶部的坐标
left 指定窗口左端的坐标
replace参数也是可选的,可以设置为 yes或者 no，
用于指定加载的 URL在浏览器历史记录中,是否替换原窗口的 URL记录 。
例如,可以用如下代码打开一个窗口：
Window.Open "titile.htm"
下述代码打开一个名为 title.htm的文档,新窗口不指定名称,显示工具栏,显示,链接,工具栏：
Window.Open "titile.htm",null,"fullscreen = no,
toolbar = yes,directories = yes"
(3) Window对象的事件
Window对象的事件分为：与加载或卸载网页有关的,与窗口状态有关的,与窗口中事件处理有关的 。
这些事件中常用的有 load,unload,resize。
Load事件与 Unload事件分别发生于网页的加载或卸载时,它们界定了一个 HTML文档的生命期 。
Load事件在 IE加载给定对象后立刻发生 。 该事件过程应在 <body>标记中声明 。 在网页的 Load事件处理函数中可以对网页做一些初始化工作,或者显示一些信息 。 例如,下面的代码可以在加载网页时显示对话框说明已经触发了 Load事件 。
<HTML>
<HEAD><TITLE>Load事件过程 </TITLE>
<SCRIPT LANGUAGE=vbscript>
Sub init()
MsgBox "正在加载网页，触发了 Load事件 "
End Sub
</SCRIPT>
</HEAD>
<body onload=init></body>
</HTML>
resize事件发生在用户调整浏览器窗口大小时,
可以在其事件过程中重新安排页面中各要素的显示位置和尺寸,以便增加网页对用户操作的敏感性,使交互界面更友好 。
Unload事件是在 IE关闭该网页时触发 。 可以在该事件过程中添加代码,保存有用的用户信息 。 比如,
在进行网上购物时,可以在网页的 Unload事件过程中,
统计购物的种类和数目等等 。 下面的代码可以在关闭网页时显示对话框说明已经触发了 Unload事件 。
<HTML>
<HEAD><TITLE>unLoad事件过程 </TITLE>
<SCRIPT LANGUAGE=vbscript>
Sub Leaving()
MsgBox "正在离开网页,触发了 Unload事件 "
End Sub
</SCRIPT>
</HEAD>
<body onunload=Leaving></body>
</HTML>
2,Document对象
Document对象代表了当前浏览器窗口中的 HTML文档,它是脚本对象模型中最为重要的对象 。 可以通过该对象检测 HTML文档中各元素的状态 （ 比如,颜色,
字体,发生的事件等 ）,并且可以更改这些元素的状态 。 在 HTML文档的任何位置都可以调用该对象 。
下面分别介绍 Document对象常用的属性,方法和事件 。
(1) Document对象的属性在 Document对象的属性中,有些是用来设置当前
HTML文档的状态,有些则是用来指示当前 URL的信息 。 其常用的属性见表 6-4。
表 6-4 Document对象的属性名称 说明
alinkcolor属性 用来得到或更改当前页面中所有超链接拥有焦点时（按下鼠标左键还没有松开）的颜色
bgColor属性 用来得到或更改当前页面的背景颜色
fgColor属性 用来得到或更改当前页面所有文本的颜色
vlinkColor 用来得到或更改访问过的超链接的颜色
cookie属性 用来得到或更改浏览器的一个 cookie值。
title属性 用来返回在 <title>标签中编写的文本，该文本一般作为浏览器的标题出现说明：
① 上述属性的颜色可以使用 IE颜色表中的值 。 对颜色值的调用既可以通过颜色名,又可以通过相应的十六进制数 。
② Cookie是由浏览器读取或写入硬盘的文本文件,
存放在特定的文件夹中 。 Cookie可以存放用户名和选项等配置信息,使得下一次请求同一页面时,脚本能找到上次存放在客户机上的数据,以调整用户配置 。
通常用 cookie来保存服务器发送来的字符串,以便在页面之间共享信息 。 在 VBScript
中,可以使用如下代码把该属性值设为指定值,然后显示出来：
document.cookie ="color=Yellow"
MsgBox(document.cookie)
(2) Document对象的方法
Document对象提供了多种方法控制网页的读写以及外观,常用的方法见表 6-5。
表 6-5 Document对象的方法名称 说明
clear方法 清空当前文档中的内容，一般用于动态生成网页的操作中
close方法 关闭当前文档
open方法 打开文档以便用 write或者 writeln方法写入新的文档内容
write方法 用于在当前文档中写入新的内容，在输出字符串末尾不包括回车标志
writeln方法 用于在当前文档中写入新内容，在输出字符串末尾包括回车标志说明：
① 与 window对象的 Open方法不同,Document对象的 open方法只是在当前浏览器窗口新建一个 HTML文档,
前者则新建一个浏览器窗口 。
在动态更改网页操作中,一般先调用 open方法在浏览器窗口中打开一个空的文档,然后,通过调用
write或者 writeln方法在文档中输入新的内容,然后,
调用 close方法关闭文档并显示它 。
② write方法和 writeln方法的区别在于 writeln
方法在输出字符串末尾添加了回车标志 。
(3) Document对象的事件
Document对象的事件中常见的有,click，
dblclick,keydown,keypress,keyup,mousedown、
mouseover,mouseout,mouseup等 。
在文档中与 Document对象相对应的 HTML标记是
<body>,所以,调用 Document对象的事件过程时要在
<body>标记中添加代码 。
3,History对象
History对象包含了用户访问过的 URL信息,通过这些信息可以使浏览器具有导航功能,使得用户可以很方便地在感兴趣的 URL之间切换 。
History对象不出现在网页上,因而没有对应的事件,只有一些属性和方法 。 以下分别介绍 History对象常用的属性,方法 。
(1) History对象的属性
History对象只有一个 Length属性 。 该属性返回用户访问过的 URL个数 。 该属性只读,在程序中不能对它进行赋值操作,使用频率并不高 。
(2) History对象的方法
History对象的方法用于在 URL历史记录中移动,
从而改变当前 URL。 它有三个方法,back方法,forward
方法和 go方法 。
back方法 。 该方法用于回溯浏览内容,等效于用户在浏览器中单击 n次,后退,按钮 。 其调用形式如下：
History.back n
其中,参数 n指定在 URL历史记录中回溯 URL的个数 。
例如：
window.history.back 1
该语句使得当前文档切换到最近一次访问过的 URL。
forward方法 。 该方法用于显示 URL历史记录表中下一个 URL的内容,等效于用户在浏览器中单击 n次
,前进,按钮 。 其调用形式如下：
History.forward n
其中,参数 n指在历史记录表中前移 URL的个数 。
go方法 。 该方法用于显示 URL历史记录表中特定
URL的内容 。 其调用形式如下：
History.go(delta | location)
其中,参数 delta是个整数,指定目标 URL的相对位置 。 参数 location是个字符串,指定目标 URL的一部分或者全部 。
说明：当参数 delta为 1时,相当于执行语句：
History.forward 1。 当参数 delta为 -1时,相当于执行语句,History.back 1。
4,Navigator对象
Navigator对象包含了客户端浏览器的信息,通过引用该对象的属性可以得到这些信息,在大多数情况下,客户端使用的浏览器类型是无法事先知道的 。
这就要求 HTML文档能够适应多种浏览器的特性,比如可能需要它同时适用于 IE和 Netscape浏览器 。 而事实上,浏览器之间的兼容性并不好 。 为此,我们可以设计两组页面,每组页面对应一种浏览器,由脚本程序判断页面是由哪种浏览器打开的,然后根据浏览器的信息打开相应的页面,以便用户获得最佳的浏览效果 。
Navigator对象不出现在网页上,因而没有对应的事件,只有一些属性和方法 。
(1) Navigator对象的属性
Navigator的属性包含了浏览器的名称,版本,
设置等 。 其中,较为常用的属性有 appCodeName、
appName,appVersion,cookieEnabled等 。
appCodeName属性 。 通过该属性可以得到浏览器类型代号 。 例如,对于 IE来说,该属性的返回值为
,Mozilla” 。
appName属性 。 通过该属性可以得到浏览器类型名称 。 例如,对于 IE来说,该属性的返回值为
,Microsoft Internet Explorer” 。
appVersion属性 。 通过该属性可以得到浏览器的版本号 。
cookieEnabled属性 。 由于 cookie可以存放一些有用的用户信息,所以,判断浏览器是否支持 cookie
很有用处 。
(2) Navigator对象的方法
Navigator对象支持两个方法,javaEnabled和
taintEnabled。 其中,前者可以用来确定浏览器是否支持 java编程语言 。 这样,脚本程序可以利用这条信息动态调整代码 。 对于不支持 java的,程序中原来用
java的部分,可以用 VBScript代码实现 。 后者可以用来确定浏览器是否支持数据 tainting。
5,Location对象
Location对象包含了当前 URL的信息 。 该对象不支持方法和事件 。 在其属性中,最常用的有 href、
pathname,search等属性 。
href属性 。 该属性用来返回或者设置当前完整的
URL。 通过该属性,能够实现网页间的少信息传递 。 同时,通过在脚本代码中改变该属性可以实现网页的动态切换 。
例如,可以用如下代码指定当前窗口的 URL：
Window.Location.href ="http://www.sohu.com"
href属性是 Location对象的缺省属性 。 也就是说,
下属代码等价：
Location = "../chap3/docExample.htm"
Location.href = "../chap3/docExample.htm"
pathname属性 。 该属性可用来设置当前文档的路径,通过它能够调用 Web根目录以外的文档 。
search属性 。 该属性用来返回 URL中嵌入的参数,
通过参数来实现网页间的信息交互 。 这种方式比起使用服务器端对象要简单一些 。 在 URL中嵌入参数的方法是在 URL后面加一个问号 (?),然后紧跟参数名称和参数值 。 例如：
http://www.SomeSite.com/cgi/UserRegister.exe?UserName="yangjing"
这 段 代 码 查 找 用 户 名 yangjing,由
UserRegister.exe返回相应结果 。
6.2.3 DHTML的内部控件
1,通用的属性、事件和方法 2,Button控件
3,Text控件 4,Password控件
5,Radio控件 6,Checkbox控件
7,Image控件 8,File控件
9,Submit控件和 Reset控件 10,Hidden控件
11,Select控件 12,TextArea控件
6.2.3 DHTML的内部控件
DHTML（ Dynamic Hyper Text Markup Language）
是 HTML的增强版,通过扩充 IE对象并结合 VBScript或
JScript而组成,与 HTML的区别是 DHTML的每个标记都作为对象处理 。 DHTML的内部控件是其预制的对象,由客户端浏览器直接提供,无需从服务器上下载 。
可以使用 <INPUT>,<SELECT>和 <TEXTAREA>等标记在网页中添加 DHTML的内部控件 。 其中,<SELECT>标记和 <TEXTAREA>标记分别添加列表框和多行文本区控件,
而 <INPUT>标记则可以在网页中添加多种 DHTML控件,
如第 4,5课中的例题所示 。
<INPUT>标记的语法结构如下：
<INPUT name = 名称 type = 类型名? language =
脚本语言名 >
说明：
① name属性指定控件的名称,用于在代码中引用该控件 。
② type属性指定控件的类型,其取值与对应的控件说明见表 6-6。
③ language属性指定控件的事件代码所使用的脚本语言名称,取值如 VBScript或 JScript。
格式中还包括其他一些属性,这些属性中有些是少数控件所特有的,有些则是控件所共有的,即通用的属性 。
表 6-6 type属性的取值说明取值 控件 说明
Button Button控件 命令按钮
Text Text控件 单行文本框
Password Password控件 口令输入框
Radio Radio控件 单选按钮
Checkbox Checkbox控件 复选框按钮
Image Image控件 图像
File File控件 多行文本框
Submit Submit控件 提交按钮，与 <FORM>标记一起使用，向服务器提交表单内容
Reset Reset控件 重置按钮，清除表单中的输入内容
Hidden Hidden控件 隐含标签，与 <FORM>标记一起使用，作为表单内容向服务器提交
1,通用的属性,事件和方法
(1) 通用属性常用的通用属性有,Disabled属性,Style属性,
Title属性,Value属性等 。 其说明见表 6-7。
表 6-7 内部控件的通用属性名称 说明
Disabled属性 可用性属性，取值为 True（默认）或 False，设置或返回控件是否响应用户事件。可以在 <INPUT>标记或代码中使用。
Style属性 样式属性，设置或返回控件的内嵌样式。可以在 <INPUT>标记或代码中使用。
Title属性 提示信息属性，设置或返回当鼠标在控件上移动时所显示的提示信息。可以在 <INPUT>标记或代码中使用。
Value属性 值属性，设置或返回控件当前状态的对应值。不同控件的值所表示的含义有所不同，如命令按钮的值是指按钮表面所显示的标题，而文本框的值是指文本框中的文本内容。该属性可以在
<INPUT>标记或代码中使用。
【 例 6-1】 通用属性的使用 。
在记事本中编写代码如下：
<HTML>
<HEAD><TITLE>通用属性的使用 </TITLE></HEAD>
<BODY><H3>通用属性的使用 </H3><HR>
请输入文本：
<INPUT name=Text1 type=Text disabled = False Size=20><P>
<INPUT type = Button name=Button1 title=不能修改文本 value=改变 >
<SCRIPT FOR=Button1 EVENT="onClick" LANGUAGE="VBScript">
If Button1.value = "改变 " then
Button1.style.fontFamily = "隶书 "
Button1.style.fontSize=24
Text1.disabled = False
Button1.title="可以修改文本 "
Button1.value = "还原 "
Else
Button1.style.fontFamily = "宋体 "
Button1.style.fontSize=18
Text1.disabled = True
Button1.title="不能修改文本 "
Button1.value = "改变 "
End If
</SCRIPT>
</BODY>
</HTML>
在浏览器中执行代码,显示结果 。
(2) 通用事件通用事件是指大多数控件都能响应的事件 。 通用事件的说明见表 6-8
表 6-8 内部控件的通用事件名称 说明
Focus事件 当控件收到焦点时，触发事件
Blur事件 当控件失去焦点时，触发事件
Click事件 当用户单击鼠标左键，然后抬起按键时，触发 Click事件；当控件处于激活状态时，按下 Enter或空格键，也将触发 Click事件
Dblclick事件 当用户双击鼠标左键，将触发 Click事件；
Mouseover事件 当鼠标移到控件（或对象）的上方时，将触发该事件
Mousemove事件 当鼠标移到控件（或对象）的上方时，将触发该事件
Mouseout事件 当鼠标从控件（或对象）内部移出时，将触发该事件
Mousedown事件 按下鼠标键时，将出发该事件
Mouseup事件 按下鼠标键，再松开时，将出发该事件
Keypress事件 当按下和松开某个 ASCII字符键时，拥有焦点的控件将会响应，事件过程将获得按键对应的 ASCII码
Keydown事件 当按下键盘上的某个键时，拥有焦点的控件将会响应，事件过程将获得按键对应的键值
Keyup事件 按下键盘上的某个键，当释放该键时，拥有焦点的控件将会响应，事件过程将获得按键对应的键值
【 例 6-2】 响应鼠标事件 。
在记事本中编写代码如下：
<HTML>
<HEAD><TITLE>使用鼠标事件 </TITLE></HEAD>
<BODY><H3>使用鼠标事件 </H3><HR>
<INPUT name=Button1 type=Button value=我是一个按钮 >
<P>
<INPUT name=Text1 type=Text Size=20>
<SCRIPT FOR=Button1 EVENT=onClick LANGUAGE="VBScript">
Text1.value = "我被单击了 "
</SCRIPT>
<SCRIPT FOR=Button1 EVENT=onMouseover LANGUAGE=VBScript>
Text1.Value = "鼠标指向了我 "
</SCRIPT>
<SCRIPT FOR=Button1 EVENT=onMousedown LANGUAGE=VBScript>
Text1.Value = "鼠标按下了 "
</SCRIPT>
<SCRIPT FOR=Button1 EVENT=onMouseout LANGUAGE=VBScript>
Text1.Value = "鼠标离开了 "
</SCRIPT>
</BODY>
</HTML> 在浏览器中执行代码,显示结果 。
【 例 6-3】 响应键盘事件 。
在记事本中编写代码如下：
<HTML>
<HEAD><TITLE>使用键盘事件 </TITLE></HEAD>
<BODY><H3>使用键盘事件 </H3><HR>
按键,<INPUT name=Text1 type=Text Size=20>
控制键,<INPUT name=Text2 type=Text Size=10><P>
ASCII码,<INPUT name=Text3 type=Text Size=10>
键值,<INPUT name=Text4 type=Text Size=10><P>
<SCRIPT FOR=Text1 EVENT=onKeypress LANGUAGE="VBScript">
Text3.value =window.event.Keycode
</SCRIPT>
<SCRIPT FOR=Text1 EVENT=onKeydown LANGUAGE=VBScript>
Text1.Value = ""
Text2.Value = ""
Text4.value = keycode
</SCRIPT>
<SCRIPT FOR=Text1 EVENT=onKeyup LANGUAGE=VBScript>
keycode=window.event.Keycode
alt=window.event.altKey
Ctrl=window.event.CtrlKey
Shift=window.event.ShiftKey
Select Case True
Case Alt
Text2.value = "Alt"
Text1.Value = chr(keycode)
Case Ctrl
Text2.value = "Ctrl"
Text1.Value = chr(keycode)
Case Shift
Text2.value = "Shift"
Text1.Value = chr(keycode)
End select
Select Case True
Case keycode=13
Text1.Value = "回车键 "
Case keycode=8
Text1.Value = "退格键 "
Case keycode=27
Text1.Value = "ESC"
End select
</SCRIPT>
</BODY>
</HTML> 在浏览器中执行代码,显示结果 。
说明：
① 在键盘事件中,VBScript通过 Window对象的
Event属性接受按键的 ASCII码值 （ Keypress事件 ） 或键值 （ Keydown事件和 Keyup事件 ） 。
② Window对象的 Event属性返回对 Event子对象的引用,引用的格式为：
key = window.event.Keycode
③ Event子对象的常用属性见表 6-9
表 6-9 vent子对象的常用属性属性名称 说明
button 返回事件发生时相应对象的状态
altKey 返回事件发生时 Alt键是否按下
ctrlKey 返回事件发生时 Ctrl键是否按下
shiftKey 返回事件发生时 Shift键是否按下
keyCode 返回事件发生时的按键
(3) 通用方法这里只介绍 Focus方法 。 Focus方法使得控件获得焦点,其语法格式为：
控件名,Focus
2,Button控件
Button控件又称为命令按钮,通常用来响应用户的命令 。 Button控件支持大多数的通用属性和事件,
其特有的属性有以下几种 。
① ReadOnly属性,返回或设置控件状态为只读 。
与 Disabled属性不同的是,ReadOnly属性允许控件接受焦点 。 可以在 <INPUT>标记或代码中使用
② OuterText属性,取值为字符串,用于将控件动态地更新为该字符串文本 。 如下述代码将按钮
Button1改为文本,欢迎进入聊天室,,
Button1.OuterText = "欢迎进入聊天室 "
③ OuterHTML属性,取值为字符串或 HTML标记
（ 除 <HTML>,<HEAD>,<TITLE>以外 ） 。 如下述代码将按钮 Button1改为 Text文本框控件：
Button1.OuterHTML = "<INPUT type = Text
value='还原 '>"
3,Text控件
Text控件又称为文本框,通常用来接收用户的输入或输出提示信息 。 Text控件支持大多数的通用属性和事件,其特有的属性有以下几种 。
① MaxLength属性,用于返回或设置用户可以输入的字符数 。 可以在 <INPUT>标记或代码中使用 。
② Size属性,用于返回或设置文本框的宽度 。
可以在 <INPUT>标记或代码中使用 。
Text控件所特有的事件有：
① Chang事件,改变文本内容,并转移焦点时触发该事件 。
② Select事件,选择文本内容时触发该事件 。
【 例 6-4】 响应 Chang事件 。
在记事本中编写代码如下：
<HTML>
<HEAD><TITLE>文本框的内容 </TITLE></HEAD>
<BODY><H3>文本框的内容 </H3><HR>
请输入文本,<INPUT name=Text1 type=Text value =原有内容
Size=20><P>
<INPUT type = Button name=Button1 value=确定 >
<SCRIPT FOR=Button1 EVENT=onClick LANGUAGE="VBScript">
Msgbox "文本框中的内容是," & Text1.Value
</SCRIPT>
<SCRIPT FOR=Text1 EVENT=onChange LANGUAGE="VBScript">
Button1.outerhtml = "文本框中的内容被改变了 "
</SCRIPT>
</BODY>
</HTML>
Chang事件的 使用情况 。
4,Password控件
Password控件与 Text控件类似,只是它不显示文本的内容,通常用于验证口令 。 当用户输入口令时,
键入的字符都以星号 （ *） 出现 。 Password控件所支持的属性和事件与 Text控件也大致相同 。
5,Radio控件
Radio控件又称为单选按钮 。 一般来说,单选按钮总是作为一个组 （ 单选按钮组 ） 的组成部分工作的 。
单选按钮组是一组相互排斥的单选按钮,选择一个单选按钮就会立即清除该组中的其它按钮 。 在单选按钮组中只能单击一个选项,这与收音机上按钮的作用相似,故又称收音机按钮 。
单选按钮支持常用的通用属性和事件,其特有的属性是 Checked。 Checked属性用于返回或设置单选按钮的状态,其取值为 True或 False。 若属性值为 True，
则该单选按钮处于被选中状态；若为 False（ 默认 ）,
则处于未选中状态 。
可以使用控件的 ID属性来区别单选按钮组中的按钮,也可以通过使用下标来区别如下例所示 。
【 例 6-5】 使用单选按钮组 。
在记事本中编写代码如下：
<HTML>
<HEAD><TITLE>使用单选按钮 </TITLE></HEAD>
<BODY><H3>使用单选按钮 </H3><HR>
<INPUT name=Text1 type=Text value =文本内容
Style={font:44} Size=20><P>
宋体 <INPUT type = Radio name=Radio checked=True>
黑体 <INPUT type = Radio name=Radio >
隶书 <INPUT type = Radio name=Radio >
楷体 <INPUT type = Radio name=Radio >
<SCRIPT FOR=Radio EVENT=onClick LANGUAGE=VBScript>
select case true
case Radio(0).checked
Text1.Style.fontFamily = "宋体 "
case Radio(1).checked
Text1.Style.fontFamily = "黑体 "
case Radio(2).checked
Text1.Style.fontFamily = "隶书 "
case Radio(3).checked
Text1.Style.fontFamily = "楷体 _GB2312"
end select
</SCRIPT>
</BODY>
</HTML>
在浏览器中执行代码,显示情况 。
6,Checkbox控件
CheckBox控件又称为复选框,其功能与单选按钮相似,就像一个开关,用于表明某个特定状态是选定
（ ON） 还是未选定 （ OFF） 状态 。 与单选按钮不同的是,可以同时选中多个复选框 。 复选框所支持的属性和事件与单选按钮相同,其 Checked属性用于返回或设置单选按钮的状态 。
【 例 6-6】 使用复选框 。
在记事本中编写代码如下：
<HTML>
<HEAD><TITLE>使用复选框 </TITLE></HEAD>
<BODY><H3>使用复选框 </H3><HR>
<INPUT name=Text1 type=Text
value =文本内容 Style={font:44} Size=20><P>
斜体 <INPUT type = checkbox name=chk>
粗体 <INPUT type = checkbox name=chk>
下划线 <INPUT type = checkbox name=chk>
删除线 <INPUT type = checkbox name=chk>
<SCRIPT FOR=chk EVENT=onClick LANGUAGE=VBScript>
If chk(0).checked Then
Text1.Style.Fontstyle = "italic"
Else
Text1.Style.Fontstyle = "normal"
End If
If chk(1).checked Then
Text1.Style.Fontweight = "bold"
Else
Text1.Style.Fontweight = "normal"
End If
Text1.Style.TextdecorationUnderline = chk(2).checked
Text1.Style.TextdecorationlineThrough = chk(3).checked
</SCRIPT>
</BODY>
</HTML> 在浏览器中执行代码,显示情况 。
7,Image控件
Image控件用于显示图形信息,就像 HTML中的 IMG
标记,其属性也类似 。 不同的是可以在代码中通过
,控件名,x” 和,控件名,y” 来设置或得到该控件的 x
和 y坐标 。
与 IMG标记的最大不同应该是 Image控件可以响应事件,Image控件支持多数的通用事件 。
8,File控件
File控件提供一个文本框和一个浏览按钮,用于查找文件 。 单击浏览按钮,打开,查找文件,对话框,
找到的文件及其路径名将显示在文本框中 。 File控件的 value属性将返回找到的文件及其路径名 。
File控件支持多数的通用属性和事件 。
9,Submit控件和 Reset控件这两个控件须和 <FORM>标记一起使用,分别提供
,提交,按钮 （ Submit控件 ） 和,取消,按钮
（ Reset控件 ） 。 单击,提交,按钮,将会向一个后端过程提交表单中的内容；单击,取消,按钮,则清除当前表单中的所有输入信息 。
Submit控件和 Reset控件支持多数的通用属性和事件 。
10,Hidden控件
Hidden控件也须和 <FORM>标记一起使用,用于存放用户信息 。 它在浏览器中是隐含的,其 value属性可以作为表单的内容提交给后端过程 。
Hidden控件支持多数的通用属性,其支持的事件只 有 两 个,afterupdate （ 提 交 后 ） 事件,
beforeupdate（ 提交前 ） 事件和 errorupdate（ 提交错误 ） 事件 。
11,Select控件
Select控件又称为列表框 。 当浏览者选择的项目较多时,如果用单选按钮来选择,占页面的区域就会较多,此时可以使用列表框 。 可以用 <SELECT>标记和
<OPTION>标记来设置列表框,其格式为：
<SELECT size=x name=列表框名称 multiple>
<OPTION selected value=选项值 1>
选项文本 1</OPTION>
<OPTION selected value=选项值 2>
选项文本 2</OPTION>
</SELECT>
说明：
① <SELECT>标记定义列表框 （ Select对象 ）,
而 <OPTION>标记定义列表框中的选项 （ Option对象 ） 。
② 列表框支持常用的通用属性和事件,其特有的属性见表 6-4。
表 6-4 列表框的属性属性名称 说明
size 数字，表示在带滚动条的列表框中一次可见的列表项数
name 列表框对象的名称
style 设置列表框的样式，如高度、宽度、字体等
"width:100px;height:50px"
multiple 可选项，加上本项表示可选多个选项，否则只能单选
length 返回列表框中的选项个数
selectedIndex 返回或设置那个选项被选取
③ Option对象的属性取值见表 6-5。
表 6-5 Option对象的属性取值属性名称 说明
selected 可选项，加上本项表示该项是预置的，同一个 <SELECT>
标记中只能有一个
value 指定选项的值
text 指定选项文本
④ 列表框对象至少包含一个选项 （ Option对象 ）
【 例 6-7】 使用列表框 。
在记事本中编写代码如下：
<HTML>
<HEAD><TITLE>使用列表框 </TITLE></HEAD>
<BODY><H3>使用列表框 </H3><HR>
<SELECT id=select1 style="width:100px" name=select1>
<OPTION value="Bei jings">北京 </OPTION>
<OPTION value="Shang hai">上海 </OPTION>
<OPTION value="Tian jin">天津 </OPTION>
<OPTION value="Chong qing">重庆 </OPTION>
</SELECT>
列表框中的选项个数,<INPUT type=text name=text1 size=3></P>
选定项的 Value值为,<INPUT type=text name=text2 size=10></P>
选定项的 text值为,<INPUT type=text name=text3 size=10></P>
<SCRIPT for=select1 EVENT=onclick LANGUAGE=vbscript>
i=select1.selectedindex
text1.value=select1.length
text2.value=select1.options(i).value
text3.value=select1.options(i).text
</SCRIPT>
</BODY>
</HTML>在浏览器中 显示效果 。
说明,size属性默认值为 1,Select控件只显示一行,即为下拉式列表框,此时 style属性的高度定义无效 。 若 size=x（ >1）,则 Select控件可显示多行,
为列表框,其高度为 x行,如果设置了 style属性的
height子属性,则高度由 height子属性值决定 。
【 例 6-8】 在例 6-7中使用 size属性。修改代码如下：
<HTML>
<HEAD><TITLE>使用列表框 </TITLE></HEAD>
<BODY><H3>使用列表框 </H3><HR>
<SELECT id=select1 size=2 style="width:100px;height:70px“
name=select1>
<OPTION value="Bei jings">北京 </OPTION>
<OPTION value="Shang hai">上海 </OPTION>
<OPTION value="Tian jin">天津 </OPTION>
<OPTION value="Chong qing">重庆 </OPTION>
</SELECT>
列表框中的选项个数,<INPUT type=text name=text1 size=3></P>
选定项的 Value值为,<INPUT type=text name=text2 size=10></P>
选定项的 text值为,<INPUT type=text name=text3 size=10></P>
<SCRIPT for=select1 EVENT=onclick LANGUAGE=vbscript>
i=select1.selectedindex
text1.value=select1.length
text2.value=select1.options(i).value
text3.value=select1.options(i).text
</SCRIPT>
</BODY>
</HTML> 在浏览器中 显示效果 。
12,TextArea控件
TextArea控件又称为多行文本框 。 在意见反馈栏中往往需要浏览者发表意见和建议,提供的输入区域一般较大,以便输入较多的文字 。
使用 <TEXTAREA>标记可以设置多行文本框,其格式为：
<TEXTAREA name=名称 rows=行数 cols=列数 >?
</TEXTAREA>
说明：
① 行数和列数是指不用滚动条就可看到的部分 。
② 在 <TEXTAREA>? </TEXTAREA>之间的内容是文本框的初始值,为多行文本框的 value属性值 。
【 例 6-9】 使用 TextArea控件 。
在记事本中编写代码如下：
<HTML>
<HEAD><TITLE>使用多行文本框 </TITLE></HEAD>
<BODY><H3>使用多行文本框 </H3><HR>
<textarea name=texa cols=20 rows=4>
这是文本框中的初始值 </textarea>
<INPUT type=button name=but value=确定 ></P>
<SCRIPT for=but EVENT=onclick LANGUAGE=vbscript>
msgbox texa.value
</SCRIPT>
</BODY>
</HTML>
在浏览器中 显示效果 。
6.3 上机练习
【 练习 6-1】 使用 window对象的方法,属性和事件设计的倒计时器 。
在记事本中编写代码如下：
<%@ Language=VBScript%>
<HTML>
<HEAD><TITLE>计时器 </TITLE></HEAD>
<SCRIPT LANGUAGE=vbscript>
' 定义一个显示剩余时间的子程序
Public m,q
q=1
Sub tick(k)
m=k-1
t1.value = TimeSerial(0,0,m)
if m =0 or q=0 then
exit sub
end if
window.settimeout,tick(m)”,1000 ‘ 设定执行函数 tick()的
‘ 定时间隔为 1秒
End Sub
</SCRIPT>
</HEAD>
<!--定义 Window对象的 load事件（加载该网页时）执行函数 tick()，继而引发函数 tick()中的
window.setTimeout("tick();",1000)
语句，从而使网页能在 1秒内刷新一次时间 -->
<BODY onload =tick(1*60) bgcolor=LightYellow>
<Center><FONT size=6 face=方正舒体 color= blue>
计时器 </FONT><HR>
剩余时间,<INPUT type=text name=t1 size=10>
<INPUT Type=button value=停止 id=a0>
<script for=a0 event=onclick Language=VBScript>
q=0
</script>
</BODY>
</HTML>
在浏览器中执行代码,显示结果 。
【 练习 6-2】 使用 Document对象与 History对象 。
在记事本中编写代码如下：
<HTML>
<HEAD><TITLE>使用 document的方法 </TITLE>
<SCRIPT LANGUAGE=vbscript>
Sub mybtn_onclick
document.writeln "<H3>使用 history的方法 </H3><HR>"
document.writeln "这是新文档的内容 <P>"
document.writeln "单击按钮将返回 "
document.write
"<INPUT type=button onclick='history.back 1' "
document.write "value=返回 LANGUAGE=vbscript>"
document.title="使用 history的方法 "
End Sub
</SCRIPT>
</HEAD>
<BODY><H3>使用 document的方法 </H3><HR>
<INPUT type=button name=mybtn value=确定 >
</BODY>
</HTML>
在浏览器中 显示效果 。
