【作　　者】王润森;王俊杰 [同作者作品]
【出 版 社】 人民邮电出版社     【书 号】 9787115166449
【上架时间】 2007-9-24
【出版日期】 2007 年10月 【开 本】 16开 【页 码】 656     【版 次】1-1
【所属分类】  计算机 > 软件与程序设计 > 网络编程 > 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