第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