精通JavaScript动态网页编程 目录

第1部分  基 本 语 法
第1章  数据类型转换 3
1.1  自动类型转换 3
在代码执行过程中，JavaScript会根据需要进行自动类型转换。本节实例给出了自动类型转换的方法。本节代码主要使用document.write ( )语句、逻辑值作为判断条件。
1.2  显式类型转换 7
除自动类型转换外，有时候为了避免自动转换或不转换产生的不良后果，需要手动进行显示的类型转换。本节实例给出显示类型转换的用法。主要使用String对象的toLowerCase ( )方法、Global对象的toString( )方法、parseInt( )方法和parseFloat( )方法，以及typeof运算符。
1.3  提升基本类型为对象 9
每一个基本数据类型都存在一个相应的对象，这些对象提供了一些很有用的方法用于处理基本数据。在需要的时候，JavaScript会自动将基本数据类型转换为与之相应的对象。本节实例介绍提升基本类型为对象的应用方法。主要使用String对象的length属性、link ( )方法、big ( )方法、bold ( )方法、fontcolor ( )方法、indexOf ( ) 方法、lastIndexOf ( )方法和charAt ( )方法，另外，还应用到了数组的定义与赋值，以及数组转换为字符串的join ( )方法。
第2章  流程控制语句 13
2.1  if语句 13
本节实例给出if语句及其嵌套语句的使用方法。程序要求用户输入一个数字，根据输入内容的不同，给出不同的提示信息。主要使用if语句的嵌套和alert( )方法。
2.2  switch语句 16
本节实例给出switch语句的使用方法。将上一节的代码进行改写。程序要求用户输入一个数字，根据输入内容的不同，给出不同的提示信息。
2.3  while循环 19
本节实例给出while语句的使用方法。程序要求用户输入行数和列数，根据用户输入的内容，画出相应行数和列数的表格。本节代码主要使用while语句和document.write( )方法。
2.4  do-while循环 22
本节实例给出do-while循环语句的使用方法。将上一节的代码进行适当改写，程序要求用户输入行数和列数，但程序不会输出正确的结果。据此，读者可以体会do-while循环和while循环语句的区别。
2.5  for循环 25
本节实例给出for循环语句及其嵌套的使用方法。将2.3节的代码进行了改写。程序要求用户输入表格的行列数，根据输入内容的不同，给出不同的信息。
第3章  数组 29
3.1  遍历数组元素 29
数组是一种特殊的数据结构，本节实例给出了数组定义与赋值的方法，同时给出了数组元素显示输出的方法。主要使用数组的定义与赋值、数组元素的显示输出，以及Array对象的length属性。
3.2  改变数组元素 32
在代码执行过程中，随着运算环境的不同，数组元素会随时进行改变。本节实例给出了数组元素改变的方法。主要使用数组元素赋值、delete操作和数组长度重置。
3.3  用对象的方式实现数组 35
除用传统方式进行数组定义与引用外，还可以使用对象的方式完成。本节实例给出了一个使用对象的方式实现数组的方法示例。主要使用this语句和专门用于对象的for...in语句。
3.4  将数组转换为字符串 36
数组元素可以是多种类型的数据，但都可以转换为字符串。本节实例给出了将数组转换为字符串的方法。主要使用Array对象的join ( )方法。
3.5  操作数组元素 38
数组元素可以进行多种操作，本节实例给出了数组元素排序、子数组查找、数组元素增删等操作方法。主要使用Array对象的slice ( )方法、sort ( )方法和splice ( )方法。
3.6  实现多维数组 40
JavaScript中并没有多维数组的概念，但在实际应用中，会经常用到多维数组。本节实例给出了二维数组的一种实现方法，读者可以将其推广到多维数组。本节代码中，不包含数组的更多内容，主要使用了“或”运算符（||）和isNaN ( )方法。
第4章  数值处理对象 45
4.1  求平方根 45
本节给出一段求平方根的示例代码，可以实现对整数、负数进行求平方根。并且，当用户输入的内容不是数值时，还可以进行验证。主要使用Math对象的sqrt(n)和abs(n)方法。
4.2  求质数 47
本节给出一段求质数的方法，可以求出用户输入数值以内的所有质数。当用户输入的值较小或输入非数值时，可以进行验证。本节使用筛选法求质数，主要使用NaN这一特殊的数值、isNaN( )方法和Math对象的sqrt(n)方法。
4.3  简单数制转换 50
本节给出一段数制转换的示例代码，可以实现JavaScript中任意数制之间的转换。主要使用JavaScript中数制与数制转换的相关方法。
4.4  数制转换函数 53
本节给出一段数制转换函数的示例代码，可以实现将0～255之间的十进制数转换为十六进制表示。
4.5  实现计算器 54
本节给出一段可实现四则运算的计算器的示例代码，可以实现基本的算术四则运算。主要使用字符串连接的相关方法。
第5章  日期时间应用 59
5.1  带开关的时钟 59
本节实例给出一个带开关的时钟的实现方法。通过按钮，用户可以控制时钟的显示与隐藏。主要使用Window对象的setTimeout( )方法和clearTimeout( )方法。
5.2  不同风格的时间显示 61
同样是文本时钟，也可以有多种不同的显示方式。本节实例给出了文本时钟的6种不同显示方式。读者可根据自己需求，选择合适的样式使用。主要使用Date对象的getYear方法、getMonth方法、getDate方法、getDay方法、getHours方法、getMinutes方法、getSeconds方法。
5.3  倒计时效果 64
本节实例给出一个倒计时效果的实现方法。可以根据预先设定的时间进行以秒为单位的倒计时显示。主要使用Date构造函数和Math对象的floor(n)方法。
5.4  模拟时钟 66
本节实例给出一个模拟时钟的实现方法。由一幅画有时钟刻度的图片做表盘，时钟在表盘上走动。主要使用Date对象的getYear方法、getMonth方法、getDate方法、getDay方法、getHours方法、getMinutes方法、getSeconds方法，以及Math对象的floor(n)方法和random( )方法等。
5.5  显示农历日期 70
本节实例给出一个显示农历日期的实现方法。页面中，除显示当前的公历日期及星期外，还显示当前的农历日期。主要使用数组与字符串的定义、元素遍历与引用、length属性等。
5.6  温度计样式时钟 74
本节实例给出一个温度计样式时钟的实现方法。分别使用3个水平条来表示时、分、秒，本例中的时钟是活动的。主要使用Date对象的getHours方法、getMinutes方法、getSeconds方法和“?:”运算符。
5.7  位置固定的时钟 79
本节实例给出一个位置固定的时钟的实现方法。无论如何调整窗口的大小，该时钟时钟位于当前窗口的右下角。主要使用Date对象的getHours方法、getMinutes方法、getSeconds方法和Math.PI属性、Math.sin( )方法、Math.cos( )方法，以及String对象的split方法。

第2部分  事 件 处 理
第6章  事件绑定与事件触发 87
6.1  HTML事件绑定 87
HTML支持对绝大多数元素进行事件绑定，这些绑定通常作为元素的属性使用，例如onclick与onmouseover，可以使用等号与JavaScript进行连接。当与之绑定的对象有事件发生时，就会执行相应的JavaScript代码。本节实例实现了HTML事件绑定。
6.2  非标准事件绑定 91
在web页面中，事件的绑定可以由多种方式实现，本节实例给出了非标准事件绑定的实现方法。主要使用IE中的非标准事件绑定。
6.3  事件处理器绑定 93
在事件处理过程中，可以直接将事件绑定到事件处理器。本节实例给出了直接将事件绑定到事件处理器的一个示例。
6.4  使用函数 94
使用JavaScript同样可以绑定事件处理器。尤其对于较为复杂的事件，通常使用JavaScript函数完成，然后通过表单的某些事件调用该函数。本节实例给出了一个使用函数的示例。
6.5  直接在表单上调用事件 96
本节实例给出了在表单上直接调用事件的方法，同时使用单独的JavaScript语句自动调用事件。
第7章  DOM中的事件处理 99
7.1  事件流 99
本节给出一段DOM事件流的示例代码，可以显示事件流的实现过程，同时，还显示完成该事件流所使用的JavaScript代码。主要使用innerHTML 属性、HTML的<pre>标签、HTML字符实体等内容。
7.2  DOM2鼠标事件 102
本节给出一段DOM2 鼠标事件的示例代码，可以实现对鼠标单击事件的捕获，同时，还能对键盘功能键的变化进行识别。主要使用Event对象及其附加属性。
7.3  取消默认动作 105
本节给出一段取消默认动作的示例代码，超级链接的不会跳转，但其单击事件仍然会被激活。主要使用Event对象的preventDefault方法和Window对象的document.get ElementById( )方法。
7.4  创建DOM2事件 107
本节给出一段创建DOM2事件的示例代码，可以检测鼠标位置，还可对当前节点及其双亲节点与兄弟节点进行判断。主要使用document.createEvent( )创建人工事件。
第8章  事件处理应用 111
8.1  页面预览 111
在Web页面中，可以在打开一个链接页面前对该页面进行预览。本节实例给出一种页面预览的实现方法。使用了onMouseOver事件和src属性。
8.2  图像切换 114
本节实例给出一个图像切换的方法，当鼠标移动到某个图像时，该图像会切换为另一幅图像；当鼠标离开该图像后，又换会原来的图像。主要使用onMouseOver事件、onMouseOut事件和HTML中<img>标签src属性。
8.3  点亮文本 115
当鼠标移动到某段文字时，可以对该段文字进行放大或缩小，以增强显示效果。本节给出对文字进行放大显示的实例。主要使用了onMouseOver和onMouseOut事件，以及style.color属性和style.fontsize属性。
8.4  鼠标跟随 119
本节给出一幅gif动画图像，当鼠标移动时，该图像会随鼠标移动。移动过程中，该gif动画仍将继续活动。
8.5  鼠标感应 122
鼠标的移动也可以触发一定的事件发生。本节实例给出一个对鼠标移动进行感应的例子，完成显示图像和图像清晰度变化的动作。
8.6  禁用鼠标按键 124
为了防止网页内容被复制，网上经常可以遇到禁用鼠标右键的网页。本节实例给出一个禁用鼠标左键和右键的示例，不论单击鼠标的哪个按键，都将执行预定的操作。主要使用了onmousedown事件和event.button属性。

第3部分  文 字 处 理
第9章  文字移动 129
9.1  文字的垂直滚动 129
本节给出一段文字垂直滚动的示例代码，页面中，一段文字自下而上逐字滚动显示。在实际应用中，也可去掉文字周围可显示的边框。
9.2  文字的渐隐渐显 132
本节给出一段文字渐隐渐显的示例代码，文字颜色逐渐由深变浅，随后又由浅变深，给人渐隐渐显的效果。主要使用了子字符串截取方法substring( )和浏览器版本检测navigator.appVersion。
9.3  文字的闪烁显示 134
本节给出一段文字闪烁显示的示例代码，窗口中的文字在两种不同状态间不停转换，给人闪烁的感觉。主要使用了CSS中设置文字滤镜效果的方法。
9.4  文字的随意拖动 136
本节给出一段文字随意拖动的示例代码，页面中的一行文字作为一个整体，可以使用鼠标，将该段文字在页面窗口中随意拖动。主要使用了Style对象的pixelTop属性和pixelLeft属性。
9.5  文字的坠落显示 138
本节给出一段文字坠落显示的示例代码，单击“开始显示”按钮后，文字逐个从上一行坠落到下一行。主要使用了子字符串截取方法substring( )。
9.6  页面内飘动的文字 140
本节给出一段文字在页面内飘动的示例代码，可以实现一行文字在页面内规则飘动的显示效果。主要使用了Math对象的floor( )方法和String对象的length属性。
9.7  漫天飞舞的文字 145
本节给出一段文字漫天飞舞的示例代码，文字从页面中心位置喷涌而出，随后在页面飞舞，持续不断。主要使用了Math对象的sin(n)和cos(n)方法。
9.8  文字下落效果 149
本节给出一段实现文字下落效果的示例代码，文字从浏览器顶端依次落下，落在浏览器窗口中的固定位置，最后排成一排。
第10章  文字色彩与形状 155
10.1  霓虹灯文字 155
本节给出一段实现霓虹灯效果文字的示例代码，页面中的文字自左至右逐个先变红再变蓝，给人霓虹灯的感觉。主要使用了Navigator对象的appName属性、String对象的charAt( )方法和length属性。
10.2  色彩渐变 158
本节给出一段实现文字色彩渐变的示例代码，一行文本中的字符颜色由深变浅，再由浅变深。主要使用了String对象的substr方法和substring方法。
10.3  文字的渐大渐小 160
本节给出一段文字渐大渐小显示的示例代码，在同一行中，文本逐渐由小变大，再由大变小，如此反复。主要使用了String对象的substring方法和length属性。
10.4  文字大小动态变化 162
本节给出一段文字大小动态变化的示例代码，单行文本中的字符自左至右依次由大变小再变大。主要使用了String对象的substring方法和Math对象的sin(n)方法和abs(n)方法。
10.5  文字变色显示 164
本节给出一段文字变色显示的示例代码，页面自左至右滚动显示文本，滚动过程中，文本中各文字的颜色不断变化。主要使用了String对象的substring方法、length属性和innerHTML属性。
10.6  打字效果显示 167
本节给出一段打字效果显示文字的示例代码，页面出现类似打字显示的文本，显示过程中，各文字的颜色不断变化。主要使用了String对象的charAt( )方法和slice( )方法。
第11章  文字显示 171
11.1  随机显示 171
本节实例给出随机显示文字的实现方法。当用户刷新页面时，会显示不同的文字。应用在网页中，可以实现随机提示和提醒，或者随页面的刷新显示不同的警句和格言等。主要使用了new运算符以及Math对象的floor(n)方法和random（）方法。
11.2  打字效果 173
本节实例实现页面文字的打字输出效果。当载入页面时，预先设定的文字就会以打字效果逐个输出。每个字符输出完毕，其后都紧跟一个光标符号。主要用到数组元素的引用，String对象的substring ( )方法，Window对象的setTimeout( )方法，以及字符串的length属性。
11.3  UBB代码实例 176
本节实例给出一个通用的UBB代码实例。读者可以只简单修改网页元素的布局，就可以直接应用在自己的网页中。本节代码虽长，但应用的内容不多。主要包括：字符串的连接操作、逻辑值直接作为判断条件、多种HTML标签的JavaScript输出。
11.4  从右至左排列的文字 188
有些文字，例如阿拉伯文、希伯来文等，文字是从右至左排列的，本节实例给出实现从右至左排列文字效果的方法。在实例中，读者可以看到不同的“右－左”效果。既可用于制作外文网站，又可用于中文网页，增强显示效果。主要用到字符串以及HTML的<bdo>标签和“dir='rtl'”属性。
11.5  古汉语文字排版 190
古汉语的书写习惯是：文字“上－下”排列，段落“右－左”排列。本节实例实现古汉语文字的这种排版方式。使用这种方式，可以作出古色古香的Web页面。主要使用了JavaScript的数组以及HTML的“<pre>”标签和“writing-mode:tb-rl;”属性。
11.6  从上到下、从左到右排列的文字排版 192
有的文字是自上而下书写，下一列文字书写在前一列文字的右侧，与古汉语的书写习惯正好相反。这种排版，用高级语言中实现比较容易，但在Web页面中有一定难度。本节实例实现了这种排版，希望对有兴趣的读者起到一定的帮助作用。

第4部分  页面与表格
第12章  文档处理 199
12.1  文档颜色设置 199
本节允许用户修改页面背景、文字、超级链接等元素的颜色值。主要使用了与文档颜色有关的Document属性、with语句等。
12.2  上次修改时间 202
网页设计中，出于某些应用上的需求，经常会用到“文档上次修改时间”的信息。本节给出一个相关的实例。主要使用了Document对象的lastModified 属性。
12.3  DOM 1中的文档属性与聚集 204
本节给出一个DOM 1中文档属性与聚集应用的示例，允许用户向页面中添加预定的HTML元素或内容。主要使用了createElement( )方法和document.getElementsByName( )方法。
12.4  访问HTML元素属性 207
本节给出一段访问HTML元素属性的示例代码，可以实现对文本对齐方式的动态改变。
第13章  页面处理 209
13.1  按位置访问元素 209
本节给出一段按位置访问页面元素的示例代码，可以实现对页面表单元素及其内容的动态读取。
13.2  按名称访问元素 211
本节给出一段按名称访问页面元素的示例代码，可以实现对页面表单元素及其内容的动态读取。
13.3  动态修改元素内容 214
本节给出一段动态修改页面元素内容的示例代码，可以实现对页面元素内容的动态修改和显示。
13.4  改变<div>的内容 216
本节给出一段动态改变页面<div>内容的示例代码，可以通过对用户选择的响应，在<div>中动态显示不同的内容。
13.5  改变页面样式 218
本节给出一段动态改变页面样式的示例代码，通过对用户不同选择的响应，动态改变页面元素的排列样式。主要使用了with语句。
第14章  DOM中的节点操作 223
14.1  节点插入与追加 223
本节给出一段节点插入与追加的示例代码，可以实现在页面中某节点前或节点后插入新的节点。主要使用了Node（节点）对象的insertBefore(newChild, referenceChild)方法和appendChild(newChild)方法。
14.2  节点复制 226
本节给出一段节点复制的示例代码，可以实现对节点的复制和深度复制。主要使用了节点的复制和深度复制两个概念。
14.3  节点删除与替换 228
本节给出一段节点删除与替换的示例代码，可以实现对文档中指定节点进行替换或删除等操作。主要使用了Node对象的removeChild(child)方法和replaceChild(newChild, oldChild)方法。
14.4  修改节点内容 230
本节给出一段修改节点内容的示例代码，可以实现对文档中的节点进行插入、删除、替换、修改等多种操作。
第15章  表格处理 233
15.1  HTML中的表格 233
本节给出一段HTML中的表格的示例代码，几乎用到了HTML表格的各种常见属性。本节代码并不涉及JavaScript代码，但对于后面几节的深入介绍是有帮助的。
15.2  设置表格属性 236
本节给出一段设置表格属性的示例代码，可以实现对表格对齐方式、背景色、边框粗细、边框显隐、内外边距等属性的动态设置。
15.3  操作表格元素 239
本节给出一段操作表格元素的示例代码，可以实现对表格元素的任意删除，还可以在表格中添加行。
15.4  操作表元 243
本节给出一段操作表元的示例代码，除完成对表格行、列的删除和插入操作外，还可以向表格的单元格中添加相应的内容。除使用了操作表格元素的相关方法外，主要使用了表元操作的方法。

第5部分  表单与窗口
第16章  简单的表单验证 251
16.1  验证输入内容是否为空 251
在Web页面中，经常需要验证用户是否进行了输入。本节给出一个验证输入内容是否为空的实例，当用户未进行输入或输入为空时，将给出提示信息。主要使用了null、“==”和“||”运算符、转义字符等内容。
16.2  验证E-mail地址 253
E-mail地址包含特定的字符“@”和“.”，并且“@”出现在“.”之前。本节给出一个验证E-mail地址是否有效的实例。主要使用了字符串对象的charAt( )方法、length( )方法、indexOf( )方法、lastIndexOf( )方法。
16.3  电话号码检测 256
电话号码由数字0～9、左右括号“（”和“）”、加号“+”和减号“-”等组成，本节给出一个电话号码检测的实例。主要使用了字符串对象的charAt( )方法、length属性、indexOf( )方法。
第17章  表单验证高级应用 259
17.1  混合表单验证 259
在实际应用中，经常综合多种不同的表单进行验证，例如：输入是否为空、输入是否数字、密码是否太长或太短等。本节给出一个混合表单验证的实例。主要使用了正则表达式进行数据格式的验证、字符串对象的length属性、非运算符“!”。
17.2  onchange事件 263
要验证一个表单域，不必等到表单提交后再进行。在用户改变其内容后，通过使用onchange事件处理器，可立即对域进行验证。本节给出一个应用onchange事件的示例。
17.3  按键屏蔽 264
在实际应用中，往往需要屏蔽用户的部分输入。例如，在应当输入数字的位置，只接收数字的输入，对其他内容的输入，则进行屏蔽。本节给出一个按键屏蔽的实例。主要使用了onkeypress事件。
第18章  打开与关闭窗口 269
18.1  打开窗口 269
打开新的浏览器窗口的方法很多，本节给出一个打开新窗口的实例，实现了用4种不同的方法打开新的窗口。主要使用了Window对象的open( )方法、<body>标签的onload属性，以及HTML中的无序列表。
18.2  关闭窗口 271
本节给出一个关闭窗口的实例，不仅可以将已打开的窗口关闭，还可对新窗口的各种不同状态进行检测。主要使用了Window对象的close( )方法和closed属性。
18.3  窗口写入 273
本节给出一段窗口写入的示例代码，可以打开一个新的窗口，在其中显示一些预先写入的内容。主要使用了Window对象的document.writeln( )方法。
18.4  窗口交互 275
在上一节的基础上，本节给出一个窗口交互的实例，可以随时手动向新窗口中添加新的内容。主要使用了DOM窗口写入的方法和Window对象的focus( )方法。
18.5  提示与警告对话框 277
对话框是响应用户某种需求而弹出的小窗口，本节给出常见对话框使用的示例。主要使用了警告对话框、确认对话框和提示对话框。
第19章  窗口控制 281
19.1  窗口移动 281
本节给出一段窗口移动的示例代码，可以实现移动窗口在屏幕上位置的改变。位置改变时，既可以逐渐位移，也可一步到位。主要使用了window.moveBy( )方法和window.moveTo( )方法。
19.2  改变大小 284
本节给出一段改变窗口大小的示例代码，可以实现对窗口大小进行调整。调整大小时，既可以逐渐改变，也可一步到位。主要使用了window.resizeBy( )方法和window. resizeTo( )方法。
19.3  窗口滚动 287
窗口滚动指的是对窗口滚动条的滚动。本节给出一段窗口滚动的示例代码，可以实现对窗口水平滚动条和垂直滚动条的控制。窗口滚动时，既可以逐渐改变，也可一步到位。主要使用了window.scrollBy( )方法和window.scrollTo( )方法。
19.4  设置超时 290
可以设置一个窗口在某段时间后执行何种操作，称为设置超时。本节给出一个设置超时的实例，可以在一定时间后关闭浏览器，也可取消超时设置。主要使用了Window对象的setTimeout( )方法和clearTimeout( )方法。
19.5  窗口事件 291
Window对象支持很多事件，但是绝大多数不是通用的。本节给出一个窗口事件的代码实例，介绍通用窗口事件的用法。
19.6  IE窗口扩展 293
IE支持一些特殊类型的窗口。本节实例给出模式窗口、无模式窗口与弹出窗口的使用。同时还能够对弹出窗口进行关闭或隐藏。
第20章  框架操作 297
20.1  访问框架 297
本节给出一个访问框架的实例。框架采用了多级嵌套形式，以便使读者更好地理解框架的命名与引用。主要使用了框架命名与引用的相关方法。
20.2  内联框架 300
内联框架又称嵌入式框架，是框架和页面内容混排的一种方式。本节给出一个嵌入式框架的实例。主要使用了嵌入式框架命名与引用的相关方法。
20.3  框架间的交叉通信 302
在不同框架之间进行交叉通信，是框架的高级应用。本节给出一段框架间交叉通信的示例代码，在一个框架中的运算，其结果将显示在另一个框架中。主要使用了框架之间的交叉引用方法。
20.4  嵌套框架交叉通信 304
本节给出一段求平方根的示例代码，可以实现对整数、负数进行求平方根。并且，当用户输入的内容不是数值时，还可以进行验证。主要使用了Frame对象的相关属性。

第6部分  图像与视频
第21章  图像显示 311
21.1  图片的随机显示 311
本节给出一段图片的随机显示的示例代码。页面出现一幅图像，不断刷新页面，则页面中的图像不断变化。主要使用了Math对象的random( )方法和round( )方法。
21.2  图像显隐 313
本节给出一段图像显示和隐藏的示例代码，程序中出现一幅图像，不断刷新页面，页面中的图像不断显隐交替变化。主要使用了setTimeout( )方法、clearTimeout( )方法、innerHtml属性、length属性和CSS滤镜的alpha属性。
21.3  图像滚动显示 316
本节给出一段图像滚动显示的示例代码，页面出现两组图像，两组图像分别沿水平方向和垂直方向滚动显示。主要使用了setTimeout( )方法、onmouseover事件与onmouseout事件、Math对象的floor(n)方法、sin(n)方法、cos(n)方法、ceil(n)方法、random( )方法，以及和网页元素坐标位置及尺寸等应用。
21.4  探照灯扫描 323
本节给出一段探照灯扫描显示图像的示例代码，页面出现一幅图像，图像上有光圈左右晃动，如同探照灯。主要使用了String对象的length属性和CSS滤镜中light的相关属性。
21.5  多幅图像翻页显示 326
本节给出一段多幅图像翻页显示的示例代码，页面出现几幅图像，右边的图像以翻书的效果依次转到左边显示。主要使用了Window对象的setTimeout( )方法和clearTimeout( )方法、Location对象、onmouseover事件和onmouseout事件、Math对象的PI属性、sin(n)方法、cos(n)方法、round(n)方法和abs(n)方法。
21.6  水纹效果显示 331
本节给出一段水纹效果显示图像的示例代码，页面内交替出现多幅图像。图像转换过程中，出现类似水纹的效果。主要使用了Window对象的setTimeout ( )方法和clearTimeout( )方法、 innerHtml属性、CSS滤镜中wave的相关属性。
21.7  全景图效果 335
本节给出一段全景图效果显示图像的示例代码，页面出现一个表格框，其中显示多幅图像，每幅图像都自右至左滚动，且都以全景图形式显示。主要使用了Marquee对象的相关属性与方法。
21.8  手电效果 337
本节给出一段手电效果显示图像的示例代码，页面出现一幅较暗的图像，鼠标在图像上移动时，所到之处都会变亮，而离开后又会变暗。主要使用了CSS中的cursor属性、CSS滤镜中light的相关属性。
21.9  雷达显示效果 340
本节给出一段图像雷达显示效果的示例代码，自图像中心为圆心的一个扇形按顺时针滑过图像，所到之处，图像变亮，离开后又变暗。主要使用了document对象的cookie属性、String对象的split( )方法、length属性、substring( )方法、indexOf( )方法。
第22章  图像运动与事件 345
22.1  图像拖动 345
本节给出一段图像拖动的示例代码，运行该程序后，页面出现两幅图像，使用鼠标拖动其中的一幅图像，可以将其在窗口中拖动。主要使用了onmouseMove事件和event.button属性。
22.2  按钮控制 347
本节给出一段按钮控制图像的示例代码。运行该程序后，页面出现两幅图像，使用鼠标拖动其中的一幅图像，可以将其在窗口中拖动。主要使用了onclick事件和image对象的src属性。
22.3  感应鼠标 348
本节给出一段感应鼠标的示例代码，当鼠标移动到图像上时，图像发生变化；当鼠标离开图像时，图像再次发生变化。主要使用了onmouseover事件和onmouseout事件。
22.4  花环效果 350
本节给出一段花环效果的示例代码。运行该程序后，页面出现一个转动的花环，该花环一边转动，一边在页面内漂移。主要使用了Math对象的sin(n)方法和cos(n)方法、Style对象的glow属性、Window对象的setTimeout( )方法。
22.5  流星效果 354
本节给出一段流星效果的示例代码，运行该程序后，除页面显示的静态内容外，还有流星不断从浏览器窗口四周飞进。主要使用了Math对象的random( )方法和round( )方法、Style对象的glow属性、网页元素坐标位置及尺寸等应用。
22.6  图像运动 359
本节给出一段带阴影运动的图像的示例代码，运行该程序后，页面出现一幅图像，使用鼠标单击该图像，图像将会拖着阴影在页面内滑动。主要使用了Window对象的setTimeout( )方法、Math对象的min( )方法、Style对象的alpha属性。
22.7  图像显示 366
本节给出一段带链接的图像的示例代码，运行该程序后，页面出现一个超级链接，单击该链接，页面会出现一幅图像，并且，该图像还带有超级链接。主要使用了Window对象的setTimeout( )方法、和document.all属性。
22.8  图像飞行一 368
本节给出一段图像飞行的示例代码，运行该程序后，页面出现一幅图像，该图像分为一片一片，自右至左从屏幕外飞翔而至，最终组合为完整的图像。主要使用了Window对象的setTimeout( )方法和clearTimeout( )方法、style对象的visibility属性。
22.9  图像飞行二 371
本节给出另一段图像飞行的示例代码，运行该程序后，页面出现一幅图像，该图像分为一块一块，从窗口右侧和底部飞翔而至，最终组合为完整的图像。主要使用了Math对象的floor(n)方法、random()方法、ceil(n)方法、innerHTML属性。
第23章  背景效果 377
23.1  随机更换页面背景 377
本节给出一段随机更换页面背景的示例代码，当用户每次刷新页面时，都会出现与前一次不同的页面背景。主要使用了Math对象的random( )方法和floor（）方法。
23.2  用户自选背景之一 379
本节给出一段用户自选背景色的示例代码，当鼠标指向页面中的色块时，页面背景随之变为色块所指示的颜色。主要使用了onmouseover事件、document.bgColor属性、作为属性值使用的JavaScript。
23.3  用户自选背景之二 382
本节给出另外一段用户自选背景的示例代码，单击页面中的任意一个色块，页面背景即变为色块所示的颜色，同时弹出一个对话框，提示当前的页面背景色。主要使用了数组的定义与引用和转义字符。
23.4  用户自选背景之三 385
本节给出另一段用户自选背景的示例代码，当用户鼠标在页面显示的数值上移动时，页面背景会随鼠标移动而不断变化。主要使用了数组的length属性和使用构造函数创建数组的方法。
23.5  页面背景的闪电效果 387
本节给出一段闪电效果页面背景的示例代码，单击“开始”按钮，页面在黑白之间连续闪烁，呈现闪电效果。主要使用了Window对象的setTimeout( )方法。
第24章  视频动画 391
24.1  有图像的Media Player 391
本节给出一个使用Media Player的示例程序，同时打开两个Windows媒体文件，其中一个包含视频，一个不包含视频，两个文件都显示播放器窗口界面。
24.2  无图像的Media Player 393
本节给出一个使用Media Player的示例程序，同时打开两个Windows媒体文件，其中一个包含视频，一个不包含视频，两个文件都不显示播放器窗口界面。
24.3  有图像的Real Player 396
本节给出一个使用Real Player的示例程序，打开一个包含视频的Real媒体文件，播放过程中显示播放窗口界面。
24.4  无图像的Real Player 398
本节给出一个使用Real Player的示例程序，打开一个不包含视频的Real媒体文件，播放过程中不显示播放窗口界面。
24.5  播放Flash文件 399
本节给出一个播放Flash文件的示例程序。除正常显示Flash播放界面外，还建立了几个按钮，可以对该文件的播放进行控制。
第25章  广告效果 403
25.1  位置固定的对联广告 403
本节给出一个位置固定的对联广告，广告图片总是停留在页面的固定位置，不随页面的滚动而改变。主要使用了Style对象的visibility属性和网页元素坐标位置及尺寸等应用。
25.2  随页面滚动的对联广告 406
本节给出一段随页面滚动的对联广告示例代码，运行该程序后，页面两侧各出现一幅带链接的图片，拉动滚动条时，图片会随页面一起滚动。主要使用了document.getElementById(id)方法、Math.ceil( )方法、Math.abs( )方法和网页元素坐标位置及尺寸等应用。
25.3  全屏飘动的广告 409
本节给出一段全屏飘动的广告示例代码，运行该程序后，屏幕上出现一幅飘动的图像，图像不局限在浏览器窗口内，而是在整个屏幕上飘动。主要使用了Window对象的setTimeout( )方法和clearTimeout( )方法、Location对象、onmouseover事件和onmouseout事件。
25.4  循环滚动的多幅广告 413
本节给出一段循环滚动的多幅广告示例代码，运行该程序后，页面出现一系列图片自右至左循环滚动。主要使用了innerHTML属性、onmouseover事件和onmouseout事件、网页元素坐标位置及尺寸等应用。
25.5  漂浮3D广告 416
本节实例给出一个漂浮3D广告的实现方法。随着3D饼图的飘动，其上的图片也会不断切换，且每幅图片都带有特定的超级链接。主要使用了document.getElementById(id)方法、Math对象的ceil( )方法、abs( )方法、random( )方法和floor( )方法、Window对象的setTimeout( )方法和clearTimeout( )方法。

第7部分  菜 单 应 用
第26章  基本菜单的设计 427
26.1  基本的下拉菜单 427
本节实例给出基本的下拉菜单的实现方法。用户可以在下拉列表中选择一个链接，单击该链接后，将跳转至相应的链接页面。主要使用了Document对象中一些文档定位的属性。
26.2  改进的下拉菜单 429
本节实例同样实现了一个下拉菜单，但与上节实例有所不同。在下拉列表中对可选项进行了分类，因此，处理的方式也会不同。主要使用了onchange事件和window.location属性。
26.3  渐显的下拉菜单 431
本节实例给出一个渐显的下拉菜单的实现方法。当用户单击菜单链接时，会弹出下拉菜单，菜单逐渐由模糊变清晰，实现渐显的效果。
第27章  DHTML菜单 437
27.1  折叠菜单 437
本节实例给出一个折叠式下拉菜单的实现方法。用户单击菜单项时，会显示其下一级菜单。当用户单击其他菜单项时，原先的菜单项收回，再显示其他子菜单项。主要使用了onmouseover事件和onmouseout事件。
27.2  远程菜单 440
本节实例给出一个远程菜单的示例程序。控制菜单和被控对象分处不同窗口之中，但仍可控制窗口内容。主要使用了new运算符以及Math对象的floor(n)方法和random( )方法。
27.3  弹出菜单 442
本节实例给出一个左键弹出菜单的示例程序。当用户在页面窗口内单击鼠标时，会在单击处弹出一个菜单。主要使用了Event对象的相关属性。
第28章  特效样式菜单 445
28.1  旋转导航菜单 445
本节实例给出一个旋转导航菜单的实现方法。运行该程序后，页面出现一圈旋转的文字链接，这些链接组成页面的菜单。主要使用了document.getElementsByTagName( )方法、setTimeout( )方法和style对象的visibility属性。
28.2  隐藏滑动菜单 453
本节实例给出一个隐藏滑动菜单的实现方法。页面打开后，菜单是隐藏的，将鼠标移动到页面左边的“隐藏菜单”，就会显示一个导航菜单。主要使用了onmouseover事件、onmouseout事件和document.all属性。
28.3  仿QQ菜单 457
本节实例给出一个仿QQ样式菜单的实现方法。页面打开后，出现一个收缩的二级菜单，单击一级菜单中的任何一个链接，会出现下一级菜单。主要使用了parseInt( )方法和setTimeout( )方法。
28.4  触发型导航菜单 462
本节实例给出一个触发型导航菜单的实现方法。单击菜单栏中的任何一个链接，会显示该链接对应的内容。主要使用了String对象的length属性和Style对象的display属性。
28.5  下拉列表菜单 465
本节实例给出一个下拉列表菜单的实现方法。当用户单击菜单栏中的任何一个链接时，会出现该级菜单的下一级菜单。主要使用了document.getElementById( )方法以及style.visibility属性。
28.6  树型导航菜单 469
本节实例给出一个下拉列表菜单的实现方法。当用户单击菜单栏中的任何一个链接时，会出现该级菜单的下一级菜单。主要使用了Style对象的visibility属性和display属性。
28.7  变色标题菜单 473
本节实例给出一个下拉列表菜单的实现方法。当用户单击菜单栏中的任何一个链接时，会出现该级菜单的下一级菜单。主要使用了getElementsByTagName( )方法、Style对象的background属性、border属性和color属性，以及onmouseover事件和onmouseout事件。

第8部分  样式、性能与安全
第29章  网页样式与元素定位 479
29.1  获取文本框中的内容 479
本节实例给出一个使用DHML获取网页文本框中输入内容的实现方法。当用户单击“确定”按钮后，会弹出一个对话框，显示文本框中的内容。
29.2  显示和修改文字内容（DHTML） 481
本节实例给出一种使用DHTML对象模型方法显示和修改文字内容的实现方法。当用户单击“显示”按钮时，可以显示相应文字的内容，当用户单击“改变”按钮时，可以改变相应文字的内容。
29.3  处理网页表格内容（DHTML） 483
本节给出一段使用DHTML对象模型方法处理网页中的表格内容的示例代码。用户可以随意添加或删除表格内容。
29.4  显示和修改网页内容（W3C） 485
本节实例给出一种使用W3C对象模型方法显示和修改文字内容的实现方法。当用户单击“显示”按钮时，可以显示相应文字的内容，当用户单击“改变”按钮时，可以改变相应文字的内容。
29.5  处理网页表格内容（W3C） 488
本节给出一段使用了W3C对象模型方法处理网页中的表格内容的示例代码。用户可以随意添加或删除表格内容。
29.6  综合应用 491
本节给出一段样式与定位综合应用的示例代码。用户可以任意改变网页中元素的位置、大小、层次、可见度、内容等。
第30章  浏览器与性能检测 499
30.1  显示浏览器名称与版本 499
使用JavaScript还可以显示用户浏览器名称、版本号及其他信息。本节给出一个相关的实例。
30.2  JavaScript检测 501
可以对浏览器是否支持JavaScript、支持何种版本的JavaScript进行检测，以便在编写代码时采取相应的措施。本节实例给出这样的一个应用。主要使用了<noscript>< /noscript>标签和JavaScript版本检测。
30.3  获取浏览器窗口大小 503
本节实例给出一个获取浏览器当前窗口大小的方法。当浏览器窗口大小变化时，显示的值会随时变化。
30.4  设置屏幕对象的尺寸 506
使用JavaScript可以调整屏幕对象的尺寸，本节实例中，给出一段文字，其大小可随窗口尺寸变化而变化。
30.5  有选择地显示图片 508
在网页设计中，应该考虑到用户屏幕分辨率较低或网速较慢的情况，根据不同情况显示不同的媒体文件，以免给用户浏览页面造成不必要的麻烦。本节实例中，可以根据用户屏幕分辨率显示不同大小的图片。
30.6  简单的性能检测 510
本节给出一段求平方根的示例代码，可以实现对整数、负数进行求平方根。并且，当用户输入的内容不是数值时，还可以进行验证。
30.7  模拟浏览器菜单 512
本节给出一段模拟浏览器菜单的示例代码，可以通过在页面中设置按钮，起到浏览器窗口按钮的作用。
第31章  加密算法 515
31.1  实现md5加密 515
md5加密是目前国内网页设计中使用最多的口令加密方式，本节给出一段示例代码，可以实现输入内容的md5加密。主要使用了位运算和位移运算。
31.2  编制自己的加密算法 522
在实际应用中，有时候需要自己编制加密算法，本节给出一段编制自己的加密算法的示例代码，以供读者参考。本节代码用到的知识点较少，主要使用了Window对象包含的Location对象。
第32章  恶意网页 527
32.1  字符串翻倍 527
“字符串翻倍”方法，会使字符串长度成指数增长，可以在短短数秒内造成大多数浏览器崩溃。本节介绍一个构造“字符串翻倍”的实例。
32.2  函数循环交叉调用 529
在程序设计中，有时需要函数的交叉调用。但如果使用不当，会造成调用无法中止，系统资源耗尽。本节代码给出一个函数交叉循环调用的示例。
32.3  无限递归调用 531
递归是程序设计中经常使用的方法，但如果未设置中止条件，递归将永远执行下去，直至将系统资源耗尽。本节代码给出了一个实现无限递归调用的例子。
32.4  构造无限数组 532
另一种造成系统资源耗尽的方法是构造无限数组。通过为该数组赋值或输出其元素值达到消耗资源的目的。本节实例给出了一种构造无限数组的方法。主要使用了Number对象的POSITIVE_INFINITY属性。
32.5  载入超大图像 534
当浏览器试图载入一幅非常大的图像时，也会受到运算速度、内存容量等因素的制约，有可能造成系统资源耗尽。本节给出一个载入超大图像的实例代码。主要使用了“++”和“+=”运算符。
32.6  关不掉的对话框 536
如果网页总是弹出对话框，却无论如何也无法关闭，也是很烦人的事情。本节给出一段关不掉的对话框的实例代码。
32.7  一直弹出新窗口 538
恶意网页的特征之一是不停打开新的窗口，直至将用户的系统资源耗尽。本节给出了一个一直弹出新窗口的实例。

第9部分  XML与Ajax
第33章  XML读取与处理 543
33.1  使用IE处理XML 543
本节给出一段使用IE处理XML文档的代码，代码中，可以对XML文档内容进行读取、显示、添加和删除等操作。
33.2  使用Mozilla处理XML 548
本节给出一段使用Mozilla Firefox处理XML文档的代码，代码中，可以对XML文档内容进行读取、显示、添加和删除等操作。
33.3  XML文件内容分页显示 553
对于较长的XML文档，在同一页内显示会不方便。本节给出一段使用XML文件内容分页显示的代码，在显示XML文件内容的同时，实现了分页显示，可以在页面中进行翻页。
第34章  IE XML数据岛 561
34.1  格式化输出 561
通过使用数据岛，可以将XML文档在HTML中调用并进行格式化输出。本节代码给出了一个使用IE XML数据岛对XML文档进行格式化输出的示例。
34.2  动态增删记录 564
除对XML文档进行格式化输出之外，使用IE XML数据岛还可以对XML文档记录进行动态增删，本节给出一个动态增删记录的实例。在程序中，所有的添加、删除操作，都是在文本区层面上进行的，不对XML文档本身进行任何写操作。
第35章  Ajax基础 569
35.1  读取XML文档 569
本节给出一段使用Ajax读取XML文档的代码，可以实现对XML文档内容的读取与输出。主要使用了XmlHttp对象的open( )方法、send( )方法、onreadystatechange属性、responseXML属性。
35.2  实现联动选择 573
本节给出一段使用Ajax实现联动选择的示例代码。输入邮政编码后，使用Tab键进行跳格，此时，所在城市和所在省份两个文本框中会自动出现相应的内容。
35.3  实现菜单特效 576
本节给出一段使用Ajax实现菜单特效的示例代码。程序运行后，页面出现一个水平排列的菜单和一个垂直排列的菜单，鼠标移动至子菜单项目后，该子菜单项会被方框框住。
第36章  Ajax应用 585
36.1  实现简单相册 585
本节使用PHP环境，给出一段实现简单相册的实例代码。程序运行后，可以看到图像的缩略图，单击缩略图，可以浏览图像。不论是缩略图还是原始图像，在显示过程中，都可以进行前后的翻页操作。
36.2  实现文本聊天室 606
本节给出一段实现文本聊天的示例代码。除基本的聊天功能外，还需要维护一个已登录用户的列表，如果session已过期，则将用户从列表中去除过期的用户。另外，程序还支持清除聊天室和改变用户昵称等功能。
附录  JavaScript简介 635

第9部分  XML与Ajax
第33章  XML读取与处理 543
33.1  使用IE处理XML 543
本节给出一段使用IE处理XML文档的代码，代码中，可以对XML文档内容进行读取、显示、添加和删除等操作。
33.2  使用Mozilla处理XML 548
本节给出一段使用Mozilla Firefox处理XML文档的代码，代码中，可以对XML文档内容进行读取、显示、添加和删除等操作。
33.3  XML文件内容分页显示 553
对于较长的XML文档，在同一页内显示会不方便。本节给出一段使用XML文件内容分页显示的代码，在显示XML文件内容的同时，实现了分页显示，可以在页面中进行翻页。
第34章  IE XML数据岛 561
34.1  格式化输出 561
通过使用数据岛，可以将XML文档在HTML中调用并进行格式化输出。本节代码给出了一个使用IE XML数据岛对XML文档进行格式化输出的示例。
34.2  动态增删记录 564
除对XML文档进行格式化输出之外，使用IE XML数据岛还可以对XML文档记录进行动态增删，本节给出一个动态增删记录的实例。在程序中，所有的添加、删除操作，都是在文本区层面上进行的，不对XML文档本身进行任何写操作。
第35章  Ajax基础 569
35.1  读取XML文档 569
本节给出一段使用Ajax读取XML文档的代码，可以实现对XML文档内容的读取与输出。主要使用了XmlHttp对象的open( )方法、send( )方法、onreadystatechange属性、responseXML属性。
35.2  实现联动选择 573
本节给出一段使用Ajax实现联动选择的示例代码。输入邮政编码后，使用Tab键进行跳格，此时，所在城市和所在省份两个文本框中会自动出现相应的内容。
35.3  实现菜单特效 576
本节给出一段使用Ajax实现菜单特效的示例代码。程序运行后，页面出现一个水平排列的菜单和一个垂直排列的菜单，鼠标移动至子菜单项目后，该子菜单项会被方框框住。
第36章  Ajax应用 585
36.1  实现简单相册 585
本节使用PHP环境，给出一段实现简单相册的实例代码。程序运行后，可以看到图像的缩略图，单击缩略图，可以浏览图像。不论是缩略图还是原始图像，在显示过程中，都可以进行前后的翻页操作。
36.2  实现文本聊天室 606
本节给出一段实现文本聊天的示例代码。除基本的聊天功能外，还需要维护一个已登录用户的列表，如果session已过期，则将用户从列表中去除过期的用户。另外，程序还支持清除聊天室和改变用户昵称等功能。
附录  JavaScript简介 635