第十章 网页制作语言
学习要点：
? HTML语言基本知识
? JavaScript脚本语言
第 8章 网页建立与维护
10.1 网页的制作语言
10.2 网页脚本语言 —— JavaScript
退出
10.1.1 HTML 语言的结构
10.1.3 超文本链接指针
10.1.2 构成网页的基本元素
10.1..4在 HTML文件中使用图像
10.1.6 表单的应用
10.1.5 框架结构的使用
10.1.7 HTML中的表格
10.
1
网
页
的
制
作
语
言
返 回
HTML（超文本标记语言）是一种描述文档结构的标注语言,它使用
一些约定的标记对 WWW上的各种信息进行标注。当用户浏览 WWW上的信
息时，浏览器会自动解释这些标记的含义，并按照一定的格式在屏幕上显
示这些被标记的文件。 HTML的优点是其跨平台性。 即任何可以运行浏览
器的计算机都能阅读并显示 HTML文件，不管其操作系统是什么，并且显
示结果相同。
HTML文件是标准的 ASCII文件,且其后缀名为 htm或 html的文件。
HTML文件看起来象是加入了许多被称为链接签（ tag）的特殊字符串的普
通文本文件。从结构上讲,HTML文件由元素（ element）组成,组成
HTML文件的元素有许多种，用于组织文件的内容和指导文件的输出格式。
绝大多数元素是“容器”,即它有起始标记和结尾标记。元素的起始标记
叫做 起始链接签 （ start tag），元素结束标记叫做 结尾链接签 （ end tag），
在起始链接签和结尾链接签中间的部分是元素体。 每一个元素都有名称和
可选择的属性，元素的名称和属性都在起始链接签内标明。
10.1.1 HTML 语言的结构
下面来看一个 HTML文件，它在浏览器中显示的结果如图 8-15所示。
<HTML>
<HEAD>
<TITLE>武汉工业学院 </TITLE>
</HEAD>
<BODY bgcolor= yellow>
<P>这是一 HTML的测试文件 </P>
</BODY>
</HTML>
<TITLE>标记用来给网页命名, 网页的名称写在 <TITLE>与
</TITLE>标记之间, 显示在浏览器的标题栏中 。 例如, 在图 8-15中
所示的浏览器页面中, 其标题栏所显示的, 武汉工业学院, 是在
HTML文件中的由 <TITLE>武汉工业学院 </TITLE>所定义的 。
10.1.2 构成网页的基本元素
1,<TITLE>标记
<H1>… </H1> 到
<H6>… </H6>标题元素有 6
种, 用于表示文章中的各
种题目 。 字体大小 <H1>到
<H6>顺序减小 。 下面这个
例子中分别使用了 <H1>到
<H6>的标题 。 其 HTML文
件如下所示, 在浏览器中
的显示效果如图 8-16所示 。
2,<Hn>标记
源文件
3,预格式化文本标记 <pre>
源文件
HTML的输出是基于窗口的，因而 HTML文件在输出时都是要
重新排版的，即把文本上任何额外的的字符（如空格、制表符和回
车符）都忽略，若确实不需要重新排版的内容，可以用 <pre>…< ／
pre>通知浏览器。在图 8-17和图 8-18中显示了有无预格式化文本标
记 <pre>的对比。
4,<BR>和 <P>标记
源文件
<BR>用于强制换行。 <P> 表示一个段落的开始。 </P>一般可
不用。
5,<B> <I> <U> <STRONG> <S> 标记
这几个标记都是用来修饰所包含文档的。 <B>标记使文本加粗；
<I>标记使文本倾斜； <U>标记给文本加下划线； <S>标记给文本加
删除线； <STRONG>标记使文本字体加重。下面给出一个 HTML源
文件，其显示结果如图 8-19所示。
6,<FONT>标记
<FONT>…</FONT> 用来
修改字体和颜色。其中
COLOR属性指定文字颜色，
颜色的表示可以用 6位十六进
制代码，如 <FONT COLOR =
#00FF00>； SIZE属性指定相
对尺寸。
另外,如果用户想要设置网
页的背景色和文字颜色，可以
将 <BODY>标记扩充为：
<BODY bgcolor=# text=#
link=# alink=# vlink=#
background =,imageURL”>
其中各个元素的说明如表 8-1
所示，表 8-2列出了一些常用
颜色的 RGB值。
标记 说明
Bgcolor 设置网页背景颜色
Text 设置网页非可链接文字的颜色
Link 设置网页可链接文字的颜色
Alink 设置网页正被点击的可链接文字的颜
色
Vlink 设置网页已经点击的可链接文字的颜
色
Backgrou
nd
设置网页背景图案
ImageUR
L
设置网页背景图案的 URL地址
# 代表颜色 RGB值（格式为 rrggbb）。
它是用 16进制的红 -绿 -蓝（ red-
green-blue,RGB）值来表示。各种
常见的颜色的 RGB值如表 9-2所示。
颜色 RGB 颜色 RGB
黑色（ Black） 000000 橄榄色（ Olive） 808000
红色（ Red） FF0000 深表色（ Teal） 008080
绿色（ Green） 008000 灰色（ Gray） 808080
蓝色（ Blue） 0000FF 深蓝色（ Navy） 000080
白色（ White） FFFFFF 浅绿色（ Lime） 00FF00
黄色（ Yellow） FFFF00 紫红色（ Fuchsia
）
FF00FF
银色（ Silver） C0C0C0 紫色（ Purple） 800080
浅色（ Aqua） 00FFFF 茶色（ Maroon） 800000
超文本链接指针是 HTML最吸引人的优点之一，可以这样说，如果没
有超文本链接指针，就没有万维网。使用超文本链接指针可以使顺序存放
的文件具有一定程度上随机访问的能力，这更加符合人类的踊跃思维方式。
超文本链接指针是指把并不连续的两段文字或两个文件联系起来。
8.2.3 超文本链接指针
1,统一资源定位器 URL
统一资源定位器（ Uniform Resource Locator）是文件名的扩展。在单
机系统中，如果要找一个文件，需要知道该文件所在的路径和文件名；在
互连网上同样找一个文件，除了要知道以上内容之外，显然还需要知道该
文件存放在哪个网络的哪台主机中才行。与单机系统不一样的是，在单机
系统中所有的文件都由统一的操作系统来管理，因而不必给出访问该文件
的方法；而在互连网上，每个网络，每台主机的操作系统都不一样，因此
必须指定访问该文件的方法。一个 URL包括了以上所有的信息。它的构成
为：
protocol:// machine.name[:port]／ directory／ filename
2,建立一个链接
（ 1）链接到其它站点
在 HTML文件中用链接指针指向一个目标。其基本格式为：
<a href = "…"> zzz </a>
其中 zzz可以是文字或图片并显示在网页中，当用户单击它时，浏览
器就会显示由 href属性中的统一资源定位器（ URL）所指向的目标，实际
上这个 ZZZ在 HTML文件中充当指针的角色，它一般显示为蓝色。 href中
的 h表示超文本，而 ref表示“访问”或“引用”的意思。例如：
<a href = "http://www.whpu.com/">武汉工业学院 </a>
用户用鼠标单击“武汉工业学院”，即可看到武汉工业学院的主页内
容。在这个例子中,充当指针的是“武汉工业学院”。
（ 2） 同一个文件中的链接
超链可以指向自己的计算机中的某一个文件这种链接方式叫做本地链接 。
前面曾提到过一个超文本链接指针包括两个部分, 一个指向目标的链接指
针, 另一个是被指向的目标 。
标识一个目标的方法为：
<A NAME="KKK">…….< ／ A>
NAME属性将放置该标记的地方标记为,KKK”,KKK是一个全文唯
一的标记串,<A>和 </A>之间的内容可有可无。这样，就把放置标记的
地方做了一个叫做,KKK”的标记（如果对 Microsoft Word很熟悉的话，这
就相当于在 Word中的定义“书签”）。做好标记后，可以用下列方法来
指向它。
<a href = "#KKK">转向下一处 </a>
这时就可以点击“转向下一处”这段文字，浏览器就从标记名为
KKK的部分开始显示此 HTML文件的内容了 。
8.2.4 在 HTML文件中使用图像
1,在 HTML文件中显示图像
在浏览器上显示的图像必须有特定的格式，目前使用的浏览器通常支
持 GIF和 JPEG格式的图像。在 HTML网页中加图像是通过 <IMG>标记实现
的，它有几个较为重要的属性。其中：
SRC属性：指明图形的 URL地址；
HEIGHT属性：决定图形的高度；
WIDTH属性：决定图形的宽度；
BORDER属性：决定边框线的宽度，
0-表示无边框；
ALT属性：指明图像显示的备用文本；
源文件
2,在 HTML文件中利用图像建立链接
如果在链接标记 <A>和 </A>的中间放置一个 <IMG>标记，这个图像
将会成为一个可击点，产生一个链接。例如：
<A HREF=” default.asp” >
<IMG SRC=”images/center1.gif, ALIGN=LEFT>
</A>
当用户单击这个图像后，浏览器就会显示,default.asp”这个文件的内
容了。
8.2.5 框架结构的使用
框架能够将页面分成数个独立变化的窗口，每个窗口可以显示不同
的 Web页面，并可以不断更换显示的对象。使用框架结构，可以使屏幕的
信息量增大，使 Web网页更加吸引读者。有关框架内容的 HTML语法为：
<FRAMESET>
<NOFRAMES>…</NOFRAMES>
<FRAME SRC=”URL”>
…
</FRAMESET>
其中 <noframes>...</noframes>中的内容显示在不支持分框的浏览器窗
口中，因而这里指向一个普通版本的 HTML文件，以便使用不支持分框浏
览器的用户阅读。
分框由 <frameset>指定，并且可以嵌套，分区中各部分显示的内容
用 <frame>指定。 需要说明的是,frame是一个新出现的元素，许多浏
览器不支持它。分框可以将窗口横向分成几个部分，也可以纵向分成几个
部分，还可以混合分框。
框架结构标记可以嵌套，用以实现大框架中的小框架。它主要有两个
属性,ROWS和 COLS，它们可以将浏览器页面分为 N行 M列，当然也可
以各自独立使用。下面来看一个框架结构的例子。如图 8-21，其 HTML源
文件如下所示。
<html>
<head>
<title>武汉工业学院 </title>
<frameset cols="*,140" >
<frameset rows="*,80" >
<frame src="a.htm" name="f1">
<frame src="b.htm" name="f2"
scrolling="no">
</frameset>
<frameset rows="*,80" >
<frame src="c.htm" name="f3">
<frame src="d.htm"
name="f4" >
</frameset>
</frameset>
</head>
<frame>标记有以下主要属性：
SRC属性 指定框架单元的 URL源，如第 6行中指出的是当前主机当前目
录下的,a.htm”文件。即在此框中显示,a.htm”的内容。
NAME属性 为该框架单元起个标识名，主要用来为将来改变框架内容提
供入口。
SCROLLING属性 设置框架是否使用滚动务。有 YES,NO和 AUTO三个
值，分别表示强制使用滚动条，禁止使用滚动条和自动判断使用滚动条。
8.2.6 表单的应用
HTML提供的表单是用来将用户数据从浏览器传递给 Web服务器的。
例如可以利用表单建立一个录入界面，也可以利用表单对数据库进行查询。
在这里需要声明的是，表单的操作是与服务器进行交互的操作，而服务器
端的操作是通过服务器端的程序来实现的。实现在服务器端的操作有许多
种方式，其中 ASP（动态服务网页）的方式就是一种，它可以通过 ADO方
式与多种数据库相连。
ASP（ Active Server Page）程序是在服务器端工作，并且通过服务器
端的编译动态地送出 HTML文件给客户端，它负责处理 HTML文件与运行
在服务器端的程序之间的数据交换。当用户输入他们的信息（这个信息可
以是查询条件，也可以是传送给服务器的某些内容）并提交给服务器后，
便激活了一个 ASP程序。该 ASP程序又可以调用操作系统下的其他程序
（例如数据库管理系统）完成读者的查询任务，当操作系统下的程序完成
查询之后，便把查询结果传给 ASP，通过 ASP传给 Web服务器。由此可以
看出,ASP程序在用户与服务器之间进行交互查询时所起的重要作用。
1,什么是表单
HTML提供的表单是用来将用户数据从浏览器传递给 Web服务器的。
例如可以利用表单建立一个录入界面，也可以利用表单对数据库进行查询。
在这里需要声明的是，表单的操作是与服务器进行交互的操作，而服务器
端的操作是通过服务器端的程序来实现的。实现在服务器端的操作有许多
种方式，其中 ASP（动态服务网页）的方式就是一种，它可以通过 ADO方
式与多种数据库相连。
ASP（ Active Server Page）程序是在服务器端工作，并且通过服务器
端的编译动态地送出 HTML文件给客户端，它负责处理 HTML文件与运行
在服务器端的程序之间的数据交换。当用户输入他们的信息（这个信息可
以是查询条件，也可以是传送给服务器的某些内容）并提交给服务器后，
便激活了一个 ASP程序。该 ASP程序又可以调用操作系统下的其他程序
（例如数据库管理系统）完成读者的查询任务，当操作系统下的程序完成
查询之后，便把查询结果传给 ASP，通过 ASP传给 Web服务器。由此可以
看出,ASP程序在用户与服务器之间进行交互查询时所起的重要作用。
1,什么是表单
表单就是为 Internet网络用户在浏览器上建立一个交互接口，使
Internet网络用户可以在这个接口上输入自己的信息，然后使用提交按钮，
将 Internet网络用户的输入信息传送给 Web服务器。
在 HTML中，有一个专门的标记 FORM提供表单的功能，由表单开始
标记 <FORM>和表单结束标记 </FORM>组成，表单中可以设置文本框、
按钮或下拉菜单，它们也是通过标记完成。在表单的开始标记中带有两个
属性,ACTION和 METHOD。书写表单的 HTML格式如下
< FORM ACTION =,…” METHOD=”…” >
…
</FORM>
2,表单的标记
FORM标记有以下主要属性：
（ 1） ACTION属性是用来指出，当这个 FORM提交后需要执行的驻留在
Web服务器上的程序名（包括路径）是什么。一旦 Internet网络用户提交输
入信息后服务器便激活这个程序，完成某种任务。例如：
<FORM ACTION =,login.asp” METHOD = POST > … </FORM>
当用户点击“提交”按钮以后,Web服务器上的,login.asp”将接收用户输
入的信息，以登记用户信息。
（ 2） METHOD属性是用来说明从客户端浏览器将 Internet网络用户输入的
信息传送给 Web服务器时所使用的方式，它有两种方式,POST和 GET。
默认的方式是 GET，这两者的区别是在使用 POST时，表单中所有的变量
及其值都按一定的规律放入报文中，而不是附加在 ACTION所设定的 URL
之后。在使用 GET时将 FORM的输入信息作为字符串附加在 ACTION所设
定的 URL的后面，中间用“？”隔开，即在客户端浏览器的地址栏中可以
直接看见这些内容。
2,表单的标记
HTML中的 INPUT标记是表单中最常用的标记。我们在网页上所见到
的文本框、按钮等等都由这个标记引出的。下面是 INPUT标记的标准格式：
<INPUT TYPE=“…” VALUE =“…”>
其中 TYPE属性是用来说明提供给用户进行信息输入的类型是什么。例如
是文本框、单选按钮或多选按钮。它的取值如下：
TYPE =,TEXT” 表示在表单中使用单行文本框
=,PASSWORD” 表示在表单中为用户提供密码输入框
=,RADIO” 表示在表单中使用单选按钮
=,CHECKBOX” 表示在表单中使用多选按钮
=,SUBMIT” 表示在表单中使用提交按钮
=,RESET” 表示在表单中使用重置按钮
3,HTML中的 INPUT标记
用一个例子说明文字输入和密码输入的制作。
（ 1） 文字输入和密码输入
<HTML>
<HEAD>
<TITLE>这是个测试页 </TITLE>
</HEAD>
<BODY>
<FORM ACTION=“REG.ASP” METHOD=POST>
请输入您的真实姓名, <INPUT TYPE=TEXT NAME=姓名 ><BR>
您的主页的网址, <INPUT TYPE=TEXT NAME=网址 VALUE=HTTP://><BR>
密码, <INPUT TYPE=PASSWORD NAME=密码 ><BR>
<INPUT TYPE=SUBMIT VALUE="发送 "><INPUT TYPE=RESET VALUE="重设 ">
</FORM>
</BODY>
</HTML>
（ 2） 复选框 （ Checkbox） 和 单选框 （ Radio Button）
<HTML>
<HEAD>
<TITLE>这是个测试页 </TITLE>
</HEAD>
<BODY>
<FORM ACTION=“REG1.ASP” METHOD=POST>
选择一种你喜爱的水果,
<br><INPUT type=radio name=水果 value=”香蕉” >香蕉
<br><INPUT type=radio name=水果 checked value=”草莓” >草莓
<br><INPUT type=radio name=水果 value="橘子 ">橘子
<br>选择你所喜爱的运动,
<br><INPUT type="checkbox" name=ra1 checked value="足球 ">足球
<br><INPUT type="checkbox" name=ra2 checked value="篮球 ">篮球
<br><INPUT type="checkbox" name=ra3 value="排球 ">排球
<br><INPUT TYPE=SUBMIT VALUE="发送 "><INPUT TYPE=RESET VALUE="重设 ">
</FORM>
</BODY>
</HTML>
（ 3） 按钮的制作
在上面几个例子中，都有两个按扭，一个是“发送”按钮，另一个“重
置”按钮。其实“发送”按钮真正的含义叫“提交”即当 Internet网络用
户用鼠标单击这个按钮后，用户输入的信息便提交给一个驻留在 Web服
务器上的程序，让服务器进行处理，其典型的格式,<INPUT
TYPE=”SUBMIT” VALUE=”发送” >。提交按钮在 FORM中是必不可少
的，前几个例子只是说明 INPUT语句中类型的使用，作为 FORM语句并
不完整，每个 FORM中有且仅有一个提交按钮。当设置“提交”按钮标
记时，如果缺省 VALUE属性，则浏览器窗口中的按钮上出现,SUBMIT”
的字样，这个字样也可以自己设定，改变按钮上的提示。例如：
VALUE=“提交”。
另一种在浏览器常用的按钮叫“重置”按钮，当 Internet网络用户用鼠标
单击这个按钮后，网络用户输入的信息被清除，让网络用户重新输入信
息。其典型的格式,<INPUT TYPE =,RESET” VALUE=”重新输入” >，
而且在这个标记设置中如果缺省 VALUE属性，则浏览器窗口中的按钮上
出现,RESET”的字样，这个字样也可以自己设定，来改变按钮上的提
示，例如,VALUE=“重新输入”。
（ 4） HTML中的 SELECT标记
在制做 HTML文件时，使用 <FORM>…</FORM> 标记可以在浏览器窗口
中设置下拉式菜单或带有滚动条的菜单,Internet网络用户可以在菜单中
选中一个或多个选项。
<HTML>
<HEAD>
<TITLE>武汉工业学院 </TITLE>
</HEAD>
<BODY>
请从下面课程中选择几门选择课,
<FORM action="h1.asp" method=POST id=form1 name=form1>
<SELECT name=x1 multiple>
<OPTION>网络技术 <OPTION>书法
<OPTION>音乐欣赏 <OPTION>现代文学
<OPTION>多媒体技术
</SELECT>
</FORM>
</BODY>
</HTML>
8.2.7 HTML中的表格
下面看一个表格的例子
从这个例子可以看出一个表格有一个标题（ Caption），它表明
表格的主要内容，并且一般位于表的上方；表格中由行和列分割成的
单元叫做“表元”（ Cell），它又分为表头（用 TH标记来表示）和表
数据（用 TD标记来表示）；表格中分割表示的行列线称为“框线”
（ B order）。
一个表格的基本框架如下所示：
<TABLE WIDTH=75% BORDER=1 CELLSPACING=1 CELLPADDING=1>
<CAPTION></CAPTION>
<TR>
<TD></TD>
<TD></TD>
<TD></TD>
</TR>
<TR>
<TD></TD>
<TD></TD>
<TD></TD>
</TR>
1,表格的标记
<TR>
<TD></TD>
<TD></TD>
<TD></TD>
</TR>
</TABLE>
（ 1） TABLE标记
一个表格至少一个 TABLE标记，由它来决定一个表格的开始和结束，而且
TABLE标记可以嵌套。 TABLE标记有以下五种属性：
? BORDER属性，指定围绕表格的框的宽度（只能用像素）。
? CELLSPACING属性，指定框线的宽度
? CELLPADDING属性，用于设置表元内容与边框线之间的间距。
? ALIGN属性用来控制表格本身在页面上的对齐方式。其取值可是
LEFT（左对齐）,CENTER（居中对齐）,RIGHT（右对齐）。
? WIDTH属性，用来设置表格的宽度，可以以像素为单位，也可用占
浏览器窗口的百分比来定义。
（ 2） CATION标记
CATION标记用来标注表格标题的。 CATION标记必须紧接在 TABLE开
始标记之后放在第一个 TR标记之前。通过该标记所定义的表格标题一般
显示在表格的上方，而且其水平方向是居中对齐。另外，如需要对表格
的标题突出显示，可以在 CATION标记之间加入其它对字体进行加重显
示的标记。如：
<TABLE WIDTH=75% BORDER=1 CELLSPACING=1 CELLPADDING=1>
<CAPTION>
<H2>表格标题强调 </H2>
</CAPTION>
<TR>
……….
</TR>
</TABLE>
（ 3） TR标记
定义表格的一行。 TR标记中有两个属性，一个是 ALIGN属性，用来设
置表行中的每个表元在水平方向的对齐方式，其取值可以是 LEFT（左
对齐）,CENTER（居中对齐）,RIGHT（右对齐）；另一个是 VLIGN
属性，用来设置表行中的每个表元在垂直方向的对齐方式，其取值可以
是 TOP（向上对齐）,CENTER（居中对齐）,BOTTOM（向下对齐）。
例如，要使表行中各单元的内容水平方向右对齐、垂直方向居中对齐，
可使用如下源代码：
<TR ALIGN=RIGHT VALIGH=TOP>
（ 4） TH标记
TH标记用来表示一个表行中的各个单元。 TH标记内几乎可以包含所有
的 HTML标记，甚至还可以嵌套表格。该标记与 TR标记同样具有 ALIGN
和 VALIGN属性，如果在 TH标记和 TR 标记中都设置了 ALIGN和
VALIGN属性，而且它们所设置的属性值不相同，这时以 TH标记所设置
的属性值为准。另外,TH标记还有两个属性，一个是 WIDTH属性，用
来设置表元的宽度，另一个 HEIGHT属性，用来设置表元的高度。这两
个属性的取值单位都是像素。在同一行中将多个表元设置为不同高度，
或者在同一列中将多个表元设置为不同宽度，都有可能导致不可预料的
结果。
在这个实例中，通过制作一个登记表格来给大家来说明如何制作一个
比较复杂的表格。在表格中经常会出现跨多行、多列的表元，这就要利用
TD标记另外两个属性，即 COLSPAN和 ROWSPAN属性。例如
<TH COLSPAN=3 > 登记照 <TH >
表示这个表项标题将横跨三个表项的位置；
<TH ROWSPAN=3 > 登记照 <TH >
表示这个表项标题将纵跨三个表项的位置；
另外每个表元还可以设置其背景颜色。例如
<TH COLSPAN=3 BGCOLOR=yellow> 登记照 <TH >
还可以在表格中插入超级链接或在表格中插入图片，如果能对这个例
子举一反三的话，那么仅需制作一个无框线的表格，就可以把各种数据按
照自己所希望的形式在页面进行布置。
2,表格使用实例
下面就给出一个具体的实例
<HTML>
<HEAD> <TITLE>表格综合实例 </TITLE> </HEAD>
<BODY>
<TABLE border=1 cellPadding=1 cellSpacing=1 width="75%">
<caption> <h3>大奖赛登记表 </h3> </caption>
<TR>
<TD bgcolor=LightGoldenrodYellow>报名号 </TD>
<TD>757</TD>
<TD bgcolor=LightYellow>性别 </TD>
<TD>女 </TD>
<TDrowspan=2><IMG SRC="image\center.gif"></TD>
</TR>
<TR>
<TD bgcolor=FloralWhite>姓名 </TD>
<TD colspan=3><A href="http://www.jljiangli.com.cn">江小丽 </A></TD>
</TR>
<TR>
<TD
bgcolor=Cornsilk>推荐
单位 </TD>
<TD colspan=4>宇宙
公司 </TD>
</TR>
</TABLE>
</P>
</BODY>
</HTML>
下面就给出一个具体的实例
<TR>
<TD bgcolor=Cornsilk>推荐单位 </TD>
<TD colspan=4>宇宙公司 </TD>
</TR>
</TABLE>
</BODY>
</HTML>
10.2.1 JavaScript的基础知识
10.2.2 JavaScript语言
10.2.3 JavaScript中的函数
10.2.4 JavaScript的事件
10.2 网页脚本语言
—— JavaScript
10.2.5 JavaScript中的对象
返 回
10.2.1 JavaScript的基础知识
脚本语言是一种简单的描术性语言，它是针对 HTML语言不能很好地
解决动态交互这个缺点而引入的，它能对 Web页面中的元素进行控制。一
般来说，脚本语言是通过一个 <Script>的标记嵌入到 HTML文档中，并可
以被浏览器解释执行，插入的脚本语言就如同子程序一样被 HTML元素所
调用，成为 HTML的一部分。目前比较流行的脚本语言有网景公司
（ Netscope）的 JavaScript和微软公司（ Microsoft）的 VBScript。
JavaScript是基于 Netscape浏览器的，类似于 Java编程语言的脚本语言，
并且是一种基于对象的、面向 Internet或 Intranet的编程语言，使用它可以开
发关于 Internet或 Intranet客户端和服务器的应用程序，也可以方便地嵌入到
计算机文件中。由于 JavaScript是第一个在 WWW上使用的脚本语言，因而
它一度是最流行的 Web站点脚本语言，用它可以方便地编排 HTML网页，
同时还可以控制动态 HTML。
VBScript是 Microsoft公司在 Visual Basic编程语言的基础上设计的，由
于其在企业界广为流行，且与 Microsoft公司的其它产品有着密切的联系，
VBScript的使用范围越来越大，逐渐会成为一种主要的脚本语言。
1,什么是脚本语言
JavaScript语言起初并不叫此名称，它的早期是 Netscape的开发者们称
之为,Mocha”的语言，开始在网上进行 β测试（由软件的多个用户在其实
际的使用环境下进行的测试叫 β测试）时，名字改为,LiveScript”,Sun公
司推出 Java之后,Netscape引进了 Sun的有关概念，在其发行 Netscape 2.0β
测试版时才称其为, JavaScript”。它不仅支持 Java的 Applet小程序，同时
向 Web页的制作者提供一种嵌入 HTML文档进行编程的、基于对象的 Script
（脚本）程序设计语言，采用的许多结构与 Java相 似 。
支持 JavaScript的 Navigator 2.0的网络浏览器能够解释并执行嵌在
HTML中的用 JavaScript语言书写的“程序”。 JavaScript具有很多采用
CGI/PERL编写的 Script（脚本）的能力，其优点是可以引用主机资源，响
应位于服务器 Web页中相应语法元素要完成的功能，而又不与主机服务器
进行交互会话 。
2,JavaScript 的产生与发展
JavaScript语言起初并不叫此名称，它的早期是 Netscape的开发者们称
之为,Mocha”的语言，开始在网上进行 β测试（由软件的多个用户在其实
际的使用环境下进行的测试叫 β测试）时，名字改为,LiveScript”,Sun公
司推出 Java之后,Netscape引进了 Sun的有关概念，在其发行 Netscape 2.0β
测试版时才称其为, JavaScript”。它不仅支持 Java的 Applet小程序，同时
向 Web页的制作者提供一种嵌入 HTML文档进行编程的、基于对象的 Script
（脚本）程序设计语言，采用的许多结构与 Java相 似 。
支持 JavaScript的 Navigator 2.0的网络浏览器能够解释并执行嵌在
HTML中的用 JavaScript语言书写的“程序”。 JavaScript具有很多采用
CGI/PERL编写的 Script（脚本）的能力，其优点是可以引用主机资源，响
应位于服务器 Web页中相应语法元素要完成的功能，而又不与主机服务器
进行交互会话 。
2,JavaScript 的产生与发展
JavaScript的编程工作复杂与否和 HTML文档所提供的功能大小密切相
关，下面用一个简单的例子来介绍它的编程特点 。
3,一 个 简 单 的 例 子
＜ HTML＞
＜ HEAD＞＜ TITLE＞ This is a test＜ /TITLE＞ ＜ /HEAD＞
＜ BODY＞
你好
＜ SCRIPT LANGUAGE="JavaScript"＞
document.write "Hello,JavaScript! "
＜ /SCRIPT＞
＜ /BODY＞
＜ /HTML＞
JavaScript源代码被嵌在一个 HTML文档中，而且它可以出现在文档头
部（ HEAD节）和文档体部 (BODY节 )。 SCRIPT标记的一般格式为：
＜ SCRIPT LANGUAGE="JavaScript"＞
＜ !--
JavaScript语 句 串 · · ·
--＞
＜ /SCRIPT＞
为了使老版本的浏览器（即 Navigator2.0版以前的浏览器）避开不识
别的,JavaScript语句串”，用 JavaScript编写的源代码可以用注解括起来，
即使用 HTML的注解标记＜ !--… --＞，而 Navigator2.x可以识别放在注解行
中的 JavaScript源代码。
说明：＜ SCRIPT＞标记可声明一个脚本程序,LANGUAGE属性声明
该脚本是一个用 JavaScript语言编写的脚本。在 <Script>和 </Script>之间的
任何内容都视为脚本语句，会被浏览器解释执行。在 JavaScript脚本中，
用,//”作为行的注释标注。
10.2.2 JavaScript语言
在 JavaScript中，数据类型是十分宽松的，程序员在声明变量时可以不
指定该变量的数据类型,JavaScript会自动地按照需要来分配适当的数据类
型。这一点和 JAVA或 C++是截然不同的。 JavaScript有以下几种基本的数据
类型：
1,JavaScript数据类型
（ 1）数字类型
如, 34,3.14表示为十进制数；
034表示为八进制数，用十进行表示
其值为 28；
0x34表示为十六进制数，用十进行
表示其值为 52。
（ 2）字符串类型
如,"Hello!"；
（ 3）逻辑值类型
其取值仅可能是“真”或“假”，
用 True或 False来表示。
（ 4）空值
当你定义一个变量后未赋初值时，
则该变量为空值。例如：
var ch1; //此时 ch1就为空值，它不属
于任何一种数据类型。
它的定义要求与 C语言相仿，例如以字母或下划线开始,变量不能是
保留字（如 int,var等），不能使用数字作为变量名的第一个字母等等。
但它的定义方法与 C语言有很大的差别。
C语言的变量定义格式为：
int a=1; float f1=3.14
而 JavaScript的变量定义格式,
Var 变量名； 或者 Var 变量名 =初始值；
JavaScript 并不是在定义变量时来说明变量的数据类型，而是在给变
量赋初始值时来确定该变量的数据类型； JavaScript对字母的大小写是敏感
的。如 Var my； Var My,JavaScript认为这是两个不同的变量。
说明：在使用变量之前，最好对每个变量使用关键字 VAR进行变量声
明，防止发生变量的有效区域冲突的问题。
2,JavaScript 变量
JavaScript常量分为 4类：整数、浮点数、布尔值和字符串。下面分别
加以说明。
3,JavaScript常量
（ 1）整数常量
在 JavaScript中，整数可以表示为：
十进制数：即一般的十进制整数，它前
面不可有前导 0。例,75。
八进制数：以 0为前导，表示八进制数。
例,075。
16进制数：以 0x为前导，表示 16进制数。
例,0x0F。
（ 2）浮点数常量
浮点数可以用一般的小数格式来表示，
也可以使用科学计数法来表示。
例如,7.54343,3.0e9
（ 3）布尔型常量
布尔型常量只有两个值,True
和 False。
（ 4）字符串常量
字符串常量是用单引号或双引
号括起来的 0个或多个字符组成。
例如：,Test String”，” 12345”
在 JavaScript的语法规则中，每一条语句的最后必须使用一个分号，例如：
document.write(“kkk”); //此语句的功能在浏览器中输出,kkk”字符串
在编写 JavaScript程序时，一定要有一个良好的习惯，最好是一行写一条
语句，如果使用复合语句块时，注意把复合语句块用大括号括起来，并且根据
每一句作用范围的不同，应有一定的缩进。另外一个好的编程风格是要适当加
一些注释。例如：
4,JavaScript语句的结构
＜ SCRIPT LANGUAGE="JavaScript"＞
var SUM,P,i;
SUM=0;
//初始化累加和
P=1;
FOR (i=1; i<100; i++)
{ SUM+=i;//求累加和
P*=i;
}
＜ /SCRIPT＞
JavaScript常量分为 4类：整数、浮点数、布尔值和字符串。下面分别
加以说明。
3,JavaScript常量
（ 1）整数常量
在 JavaScript中，整数可以表示为：
十进制数：即一般的十进制整数，它前
面不可有前导 0。例,75。
八进制数：以 0为前导，表示八进制数。
例,075。
16进制数：以 0x为前导，表示 16进制数。
例,0x0F。
（ 2）浮点数常量
浮点数可以用一般的小数格式来表示，
也可以使用科学计数法来表示。
例如,7.54343,3.0e9
（ 3）布尔型常量
布尔型常量只有两个值,True
和 False。
（ 4）字符串常量
字符串常量是用单引号或双引
号括起来的 0个或多个字符组成。
例如：,Test String”，” 12345”
JavaScript拥有一般编程语言（如Ｃ语言）的运算符，包括算术运算符、
比较运算符、连接运算符
5,JavaScript运算符和表达式
（ 1）算术运算符
用于连接运算表达式的各种算术运算符如表 8-1所示。
运算符 运算符定义 举例 说明
+ 加法符号 X=A+B
- 减法符号 X=A-B
* 乘法符号 X=A*B
/ 除法符号 X=A+B
% 取模符号 X=A%B X等于Ａ除以Ｂ所得的余数
++ 加１ A++ A的内容加 1
-- 减 1 A-- A的内容减 1
（ 2）位运算符
位操作运算符对两个表达式相同位置上的位进行位对位运算。 JavaScript
支持的位操作运算符如表 8-2所示。
运算符 运算符定义 举例 说明
~ 按位求反 X=~A
<< 左移 X=B<<A (A为移动次数，左边移入
0)
>> 右移 X=B>>A (A为移动次数，右边移入
0)
>>> 无符号右移 X=B>>>A (A为移动次数，右边移入
符号位 )
& 位, 与, X=B & A
^ 位, 异或, X=B ^ A
| 位, 或, X=B | A
（ 3）复合赋值运算符
复合赋值运算符执行的是一个表达式的运算。在 JavaScript中，合法的复
合赋值运算符如表 8-3所示。
运算符 运算符定义 举例 说明
+= 加 X+=A X=X+A
-= 减 X-=A X=X-A
*= 乘 X*=A X=X*A
/= 除 X/=A X=X/A
%= 模运算 X%=A X=X%A
<<= 左移 X<<=A X=X<<A
>>= 右移 X>>=A X=X>>A
>>>= 无符号右移 X>>>=A X=X>>>A
&= 位, 与, X&=A X=X&A
^= 位, 异或, X^= A X=X^A
|= 位, 或, X|=A X=X|A
（ 4）比较运算符
比较运算符用于比较两个对象之间的相互关系，返回值为 True和 False。
各种比较运算符如表 8-4所示。
运算符 运算符定义 举例 说明
== 等于 A==B A等于 B时为真
> 大于 A>B A大于 B时为真
< 小于 A<B A小于 B时为真
!= 不等于 A!=B A不等于 B时为真
>= 大于等于 A>=B A大于等于 B时为真
<= 小于等于 A<=B A小于 等于 B时为真
, 条件选择 E？ A：
B
E为真时选 A，否则选
B
（ 5）逻辑运算符
逻辑运算符返回 True和 False，其主要作用是连接条件表达式，表示各条
件间的逻辑关系。各种逻辑运算符如表 8-5所示。
运算符 运算符定义 举例 说明
&& 逻辑, 与, A && B A与 B同时为 True时，结果为
True
! 逻辑, 非, !A 如 A原值为 True,结果为
False
|| 逻辑, 或, A || B A与 B有一个取值为 True时，
结果为 True
（ 6）运算符的优先级
运算符 说明
,[] () 字段访问、数组下标以及函数调用
++ -- ~ ! typeof new void
delete
一元运算符、返回数据类型、对象创建、未定义
值
* / % 乘法、除法、取模
+ - + 加法、减法、字符串连接
<< >> >>> 移位
<<= >>= 小于、小于等于、大于、大于等于
== !== 等于、不等于、恒等、不恒等
& 按位与
^ 按位异或
| 按位或
&& 逻辑与
|| 逻辑或
,条件
= 赋值
（ 7）表达式
JavaScript表达式可以用来计算数值，也可以用来连接字符串和进行逻辑
比较。 JavaScript表达式可以分为三类：
? 算术表达式
算术表达式用来计算一个数值，例,2*4.5/3
? 字符串表达式
字符串表达式可以连接两个字符串，例如：” hello”+”world!”，该表达式
的计算结果,helloworld!”
? 逻辑表达式
逻辑表达式 计算结果为一个布尔型常量（ True或 False）。
例如,12>24 其返回值为,False
JavaScript允许加一些注释。并且有两种注释方法：单行注释和多行注
释。
单行注释,以,//”开始，以同一行的最后一个字符作为结束。
多行注释,以,/*”开始，以,*/”结束，符号,*/”可放在同一个行或一个
不同的行中。
下面举例说明怎样使用这两种注释方法：
<Script language =,JavaScript”>
/*这是多行注释的第一行
这是多行注释的第二行 */
k=24*7； //这是一个单行注释的例子
</Script>
6,脚本语言的注释
JavaScript的脚本语言同 C++语言类似的，提供了相同的程序流程控制
语句。这些语句分别是 if,switch,for,do和 while语句。
（ 1）条件语句
① If语句
If语句是一个条件判断语句，它根据一定的条件执行相应的语句块，
其定义格式如下所示：
If (expr)
{ code_block1 }
else
{code_block2}
这里,expr是一个布尔型的值或表达式（特别强调,expr一定要用小
括号将其括起来）,code_block1和 code_block2是由多个语句组成的语
句块。当 expr值为“真”时，执行 code_block1，当 expr值为“假”时，
执行 code_block2。
7,JavaScript程序流程控制
另外有一点要说明的是,if语句是可以嵌套的，即在 if语句的模块中，
还可以包含其它的 if语句。例如：
If (expr)
{
code_block1
if (expr1) { code_block3 }
}
else
{
code_block2
}
② switch语句
switch语句测试一个表达式并有条件的执行一段语句，其语法格式如下：
switch (表达式 ) {case 值 1,code_block1
break;
case 值 2,code_block2
break;
case 值 3,code_block3
break;
…
default,code_blockn }
switch语句首先计算表达式的值，然后根据表达式所计算出的值来选择与之
匹配的 CASE后面的值，并执行该 CASE后面的语句，直到遇到了一个
break语句为止，如果所计算出的值与任何一个 CASE后面的值都不相符
的话，则执行 default后的语句。
下面举例说明 switch语句的用法：
<HTML>
<HEAD> <TITLE>例 9-3显示 </TITLE>
<SCRIPT LANGUAGE=javascript>
<!--
document.write("switch语名测试 ------");
switch (14%3) {
case 0,sth="您好 ";
break;
case 1,sth="大家好 ";
break;
default,sth="世界好 ";
break;
}
document.write(sth);
//-->
</SCRIPT>
</HEAD>
<BODY>
</BODY>
</HTML>
（ 2）循环语句
有许多时候，需要把一个语句块重复执行多次，每次执行仅改变部分
参数的值，这时可以使用循环语句，直到某一个条件不成立为止。
① for语句
for语句用来产生一段程序循环，其语法格式如下：
for ( init; test; incre)
{
code_block
}
这里 init和 incre是两个语句,test是一个表达式。 init语句只执行一次，
用来初始化循环变量。 test表达式在每次循环后都要被计算一次，如果
其运算值为“假”，则循环中止并立即继续执行 for语句之后的语句，
否则执行 code_block语句块，循环完成后执行一次 incre语句块，循环完
成后，执行一次 incre 语句。使用 break语句可用来从循环中退出。 For
语句一般用在已知循环次数的场合，而且 init,test,incre三个语句之
间要用分号隔开。
下面举例说明 for语句的用法：
<SCRIPT LANGUAGE=javascript>
var sum=0;
for(n=1;n<11;n++)
{
sum=sum+n
document.write (n," SUM=",sum,"<br>");
}
</SCRIPT>
② while 语句
对于有些程序，如果不知道其循环体要执行多少次时，就不能使用 for
循环语句了。这时就可以考虑使用 while语句,while语句也是产生一段
程序循环，其语法格式如下：
while (expr) {
code_block;
}
这里，当表达式 expr为“真”时,code_block循环体被执行，执行完该
循环体后，会再次判断表达式 expr的运算结果是否为,True”，以决定
是否再次执行该循环体；如果 expr开始时便为“假”，则语句块
code_block将一次也不会被执行。使用 break语句可从这个循环中退出。
其实 while语句非常好理解，只要知道“表达式为真则执行循环体”即
可。下面举例说明 while语句的用法。
下面举例说明 while语句的用法：
<SCRIPT LANGUAGE=javascript>
<!--
var i,sum;
i=1;
sum=0;
while(i<=10){
sum+=i;
document.write(i," ",sum,"<br>") ;
i++;
}
//-->
</SCRIPT>
③ do… while语句
do… while语句与 while语句所执行的功能完全一样, 唯一的不同之处就是
do… while语句不管条件是否成立, 其循环体至少执行一次, 然后再去
判断表达式的取值是否为真 。 do… while语句的语法格式如下：
do{
code_block
} while (expr) ;
这里，无论表达式 expr的值是否为“真”,code_block循环体都被执
行，即语句块 code_block至少执行一次。另外，使用 break语句可从循
环中退出。下面举一个例子，来说明其条件并不成立，但其循环体却
执行一次。
下面举例说明 do…while 语句的用法：
<SCRIPT LANGUAGE=javascript>
<!--
var i,sum;
i=1;
sum=0;
do{
sum += i;
document.write (i," ",sum*100,"<br>") ;
document.write ("i小于 10条件不成立,但本循环体却执行一次 !");
i++;
} while (i>10)
//-->
</SCRIPT>
（ 3） 转移语句
① Break语句
Break语句的作用就是使程序跳出各种流程 。 它常常是用
在异常情况下终止流程 。 在循环体中, 可以使用多个 Break语
句, 一个 Break语句只会影响和它最近的循环 。 但是最好不要
过多使用 Break语句, 否则程序运行结果将难以预料 。
② Continue语句
有时, 在循环体中, 在某个特定的情况下, 希望不再执
行下面的循环体, 但是又不想退出循环, 这时就要使用
Continue语句 。 在 for循环中, 执行到 Continue语句后, 程序立
即跳转到迭代部分, 然后到达循环条件表达式, 而对 While循
环, 程序立即跳转到循环条件表达式 。
10.2.3 JavaScript中的函数
把相关的语句组织在一起，并给它们标注相应的名称，利用这种方法
把程序分块，这种形式的组合就称为函数，往函数中传递信息的方法是用
参数，有些函数不需要任何参数，有些函数可以带多个参数。函数的定义
方法如下所示：
Function 函数名 ( [ 参数 ] [，参数 ] ){
函数语句块
}
1,JavaScript函数概述
下面通过一个具体实例来看一下 JavaScript中函数的定义和调用方法。其源
代码如下：
<HTML>
<HEAD>
<TITLE>一个 JavaScripte程序测试
</TITLE>
<SCRIPT LANGUAGE=javascript>
<!--
function total (i,j) {
var sum;
sum=i+j;
return(sum); }
document.write("调用这个函数 total(100,20),结果为,",total(100,20) )
//-->
</SCRIPT>
</HEAD>
<BODY> </BODY></HTML>
在面向对象编程语言中，函数一般是作为对象的方法来定义的。而有
些函数由于其应用的广泛性，可以作为独立的函数定义，还有一些函数根
本无法归属于任何一个对象，这些函数是 JavaScript脚本语言所固有的，并
且没有任何对象的相关性，这些函数就称为内部函数，由于篇幅限制不能
一一讲述，在此仅通过一个例子来说明。
IsNaN（变量），如果变量的值不是数值类型，则返回,True”，否则
返回,False”。这个函数可以用来对用户的输入进行判断，看其输入是否
是数值类型。
2,内部函数
下面通过一个例子来说明，当用户在浏览器的输入对话框中输入一个值，
如果输入的值不是数值类型时，则给用户一个提示，当用户输入的值
是数字型时，也同样给出一个提示。这个例子的源代码如下：
<SCRIPT LANGUAGE=javascript>
<!--
var str;
str = prompt ("请你输入一个值,如 3.14","");
if ( isNaN ( str ) ){
document.write("唉? 受不了您,有例子都输不对 !!!");}
else
{document.write("您真棒,输入正确 (数值类型 )!!!");}
//-->
</SCRIPT>
在 JavaScript中, 可以定义自己的函数 。 下面举例说明, 其在浏览器中的显
示结果如图 8-37所示 。
3,用户自定义函数
＜ HTML＞
＜ HEAD＞
＜ TITLE＞ This is a function's test
＜ /TITLE＞
＜ SCRIPT LANGUAGE="JavaScript"＞
function square ( i ){
document.write ("The call passed",i,"to the square
function.","<BR>")
return i*i
}
document.write ("The function re-turned",”<BR>”)
document.write(square(8))
＜ /SCRIPT＞
＜ /HEAD＞
＜ BODY＞
＜ BR＞ All done,
＜ /BODY＞
＜ /HTML＞
10.2.4 JavaScript的事件
JavaScript语言是一个事件驱动的编程语言 。事件是脚本处理响应用
户动作的唯一途径，它利用了浏览器对用户输入的判断能力，通过建立事
件与脚本的一一对应关系，把用户输入状态的改变准确地传给脚本，并予
以处理，然后把结果反馈给用户，这样就实现了一个周期的交互过程。
JavaScript对事件的处理分为定义事件和编写事件脚本两个阶段，可
以定义的事件类型几乎影响到 HTML的每一个元素，例如：浏览器窗口、
窗体文档、图形、链接等。下面给出表 8-7列出事件类型和它们的说明：
1,JavaScript事件
事件名称 事件说明
Abort 用户中断图形装载
Blur 元素失去焦点
Change 元素内容发生改变，如文本域
中的文本和选择框的状态
Click 点击鼠标按钮或键盘按键
Dragdrop 浏览器外的物体被拖到浏览器
中
Error 元素装载发生错误
Focus 元素得到焦点
Keydown 用户按下一个键
Keypress 用户按住一个键不放
Keyup 用户将按下的键抬起
Load 元素装载
Mousemove 鼠标移动
Mouseover 鼠标移过元素上方
Mouseout 鼠标从元素上方移开
Mousedown 鼠标按键按下
Mouseup 鼠标按键抬起
Move 帧或者窗体移动
Reset 表单内容复位
Resize 元素大小属性发生改
变
Submit 表单提交
Select 元素内容发生改变，
如文本域中的文本和
下拉选单中的选项
Unload 元素卸载
接下来要为这些事件编写处理的函数, 这些函数就是脚本函数 。 这些脚本
函数包含在 <Script>和 </Script>标记之间 。 下面通过一个脚本实例, 看看它是
如何工作的 。 这个例子的功能是建立一个按钮, 当单击按钮后弹出一个对话
框, 对话窗中显示, XX,久仰大名,请多多关照, 。 其源代码如下所示 。
2,为事件编写脚本
<HTML>
<HEAD><TITLE>一个 JavaScripte程序测试 </TITLE>
<SCRIPT LANGUAGE=javascript>
function kkk(){
do{
username=prompt("请问您是何方神圣,报上名来 ","");
}while (username=="")
document.write(username,",久仰大名,请多多关照,");
}
</SCRIPT>
</HEAD>
<BODY>
<INPUT type="button" value=你敢碰我
吗? name=button1 onclick="kkk()">
</BODY>
</HTML>
10.2.5 JavaScript中的对象
面向对象的系统包含三个要素：对象、类、继承。
JavaScript语言是一种基于对象的语言，它不能算是一个面向对象的语言，
因为它不支持类和继承。下面来介绍一下对象的概念。
对象：从概念级上说，表示客观世界的客体，任何实物都可以被称为对象；
从物理实现说：一个对象是一个状态和一系列可被外部调用的操作方法的
一个封装体，即指的是状态和操作的组合，状态通过一组属性来确定，而
操作通过一组方法来确定。
例如：我们以一个饮料机为例来说明封装对象的概念。一台饮料机可以被
认为是封装的，因为它的功能被密封在一个金属盒子内。它有两个方法：
? 制一杯水；
? 制一杯咖啡；
这个对象的状态由剩余的茶叶量、咖啡量、牛奶量、糖量和水量等属性给
出。与这个对象的接口是由盒子前分别标以“咖啡”和“茶”的两个按钮
提供，这两个按钮提供用户能够执行这个对象的方法。
1,基本概念
与一个对象的操作接口被限制在仅是用户需要的上面，而方法的实现，
外部是不可见的，也就是说，具有了信息隐藏，这是封装的主要目的，它阻
止非法的访问，因为金属盒阻止这台机器的用户（当然这个用户从末研究过
饮料机这种复杂难懂的机器）改动这台机器。操作接口的另一个很重要的方
面是，它提供了一个对象的行为视图，即所知道的仅是这个对象提供了某种
功能，除此之外，对其它细节一无所知。在处理某个复杂的问题时，这一点
是很重要的，因为一旦实现了一个对象，了解这个对象的算法和数据结构的
内部细节不再是重要的，重要的仅是知道这个对象所提供的操作接口。
在 JavaScript中，浏览器本身就是一个对象，浏览器的文本也是对象，文本中
的表单也是对象，表单中的按钮仍然是对象，不同的按钮也可以是不同的对
象。另外，在 JavaScript中，一种对象类型是一个用于创建对象的模板，这个
模板中定义了对象的属性和方法。在 JavaScript中一个新对象的定义方法如下：
对象的变量名 = new 对象类型（可选择的参数）
访问对象属性的语法如下：
对象的变量名,属性名
访问对象方法的语法如下：
对象的变量名,方法名（方法可选参数）
例如：我们来定义一个字符串对象（即 String对象）
var gamma;
gamma = new String("This is a string");
document.write (gamma.substr(5,2));
document.write (gamma.length);
它是 JavaScript的内置对象。它被封装了一个字符串。它提供了许多
字符串的操作方法。
String 对象的唯一属性是 length.。 String 对象的方法如表 8-8所示。
2,String 对象
名称 功能
CharAt(n) 返回字符串的第 N个字符
IndexOf(srchStr[,index]) 返回第一次出现子字符串 srchstr的位置,index 从某一
指定处开始，而不从头开始。如果没有该子串，返回 -1
。
LastIndexOf(srchStr[,index]
)
返回最后一次出现子字符串 srchstr的位置,index 从某
一指定处开始，而不从头开始。
Link(href) 显示 href参数指定的 URL的超级链接
Substring(n1,n2) 返回由第 n1和第 n2字符之间的子字符串
ToLowerCase() 将字符转换成小写格式显示
ToUpperCase() 将字符转换成大写格式显示
下面通过一个具体的实例来说明对象的属性及方法的应用。其源代码
如下所示，在浏览器中的显示结果如图 8-41所示
<HTML>
<HEAD>
<TITLE>一个 JavaScript对象的
属性和方法的使用 </TITLE>
<SCRIPT LANGUAGE=javascript>
sth=new String("这是一个字符串对象 ");
document.write ("sth='这是一个字符串对象 '","<br>");
document.writeln ( "sth字符串的长度为,",sth.length,"<br>");
document.writeln ( "sth字符串的第 4个字符为, '",sth.charAt(4),"'<br>");
document.writeln ( "从第 2到第 5个字符为, '",sth.substring(2,5),"'<br>");
document.writeln ( sth.link("http://www.lllbbb.com"),"<br>");
</SCRIPT></HEAD>
<BODY></BODY></HTML>
Math对象所提供的属性和方法在进行数学运算时非常有用。 它有很多
的方法和属性，如 sin(),cos(),abs(),PI,max(),min() 等用于计算的数
学函数。用法如下：
<SCRIPT LANGUAGE=javascript>
<!--
document.write (Math.PI); //取得 3.1415926
document.write (Math.random());//产生一个 0到 1之
间随机数
//-->
</SCRIPT>
3,Array对象
数组是一个有相同类型的有序数据项的数据集合 。 在 JavaScript中的
Array对象允许用户创建和操作一个数组, 它支持多种构造函数 。 数组从
零开始, 所建的元素拥有从 0到 size-1的索引 。 在数组创建之后, 数组的各
个元素都可以使用 [ ]标识符进行访问 。 Array对象的方法如表 8-8所示 。
4,Math对象
方法 说明
Concat(array2) 方法返回一个包含 array1和 array2级联的 Array对象
Reverse( ) 把一个 Array对象中的元素在适当位置进行倒转
Pop() 从一个数组中删除最后一个元素并返回这个元素
Push() 添加一个或多个元素到某个数组的后面并返回添加的最
后一个元素
Shift() 从一个数组中删除第一个元素并返回这个元素
Slice(start,end) 返回数组的一部分。从 index 到最后一个元素来创建一
个新数组
Sort() 排序数组元素，将没有定义的元素排在最后
Unshift() 添加一个或多个元素到某个数组的前面并返回数组的新
长度。
Date 对象提供了几种获取日期和时间的方法。定义 Date对象的方法如下：
var d1= new Date();
一旦定义了该对象，则提供了很多种方法。利用这些方法可以在网页上作
出很多漂亮的效果，而且这些效果都很新奇。例如,2000年倒计时，在网页上
显示今天的年月日，计算用户在本网页上的逗留时间，网页上显示一个电子表，
网上考试的计时器等等。在表 8-9中列出了 Date对象的方法。
5,Date 对象
方法 说明
GetDate() 返回在一个月中的哪一天（ 1~ 31）
GetDay() 返回在一个星期中的哪一天（ 0~ 6）
，其中星期天为 0
GetHours() 返回在一天中的哪一个小时（ 0~ 23）
GetMinutes() 返回在一小时中的哪一分钟（ 0~ 59）
GetMonth() 返回在一年中的哪一月（ 0~ 11）
GetSeconds() 返回在一分钟中的哪一秒（ 0~ 59）
GetYear() 返回年号
SetDate(day) 设置日期
SetHours(hours) 设置小时数
SetMinutes(mins) 设置分钟数
SetSeconds(secs)设置秒
SetYear(year) 设置年
使用脚本语言离不开 HTML对象模型，否则脚本语言只能作为一种退化的编程
语言，并不能在 Web应用中发挥它的强大功能。脚本语言和 HTML对象模型结
合在一起，才有可能构成缤纷的 Web世界。
（ 1）什么是 HTML 对象模型
HTML对象模型定义了表达网页及其元素的对象。这种技术形成了支持动态
HTML的基础。对象模型以事件、属性和方法定义了一组对象，用户可以用来
创建自已的应用或为应用编写脚本。这些对象都按一定的层次组织。这个对象
模型是一个由对象组成的层次结构（如图 8-43所示）。
6,浏览器和 HTML对象
W i ndow s
F r a m e s D oc um e nt H i s t or y L oc a t i on
D oc um e nt D oc um e nt
E l e m e nt B ody A nc hor s
F or m s A l l
B ut t on c he c kbox
N a vi ga t or
L i nks
（ 2） Window对象
Window对象封装了当前浏览器的环境信息。一个 Window 对象中可能包含几
个 Frame（框架）对象。每个 Frame 对象在它所在的框架区域内作为一个根基，
相当于整个窗口的 Windows 对象。
Document 对象封装了当前文档：
History 对象封装浏览器历史记录清单；
Location 对象封装浏览器当前位置：
Navigator 对象提供客户环境的信息；
Screen 对象访问显示器屏幕参数：
Event 对象提供最新事件信息及控制事件处理。
Window 对象的属性
广义的 Window 对象包括浏览器的每一个窗口、每一个框架（ Frame）或者活
动框架（ IFrame）。每个 Window 对象都有以下一些属性：
Name 这是 Window对象的一个可读写属性，它返回当前窗口的名称。
Parent 这是 Window 对象的一个只读属性，如果当前窗口有父窗口，它返回
当前窗口的父窗口的对象，可以使用返回对象的属性和方法。
Opener 这是 Window 对象的一个只读属性，属性返回产生当前窗口对象，可
以使用返回对象的属性和方法。
Self 这是 Window对象的一个只读属性，属性返回当前窗口的一个对象，可
以通过这个对象访问当前窗口的属性和方法。
Top 这是 Window 对象的一个只读属性，属性返回的是代表最上层窗口的一
个对象，可以通过这个对象访问当前窗口的属性和方法。
DefauItStatus 这是 Window 对象的一个可读写属性，使作它可以返回或者设
置将在浏览状态栏中显示的缺省内容。
Status 这是 Window 对象的一个可读写属性，使用它可以返回或者设置将在
浏览器状态中显示的内容。例如下例可以在浏览器状态栏中显示浏览当天
的日期,Status=DataFormat(Date)
Window 对象的方法
Alert 使用 Alert 方法可以弹出一个警告框，警告框显示一条信息，并且有
一个“确定”按钮。用法,window.alert("这次你可真走运 !") 。 其在浏览
器中的显示结果如图 8-44所示。
Confirm 使用 Confirm方法可以弹出一个对话框，显示一条信息，并且显示
“确定”和“取消”两个按钮。它能返回一个逻辑布尔量的值，可以被脚
本程序使用，下面来看一个具体的实例。其源代码如下所示。
<SCRIPT LANGUAGE= JavaScript>
<!--
Res = window.confirm("您有勇气确认码?");
if (Res) {document.write("您真勇敢 !")}
else {document.write("您太年轻,还需要锻炼 !")}
//-->
</Script>
Prompt 用 Prompt方法可以弹出一个信息框，显示一条信息，并且有一个文
本输入框、一个“确定”按钮和一个“取消”按钮。如果选择“确定”按
钮，则文本框中输入的内容将被返回，可以被脚本程序使用。这个方法有
两个参数：第一个是要在对话框中显示的信息；第二个是文本输入框内默
认显示的内容。例如,Str=window.prompt("有胆子报上名来 !","")。其
在浏览器中的显示结果如图 8-48所示。在 Prompt对话框中，如果点击“确
定”按钮，将向变量 Str返回当前文本输入框内的字符串；如果点击“取消”
按钮，将不执行任何操作。
Open 这种方法可以建立一个新的窗口，它可以使用许多参数。第一个
参数是要在新窗口中打开的文件的 URL地址，这个参数是必须的：第二
个参数是 Target，即打开文件窗口的名字；随后的参数都是对新窗口属性
的描述。例如要打开一个没有工具条、定位框和目录框的窗口，这个窗
口中显示,Search.htm,，可以使用语句：
window.open("h2.htm","kkk","tooibar=no location=no")。
Close 这种方法用来关闭一个窗口。例如,window.close ()。这行代码
将关闭当前窗口。
SetTimeout 这也是 Window 对象的一个方法。这种方法用来设置一个计时器，
该计时器以毫秒为单位，当所设置的时间到时，会自动的调用一个函数。
SetTimeout方法可以使用三个参数；第一个参数用来指定设定时间到后调
用函数的名称；第二个参数用来设定计时器的时间间隔；第三个参数用来
指定函数使用的脚本语言类型（ JavaScript 或 VBScript）。下面是一个使
用 SetTimeout方法的例子，这个例子在文本框中显示一个电子表。其源代
码如下所示，而其在浏览器中的显示结果如图 8-49所示。
源文件
③ Window 对象的事件
在脚本模型中，对象都有自已的事件。大多数的对象的事件都是相同的，它们
都是浏览器中的一些事件，这些事件有,onBlur,onDblclick, onFocus,
onKeydown, onKeyup,onMousemove,onMouseover,onSelectstart、
onClick,onDragstart,onHelponkeypress, onMousedown, onMousout,
onMouseup 等等。可以为这些对象事件编写事件处理程序，当事件被击活
时，事件处理程序被执行。
Window 对象包含上面讲到的大多数对象的事件，这里就不一一详细介绍，只
介绍两个 Window 对象特有的事件,OnLoad 事件和 OnunLoad 事件。
OnLoad Window 对象的 OnLoad 事件在分析完 HTML 文件的所有代码内容
后被激活。可以使用这个对象事件在网页加载时执行一定的任务。例如，
可以在网页被加载时同时加载一个广告页
OnUnload 在窗口被卸载时，也就是离开当前浏览窗口时，事件内容被激活。
也可以在网页被卸载时同时加载一个广告页
（ 3） Document对象
Document对象指的是在浏览器窗口中显示的 HTML文档。 Document对象的属
性，简单的如：文档的背景，文档字体的颜色等等；复杂的如：各种链接
和锚的结合体,Form以及 ActiveX控件等等。
Document对象提供了一些强有力的方法，使得可以在文档中直接传送 HTML语
句。 Document对象作为 Window对象包含下的一个对象，可以利用
,Window.document”访问当前文档的属性和方法，如果当前窗体中包含框
架对象，可以使用表达式,Window.frames(n).document”来访问框架对象中
显示的 Document对象，式中的,n”表示框架对象在当前窗口的索引号。
① Document对象的属性
Linkcolor 用来设置当前文档中超链接显示的颜色。使用方法：
window.document.linkcolor=”red”
Bgcolor和 Fgcolor 这两个属性分别用来读取或者设置 Document对象所代表的
文档的背景和前景颜色。使用方法与 Linkcolor属性使用方法相同。它们可
以被任意的设置和更改。
Title 是 Document对象的一个只读属性，它返回当前网页的标题。
LastModified 是 Document对象的一个只读属性,它返回当前网页最近一次被修
改的时间,
All属性 是一个对象的序列，它是当前文档中的所有 HTML标记组成的对象
序列．当前窗口中的文档对象的第一个 HTML标记是,Document.all(0)”。
可以使用Ａ ll属性对象的属性和方法，例如：,Document.all.length, 将返
回文档中 HTML标记的个数。
② Document对象的方法
Document对象提供了一些在脚本模式中强有力的方法。这些方法使得用户可
以在脚本中建立显示在用户浏览器中的 HTML文档。
Write Write方法用于将一个字符串放在当前文档中，放入的内容将被浏览器
所识别。如果一般文本，将在页面显示；如果是 HTML标记，将被浏览器
解释。
Open Open方法用于打开要输入的文档。当前文档的内容将被清除掉，而新
的字符串可以通过 Write方法放入当前文档。
Clear Clear方法用于清除当前文档中的内容，更新屏幕。
（ 4） Location对象
Location对象封装了窗口里显示的 URL的信息。
① Location对象的属性
Href Location对象的 href属性可以返回或者设置页面完整的 URL 地址。例如，
如下语句将把浏览器连接到武汉工业学院的主页：
Document.Location.href =,http://www.whpu.com/,
这和使用 Window对象的 Navigate方法的效果是相同的。
Host Location对象的 host属性可以返回网页主机名以及所连接的 URL的端口
Protocal 这个属性用来返回当前使用的协议。例如，现在正在浏览器中访问
FTP站点，那这个属性将返回字符串,ftp”。
② Location对象的方法
Location对象支持三种方法。
Assign 将当前 URL地址设置为其参数所给出的 URL.
Reload 重载当前网址。
Replace 用参数中给出的网址替换当前网址。
（ 5） History对象
History对象有一个唯一的只读属性,length。它可以返回历史记录表中的 URL
地址数目。利用这个属性可以帮助我们在历史纪录表中进行搜索。 History
对象的方法
Back back方法以指引浏览器在历史记录清单中向前移动。例如,
window.history.back l 将指引浏览器跳向历史记录中的前一条记录。
Forward forward方法以指引浏览器在历史记录清单中向后移动。例如,
window.history.forward 2 指引浏览器跳向历史记录中后面的第二条记录。
Go go方法知道浏览器跳向历史记录中的一条纪录。例如,
window.history.go 10 将指引浏览器跳向历史记录中的第十条记录。
本节小结
本章主要介绍了一个个人网站的建立过程，包括如何申请网站空
间、如何制作网页、如何将所制作的网页发布到互联网上以及如何对
自己所制作的网站进行宣传。也学习了标准的 HTML语言，而且通过
一些示例使你对 HTML语言有更进一步的认识。另外对 JavaScript也
做了比较详细介绍，这一部分对于一个从未学习过任何编程语言的读
者来说可能有些困难，但要想使自己制作的网页更加引人入胜，
JavaScript是必须的。学习好 HTML和 JavaScript，可看懂网上别人制
作的非常精彩的网页，吸取别人的经验并把它应用到自己的网页制作
中。
其实本章所介绍的是一种客户端的网页语言，但如果想要实现网
上的交互性，还必须要使用服务器端的脚本语言，目前常用的服务器
端的脚本语言有 ASP,PHP和 JSP，如果想了解有送信息请查阅相关
的专业书籍。
返 回
<HTML>
<HEAD>
<TITLE>这是一个测试网页
</TITLE>
</HEAD>
<BODY>
<h1>标题测试 </h1>
<h2>标题测试 </h2>
<h3>标题测试 </h3>
<h4>标题测试 </h4>
<h5>标题测试 </h5>
<h6>标题测试 </h6>
</BODY>
</HTML>
<HTML>
<HEAD>
<TITLE>这是一个测试网页 </TITLE>
</HEAD>
<BODY>
<pre> <!--（图 8-18无此标记） -->
HTML是一种描述文档结构的标注语
言，它使用一些约定的标记对各种信息
进行标注。
</pre> <!--（图 8-18无此标记） -->
</BODY>
</HTML> 返 回
返回
<HTML>
<HEAD>
<TITLE>这是一个测试网页 </TITLE>
</HEAD>
<BODY>
<STRONG>HTML</STRONG>是一种
<EM>描述文档结构 </EM>的
<U>标注语言 </U>，
<B>它使用 </B>一些
<I>约定的标记 </I>对各种信息进行
<S>标注 <S>。
</BODY>
</HTML>
返 回
返回
<HTML>
<HEAD>
<TITLE>测试页 </TITLE>
</HEAD>
<BODY>
<IMG alt="校庆 " src="images/center1.gif" >
<IMG alt="校庆 " src="images/center1.gif" border=8>
<IMG alt="校庆 " src="images/center1.gif" height=150 width=150>
</BODY>
</HTML>
返 回
返回
<HTML>
<HEAD>
<TITLE>一个 JavaScript计时器的应用 </TITLE>
<SCRIPT LANGUAGE = JavaScript>
var flag;
interval=1000;
function change() {
var today = new Date();
text1.value = today.getHours() + ":" + today.getMinutes() + ":" + today.getSeconds();
imerID=window.setTimeout("change()",interval); }
</SCRIPT>
</HEAD>
<BODY onload="change()">
<INPUT id=text1 name=text1>
</BODY></HTML> 返 回
返回
学习要点：
? HTML语言基本知识
? JavaScript脚本语言
第 8章 网页建立与维护
10.1 网页的制作语言
10.2 网页脚本语言 —— JavaScript
退出
10.1.1 HTML 语言的结构
10.1.3 超文本链接指针
10.1.2 构成网页的基本元素
10.1..4在 HTML文件中使用图像
10.1.6 表单的应用
10.1.5 框架结构的使用
10.1.7 HTML中的表格
10.
1
网
页
的
制
作
语
言
返 回
HTML（超文本标记语言）是一种描述文档结构的标注语言,它使用
一些约定的标记对 WWW上的各种信息进行标注。当用户浏览 WWW上的信
息时，浏览器会自动解释这些标记的含义，并按照一定的格式在屏幕上显
示这些被标记的文件。 HTML的优点是其跨平台性。 即任何可以运行浏览
器的计算机都能阅读并显示 HTML文件，不管其操作系统是什么，并且显
示结果相同。
HTML文件是标准的 ASCII文件,且其后缀名为 htm或 html的文件。
HTML文件看起来象是加入了许多被称为链接签（ tag）的特殊字符串的普
通文本文件。从结构上讲,HTML文件由元素（ element）组成,组成
HTML文件的元素有许多种，用于组织文件的内容和指导文件的输出格式。
绝大多数元素是“容器”,即它有起始标记和结尾标记。元素的起始标记
叫做 起始链接签 （ start tag），元素结束标记叫做 结尾链接签 （ end tag），
在起始链接签和结尾链接签中间的部分是元素体。 每一个元素都有名称和
可选择的属性，元素的名称和属性都在起始链接签内标明。
10.1.1 HTML 语言的结构
下面来看一个 HTML文件，它在浏览器中显示的结果如图 8-15所示。
<HTML>
<HEAD>
<TITLE>武汉工业学院 </TITLE>
</HEAD>
<BODY bgcolor= yellow>
<P>这是一 HTML的测试文件 </P>
</BODY>
</HTML>
<TITLE>标记用来给网页命名, 网页的名称写在 <TITLE>与
</TITLE>标记之间, 显示在浏览器的标题栏中 。 例如, 在图 8-15中
所示的浏览器页面中, 其标题栏所显示的, 武汉工业学院, 是在
HTML文件中的由 <TITLE>武汉工业学院 </TITLE>所定义的 。
10.1.2 构成网页的基本元素
1,<TITLE>标记
<H1>… </H1> 到
<H6>… </H6>标题元素有 6
种, 用于表示文章中的各
种题目 。 字体大小 <H1>到
<H6>顺序减小 。 下面这个
例子中分别使用了 <H1>到
<H6>的标题 。 其 HTML文
件如下所示, 在浏览器中
的显示效果如图 8-16所示 。
2,<Hn>标记
源文件
3,预格式化文本标记 <pre>
源文件
HTML的输出是基于窗口的，因而 HTML文件在输出时都是要
重新排版的，即把文本上任何额外的的字符（如空格、制表符和回
车符）都忽略，若确实不需要重新排版的内容，可以用 <pre>…< ／
pre>通知浏览器。在图 8-17和图 8-18中显示了有无预格式化文本标
记 <pre>的对比。
4,<BR>和 <P>标记
源文件
<BR>用于强制换行。 <P> 表示一个段落的开始。 </P>一般可
不用。
5,<B> <I> <U> <STRONG> <S> 标记
这几个标记都是用来修饰所包含文档的。 <B>标记使文本加粗；
<I>标记使文本倾斜； <U>标记给文本加下划线； <S>标记给文本加
删除线； <STRONG>标记使文本字体加重。下面给出一个 HTML源
文件，其显示结果如图 8-19所示。
6,<FONT>标记
<FONT>…</FONT> 用来
修改字体和颜色。其中
COLOR属性指定文字颜色，
颜色的表示可以用 6位十六进
制代码，如 <FONT COLOR =
#00FF00>； SIZE属性指定相
对尺寸。
另外,如果用户想要设置网
页的背景色和文字颜色，可以
将 <BODY>标记扩充为：
<BODY bgcolor=# text=#
link=# alink=# vlink=#
background =,imageURL”>
其中各个元素的说明如表 8-1
所示，表 8-2列出了一些常用
颜色的 RGB值。
标记 说明
Bgcolor 设置网页背景颜色
Text 设置网页非可链接文字的颜色
Link 设置网页可链接文字的颜色
Alink 设置网页正被点击的可链接文字的颜
色
Vlink 设置网页已经点击的可链接文字的颜
色
Backgrou
nd
设置网页背景图案
ImageUR
L
设置网页背景图案的 URL地址
# 代表颜色 RGB值（格式为 rrggbb）。
它是用 16进制的红 -绿 -蓝（ red-
green-blue,RGB）值来表示。各种
常见的颜色的 RGB值如表 9-2所示。
颜色 RGB 颜色 RGB
黑色（ Black） 000000 橄榄色（ Olive） 808000
红色（ Red） FF0000 深表色（ Teal） 008080
绿色（ Green） 008000 灰色（ Gray） 808080
蓝色（ Blue） 0000FF 深蓝色（ Navy） 000080
白色（ White） FFFFFF 浅绿色（ Lime） 00FF00
黄色（ Yellow） FFFF00 紫红色（ Fuchsia
）
FF00FF
银色（ Silver） C0C0C0 紫色（ Purple） 800080
浅色（ Aqua） 00FFFF 茶色（ Maroon） 800000
超文本链接指针是 HTML最吸引人的优点之一，可以这样说，如果没
有超文本链接指针，就没有万维网。使用超文本链接指针可以使顺序存放
的文件具有一定程度上随机访问的能力，这更加符合人类的踊跃思维方式。
超文本链接指针是指把并不连续的两段文字或两个文件联系起来。
8.2.3 超文本链接指针
1,统一资源定位器 URL
统一资源定位器（ Uniform Resource Locator）是文件名的扩展。在单
机系统中，如果要找一个文件，需要知道该文件所在的路径和文件名；在
互连网上同样找一个文件，除了要知道以上内容之外，显然还需要知道该
文件存放在哪个网络的哪台主机中才行。与单机系统不一样的是，在单机
系统中所有的文件都由统一的操作系统来管理，因而不必给出访问该文件
的方法；而在互连网上，每个网络，每台主机的操作系统都不一样，因此
必须指定访问该文件的方法。一个 URL包括了以上所有的信息。它的构成
为：
protocol:// machine.name[:port]／ directory／ filename
2,建立一个链接
（ 1）链接到其它站点
在 HTML文件中用链接指针指向一个目标。其基本格式为：
<a href = "…"> zzz </a>
其中 zzz可以是文字或图片并显示在网页中，当用户单击它时，浏览
器就会显示由 href属性中的统一资源定位器（ URL）所指向的目标，实际
上这个 ZZZ在 HTML文件中充当指针的角色，它一般显示为蓝色。 href中
的 h表示超文本，而 ref表示“访问”或“引用”的意思。例如：
<a href = "http://www.whpu.com/">武汉工业学院 </a>
用户用鼠标单击“武汉工业学院”，即可看到武汉工业学院的主页内
容。在这个例子中,充当指针的是“武汉工业学院”。
（ 2） 同一个文件中的链接
超链可以指向自己的计算机中的某一个文件这种链接方式叫做本地链接 。
前面曾提到过一个超文本链接指针包括两个部分, 一个指向目标的链接指
针, 另一个是被指向的目标 。
标识一个目标的方法为：
<A NAME="KKK">…….< ／ A>
NAME属性将放置该标记的地方标记为,KKK”,KKK是一个全文唯
一的标记串,<A>和 </A>之间的内容可有可无。这样，就把放置标记的
地方做了一个叫做,KKK”的标记（如果对 Microsoft Word很熟悉的话，这
就相当于在 Word中的定义“书签”）。做好标记后，可以用下列方法来
指向它。
<a href = "#KKK">转向下一处 </a>
这时就可以点击“转向下一处”这段文字，浏览器就从标记名为
KKK的部分开始显示此 HTML文件的内容了 。
8.2.4 在 HTML文件中使用图像
1,在 HTML文件中显示图像
在浏览器上显示的图像必须有特定的格式，目前使用的浏览器通常支
持 GIF和 JPEG格式的图像。在 HTML网页中加图像是通过 <IMG>标记实现
的，它有几个较为重要的属性。其中：
SRC属性：指明图形的 URL地址；
HEIGHT属性：决定图形的高度；
WIDTH属性：决定图形的宽度；
BORDER属性：决定边框线的宽度，
0-表示无边框；
ALT属性：指明图像显示的备用文本；
源文件
2,在 HTML文件中利用图像建立链接
如果在链接标记 <A>和 </A>的中间放置一个 <IMG>标记，这个图像
将会成为一个可击点，产生一个链接。例如：
<A HREF=” default.asp” >
<IMG SRC=”images/center1.gif, ALIGN=LEFT>
</A>
当用户单击这个图像后，浏览器就会显示,default.asp”这个文件的内
容了。
8.2.5 框架结构的使用
框架能够将页面分成数个独立变化的窗口，每个窗口可以显示不同
的 Web页面，并可以不断更换显示的对象。使用框架结构，可以使屏幕的
信息量增大，使 Web网页更加吸引读者。有关框架内容的 HTML语法为：
<FRAMESET>
<NOFRAMES>…</NOFRAMES>
<FRAME SRC=”URL”>
…
</FRAMESET>
其中 <noframes>...</noframes>中的内容显示在不支持分框的浏览器窗
口中，因而这里指向一个普通版本的 HTML文件，以便使用不支持分框浏
览器的用户阅读。
分框由 <frameset>指定，并且可以嵌套，分区中各部分显示的内容
用 <frame>指定。 需要说明的是,frame是一个新出现的元素，许多浏
览器不支持它。分框可以将窗口横向分成几个部分，也可以纵向分成几个
部分，还可以混合分框。
框架结构标记可以嵌套，用以实现大框架中的小框架。它主要有两个
属性,ROWS和 COLS，它们可以将浏览器页面分为 N行 M列，当然也可
以各自独立使用。下面来看一个框架结构的例子。如图 8-21，其 HTML源
文件如下所示。
<html>
<head>
<title>武汉工业学院 </title>
<frameset cols="*,140" >
<frameset rows="*,80" >
<frame src="a.htm" name="f1">
<frame src="b.htm" name="f2"
scrolling="no">
</frameset>
<frameset rows="*,80" >
<frame src="c.htm" name="f3">
<frame src="d.htm"
name="f4" >
</frameset>
</frameset>
</head>
<frame>标记有以下主要属性：
SRC属性 指定框架单元的 URL源，如第 6行中指出的是当前主机当前目
录下的,a.htm”文件。即在此框中显示,a.htm”的内容。
NAME属性 为该框架单元起个标识名，主要用来为将来改变框架内容提
供入口。
SCROLLING属性 设置框架是否使用滚动务。有 YES,NO和 AUTO三个
值，分别表示强制使用滚动条，禁止使用滚动条和自动判断使用滚动条。
8.2.6 表单的应用
HTML提供的表单是用来将用户数据从浏览器传递给 Web服务器的。
例如可以利用表单建立一个录入界面，也可以利用表单对数据库进行查询。
在这里需要声明的是，表单的操作是与服务器进行交互的操作，而服务器
端的操作是通过服务器端的程序来实现的。实现在服务器端的操作有许多
种方式，其中 ASP（动态服务网页）的方式就是一种，它可以通过 ADO方
式与多种数据库相连。
ASP（ Active Server Page）程序是在服务器端工作，并且通过服务器
端的编译动态地送出 HTML文件给客户端，它负责处理 HTML文件与运行
在服务器端的程序之间的数据交换。当用户输入他们的信息（这个信息可
以是查询条件，也可以是传送给服务器的某些内容）并提交给服务器后，
便激活了一个 ASP程序。该 ASP程序又可以调用操作系统下的其他程序
（例如数据库管理系统）完成读者的查询任务，当操作系统下的程序完成
查询之后，便把查询结果传给 ASP，通过 ASP传给 Web服务器。由此可以
看出,ASP程序在用户与服务器之间进行交互查询时所起的重要作用。
1,什么是表单
HTML提供的表单是用来将用户数据从浏览器传递给 Web服务器的。
例如可以利用表单建立一个录入界面，也可以利用表单对数据库进行查询。
在这里需要声明的是，表单的操作是与服务器进行交互的操作，而服务器
端的操作是通过服务器端的程序来实现的。实现在服务器端的操作有许多
种方式，其中 ASP（动态服务网页）的方式就是一种，它可以通过 ADO方
式与多种数据库相连。
ASP（ Active Server Page）程序是在服务器端工作，并且通过服务器
端的编译动态地送出 HTML文件给客户端，它负责处理 HTML文件与运行
在服务器端的程序之间的数据交换。当用户输入他们的信息（这个信息可
以是查询条件，也可以是传送给服务器的某些内容）并提交给服务器后，
便激活了一个 ASP程序。该 ASP程序又可以调用操作系统下的其他程序
（例如数据库管理系统）完成读者的查询任务，当操作系统下的程序完成
查询之后，便把查询结果传给 ASP，通过 ASP传给 Web服务器。由此可以
看出,ASP程序在用户与服务器之间进行交互查询时所起的重要作用。
1,什么是表单
表单就是为 Internet网络用户在浏览器上建立一个交互接口，使
Internet网络用户可以在这个接口上输入自己的信息，然后使用提交按钮，
将 Internet网络用户的输入信息传送给 Web服务器。
在 HTML中，有一个专门的标记 FORM提供表单的功能，由表单开始
标记 <FORM>和表单结束标记 </FORM>组成，表单中可以设置文本框、
按钮或下拉菜单，它们也是通过标记完成。在表单的开始标记中带有两个
属性,ACTION和 METHOD。书写表单的 HTML格式如下
< FORM ACTION =,…” METHOD=”…” >
…
</FORM>
2,表单的标记
FORM标记有以下主要属性：
（ 1） ACTION属性是用来指出，当这个 FORM提交后需要执行的驻留在
Web服务器上的程序名（包括路径）是什么。一旦 Internet网络用户提交输
入信息后服务器便激活这个程序，完成某种任务。例如：
<FORM ACTION =,login.asp” METHOD = POST > … </FORM>
当用户点击“提交”按钮以后,Web服务器上的,login.asp”将接收用户输
入的信息，以登记用户信息。
（ 2） METHOD属性是用来说明从客户端浏览器将 Internet网络用户输入的
信息传送给 Web服务器时所使用的方式，它有两种方式,POST和 GET。
默认的方式是 GET，这两者的区别是在使用 POST时，表单中所有的变量
及其值都按一定的规律放入报文中，而不是附加在 ACTION所设定的 URL
之后。在使用 GET时将 FORM的输入信息作为字符串附加在 ACTION所设
定的 URL的后面，中间用“？”隔开，即在客户端浏览器的地址栏中可以
直接看见这些内容。
2,表单的标记
HTML中的 INPUT标记是表单中最常用的标记。我们在网页上所见到
的文本框、按钮等等都由这个标记引出的。下面是 INPUT标记的标准格式：
<INPUT TYPE=“…” VALUE =“…”>
其中 TYPE属性是用来说明提供给用户进行信息输入的类型是什么。例如
是文本框、单选按钮或多选按钮。它的取值如下：
TYPE =,TEXT” 表示在表单中使用单行文本框
=,PASSWORD” 表示在表单中为用户提供密码输入框
=,RADIO” 表示在表单中使用单选按钮
=,CHECKBOX” 表示在表单中使用多选按钮
=,SUBMIT” 表示在表单中使用提交按钮
=,RESET” 表示在表单中使用重置按钮
3,HTML中的 INPUT标记
用一个例子说明文字输入和密码输入的制作。
（ 1） 文字输入和密码输入
<HTML>
<HEAD>
<TITLE>这是个测试页 </TITLE>
</HEAD>
<BODY>
<FORM ACTION=“REG.ASP” METHOD=POST>
请输入您的真实姓名, <INPUT TYPE=TEXT NAME=姓名 ><BR>
您的主页的网址, <INPUT TYPE=TEXT NAME=网址 VALUE=HTTP://><BR>
密码, <INPUT TYPE=PASSWORD NAME=密码 ><BR>
<INPUT TYPE=SUBMIT VALUE="发送 "><INPUT TYPE=RESET VALUE="重设 ">
</FORM>
</BODY>
</HTML>
（ 2） 复选框 （ Checkbox） 和 单选框 （ Radio Button）
<HTML>
<HEAD>
<TITLE>这是个测试页 </TITLE>
</HEAD>
<BODY>
<FORM ACTION=“REG1.ASP” METHOD=POST>
选择一种你喜爱的水果,
<br><INPUT type=radio name=水果 value=”香蕉” >香蕉
<br><INPUT type=radio name=水果 checked value=”草莓” >草莓
<br><INPUT type=radio name=水果 value="橘子 ">橘子
<br>选择你所喜爱的运动,
<br><INPUT type="checkbox" name=ra1 checked value="足球 ">足球
<br><INPUT type="checkbox" name=ra2 checked value="篮球 ">篮球
<br><INPUT type="checkbox" name=ra3 value="排球 ">排球
<br><INPUT TYPE=SUBMIT VALUE="发送 "><INPUT TYPE=RESET VALUE="重设 ">
</FORM>
</BODY>
</HTML>
（ 3） 按钮的制作
在上面几个例子中，都有两个按扭，一个是“发送”按钮，另一个“重
置”按钮。其实“发送”按钮真正的含义叫“提交”即当 Internet网络用
户用鼠标单击这个按钮后，用户输入的信息便提交给一个驻留在 Web服
务器上的程序，让服务器进行处理，其典型的格式,<INPUT
TYPE=”SUBMIT” VALUE=”发送” >。提交按钮在 FORM中是必不可少
的，前几个例子只是说明 INPUT语句中类型的使用，作为 FORM语句并
不完整，每个 FORM中有且仅有一个提交按钮。当设置“提交”按钮标
记时，如果缺省 VALUE属性，则浏览器窗口中的按钮上出现,SUBMIT”
的字样，这个字样也可以自己设定，改变按钮上的提示。例如：
VALUE=“提交”。
另一种在浏览器常用的按钮叫“重置”按钮，当 Internet网络用户用鼠标
单击这个按钮后，网络用户输入的信息被清除，让网络用户重新输入信
息。其典型的格式,<INPUT TYPE =,RESET” VALUE=”重新输入” >，
而且在这个标记设置中如果缺省 VALUE属性，则浏览器窗口中的按钮上
出现,RESET”的字样，这个字样也可以自己设定，来改变按钮上的提
示，例如,VALUE=“重新输入”。
（ 4） HTML中的 SELECT标记
在制做 HTML文件时，使用 <FORM>…</FORM> 标记可以在浏览器窗口
中设置下拉式菜单或带有滚动条的菜单,Internet网络用户可以在菜单中
选中一个或多个选项。
<HTML>
<HEAD>
<TITLE>武汉工业学院 </TITLE>
</HEAD>
<BODY>
请从下面课程中选择几门选择课,
<FORM action="h1.asp" method=POST id=form1 name=form1>
<SELECT name=x1 multiple>
<OPTION>网络技术 <OPTION>书法
<OPTION>音乐欣赏 <OPTION>现代文学
<OPTION>多媒体技术
</SELECT>
</FORM>
</BODY>
</HTML>
8.2.7 HTML中的表格
下面看一个表格的例子
从这个例子可以看出一个表格有一个标题（ Caption），它表明
表格的主要内容，并且一般位于表的上方；表格中由行和列分割成的
单元叫做“表元”（ Cell），它又分为表头（用 TH标记来表示）和表
数据（用 TD标记来表示）；表格中分割表示的行列线称为“框线”
（ B order）。
一个表格的基本框架如下所示：
<TABLE WIDTH=75% BORDER=1 CELLSPACING=1 CELLPADDING=1>
<CAPTION></CAPTION>
<TR>
<TD></TD>
<TD></TD>
<TD></TD>
</TR>
<TR>
<TD></TD>
<TD></TD>
<TD></TD>
</TR>
1,表格的标记
<TR>
<TD></TD>
<TD></TD>
<TD></TD>
</TR>
</TABLE>
（ 1） TABLE标记
一个表格至少一个 TABLE标记，由它来决定一个表格的开始和结束，而且
TABLE标记可以嵌套。 TABLE标记有以下五种属性：
? BORDER属性，指定围绕表格的框的宽度（只能用像素）。
? CELLSPACING属性，指定框线的宽度
? CELLPADDING属性，用于设置表元内容与边框线之间的间距。
? ALIGN属性用来控制表格本身在页面上的对齐方式。其取值可是
LEFT（左对齐）,CENTER（居中对齐）,RIGHT（右对齐）。
? WIDTH属性，用来设置表格的宽度，可以以像素为单位，也可用占
浏览器窗口的百分比来定义。
（ 2） CATION标记
CATION标记用来标注表格标题的。 CATION标记必须紧接在 TABLE开
始标记之后放在第一个 TR标记之前。通过该标记所定义的表格标题一般
显示在表格的上方，而且其水平方向是居中对齐。另外，如需要对表格
的标题突出显示，可以在 CATION标记之间加入其它对字体进行加重显
示的标记。如：
<TABLE WIDTH=75% BORDER=1 CELLSPACING=1 CELLPADDING=1>
<CAPTION>
<H2>表格标题强调 </H2>
</CAPTION>
<TR>
……….
</TR>
</TABLE>
（ 3） TR标记
定义表格的一行。 TR标记中有两个属性，一个是 ALIGN属性，用来设
置表行中的每个表元在水平方向的对齐方式，其取值可以是 LEFT（左
对齐）,CENTER（居中对齐）,RIGHT（右对齐）；另一个是 VLIGN
属性，用来设置表行中的每个表元在垂直方向的对齐方式，其取值可以
是 TOP（向上对齐）,CENTER（居中对齐）,BOTTOM（向下对齐）。
例如，要使表行中各单元的内容水平方向右对齐、垂直方向居中对齐，
可使用如下源代码：
<TR ALIGN=RIGHT VALIGH=TOP>
（ 4） TH标记
TH标记用来表示一个表行中的各个单元。 TH标记内几乎可以包含所有
的 HTML标记，甚至还可以嵌套表格。该标记与 TR标记同样具有 ALIGN
和 VALIGN属性，如果在 TH标记和 TR 标记中都设置了 ALIGN和
VALIGN属性，而且它们所设置的属性值不相同，这时以 TH标记所设置
的属性值为准。另外,TH标记还有两个属性，一个是 WIDTH属性，用
来设置表元的宽度，另一个 HEIGHT属性，用来设置表元的高度。这两
个属性的取值单位都是像素。在同一行中将多个表元设置为不同高度，
或者在同一列中将多个表元设置为不同宽度，都有可能导致不可预料的
结果。
在这个实例中，通过制作一个登记表格来给大家来说明如何制作一个
比较复杂的表格。在表格中经常会出现跨多行、多列的表元，这就要利用
TD标记另外两个属性，即 COLSPAN和 ROWSPAN属性。例如
<TH COLSPAN=3 > 登记照 <TH >
表示这个表项标题将横跨三个表项的位置；
<TH ROWSPAN=3 > 登记照 <TH >
表示这个表项标题将纵跨三个表项的位置；
另外每个表元还可以设置其背景颜色。例如
<TH COLSPAN=3 BGCOLOR=yellow> 登记照 <TH >
还可以在表格中插入超级链接或在表格中插入图片，如果能对这个例
子举一反三的话，那么仅需制作一个无框线的表格，就可以把各种数据按
照自己所希望的形式在页面进行布置。
2,表格使用实例
下面就给出一个具体的实例
<HTML>
<HEAD> <TITLE>表格综合实例 </TITLE> </HEAD>
<BODY>
<TABLE border=1 cellPadding=1 cellSpacing=1 width="75%">
<caption> <h3>大奖赛登记表 </h3> </caption>
<TR>
<TD bgcolor=LightGoldenrodYellow>报名号 </TD>
<TD>757</TD>
<TD bgcolor=LightYellow>性别 </TD>
<TD>女 </TD>
<TDrowspan=2><IMG SRC="image\center.gif"></TD>
</TR>
<TR>
<TD bgcolor=FloralWhite>姓名 </TD>
<TD colspan=3><A href="http://www.jljiangli.com.cn">江小丽 </A></TD>
</TR>
<TR>
<TD
bgcolor=Cornsilk>推荐
单位 </TD>
<TD colspan=4>宇宙
公司 </TD>
</TR>
</TABLE>
</P>
</BODY>
</HTML>
下面就给出一个具体的实例
<TR>
<TD bgcolor=Cornsilk>推荐单位 </TD>
<TD colspan=4>宇宙公司 </TD>
</TR>
</TABLE>
</BODY>
</HTML>
10.2.1 JavaScript的基础知识
10.2.2 JavaScript语言
10.2.3 JavaScript中的函数
10.2.4 JavaScript的事件
10.2 网页脚本语言
—— JavaScript
10.2.5 JavaScript中的对象
返 回
10.2.1 JavaScript的基础知识
脚本语言是一种简单的描术性语言，它是针对 HTML语言不能很好地
解决动态交互这个缺点而引入的，它能对 Web页面中的元素进行控制。一
般来说，脚本语言是通过一个 <Script>的标记嵌入到 HTML文档中，并可
以被浏览器解释执行，插入的脚本语言就如同子程序一样被 HTML元素所
调用，成为 HTML的一部分。目前比较流行的脚本语言有网景公司
（ Netscope）的 JavaScript和微软公司（ Microsoft）的 VBScript。
JavaScript是基于 Netscape浏览器的，类似于 Java编程语言的脚本语言，
并且是一种基于对象的、面向 Internet或 Intranet的编程语言，使用它可以开
发关于 Internet或 Intranet客户端和服务器的应用程序，也可以方便地嵌入到
计算机文件中。由于 JavaScript是第一个在 WWW上使用的脚本语言，因而
它一度是最流行的 Web站点脚本语言，用它可以方便地编排 HTML网页，
同时还可以控制动态 HTML。
VBScript是 Microsoft公司在 Visual Basic编程语言的基础上设计的，由
于其在企业界广为流行，且与 Microsoft公司的其它产品有着密切的联系，
VBScript的使用范围越来越大，逐渐会成为一种主要的脚本语言。
1,什么是脚本语言
JavaScript语言起初并不叫此名称，它的早期是 Netscape的开发者们称
之为,Mocha”的语言，开始在网上进行 β测试（由软件的多个用户在其实
际的使用环境下进行的测试叫 β测试）时，名字改为,LiveScript”,Sun公
司推出 Java之后,Netscape引进了 Sun的有关概念，在其发行 Netscape 2.0β
测试版时才称其为, JavaScript”。它不仅支持 Java的 Applet小程序，同时
向 Web页的制作者提供一种嵌入 HTML文档进行编程的、基于对象的 Script
（脚本）程序设计语言，采用的许多结构与 Java相 似 。
支持 JavaScript的 Navigator 2.0的网络浏览器能够解释并执行嵌在
HTML中的用 JavaScript语言书写的“程序”。 JavaScript具有很多采用
CGI/PERL编写的 Script（脚本）的能力，其优点是可以引用主机资源，响
应位于服务器 Web页中相应语法元素要完成的功能，而又不与主机服务器
进行交互会话 。
2,JavaScript 的产生与发展
JavaScript语言起初并不叫此名称，它的早期是 Netscape的开发者们称
之为,Mocha”的语言，开始在网上进行 β测试（由软件的多个用户在其实
际的使用环境下进行的测试叫 β测试）时，名字改为,LiveScript”,Sun公
司推出 Java之后,Netscape引进了 Sun的有关概念，在其发行 Netscape 2.0β
测试版时才称其为, JavaScript”。它不仅支持 Java的 Applet小程序，同时
向 Web页的制作者提供一种嵌入 HTML文档进行编程的、基于对象的 Script
（脚本）程序设计语言，采用的许多结构与 Java相 似 。
支持 JavaScript的 Navigator 2.0的网络浏览器能够解释并执行嵌在
HTML中的用 JavaScript语言书写的“程序”。 JavaScript具有很多采用
CGI/PERL编写的 Script（脚本）的能力，其优点是可以引用主机资源，响
应位于服务器 Web页中相应语法元素要完成的功能，而又不与主机服务器
进行交互会话 。
2,JavaScript 的产生与发展
JavaScript的编程工作复杂与否和 HTML文档所提供的功能大小密切相
关，下面用一个简单的例子来介绍它的编程特点 。
3,一 个 简 单 的 例 子
＜ HTML＞
＜ HEAD＞＜ TITLE＞ This is a test＜ /TITLE＞ ＜ /HEAD＞
＜ BODY＞
你好
＜ SCRIPT LANGUAGE="JavaScript"＞
document.write "Hello,JavaScript! "
＜ /SCRIPT＞
＜ /BODY＞
＜ /HTML＞
JavaScript源代码被嵌在一个 HTML文档中，而且它可以出现在文档头
部（ HEAD节）和文档体部 (BODY节 )。 SCRIPT标记的一般格式为：
＜ SCRIPT LANGUAGE="JavaScript"＞
＜ !--
JavaScript语 句 串 · · ·
--＞
＜ /SCRIPT＞
为了使老版本的浏览器（即 Navigator2.0版以前的浏览器）避开不识
别的,JavaScript语句串”，用 JavaScript编写的源代码可以用注解括起来，
即使用 HTML的注解标记＜ !--… --＞，而 Navigator2.x可以识别放在注解行
中的 JavaScript源代码。
说明：＜ SCRIPT＞标记可声明一个脚本程序,LANGUAGE属性声明
该脚本是一个用 JavaScript语言编写的脚本。在 <Script>和 </Script>之间的
任何内容都视为脚本语句，会被浏览器解释执行。在 JavaScript脚本中，
用,//”作为行的注释标注。
10.2.2 JavaScript语言
在 JavaScript中，数据类型是十分宽松的，程序员在声明变量时可以不
指定该变量的数据类型,JavaScript会自动地按照需要来分配适当的数据类
型。这一点和 JAVA或 C++是截然不同的。 JavaScript有以下几种基本的数据
类型：
1,JavaScript数据类型
（ 1）数字类型
如, 34,3.14表示为十进制数；
034表示为八进制数，用十进行表示
其值为 28；
0x34表示为十六进制数，用十进行
表示其值为 52。
（ 2）字符串类型
如,"Hello!"；
（ 3）逻辑值类型
其取值仅可能是“真”或“假”，
用 True或 False来表示。
（ 4）空值
当你定义一个变量后未赋初值时，
则该变量为空值。例如：
var ch1; //此时 ch1就为空值，它不属
于任何一种数据类型。
它的定义要求与 C语言相仿，例如以字母或下划线开始,变量不能是
保留字（如 int,var等），不能使用数字作为变量名的第一个字母等等。
但它的定义方法与 C语言有很大的差别。
C语言的变量定义格式为：
int a=1; float f1=3.14
而 JavaScript的变量定义格式,
Var 变量名； 或者 Var 变量名 =初始值；
JavaScript 并不是在定义变量时来说明变量的数据类型，而是在给变
量赋初始值时来确定该变量的数据类型； JavaScript对字母的大小写是敏感
的。如 Var my； Var My,JavaScript认为这是两个不同的变量。
说明：在使用变量之前，最好对每个变量使用关键字 VAR进行变量声
明，防止发生变量的有效区域冲突的问题。
2,JavaScript 变量
JavaScript常量分为 4类：整数、浮点数、布尔值和字符串。下面分别
加以说明。
3,JavaScript常量
（ 1）整数常量
在 JavaScript中，整数可以表示为：
十进制数：即一般的十进制整数，它前
面不可有前导 0。例,75。
八进制数：以 0为前导，表示八进制数。
例,075。
16进制数：以 0x为前导，表示 16进制数。
例,0x0F。
（ 2）浮点数常量
浮点数可以用一般的小数格式来表示，
也可以使用科学计数法来表示。
例如,7.54343,3.0e9
（ 3）布尔型常量
布尔型常量只有两个值,True
和 False。
（ 4）字符串常量
字符串常量是用单引号或双引
号括起来的 0个或多个字符组成。
例如：,Test String”，” 12345”
在 JavaScript的语法规则中，每一条语句的最后必须使用一个分号，例如：
document.write(“kkk”); //此语句的功能在浏览器中输出,kkk”字符串
在编写 JavaScript程序时，一定要有一个良好的习惯，最好是一行写一条
语句，如果使用复合语句块时，注意把复合语句块用大括号括起来，并且根据
每一句作用范围的不同，应有一定的缩进。另外一个好的编程风格是要适当加
一些注释。例如：
4,JavaScript语句的结构
＜ SCRIPT LANGUAGE="JavaScript"＞
var SUM,P,i;
SUM=0;
//初始化累加和
P=1;
FOR (i=1; i<100; i++)
{ SUM+=i;//求累加和
P*=i;
}
＜ /SCRIPT＞
JavaScript常量分为 4类：整数、浮点数、布尔值和字符串。下面分别
加以说明。
3,JavaScript常量
（ 1）整数常量
在 JavaScript中，整数可以表示为：
十进制数：即一般的十进制整数，它前
面不可有前导 0。例,75。
八进制数：以 0为前导，表示八进制数。
例,075。
16进制数：以 0x为前导，表示 16进制数。
例,0x0F。
（ 2）浮点数常量
浮点数可以用一般的小数格式来表示，
也可以使用科学计数法来表示。
例如,7.54343,3.0e9
（ 3）布尔型常量
布尔型常量只有两个值,True
和 False。
（ 4）字符串常量
字符串常量是用单引号或双引
号括起来的 0个或多个字符组成。
例如：,Test String”，” 12345”
JavaScript拥有一般编程语言（如Ｃ语言）的运算符，包括算术运算符、
比较运算符、连接运算符
5,JavaScript运算符和表达式
（ 1）算术运算符
用于连接运算表达式的各种算术运算符如表 8-1所示。
运算符 运算符定义 举例 说明
+ 加法符号 X=A+B
- 减法符号 X=A-B
* 乘法符号 X=A*B
/ 除法符号 X=A+B
% 取模符号 X=A%B X等于Ａ除以Ｂ所得的余数
++ 加１ A++ A的内容加 1
-- 减 1 A-- A的内容减 1
（ 2）位运算符
位操作运算符对两个表达式相同位置上的位进行位对位运算。 JavaScript
支持的位操作运算符如表 8-2所示。
运算符 运算符定义 举例 说明
~ 按位求反 X=~A
<< 左移 X=B<<A (A为移动次数，左边移入
0)
>> 右移 X=B>>A (A为移动次数，右边移入
0)
>>> 无符号右移 X=B>>>A (A为移动次数，右边移入
符号位 )
& 位, 与, X=B & A
^ 位, 异或, X=B ^ A
| 位, 或, X=B | A
（ 3）复合赋值运算符
复合赋值运算符执行的是一个表达式的运算。在 JavaScript中，合法的复
合赋值运算符如表 8-3所示。
运算符 运算符定义 举例 说明
+= 加 X+=A X=X+A
-= 减 X-=A X=X-A
*= 乘 X*=A X=X*A
/= 除 X/=A X=X/A
%= 模运算 X%=A X=X%A
<<= 左移 X<<=A X=X<<A
>>= 右移 X>>=A X=X>>A
>>>= 无符号右移 X>>>=A X=X>>>A
&= 位, 与, X&=A X=X&A
^= 位, 异或, X^= A X=X^A
|= 位, 或, X|=A X=X|A
（ 4）比较运算符
比较运算符用于比较两个对象之间的相互关系，返回值为 True和 False。
各种比较运算符如表 8-4所示。
运算符 运算符定义 举例 说明
== 等于 A==B A等于 B时为真
> 大于 A>B A大于 B时为真
< 小于 A<B A小于 B时为真
!= 不等于 A!=B A不等于 B时为真
>= 大于等于 A>=B A大于等于 B时为真
<= 小于等于 A<=B A小于 等于 B时为真
, 条件选择 E？ A：
B
E为真时选 A，否则选
B
（ 5）逻辑运算符
逻辑运算符返回 True和 False，其主要作用是连接条件表达式，表示各条
件间的逻辑关系。各种逻辑运算符如表 8-5所示。
运算符 运算符定义 举例 说明
&& 逻辑, 与, A && B A与 B同时为 True时，结果为
True
! 逻辑, 非, !A 如 A原值为 True,结果为
False
|| 逻辑, 或, A || B A与 B有一个取值为 True时，
结果为 True
（ 6）运算符的优先级
运算符 说明
,[] () 字段访问、数组下标以及函数调用
++ -- ~ ! typeof new void
delete
一元运算符、返回数据类型、对象创建、未定义
值
* / % 乘法、除法、取模
+ - + 加法、减法、字符串连接
<< >> >>> 移位
<<= >>= 小于、小于等于、大于、大于等于
== !== 等于、不等于、恒等、不恒等
& 按位与
^ 按位异或
| 按位或
&& 逻辑与
|| 逻辑或
,条件
= 赋值
（ 7）表达式
JavaScript表达式可以用来计算数值，也可以用来连接字符串和进行逻辑
比较。 JavaScript表达式可以分为三类：
? 算术表达式
算术表达式用来计算一个数值，例,2*4.5/3
? 字符串表达式
字符串表达式可以连接两个字符串，例如：” hello”+”world!”，该表达式
的计算结果,helloworld!”
? 逻辑表达式
逻辑表达式 计算结果为一个布尔型常量（ True或 False）。
例如,12>24 其返回值为,False
JavaScript允许加一些注释。并且有两种注释方法：单行注释和多行注
释。
单行注释,以,//”开始，以同一行的最后一个字符作为结束。
多行注释,以,/*”开始，以,*/”结束，符号,*/”可放在同一个行或一个
不同的行中。
下面举例说明怎样使用这两种注释方法：
<Script language =,JavaScript”>
/*这是多行注释的第一行
这是多行注释的第二行 */
k=24*7； //这是一个单行注释的例子
</Script>
6,脚本语言的注释
JavaScript的脚本语言同 C++语言类似的，提供了相同的程序流程控制
语句。这些语句分别是 if,switch,for,do和 while语句。
（ 1）条件语句
① If语句
If语句是一个条件判断语句，它根据一定的条件执行相应的语句块，
其定义格式如下所示：
If (expr)
{ code_block1 }
else
{code_block2}
这里,expr是一个布尔型的值或表达式（特别强调,expr一定要用小
括号将其括起来）,code_block1和 code_block2是由多个语句组成的语
句块。当 expr值为“真”时，执行 code_block1，当 expr值为“假”时，
执行 code_block2。
7,JavaScript程序流程控制
另外有一点要说明的是,if语句是可以嵌套的，即在 if语句的模块中，
还可以包含其它的 if语句。例如：
If (expr)
{
code_block1
if (expr1) { code_block3 }
}
else
{
code_block2
}
② switch语句
switch语句测试一个表达式并有条件的执行一段语句，其语法格式如下：
switch (表达式 ) {case 值 1,code_block1
break;
case 值 2,code_block2
break;
case 值 3,code_block3
break;
…
default,code_blockn }
switch语句首先计算表达式的值，然后根据表达式所计算出的值来选择与之
匹配的 CASE后面的值，并执行该 CASE后面的语句，直到遇到了一个
break语句为止，如果所计算出的值与任何一个 CASE后面的值都不相符
的话，则执行 default后的语句。
下面举例说明 switch语句的用法：
<HTML>
<HEAD> <TITLE>例 9-3显示 </TITLE>
<SCRIPT LANGUAGE=javascript>
<!--
document.write("switch语名测试 ------");
switch (14%3) {
case 0,sth="您好 ";
break;
case 1,sth="大家好 ";
break;
default,sth="世界好 ";
break;
}
document.write(sth);
//-->
</SCRIPT>
</HEAD>
<BODY>
</BODY>
</HTML>
（ 2）循环语句
有许多时候，需要把一个语句块重复执行多次，每次执行仅改变部分
参数的值，这时可以使用循环语句，直到某一个条件不成立为止。
① for语句
for语句用来产生一段程序循环，其语法格式如下：
for ( init; test; incre)
{
code_block
}
这里 init和 incre是两个语句,test是一个表达式。 init语句只执行一次，
用来初始化循环变量。 test表达式在每次循环后都要被计算一次，如果
其运算值为“假”，则循环中止并立即继续执行 for语句之后的语句，
否则执行 code_block语句块，循环完成后执行一次 incre语句块，循环完
成后，执行一次 incre 语句。使用 break语句可用来从循环中退出。 For
语句一般用在已知循环次数的场合，而且 init,test,incre三个语句之
间要用分号隔开。
下面举例说明 for语句的用法：
<SCRIPT LANGUAGE=javascript>
var sum=0;
for(n=1;n<11;n++)
{
sum=sum+n
document.write (n," SUM=",sum,"<br>");
}
</SCRIPT>
② while 语句
对于有些程序，如果不知道其循环体要执行多少次时，就不能使用 for
循环语句了。这时就可以考虑使用 while语句,while语句也是产生一段
程序循环，其语法格式如下：
while (expr) {
code_block;
}
这里，当表达式 expr为“真”时,code_block循环体被执行，执行完该
循环体后，会再次判断表达式 expr的运算结果是否为,True”，以决定
是否再次执行该循环体；如果 expr开始时便为“假”，则语句块
code_block将一次也不会被执行。使用 break语句可从这个循环中退出。
其实 while语句非常好理解，只要知道“表达式为真则执行循环体”即
可。下面举例说明 while语句的用法。
下面举例说明 while语句的用法：
<SCRIPT LANGUAGE=javascript>
<!--
var i,sum;
i=1;
sum=0;
while(i<=10){
sum+=i;
document.write(i," ",sum,"<br>") ;
i++;
}
//-->
</SCRIPT>
③ do… while语句
do… while语句与 while语句所执行的功能完全一样, 唯一的不同之处就是
do… while语句不管条件是否成立, 其循环体至少执行一次, 然后再去
判断表达式的取值是否为真 。 do… while语句的语法格式如下：
do{
code_block
} while (expr) ;
这里，无论表达式 expr的值是否为“真”,code_block循环体都被执
行，即语句块 code_block至少执行一次。另外，使用 break语句可从循
环中退出。下面举一个例子，来说明其条件并不成立，但其循环体却
执行一次。
下面举例说明 do…while 语句的用法：
<SCRIPT LANGUAGE=javascript>
<!--
var i,sum;
i=1;
sum=0;
do{
sum += i;
document.write (i," ",sum*100,"<br>") ;
document.write ("i小于 10条件不成立,但本循环体却执行一次 !");
i++;
} while (i>10)
//-->
</SCRIPT>
（ 3） 转移语句
① Break语句
Break语句的作用就是使程序跳出各种流程 。 它常常是用
在异常情况下终止流程 。 在循环体中, 可以使用多个 Break语
句, 一个 Break语句只会影响和它最近的循环 。 但是最好不要
过多使用 Break语句, 否则程序运行结果将难以预料 。
② Continue语句
有时, 在循环体中, 在某个特定的情况下, 希望不再执
行下面的循环体, 但是又不想退出循环, 这时就要使用
Continue语句 。 在 for循环中, 执行到 Continue语句后, 程序立
即跳转到迭代部分, 然后到达循环条件表达式, 而对 While循
环, 程序立即跳转到循环条件表达式 。
10.2.3 JavaScript中的函数
把相关的语句组织在一起，并给它们标注相应的名称，利用这种方法
把程序分块，这种形式的组合就称为函数，往函数中传递信息的方法是用
参数，有些函数不需要任何参数，有些函数可以带多个参数。函数的定义
方法如下所示：
Function 函数名 ( [ 参数 ] [，参数 ] ){
函数语句块
}
1,JavaScript函数概述
下面通过一个具体实例来看一下 JavaScript中函数的定义和调用方法。其源
代码如下：
<HTML>
<HEAD>
<TITLE>一个 JavaScripte程序测试
</TITLE>
<SCRIPT LANGUAGE=javascript>
<!--
function total (i,j) {
var sum;
sum=i+j;
return(sum); }
document.write("调用这个函数 total(100,20),结果为,",total(100,20) )
//-->
</SCRIPT>
</HEAD>
<BODY> </BODY></HTML>
在面向对象编程语言中，函数一般是作为对象的方法来定义的。而有
些函数由于其应用的广泛性，可以作为独立的函数定义，还有一些函数根
本无法归属于任何一个对象，这些函数是 JavaScript脚本语言所固有的，并
且没有任何对象的相关性，这些函数就称为内部函数，由于篇幅限制不能
一一讲述，在此仅通过一个例子来说明。
IsNaN（变量），如果变量的值不是数值类型，则返回,True”，否则
返回,False”。这个函数可以用来对用户的输入进行判断，看其输入是否
是数值类型。
2,内部函数
下面通过一个例子来说明，当用户在浏览器的输入对话框中输入一个值，
如果输入的值不是数值类型时，则给用户一个提示，当用户输入的值
是数字型时，也同样给出一个提示。这个例子的源代码如下：
<SCRIPT LANGUAGE=javascript>
<!--
var str;
str = prompt ("请你输入一个值,如 3.14","");
if ( isNaN ( str ) ){
document.write("唉? 受不了您,有例子都输不对 !!!");}
else
{document.write("您真棒,输入正确 (数值类型 )!!!");}
//-->
</SCRIPT>
在 JavaScript中, 可以定义自己的函数 。 下面举例说明, 其在浏览器中的显
示结果如图 8-37所示 。
3,用户自定义函数
＜ HTML＞
＜ HEAD＞
＜ TITLE＞ This is a function's test
＜ /TITLE＞
＜ SCRIPT LANGUAGE="JavaScript"＞
function square ( i ){
document.write ("The call passed",i,"to the square
function.","<BR>")
return i*i
}
document.write ("The function re-turned",”<BR>”)
document.write(square(8))
＜ /SCRIPT＞
＜ /HEAD＞
＜ BODY＞
＜ BR＞ All done,
＜ /BODY＞
＜ /HTML＞
10.2.4 JavaScript的事件
JavaScript语言是一个事件驱动的编程语言 。事件是脚本处理响应用
户动作的唯一途径，它利用了浏览器对用户输入的判断能力，通过建立事
件与脚本的一一对应关系，把用户输入状态的改变准确地传给脚本，并予
以处理，然后把结果反馈给用户，这样就实现了一个周期的交互过程。
JavaScript对事件的处理分为定义事件和编写事件脚本两个阶段，可
以定义的事件类型几乎影响到 HTML的每一个元素，例如：浏览器窗口、
窗体文档、图形、链接等。下面给出表 8-7列出事件类型和它们的说明：
1,JavaScript事件
事件名称 事件说明
Abort 用户中断图形装载
Blur 元素失去焦点
Change 元素内容发生改变，如文本域
中的文本和选择框的状态
Click 点击鼠标按钮或键盘按键
Dragdrop 浏览器外的物体被拖到浏览器
中
Error 元素装载发生错误
Focus 元素得到焦点
Keydown 用户按下一个键
Keypress 用户按住一个键不放
Keyup 用户将按下的键抬起
Load 元素装载
Mousemove 鼠标移动
Mouseover 鼠标移过元素上方
Mouseout 鼠标从元素上方移开
Mousedown 鼠标按键按下
Mouseup 鼠标按键抬起
Move 帧或者窗体移动
Reset 表单内容复位
Resize 元素大小属性发生改
变
Submit 表单提交
Select 元素内容发生改变，
如文本域中的文本和
下拉选单中的选项
Unload 元素卸载
接下来要为这些事件编写处理的函数, 这些函数就是脚本函数 。 这些脚本
函数包含在 <Script>和 </Script>标记之间 。 下面通过一个脚本实例, 看看它是
如何工作的 。 这个例子的功能是建立一个按钮, 当单击按钮后弹出一个对话
框, 对话窗中显示, XX,久仰大名,请多多关照, 。 其源代码如下所示 。
2,为事件编写脚本
<HTML>
<HEAD><TITLE>一个 JavaScripte程序测试 </TITLE>
<SCRIPT LANGUAGE=javascript>
function kkk(){
do{
username=prompt("请问您是何方神圣,报上名来 ","");
}while (username=="")
document.write(username,",久仰大名,请多多关照,");
}
</SCRIPT>
</HEAD>
<BODY>
<INPUT type="button" value=你敢碰我
吗? name=button1 onclick="kkk()">
</BODY>
</HTML>
10.2.5 JavaScript中的对象
面向对象的系统包含三个要素：对象、类、继承。
JavaScript语言是一种基于对象的语言，它不能算是一个面向对象的语言，
因为它不支持类和继承。下面来介绍一下对象的概念。
对象：从概念级上说，表示客观世界的客体，任何实物都可以被称为对象；
从物理实现说：一个对象是一个状态和一系列可被外部调用的操作方法的
一个封装体，即指的是状态和操作的组合，状态通过一组属性来确定，而
操作通过一组方法来确定。
例如：我们以一个饮料机为例来说明封装对象的概念。一台饮料机可以被
认为是封装的，因为它的功能被密封在一个金属盒子内。它有两个方法：
? 制一杯水；
? 制一杯咖啡；
这个对象的状态由剩余的茶叶量、咖啡量、牛奶量、糖量和水量等属性给
出。与这个对象的接口是由盒子前分别标以“咖啡”和“茶”的两个按钮
提供，这两个按钮提供用户能够执行这个对象的方法。
1,基本概念
与一个对象的操作接口被限制在仅是用户需要的上面，而方法的实现，
外部是不可见的，也就是说，具有了信息隐藏，这是封装的主要目的，它阻
止非法的访问，因为金属盒阻止这台机器的用户（当然这个用户从末研究过
饮料机这种复杂难懂的机器）改动这台机器。操作接口的另一个很重要的方
面是，它提供了一个对象的行为视图，即所知道的仅是这个对象提供了某种
功能，除此之外，对其它细节一无所知。在处理某个复杂的问题时，这一点
是很重要的，因为一旦实现了一个对象，了解这个对象的算法和数据结构的
内部细节不再是重要的，重要的仅是知道这个对象所提供的操作接口。
在 JavaScript中，浏览器本身就是一个对象，浏览器的文本也是对象，文本中
的表单也是对象，表单中的按钮仍然是对象，不同的按钮也可以是不同的对
象。另外，在 JavaScript中，一种对象类型是一个用于创建对象的模板，这个
模板中定义了对象的属性和方法。在 JavaScript中一个新对象的定义方法如下：
对象的变量名 = new 对象类型（可选择的参数）
访问对象属性的语法如下：
对象的变量名,属性名
访问对象方法的语法如下：
对象的变量名,方法名（方法可选参数）
例如：我们来定义一个字符串对象（即 String对象）
var gamma;
gamma = new String("This is a string");
document.write (gamma.substr(5,2));
document.write (gamma.length);
它是 JavaScript的内置对象。它被封装了一个字符串。它提供了许多
字符串的操作方法。
String 对象的唯一属性是 length.。 String 对象的方法如表 8-8所示。
2,String 对象
名称 功能
CharAt(n) 返回字符串的第 N个字符
IndexOf(srchStr[,index]) 返回第一次出现子字符串 srchstr的位置,index 从某一
指定处开始，而不从头开始。如果没有该子串，返回 -1
。
LastIndexOf(srchStr[,index]
)
返回最后一次出现子字符串 srchstr的位置,index 从某
一指定处开始，而不从头开始。
Link(href) 显示 href参数指定的 URL的超级链接
Substring(n1,n2) 返回由第 n1和第 n2字符之间的子字符串
ToLowerCase() 将字符转换成小写格式显示
ToUpperCase() 将字符转换成大写格式显示
下面通过一个具体的实例来说明对象的属性及方法的应用。其源代码
如下所示，在浏览器中的显示结果如图 8-41所示
<HTML>
<HEAD>
<TITLE>一个 JavaScript对象的
属性和方法的使用 </TITLE>
<SCRIPT LANGUAGE=javascript>
sth=new String("这是一个字符串对象 ");
document.write ("sth='这是一个字符串对象 '","<br>");
document.writeln ( "sth字符串的长度为,",sth.length,"<br>");
document.writeln ( "sth字符串的第 4个字符为, '",sth.charAt(4),"'<br>");
document.writeln ( "从第 2到第 5个字符为, '",sth.substring(2,5),"'<br>");
document.writeln ( sth.link("http://www.lllbbb.com"),"<br>");
</SCRIPT></HEAD>
<BODY></BODY></HTML>
Math对象所提供的属性和方法在进行数学运算时非常有用。 它有很多
的方法和属性，如 sin(),cos(),abs(),PI,max(),min() 等用于计算的数
学函数。用法如下：
<SCRIPT LANGUAGE=javascript>
<!--
document.write (Math.PI); //取得 3.1415926
document.write (Math.random());//产生一个 0到 1之
间随机数
//-->
</SCRIPT>
3,Array对象
数组是一个有相同类型的有序数据项的数据集合 。 在 JavaScript中的
Array对象允许用户创建和操作一个数组, 它支持多种构造函数 。 数组从
零开始, 所建的元素拥有从 0到 size-1的索引 。 在数组创建之后, 数组的各
个元素都可以使用 [ ]标识符进行访问 。 Array对象的方法如表 8-8所示 。
4,Math对象
方法 说明
Concat(array2) 方法返回一个包含 array1和 array2级联的 Array对象
Reverse( ) 把一个 Array对象中的元素在适当位置进行倒转
Pop() 从一个数组中删除最后一个元素并返回这个元素
Push() 添加一个或多个元素到某个数组的后面并返回添加的最
后一个元素
Shift() 从一个数组中删除第一个元素并返回这个元素
Slice(start,end) 返回数组的一部分。从 index 到最后一个元素来创建一
个新数组
Sort() 排序数组元素，将没有定义的元素排在最后
Unshift() 添加一个或多个元素到某个数组的前面并返回数组的新
长度。
Date 对象提供了几种获取日期和时间的方法。定义 Date对象的方法如下：
var d1= new Date();
一旦定义了该对象，则提供了很多种方法。利用这些方法可以在网页上作
出很多漂亮的效果，而且这些效果都很新奇。例如,2000年倒计时，在网页上
显示今天的年月日，计算用户在本网页上的逗留时间，网页上显示一个电子表，
网上考试的计时器等等。在表 8-9中列出了 Date对象的方法。
5,Date 对象
方法 说明
GetDate() 返回在一个月中的哪一天（ 1~ 31）
GetDay() 返回在一个星期中的哪一天（ 0~ 6）
，其中星期天为 0
GetHours() 返回在一天中的哪一个小时（ 0~ 23）
GetMinutes() 返回在一小时中的哪一分钟（ 0~ 59）
GetMonth() 返回在一年中的哪一月（ 0~ 11）
GetSeconds() 返回在一分钟中的哪一秒（ 0~ 59）
GetYear() 返回年号
SetDate(day) 设置日期
SetHours(hours) 设置小时数
SetMinutes(mins) 设置分钟数
SetSeconds(secs)设置秒
SetYear(year) 设置年
使用脚本语言离不开 HTML对象模型，否则脚本语言只能作为一种退化的编程
语言，并不能在 Web应用中发挥它的强大功能。脚本语言和 HTML对象模型结
合在一起，才有可能构成缤纷的 Web世界。
（ 1）什么是 HTML 对象模型
HTML对象模型定义了表达网页及其元素的对象。这种技术形成了支持动态
HTML的基础。对象模型以事件、属性和方法定义了一组对象，用户可以用来
创建自已的应用或为应用编写脚本。这些对象都按一定的层次组织。这个对象
模型是一个由对象组成的层次结构（如图 8-43所示）。
6,浏览器和 HTML对象
W i ndow s
F r a m e s D oc um e nt H i s t or y L oc a t i on
D oc um e nt D oc um e nt
E l e m e nt B ody A nc hor s
F or m s A l l
B ut t on c he c kbox
N a vi ga t or
L i nks
（ 2） Window对象
Window对象封装了当前浏览器的环境信息。一个 Window 对象中可能包含几
个 Frame（框架）对象。每个 Frame 对象在它所在的框架区域内作为一个根基，
相当于整个窗口的 Windows 对象。
Document 对象封装了当前文档：
History 对象封装浏览器历史记录清单；
Location 对象封装浏览器当前位置：
Navigator 对象提供客户环境的信息；
Screen 对象访问显示器屏幕参数：
Event 对象提供最新事件信息及控制事件处理。
Window 对象的属性
广义的 Window 对象包括浏览器的每一个窗口、每一个框架（ Frame）或者活
动框架（ IFrame）。每个 Window 对象都有以下一些属性：
Name 这是 Window对象的一个可读写属性，它返回当前窗口的名称。
Parent 这是 Window 对象的一个只读属性，如果当前窗口有父窗口，它返回
当前窗口的父窗口的对象，可以使用返回对象的属性和方法。
Opener 这是 Window 对象的一个只读属性，属性返回产生当前窗口对象，可
以使用返回对象的属性和方法。
Self 这是 Window对象的一个只读属性，属性返回当前窗口的一个对象，可
以通过这个对象访问当前窗口的属性和方法。
Top 这是 Window 对象的一个只读属性，属性返回的是代表最上层窗口的一
个对象，可以通过这个对象访问当前窗口的属性和方法。
DefauItStatus 这是 Window 对象的一个可读写属性，使作它可以返回或者设
置将在浏览状态栏中显示的缺省内容。
Status 这是 Window 对象的一个可读写属性，使用它可以返回或者设置将在
浏览器状态中显示的内容。例如下例可以在浏览器状态栏中显示浏览当天
的日期,Status=DataFormat(Date)
Window 对象的方法
Alert 使用 Alert 方法可以弹出一个警告框，警告框显示一条信息，并且有
一个“确定”按钮。用法,window.alert("这次你可真走运 !") 。 其在浏览
器中的显示结果如图 8-44所示。
Confirm 使用 Confirm方法可以弹出一个对话框，显示一条信息，并且显示
“确定”和“取消”两个按钮。它能返回一个逻辑布尔量的值，可以被脚
本程序使用，下面来看一个具体的实例。其源代码如下所示。
<SCRIPT LANGUAGE= JavaScript>
<!--
Res = window.confirm("您有勇气确认码?");
if (Res) {document.write("您真勇敢 !")}
else {document.write("您太年轻,还需要锻炼 !")}
//-->
</Script>
Prompt 用 Prompt方法可以弹出一个信息框，显示一条信息，并且有一个文
本输入框、一个“确定”按钮和一个“取消”按钮。如果选择“确定”按
钮，则文本框中输入的内容将被返回，可以被脚本程序使用。这个方法有
两个参数：第一个是要在对话框中显示的信息；第二个是文本输入框内默
认显示的内容。例如,Str=window.prompt("有胆子报上名来 !","")。其
在浏览器中的显示结果如图 8-48所示。在 Prompt对话框中，如果点击“确
定”按钮，将向变量 Str返回当前文本输入框内的字符串；如果点击“取消”
按钮，将不执行任何操作。
Open 这种方法可以建立一个新的窗口，它可以使用许多参数。第一个
参数是要在新窗口中打开的文件的 URL地址，这个参数是必须的：第二
个参数是 Target，即打开文件窗口的名字；随后的参数都是对新窗口属性
的描述。例如要打开一个没有工具条、定位框和目录框的窗口，这个窗
口中显示,Search.htm,，可以使用语句：
window.open("h2.htm","kkk","tooibar=no location=no")。
Close 这种方法用来关闭一个窗口。例如,window.close ()。这行代码
将关闭当前窗口。
SetTimeout 这也是 Window 对象的一个方法。这种方法用来设置一个计时器，
该计时器以毫秒为单位，当所设置的时间到时，会自动的调用一个函数。
SetTimeout方法可以使用三个参数；第一个参数用来指定设定时间到后调
用函数的名称；第二个参数用来设定计时器的时间间隔；第三个参数用来
指定函数使用的脚本语言类型（ JavaScript 或 VBScript）。下面是一个使
用 SetTimeout方法的例子，这个例子在文本框中显示一个电子表。其源代
码如下所示，而其在浏览器中的显示结果如图 8-49所示。
源文件
③ Window 对象的事件
在脚本模型中，对象都有自已的事件。大多数的对象的事件都是相同的，它们
都是浏览器中的一些事件，这些事件有,onBlur,onDblclick, onFocus,
onKeydown, onKeyup,onMousemove,onMouseover,onSelectstart、
onClick,onDragstart,onHelponkeypress, onMousedown, onMousout,
onMouseup 等等。可以为这些对象事件编写事件处理程序，当事件被击活
时，事件处理程序被执行。
Window 对象包含上面讲到的大多数对象的事件，这里就不一一详细介绍，只
介绍两个 Window 对象特有的事件,OnLoad 事件和 OnunLoad 事件。
OnLoad Window 对象的 OnLoad 事件在分析完 HTML 文件的所有代码内容
后被激活。可以使用这个对象事件在网页加载时执行一定的任务。例如，
可以在网页被加载时同时加载一个广告页
OnUnload 在窗口被卸载时，也就是离开当前浏览窗口时，事件内容被激活。
也可以在网页被卸载时同时加载一个广告页
（ 3） Document对象
Document对象指的是在浏览器窗口中显示的 HTML文档。 Document对象的属
性，简单的如：文档的背景，文档字体的颜色等等；复杂的如：各种链接
和锚的结合体,Form以及 ActiveX控件等等。
Document对象提供了一些强有力的方法，使得可以在文档中直接传送 HTML语
句。 Document对象作为 Window对象包含下的一个对象，可以利用
,Window.document”访问当前文档的属性和方法，如果当前窗体中包含框
架对象，可以使用表达式,Window.frames(n).document”来访问框架对象中
显示的 Document对象，式中的,n”表示框架对象在当前窗口的索引号。
① Document对象的属性
Linkcolor 用来设置当前文档中超链接显示的颜色。使用方法：
window.document.linkcolor=”red”
Bgcolor和 Fgcolor 这两个属性分别用来读取或者设置 Document对象所代表的
文档的背景和前景颜色。使用方法与 Linkcolor属性使用方法相同。它们可
以被任意的设置和更改。
Title 是 Document对象的一个只读属性，它返回当前网页的标题。
LastModified 是 Document对象的一个只读属性,它返回当前网页最近一次被修
改的时间,
All属性 是一个对象的序列，它是当前文档中的所有 HTML标记组成的对象
序列．当前窗口中的文档对象的第一个 HTML标记是,Document.all(0)”。
可以使用Ａ ll属性对象的属性和方法，例如：,Document.all.length, 将返
回文档中 HTML标记的个数。
② Document对象的方法
Document对象提供了一些在脚本模式中强有力的方法。这些方法使得用户可
以在脚本中建立显示在用户浏览器中的 HTML文档。
Write Write方法用于将一个字符串放在当前文档中，放入的内容将被浏览器
所识别。如果一般文本，将在页面显示；如果是 HTML标记，将被浏览器
解释。
Open Open方法用于打开要输入的文档。当前文档的内容将被清除掉，而新
的字符串可以通过 Write方法放入当前文档。
Clear Clear方法用于清除当前文档中的内容，更新屏幕。
（ 4） Location对象
Location对象封装了窗口里显示的 URL的信息。
① Location对象的属性
Href Location对象的 href属性可以返回或者设置页面完整的 URL 地址。例如，
如下语句将把浏览器连接到武汉工业学院的主页：
Document.Location.href =,http://www.whpu.com/,
这和使用 Window对象的 Navigate方法的效果是相同的。
Host Location对象的 host属性可以返回网页主机名以及所连接的 URL的端口
Protocal 这个属性用来返回当前使用的协议。例如，现在正在浏览器中访问
FTP站点，那这个属性将返回字符串,ftp”。
② Location对象的方法
Location对象支持三种方法。
Assign 将当前 URL地址设置为其参数所给出的 URL.
Reload 重载当前网址。
Replace 用参数中给出的网址替换当前网址。
（ 5） History对象
History对象有一个唯一的只读属性,length。它可以返回历史记录表中的 URL
地址数目。利用这个属性可以帮助我们在历史纪录表中进行搜索。 History
对象的方法
Back back方法以指引浏览器在历史记录清单中向前移动。例如,
window.history.back l 将指引浏览器跳向历史记录中的前一条记录。
Forward forward方法以指引浏览器在历史记录清单中向后移动。例如,
window.history.forward 2 指引浏览器跳向历史记录中后面的第二条记录。
Go go方法知道浏览器跳向历史记录中的一条纪录。例如,
window.history.go 10 将指引浏览器跳向历史记录中的第十条记录。
本节小结
本章主要介绍了一个个人网站的建立过程，包括如何申请网站空
间、如何制作网页、如何将所制作的网页发布到互联网上以及如何对
自己所制作的网站进行宣传。也学习了标准的 HTML语言，而且通过
一些示例使你对 HTML语言有更进一步的认识。另外对 JavaScript也
做了比较详细介绍，这一部分对于一个从未学习过任何编程语言的读
者来说可能有些困难，但要想使自己制作的网页更加引人入胜，
JavaScript是必须的。学习好 HTML和 JavaScript，可看懂网上别人制
作的非常精彩的网页，吸取别人的经验并把它应用到自己的网页制作
中。
其实本章所介绍的是一种客户端的网页语言，但如果想要实现网
上的交互性，还必须要使用服务器端的脚本语言，目前常用的服务器
端的脚本语言有 ASP,PHP和 JSP，如果想了解有送信息请查阅相关
的专业书籍。
返 回
<HTML>
<HEAD>
<TITLE>这是一个测试网页
</TITLE>
</HEAD>
<BODY>
<h1>标题测试 </h1>
<h2>标题测试 </h2>
<h3>标题测试 </h3>
<h4>标题测试 </h4>
<h5>标题测试 </h5>
<h6>标题测试 </h6>
</BODY>
</HTML>
<HTML>
<HEAD>
<TITLE>这是一个测试网页 </TITLE>
</HEAD>
<BODY>
<pre> <!--（图 8-18无此标记） -->
HTML是一种描述文档结构的标注语
言，它使用一些约定的标记对各种信息
进行标注。
</pre> <!--（图 8-18无此标记） -->
</BODY>
</HTML> 返 回
返回
<HTML>
<HEAD>
<TITLE>这是一个测试网页 </TITLE>
</HEAD>
<BODY>
<STRONG>HTML</STRONG>是一种
<EM>描述文档结构 </EM>的
<U>标注语言 </U>，
<B>它使用 </B>一些
<I>约定的标记 </I>对各种信息进行
<S>标注 <S>。
</BODY>
</HTML>
返 回
返回
<HTML>
<HEAD>
<TITLE>测试页 </TITLE>
</HEAD>
<BODY>
<IMG alt="校庆 " src="images/center1.gif" >
<IMG alt="校庆 " src="images/center1.gif" border=8>
<IMG alt="校庆 " src="images/center1.gif" height=150 width=150>
</BODY>
</HTML>
返 回
返回
<HTML>
<HEAD>
<TITLE>一个 JavaScript计时器的应用 </TITLE>
<SCRIPT LANGUAGE = JavaScript>
var flag;
interval=1000;
function change() {
var today = new Date();
text1.value = today.getHours() + ":" + today.getMinutes() + ":" + today.getSeconds();
imerID=window.setTimeout("change()",interval); }
</SCRIPT>
</HEAD>
<BODY onload="change()">
<INPUT id=text1 name=text1>
</BODY></HTML> 返 回
返回
