图 3-4 提示结果
图 3-5 输入项包括前后空格及合理字符
图 3-6 提示截去前后空格后的用户名
图 3-3到图 3-6显示了该示例的两种运行结果，一种是只输入空格，经截取后成为零字符而被提示；另一种是既有合理字符，又包含前后及中间空格，经处理后前后空格被截去。
3.3 示例：计时器
3.3.1 示例说明
有些网站需要用户登录使用，一般会有超时时间，在该时间段内没有任何操作则此次登录无效。本例在客户端浏览器的状态栏显示剩余时间，提醒用户注意超时。 本例涉及以下Javascript语法： ? 定时函数
? 数值型、对象型变量 ? 数值变量的运算、比较
3.3.2 解决方案
Javascript有两对内置函数与定时功能有关，一对是setTimeOut(expression, msec) / clearTimeOut(timeoutID)，前者的第一个参数表示在指定时间内运行什么操作，通常是一个函数；第二个参数是定时间隔，以毫秒记。使用该函数设定计时器后，需要返回一个对象型变量，标志这个计时器。后者的功能是取消叫做timeoutID的计时器。这一对定时函数只能定时执行一次，即在指定时间后执行一次就告终止，想重复执行的话需重复设定。另一对是setInterval / clearInterval，设定时间间隔后会自动重复执行，一般需要用后面的函数来取消定时操作。本例使用前一对函数。 下面是本例的源文件。 1.
2.
An example about timer.
Pay attention to status bar.
清单 3-4 计时器
在第26行，“body onload”表示在浏览器载入“body”部分时运行“onload=”后面的函数，本例为自定义函数“showTime()”。代码的第3行到第5行定义了3个变量，本例将超时时间定为3分钟。网页载入时调用“showTime()”函数，首先将“cur_second”变量减1并赋值回自身（“- -”操作），如果秒已经减到0，则将分钟数自减1，第14行，如果分钟数也减到0以下，说明倒计时完成，在浏览器状态栏显示“Expired!”，这里用到了“window”对象的一个属性“status”，对它赋值就会显示在浏览器状态栏。然后取消计时器（第17行），退出函数。而在倒计时还没有完成前，先会执行第21行后面的程序，将自减过的分钟数和秒数合到一起，在状态栏显示剩余时间。第23行设定了计时器，第2个参数“1000”表示在1000毫秒（也就是1秒钟）后运行一次“showTime()”函数，并把该计时器赋值给对象变量“timerID”，以供后来的“clearTimeout”函数使用，取消该计时器。第18行的“return”表示从函数中退出。由于在1秒钟后执行一次后定时就会停止，所以需要在第23行重复设定定时函数，才能保证倒计时不断进行。如果使用setInterval函数，只需设置一次即可。另外，设置时间间隔不宜太短，否则函数执行时间不能忽略，计时不会准确。 以下两图显示运行结果，注意浏览器左下角的状态栏显示。
11
图 3-7 倒计时进行中
图 3-8 倒计时结束
3.4 示例：键盘事件响应
3.4.1 示例说明
网页中输入项之间的切换应使用键盘上的“制表符”（Tab键），但有些用户习惯于使用Windows桌面程序，喜欢以回车键来切换，而该键默认提交表单。本例演示在用户键入回车键后在输入项间切换。
本例涉及如下Javascript语法： ? 键盘事件响应 ? for循环
? form的element的属性、方法
3.4.2 解决方案
由于网页输入项中回车键默认用于提交表单，所以为赋予它新的功能，必须对其编程处理。本例源文件如下。
1.
2.
31.
42.
首先是第31行的特殊写法，响应键盘事件时必须按照这样来写，表示有键盘事件时调用“processKeyEvent”函数（虽然是函数，这里不能加括号）。在“body onload”的时候执行这一操作，相当于向浏览器声明：用户如果按了键盘，交给这个函数来处理。接下来就是要在这个函数中进行具体处理了。
注意第39行，如果要处理回车键，就不能写“提交”按钮，也就是不能出现“
本例中，没有给“form”一个名称，可以使用数组访问。一个网页文件可以有多个表单，构成一个Javascript内置数组，名称固定为“forms”，以中括号（“[]”）加数字表示为数组，从0开始计数。本例只有一个表单，可以用“document.forms[0]”来引用。“form”有一个内置属性“length”，表示表单中有多少控件。本例包括两个文本输入框、一个下拉列表框和两个按钮，共5个控件。
下面的基本思路是：先要判断用户是在哪个控件上按的回车，找到这个控件，然后把输入焦点放到该控件下面的控件上。第7行到第28行的“for”循环就实现了这一想法。第9行的“srcElement”就是按键发生的那个“控件元素”，如果它的“type”属性等于“button”，也就是在“Submit”按钮上按了回车，第11行的语句是从Javascript代码中提交表单的方法。后面的“break”跳出“for”循环。
如果这个“if”不能成立，则从第16行开始搜索到底是在哪个控件上按了回车。表单中控件的访问也可以用数组，写法为“elements[]”，与“forms”数组类似，也是从0开始计数，非常适合在循环语句中遍历所有控件。如果第16行的条件成立，就是找到了按键发生的控件，接着使用“focus()”把当前输入焦点置于下一个控件上，如果该控件是文本类型的输入控件，使用“select()”函数将之反选。
具体运行效果可运行该页面文件进行验证。
3.5 示例：复选框全选
3.5.1 示例说明
一些网站的页面使用复选框，用户可以选中多项进行一种操作。本例演示使用客户端编程对多个复选框进行快速选择。这里使用一个“全选”复选框，选中这个控件则选中上面所有复选框；当该控件处于未选中状态时，仅表示部分或全部复选框处于未选中状态。 本例涉及Javascript语法： ? 复选框选中事件的响应
? 表单中的元素以变量名方式访问
13
3.5.2 解决方案
选中“全选”同时选中所有复选框，再点击“全选”取消选中所有复选框，相对来说还是比较容易的。比较麻烦的是，随着用户在各个复选框中作选中、取消选中的操作，还要更新“全选”复选框的状态。以下是程序清单。 1.
2. 36.
37.
38.
45.
清单 3-5 复选框全选
第39行到第43行生成了几个复选框，注意前三个复选框的名称，这样起名非常适合在程序的循环中作处理。另外，“onclick”意思是“当点击到这个控件的时候，执行某些操作”，本例中，点击上面三个复选框，都调用同一个函数“cb()”，点击“全选”复选框时，调用“selectAll()”函数。 首先看看点击“全选”框后的操作。由于复选框可以有“选中”和“未选中”两种状态，所以在点击发生后，要确定点击后该复选框的状态是什么，才能相应决定对上面的3个复选框进行怎样的操作。第3行定义了一个变量，代表需要操作的复选框的数量（此处为3）。函数“selectAll”一开始就是判断“全选”复选框的状态，对复选框的引用就是表单名加复选框的名称，对于“全选”框是
14