第3章 Web开发基础
【本章导读】
HTML和JavaScript并不属于Java开发的内容，但是如果要从事Java Web开发，开发人员必须看得懂HTML和JavaScript代码，从而知道将Java代码插入到JSP页面的什么地方，以及如何结合HTML、JavaScript代码来完成一些交互式处理，诸如表单数据检验之类的操作。
实践工程中，往往是在项目组中人员有明确的分工，有专业的美工人员设计出静态网页，设计好后再将HTML页面交给Java Web程序员，由程序员根据系统需求，加入Java代码，Java Web人员需要专注于系统的业务流程的理解，程序代码的编写，而不是页面的美观。因此，作为Java Web开发人员全面地了解HTML和JavaScript是有必要的。
3.1 HTML
HTML（Hyper Text Markup Language，超文本标记语言）是一种描述网页的标记语言，用来描述如何将文本格式化。所谓格式化就是指如何将文字、图片、视频、超链接等元素显示在网页上，比如文字显示时的大小、是否加粗、带下画线等。那么HTML描述了格式，网页最终又是如何显示的呢？网页如何显示的功能由浏览器来完成，浏览器负责解释执行HTML代码。
3.1.1 HTML的编写方法
要编写HTML，可使用任意的文本编辑器，但注意文件名必须是.htm或.html，即HTML页面。一个完整的HTML文档包括文档头和文档体两部分，如下所示。
<html>
<head>
文档头中的内容
</head>
<body>
文档体中的内容
</body>
</html>
文档头中的内容位于<head>和</head>之间，常有文档标题、JavaScript代码等内容；文档体中的内容即为HTML页面的正文部分。<html>标签和<body>标签都是网页中必须要有的。
【提示】
HTML代码对大小写不敏感，如<head>和<HEAD>是等价的。
Java Web程序员需要掌握各种HTML标签的用法，并能结合JavaScript编写简单的客户端数据验证脚本程序，在编写Java时也能知道Java程序插入到HTML代码的什么地方比较合适。下面将介绍HTML标签中常用的一些标签。
3.1.2 标签的分类
HTML的标签根据形式可以分为单标签和双标签。
1.单标签
某些标签称为“单标签”，它只需单独使用就能完整地表达意思，这类标签的语法是：
<标签名称>
最常用的单标签有：<br>表示换行；<hr>表示一条水平线等。
2.双标签
另一类标签称为“双标签”，它由“首标签”和“尾标签”两部分构成，必须成对使用，其中首标签告诉Web浏览器从此处开始执行该标签所表示的功能，而尾标签告诉Web浏览器在这里结束该功能。首标签前加一个斜杠（/）即成为尾标签。这类标签的语法是：
<标签>受标签影响的内容</标签>
例如你想对某段文字加粗显示，就将此段文字放在<b>...</b> 标签中, 如：
<b>你要加粗的字</b>
许多单标签和双标签的始标签内可以包含一些属性，标签要通过属性来制作出各种效果。其语法是：
<标签 属性1=属性值 属性2=属性值 …>受影响内容</标签>
【提示】
并不是所有的标签都有属性，根据需要可以用该标签的所有属性，也可以只用需要的几个属性。在使用时，属性之间没有先后顺序的约束。在给出属性值时，提倡对属性值加双引号，如：
<font color="#ff00ff" face="宋体" size="30">字体设置</font>
3.1.3 字符引用
浏览器解释HTML文件时，是根据“<”与“>”来识别标签的，然后再确定这两个符号中的内容是否为HTML文件标签。但如果希望在网页中显示“<”或“>”，就要作为特殊字符。这种特殊的情况称为字符引用，它以“&”开始并以“;”结束。字符引用有两种形式：数值字符引用和字符实体引用。
1.数值字符引用
字符的数值表示通常为“数值字符引用”，它通过给出字符在字符集中的代码（十进制或十六进制）来表示字符，比如十进制字符引用“<”、十六进制字符引用“<”和“<；”均表示了字符“<”。
2.字符实体引用
字符的符号表示通常为“字符实体引用”，这种引用方式是通过字符的名称（助记符，大小写敏感）来表示字符的。例如：“>”表示了字符“>”，其中的gt是大于符号的助记符。字符实体引用方式为HTML文档的作者提供了一种直观的表示字符的方法，相比于上面介绍的数值字符引用更加方便和容易记忆。常用的字符实体引用见表3-1。
表3-1 常用的字符实体引用
3.1.4 HTML文档头部
1.<meta>标签
<meta>标签是HEAD部分的一个辅助性标签，它位于HTML文档头部的<HEAD>标签和<TITLE>标签之间，它提供用户不可见的信息。<meta>标签是一个单标签，可分为两大部分：HTTP标题信息（HTTP-EQUIV）和页面描述信息（NAME）。
META标签最为常用的语法使用方式如下：
<meta http-equiv="类型" content="内容">
content-Type常用来设置网页需要显示的字符集。设定页面使用的字符集，即说明主页制作时所使用的文字语言，浏览器会根据这个设置来调用相应的字符集再显示出页面内容。例如：
<meta http-equiv="content-type" content="text/html;charset=GB2132">
该<meta>标签定义了HTML页面所使用的字符集为GB2132，就是国标汉字码。
2.<title>标签
网页的标题概括了网页的内容，能让浏览者迅速了解网页的大意。在文件头部定义的标题内容不在浏览器窗口中显示，而是在浏览器的标题栏中显示。尽管头部定义的信息很多，但能在浏览器标题栏中显示的信息只有标题。用法如下：
<title>XXX网页的标题</title>
3.1.5 文档体和段落
1.<body>标签
<body>与</body>之间的内容为HTML文档的正文部分，它带有一些常用的属性，见表3-2所示。
表3-2 <body>标签常用的属性
在输入颜色值时，也可以是以0-9及a-f来表示的，例如：#00FF13。如果是简单的颜色用颜色单词表示也可以，如绿色就用"green"，蓝色就用"blue"。
2.<br>标签
<br>标签表示强制换行。在HTML语言规范里，每当浏览器窗口被缩小时，浏览器会自动将右边的文字转折至下一行，开发人员对于明确需要断行的地方，应加上<br>标签。
3.<p>标签
<p>标签表示段落标记。段落的开始由<p>来标签，段落的结束由</p>来标签。<p>标签不但能使后面的文字换到下一行，还可以使两段之间多一空行。由于一段的结束意味着新一段的开始，所以使用<p>也可省略结束标签。一个强制换段标签<p>可以看作是两个强制换行标签<br><br>。<p>标签使用的语法格式为：
<p align=对齐方式>段落文字内容</p>
属性align用来设置段落的对齐方式，可以为left、center或right，分别表示居左、居中、居右，如果没有设置align属性的值则默认值为left。
4.<hr>标签
<hr>标签用于在网页中插入一条水平线，使用的语法格式为：
<hr align=对齐方式 size=横线粗细 width=横线长度 color=横线颜色 noshade>
align属性设定横线放置的位置，可选择left（居左）、right（居右）或center（居中）；size属性设定线条粗细，以像素为单位，默认为2；width属性设定线段长度，可以是绝对值（以像素为单位）或相对值（相对于当前窗口的百分比）；color属性设定线条颜色，默认为黑色；noshade属性设定线条为平面显示（没有三维效果），若缺省则有阴影和立体效果。
3.1.6 文字标签
1.<font>标签
<font>标签用于设置网页中的文字显示的大小、字号、颜色等属性，使用的语法格式如下：
<font size=数字 face=字体名 color=颜色>被设置的文字</font>
size属性用来设置文字的大小；数字的取值范围从1～7，size取1时最小，取7时最大；face属性用来设置字体。如黑体、宋体、楷体_GB2312、隶书、Times New Roman等；color属性用来设置文字颜色。
2.设置文字字型标签
字型就是文字的风格，如加粗、斜体、带下画线、上标、下标等。
<B>受影响的文字</B>：加粗文字。
<I>受影响的文字</I>：将文字设为斜体。
<U>受影响的文字</U>：将文字设为带下画线。
<STRIKE>受影响的文字</STRIIKE>：将文字设为带删除线。
<SUB>受影响的文字</SUB>：将文字设为下标。
<SUP>受影响的文字</SUP>：将文字设为上标。
3.1.7 列表
HTML中可以定义的列表类型常见的有无序列表和有序列表。带序号标志（如数字、字母等）的表项就组成有序列表，否则为无序列表。列表可以嵌套，而且不同类型的列表可以一起使用。
1.无序列表
无序列表中每一个列表项的前面是项目符号（如●、■等）。建立无序列表使用<UL>标签和<LI>标签，其使用格式为：
<UL type="符号类型">
<LI type="符号类型1"> 第1个列表项
<LI type="符号类型2"> 第2个列表项
…
</UL>
【提示】
<LI>标签是单标签。
从浏览器上看，无序列表的特点是，列表项目作为一个整体，与上下段文本间各有一行空白；表项向右缩进并左对齐，每行前面有项目符号。type指定每个表项左端的符号类型，可取值为：disc （实心圆点，●）、circle（空心圆点，○）、square（方块，■），也可自己设置图片，此时格式为：
<UL img src="图片URL"> 或
<LI img src="图片URL">
2.有序列表
通过带序号的列表可以更清楚地表达信息的顺序。使用<OL>标签可以建立有序列表，列表项的标签仍为<LI>。
<OL type="符号类型">
<LI type="符号类型1">第1个列表项
<LI type="符号类型2">第2个列表项
…
</OL>
利用<OL>或<LI>中的type属性可设定5种序号：数字、大写英文字母、小写英文字母、大写罗马字母和小写罗马字母。缺省的序号标签是数字。
type="1"：序号为数字。
type="A"：序号为大写英文字母。
type="a：序号为小写英文字母。
type="I：序号为大写罗马字母。
type="i：序号为小写罗马字母。
3.1.8 超链接
超链接可用于从一个网页跳转到另一个网页，点击超链接即进行跳转动作。定义一个超链接的语法格式如下所示：
<a href="目标URL" name="链接名称字符串" target="打开窗口方式">
浏览器中显示的热点
</a>
热点可以是文字、图片、按钮等网页中的元素。href属性中的值为一个URL，是目标资源的有效地址。Name属性指定当前文档内的一个字符串作为链接时可以使用有效的目标资源的地址。target属性设定链接被按后结果所要显示的窗口，可选值为：_blank、_parent、_self、_top。target="_blank"表示打开一个新的浏览器窗口，在新的浏览器窗口中显示目标URL中的内容；target="_parent"表示将目标URL的内容显示在父框架窗口中；target="_self"为缺省值，表示在当前窗口中显示目标URL中的内容；target="_top"表示将目标URL中的内容显示在没有框架的窗口中（即除去了框架）；target="框架名称"用在框架网页中，用于将目标URL中的内容显示在指定的框架中。
如果创建为发送电子邮件的链接，则将打开缺省的电子邮件程序，如FoxMail、Outlook Express，并自动填写收件人地址。要创建指向电子函件的链接，可以在<a>标签的href属性中加入mailto，其格式为：
<a href="mailto:E-mail地址">发送邮件的热点文本</a>
3.1.9 表格
表格将文本和图片按行、列排列，它和列表一样，有利于表达信息；此外，表格往往在主页中用来建立主页的版面布局来控制显示格式，使整个页面更规则地放置图片和空白，并使条目清晰。
表格包括行和列，表格的标签为<table>，行的标签为<tr>，表项的标签为<td>。
1.<table>标签
使用<table>标签时的语法格式如下：
<table border=n width=x或x% height=y或y% cellspacing=i cellpadding=j>
…
</table>
border属性定义表格边框的粗细，n取整数，单位是像素。width属性定义表格的宽度，x为像素数或占窗口的百分比。height属性定义表格的高度，y为像素数或占窗口的百分比。cellspacing属性定义表项间隙，单位是像素。cellpadding属性定义表项内部空白，单位是像素。
2.<tr>标签与<td>标签
<tr>标签用于定义表格中的一行；<td>用于定义表格中的一个表项。使用<tr>标签、<td>标签的colspan属性和rowspan属性，可以分别制作跨多行（合并行）和跨多列（合并列）的表格。
跨多列表项的格式为：
<td colspan=x> 表项 </td>
或
<tr colspan=x> 表项 </tr>
其中，x表示合并的列数。
跨多行表项的格式为：
<td rowspan=y> 表项 </td>
或
<tr rowspan=y> 表项 </tr>
其中，y表示合并的行数。
表格的各种标签还有许多的属性，以上介绍的是Java Web开发中最为常见和常用的。
3.1.10 图像
图像是美化网页最常用的元素之一。目前，在网页中使用的图片，通常为GIF格式和JPEG格式。
网页的背景可以是某种颜色，也可以是图片。无论是图片，还是背景色，都使用<body>标签来说明，但需要使用不同的属性。如果是设置背景色使用如下的形式：
<body bgcolor="颜色值">
如果是设置图片为网页的背景则使用如下的形式：
<body background="图片文件名">
如果要把一张图片加入到网页中的特定位置，可以使用专门的图片标签，如下所示：
<img src="图片文件名" alt="简单说明" width="图片的宽度" height="图片的高度"
border="边框宽度" hspace="水平方向空白" vspace="垂直方向空白"
align="对齐方式">
src属性指出要加入图片的文件名；alt属性指出在浏览器尚未完全读入图片时，在图片位置显示的文字；width属性给出宽度（像素数或百分数），通常只设为图片的真实大小以免失真，若需要改变图片大小最好事先使用图片编辑工具；height属性给出图片的高度（像素数或百分数）；border属性指出图片的边框宽度；hspace属性设定图片边沿空白，以免文字或其他图片过于贴近，设定图片左右的空间水平方向空白像素数；vspace属性设定图片上下的空间，空白高度采用像素作单位；align设定图片在页面中的对齐/布局方式。
3.1.11 表单
1.<form>标签与<input>标签
表单可用于在网页中实现交互式操作。与表单有关的标签有<form>和<input>，表单的基本语法及格式为：
<form action="mailto:mail地址或网址" method=get|post>
<input type="表单项类型" name="控件名称" size=x max length=y>
…
</form>
<form>标签表示一个表单。action属性的值表示表单处理的方式，往往是E-mail地址或网址；method属性设定表单数据的传送方向，是获得（GET）表单还是送出（POST）表单，一般使用POST方式，因为使用GET方式会把数据暴露在地址栏上，而POST方式不会。
<input>标签主要用来设计表单中提供给用户的输入形式。type属性指定要加入表单项目的类型（text，password，checkbox，radio，hidden，submit，reset）；name属性指出该表单项的名称；size属性指出单行文本区域的宽度；maxlength属性指出允许输入的最大字符数目。
使用<input>标签的type属性，可以控制表单项的风格。type属性值为text，则输入的文本以标准的字符显示；type属性值为password，则输入的文本显示为“*”；type属性值为checkbox表示复选框；type属性值为radio表示单选钮；type属性值为hidden表示为隐藏域，隐藏域不会显示在网页中；type属性值为submit表示为提交按钮，用于提交表单，将表单中的数据提交到<form>标签的action属性指定的网页中；type属性值为reset表示为重置按钮，可以将表单中所有数据的值清除。
2.<select>标签与<option>标签
<select>标签即下拉框，使用的语法格式如下：
<select size=x name="控件名称" multiple>
<option select value="可选择的内容">
…
</select>
<select>标签的size属性指出在带滚动条的选择栏中一次可见的列表项数，为一个数字；name属性为<select>标签名称，提交表单后通过这个名称得到相应的值；multiple如有则表示可选多个选项，否则只能单选。
<option>标签嵌套在<select>标签中使用。<option>标签的属性中，如有select则表示该项是预置的（被选中）；value为此标签的值，如果被选中则会作为<select>标签的值被表单提交。
3.<textarea>标签
使用<textarea>标签可以创建一个允许输入多行文本的文本框，使用的语法格式为：
<textarea name="控件名称" rows="行数" cols="列数">
多行文本
</textarea>
rows属性（行数）和cols属性（列数）是指不用滚动条就可看到的部分。
【例3-1】编写用户注册表单
下面的程序在HTML页面中显示一个用户注册表单，要求输入用户名、密码、性别、爱好等注册选项。
userRegist.html
<html>
<head>
<title>用户注册表单</title>
</head>
<body>
<form name="form1" action="" method="post">
<table border="1" cellpadding="0" cellspacing="0">
<tr>
<td align="center" colspan="2">用户注册表单</td>
</tr>
<tr>
<td align="right">用户名：</td>
<td align="left">
<input type="text" size="28">（*）
</td>
</tr>
<tr>
<td align="right">密 码：</td>
<td align="left">
<input type="password" size="30">（*）
</td>
</tr>
<tr>
<td align="right">性 别：</td>
<td align="left">
<input type="radio" name="sex" value="男">男
<input type="radio" name="sex" value="女">女
</td>
</tr>
<tr>
<td align="right">爱 好：</td>
<td align="left">
<input type="checkbox" name="favor" value="看书">看书
<input type="checkbox" name="favor" value="编程">编程
<input type="checkbox" name="favor" value="打球">打球
</td>
</tr>
<tr>
<td align="center" colspan="2">
<input type="submit" value="提交">
<input type="reset" value="重置">
</td>
</tr>
</table>
</form>
</body>
</html>
程序的运行结果如图3-1所示。
图3-1 用户注册表单
程序中使用了表格标签<table>进行网页元素定位，其用“用户注册表单”文字所在的单元格合并了2个单元格，所以colspan属性值为2；密码输入框的type属性设为password，当输入内容时将会回显“*”；单选钮的type属性值为radio；复选框的type属性值为checkbox。
表单提交后数据要如何处理呢？这就是Java要做的事情了，可以在JSP页面、Servlet或特定的Java类中来对提交的数据作出处理，这些内容将在本书的后续内容中详细解说。
3.1.12 框架
框架网页可用于在一个浏览器窗口中显示多个相互隔离的网页，还可以在一个区域中显示所有页面的总索引，通过单击该区域中的超链接，将相关网页显示在另一个区域中。
框架的建立使用<frameset>、<frame>两个标签。所有框架标签都需要放在一个总起的HTML文件中，这个文件只记录了该框架如何划分，不会显示任何资料。<frameset> 用以划分框窗，每一框窗由一个<frame>标签所标示，<frame>必须在<frameset>范围中使用，形如：
<frameset>
<frame src="URL">
<frame src="URL">
…
</frameset>
<frameset>标签用于定义一个框架组的属性，其格式为：
<frameset rows="数" cols="数" border="像素数" bordercolor="颜色"
frameborder="yes|no" framespacing="值">
…
</frameset>
rows属性用于设定横向分割的框架数目；cols属性用于设定纵向分割的框架数目；border属性用于设定边框的宽度；bordercolor属性用于设定边框的颜色；frameborder属性用于设定“有/无”边框；framespacing属性用于设置各窗口间的空白。
<frame>标签用于给各个框架指定页面的内容，使用方法为：
<frame src="源文件名.html" name="框架名" border="像素数"
bordercolor="颜色" frameborder="yes|no" marginwidth=x marginheight=y
scrolling="yes|no|auto noresize">
src属性设置该框架对应的源文件URL；name属性指定框架名；border属性设定边框的宽度；bordercolor属性设置边框的颜色；frameborder属性设定“有/无”边框；marginwidth属性设置框架内容与左右边框的空白；marginheight属性设置框架内容与上下边框的空白；scrolling属性设置“是/否/自动”加入滚动条；noresize属性如有则表示不允许各窗口改变大小，默认设置是允许各窗口改变大小的。
【例3-2】定义框架
useFrame.html
<HTML>
<HEAD>
<TITLE>框架演示</TITLE>
</HEAD>
<FRAMESET cols="160,*">
<FRAME src="http://www.broadview.com.cn" >
<FRAMESET rows="100,*">
<FRAME src="http://www.csai.cn">
<FRAME src="http://www.phei.com.cn">
</FRAMESET>
</FRAMESET>
<BODY>
</BODY>
</HTML>
程序的运行结果如图3-2所示。
图3-2 定义框架
本例中将页面当作一个<frameset>，其中又包括了一个<frame>和一个<frameset>。同时也可看到，<frameset>及<frame>不能出现在<body>中，否则将有可能不能识别。
3.2 JavaScript
JavaScript可用于进行用户交互式处理，客户端数据校验，以及一些特定的动态效果、事件处理等，正是因为有了JavaScript，HTML页面才没有显得呆板，而显得灵活多变、丰富多彩。
【提示】
注意区分JavaScript和Java，在Web开发中，JavaScript是一种运行在客户端的脚本语言，由客户端浏览器负责解释；而Java是一种运行的服务器端的编程语言，则Web容器在编译后负责执行。
JavaScript是一种基于对象和事件驱动，并具有安全性能的脚本语言。使用它的目的是与HTML超文本标记语言、Java脚本语言一起实现在一个Web页面中链接多个对象，与Web客户交互作用，从而可以开发客户端的应用程序。JavaScript是通过嵌入或调入到标准的HTML语言中实现的。
3.2.1 在Web页面中加入JavaScript
Web程序员要编写JavaScript语句，首先就应知道如何在Web页面中插入JavaScript。
1.直接插入
JavaScript可以出现在HTML的任意地方。使用标记<script>…</script>，可以在HTML文档的任意地方插入JavaScript，甚至在<HTML>之前插入也可以。
【提示】
如果要在声明框架的网页（框架网页）中插入，就一定要在<frameset>之前插入，否则这些代码是不会运行的。
插入JavaScript的基本格式如下：
<script>
<!--
...
(JavaScript代码)
...
//-->
</script>
第2行和第4行的作用，是让不懂<script>标记的浏览器忽略JavaScript代码，双斜杠“//”是JavaScript里的注释标号。
2.使用代码文件
也可以把JavaScript代码写到一个文本文件中，通常把这个文件的扩展名设为“.js”，然后用格式为“<script src="javascript.js"></script>”的标签将它嵌入到文档中，其中javascript.js为JavaScript代码文件的URL。
3.直接调用JavaScript
采用如下的格式可以直接调用JavaScript：
javascript:<JavaScript语句>
比如在一个超链接中使用了如下所示的语句：
<a href="javascript:<JavaScript语句>">...</a>
3.2.2 JavaScript的基本语法
1.数据类型
JavaScript中的主要数据类型如图3-3所示。
图3-3 JavaScript的主要数据类型
其中字符串型是用引号“" "”、“' '”包起来的零个至多个字符。用单引号还是双引号可自行决定。但是用哪个引号开始就要用哪个引号结束，而且单双引号可嵌套使用。布尔型只有true（表“真”）和false（表“假”）2个值可选。数组是一种将相同数据类型的数据顺序组织起来的数据结构。Null类型只有一个值：null，关键字null不能用作函数或变量的名称。当对象属性不存在或声明了变量但从未赋值时将返回undefined值。
2.变量
JavaScript中变量的名称只包含字母、数字和斜杠（/）或下画线（_），但不能是关键字。JavaScript中的关键字如表3-3所示。
表3-3 JavaScript中的关键字
3.函数
函数是一种能够完成某种功能的代码块，函数可以在脚本中被事件处理或被其他语句调用。一般在编写脚本时，当脚本中的代码长度很长时，就应该根据功能的不同将代码块写入一个或几个函数中，如果函数中的代码长度还是很长，一般就应该根据功能将函数再次进行划分，分为几个功能更加单一的函数。
JavaScript包含很多内部函数。某些函数可以操作表达式和特殊字符，而其他函数将字符串转换为数值。比如：内部函数eval()，它可以对以字符串形式表示的任意有效的JavaScript代码求值，这个函数有一个参数，该参数就是希望求得数值的字符串。
用户也可以自定义函数，定义函数用以下语句：
function 函数名([参数集]) {
...
[return[ <值>];]
}
3.2.3 对象
JavaScript把浏览器窗口、网页中的一段文字、超链接、表单、图片等都看成是对象，每个对象有它自己的属性、方法和事件。例如字符串的长度、图像的长宽、文字框（Textbox）里的文字等；对象的方法能对该对象做一些事情，例如表单的“提交”(Submit)，窗口的“滚动”(Scrolling)等；而对象的事件就能响应发生在对象上的事情，例如提交表单产生表单的“提交事件”，点击链接产生的“点击事件”。不是所有的对象都有以上三个性质，有些没有事件，有些只有属性。
1.for…in语句
JavaScript提供了几个用于操作对象的语句、关键词及运算符，其中for…in语句的使用方法如下：
for（对象属性名 in 已知对象名）
for…in语句的功能是用于对已知对象的所有属性进行操作的控制循环，它将一个已知对象的所有属性反复置给一个变量。该语句的优点就是无须知道对象中属性的个数即可进行操作。
例如：下列程序是显示数组中内容的。
for (var i=0; i<40;i++)
document.write(object[i])；
但是通过数组下标来访问每个对象的属性，首先必须知道数组的下标值，否则若超出范围而发生错误。如果使用for...in语句根本不需要知道对象属性的个数，如下所示：
for(var prop in object)
document.write(object[prop])；
在循环体中，for…in语句自动将属性取出来，直到最后一个为止。
2.with语句
在with语句的语句体内，任何对变量的引用被认为是这个对象的属性，以节省一些代码，如下所示：
with object{
...
}
3.2.4 事件处理
用户在操作网页时，会产生一系列的事件，如鼠标的移动、键盘被敲击等，由浏览器接收这些事件，继而由JavaScript处理事件。下面逐步说明常用的事件。
（1）onblur事件
onblur事件发生在窗口失去焦点的时候，主要应用于window对象。
（2）onchange事件
发生在文本输入区的内容被更改，然后焦点从文本输入区移走之后，捕捉此事件主要用于实时检测输入的有效性，或者立刻改变文档内容。onchange事件可用于password对象、select对象、text对象、textarea对象等。
（3）onclick事件
发生在对象被单击的时候。onclick事件可应用于button对象、checkbox对象、image对象、link对象、radio对象、reset对象、submit对象等。
（4）onfocus事件
发生在窗口得到焦点的时候。onfocus事件常应用于window对象。
（5）onload事件
发生在文档全部下载完毕的时候。全部下载完毕意味着不但HTML文件，而且包含的图片、插件、控件、小程序等全部内容都下载完毕。onload事件主要应用于window对象。
（6）onmousedown事件
发生在用户把鼠标放在对象上按下鼠标键的时候，主要应用于button对象、link对象。
（7）onmouseout事件
发生在鼠标离开对象的时候，主要应用于link对象。
（8）onmouseover事件
发生在鼠标进入对象范围的时候，主要应用于link对象。
（9）onmouseup事件
发生在用户把鼠标放在对象上鼠标键被按下的情况下，放开鼠标键的时候。如果按下鼠标键的时候，鼠标并不在放开鼠标的对象上，则本事件不会发生。onmouseup事件可应用于button对象、link对象。
（10）onreset事件
发生在表单的“重置”按钮被单击（按下并放开）的时候，通过在事件处理程序中返回false值（return false）可以阻止表单重置。onreset事件应用于form对象。
（11）onresize事件
发生在窗口被调整大小的时候，可应用于window对象。
（12）onsubmit事件
发生在表单的“提交”按钮被单击（按下并放开）的时候，可以使用该事件来验证表单的有效性。通过在事件处理程序中返回false值（return false）可以阻止表单提交。onsubmit事件应用于form对象。
（13）onunload事件
发生在用户退出文档（或者关闭窗口，或者转到另一个页面）的时候，与onload一样，需要写在<BODY>标签里。onunload事件主要应用于window对象。
3.2.5 JavaScript内部对象
JavaScript提供了一些非常有用的内部对象和方法，诸如string（字符串）、math（数值计算）和Date（日期）等多种对象和其他一些相关的属性和方法。利用这些有用的内部对象和方法，程序员可以快速实现想要的功能。
1.String对象
String对象表示一个字符串。String对象有一个属性——length，表明了字符串中的字符个数，包括所有符号。
String对象还有许多的方法，主要用于有关字符串在Web页面中的显示、字体大小、字体颜色、字符的搜索以及字符的大小写转换。
anchor()方法创建如同HTML文件中的anchor标记。可以通过下列格式访问：string.anchor(anchorName)。
有关字符显示的控制方法有Italics()斜体字显示、bold()粗体字显示、blink()字符闪烁显示、small()字符用小体字显示、fixed()固定高亮字显示、fontsize(size)控制字体大小等。
fontcolor(color)方法用于设置字体颜色方法。
toLowerCase()方法用于将字符串转换为小写，toUpperCase()用于将字符串转换为大写。
indexOf([charactor,fromIndex])方法从指定formIndtx位置开始搜索charactor第一次出现的位置。
substring(start,end)方法将从start开始到end的字符全部返回。charAt(position)得到位于position处的字符，注意位置是从0开始的。
split(<分隔符字符>)方法返回一个数组，该数组是从字符串对象中分离开来的，<分隔符字符>决定了分离的地方，它本身不会包含在所返回的数组中。
2.Array对象
数组对象是一个对象的集合，里边的对象可以是不同类型的。数组的每一个成员对象都有一个“下标”，用来表示它在数组中的位置，JavaScript规定下标从0开始。
数组的定义方法：
var <数组名> = new Array();
【提示】
JavaScript中只有一维数组。要使用多维数组，只有使用这种变通的方法：
var myArray = new Array(new Array(),new Array(), new Array(), ...);
其实这是一个一维数组，里边的每一个元素又是一个数组。调用这个“二维数组”元素的形式为：myArray[2][3] = ...;
Array对象有一个属性——length，可以得到数组的长度。
<数组对象>.join(<分隔符>)方法返回一个字符串，该字符串把数组中的各个元素串起来，用<分隔符>置于元素与元素之间。
<数组对象>.reverse()方法使数组中的元素顺序反过来。如果对数组[1, 2, 3,4]使用这个方法，它将使数组变成：[4,3, 2, 1]。
<数组对象>.sort([<方法函数>])方法使数组中的元素按照一定的顺序排列。如果不指定<方法函数>，则按字母顺序排列。在这种情况下，80是排在9之前的。如果指定<方法函数>，则按<方法函数>所指定的排序方法排序。这个方法函数有两个参数，分别代表每次排序比较时的两个数组项。sort()排序时对数据每次比较时都执行这个函数，当函数返回值为1的时候就交换两个数组项的顺序，否则就不交换。
3.Math对象
Math对象提供对数据的数学计算，提供了除加、减、乘、除以外的一些运算，如对数，平方根等。
Math对象常用的方法及其含义见表3-4所示。
表3-4 Math的方法及其含义
【例3-3】用JavaScript为用户注册表单作客户端数据校验
本例改造例3-1中的用户注册表单，用JavaScript语言来对用户输入的数据作出检验，这里将完成一个简单的检验：用户名和密码输入的内容均不能为空。
userRegistScript.html
<html>
<head>
<title>用户注册表单</title>
</head>
<script>
<!--
function checkdata() {//检查数据函数
//用户名、密码必须输入
if(form1.username.value==""){
alert("请输入用户名!");
return false;
}
if(form1.password.value==""){
alert("请输入密码!");
return false;
}
}
//-->
</script>
<body>
<form name="form1" action="test.jsp" method="post">
<table border="1" cellpadding="0" cellspacing="0">
<tr>
<td align="center" colspan="2">用户注册表单</td>
</tr>
<tr>
<td align="right">用户名：</td>
<td align="left">
<input type="text" size="28" name="username">（*）
</td>
</tr>
<tr>
<td align="right">密 码：</td>
<td align="left">
<input type="password" size="30" name="password">（*）
</td>
</tr>
<tr>
<td align="right">性 别：</td>
<td align="left">
<input type="radio" name="sex" value="男">男
<input type="radio" name="sex" value="女">女
</td>
</tr>
<tr>
<td align="right">爱 好：</td>
<td align="left">
<input type="checkbox" name="favor" value="看书">看书
<input type="checkbox" name="favor" value="编程">编程
<input type="checkbox" name="favor" value="打球">打球
</td>
</tr>
<tr>
<td align="center" colspan="2">
<input type="submit" value="提交" onclick="return checkdata()">
<input type="reset" value="重置">
</td>
</tr>
</table>
</form>
</body>
</html>
程序运行的结果如图3-4所示。
图3-4 用户注册表单
如果没有输入用户名，按“提交”按钮时即会出现如图3-5所示的对话框。
图3-5 “请输入用户名！”对话框
这个对话框提示用户应当输入用户名，按“确定”按钮后会回到“用户注册表单”输入界面。
3.3 小结
本章概要性地浓缩介绍了HTML和JavaScript。HTML用于解决网页中的内容如何显示、元素定位等问题，着重于外观表现；JavaScript用于制作网页中的一些特效、交互式数据处理等工作。HTML和JavaScript相辅相成，都是客户端Web程序所需要的，Java Web开发人员需要全面了解它们，以知道如何结合服务器端的Java语言开发出完整的Java Web系统。