《JavaScript动态网站开发案例课堂》 - 刘玉红、蒲娟 - 清华大学出版社 - 香港大書城

	登入帳戶　 \|　訂單查詢　 \|　購物車/收銀台( 0 )　\|　在線留言板　 \|　付款方式　 \|　運費計算　 \|　聯絡我們　 \|　幫助中心　\|　加入書簽
		會員登入新用戶登記

HOME

新書上架

暢銷書架

好書推介

2023年度TOP

臺灣用戶

品種：超過100萬種各類書籍/音像和精品，正品正價，放心網購，悭钱省心

服務：香港／台灣／澳門／海外

送貨：速遞／郵局／服務站

新書上架：簡體書繁體書
暢銷書架：簡體書繁體書
好書推介：簡體書繁體書

『簡體書』JavaScript动态网站开发案例课堂

書城自編碼： 2862757
分類：簡體書→大陸圖書→計算機/網絡→程序設計
作者：刘玉红、蒲娟
國際書號(ISBN)： 9787302438304
出版社：清华大学出版社
出版日期： 2016-07-01
版次： 1 印次： 1
頁數/字數： 516/782000
書度/開本： 16开釘裝：平装

售價：HK$ 103.5

我要買件

** 我創建的書架 **
未登入.

新書推薦：

《地理计算与R语言 [英] 罗宾·洛夫莱斯 [德]雅纳·蒙乔 [波兰] 雅库布·诺沃萨德》
售價：HK$ 121.0

《沈括的知识世界：一种闻见主义的实践（中华学术译丛）》
售價：HK$ 87.4

《大思维：哥伦比亚商学院六步创新思维模型》
售價：HK$ 72.8

《宏观经济学（第三版）【2024诺贝尔经济学奖获奖者作品】》
售價：HK$ 155.7

《 UE5虚幻引擎必修课（视频教学版）》
售價：HK$ 110.9

《阿勒泰的春天》
售價：HK$ 50.4

《如见你》
售價：HK$ 51.3

《人格阴影全新修订版，更正旧版多处问题。国际分析心理学协会（IAAP）主席力作》
售價：HK$ 67.0

建議一齊購買：

HK$ 179.4
《JavaScript实战（JavaScript\jQuery》

HK$ 211.5
《Web开发典藏大系：JavaScript网页特效实例大全（附》

編輯推薦：

清华大学出版社案例课堂大系

丛书以案例的形式讲解软件的内容，读者可以在实践中熟练掌握软件的使用方法。
每一个案例都精挑细选，同时配有全程语音讲解的视频文件，方便读者学习。
案例的选材广泛，涉及到软件应用的各个领域、各个行业，学习无死角。

CG设计系列全彩精印，同等价位下内容更多，同等内容下更实惠。

网站开发系列附赠超值，全面学习无障碍：

CSS属性速查表

HTML标签速查表

网页布局案例赏析

精彩网站配色方案赏析

精选JavaScript实例

JavaScript函数速查手册

CSS DIV布局案例赏析

案例源文件与教学课件

內容簡介：

本书以零基础讲解为宗旨，用实例引导读者深入学习，采取JavaScript基础知识JavaScript核心技术JavaScript高级应用网页特效应用案例的讲解模式，深入浅出地讲解了JavaScript动态网页设计和开发动态网站的各项技术及实战技能。
本书适合任何想学习JavaScript动态网页设计的人员，无论您是否从事计算机相关行业，无论您是否接触过JavaScript动态网页设计，通过学习本书内容均可快速掌握JavaScript动态网页设计和开发动态网站的方法和技巧。

關於作者：

作者长期从事网站开发工作，数年来承接了大量的项目，具有丰富的实践经验。

目录
第1篇基础知识

第1章打开JavaScript动态网页设计之门--必须了解的JavaScript知识 3
1.1 认识JavaScript 4
1.1.1
什么是JavaScript 4
1.1.2
JavaScript的特点 4
1.1.3
JavaScript与Java的区别 5
1.1.4
JavaScript版本 6
1.2
JavaScript的编写工具 7
1.2.1
案例--使用记事本
编写JavaScript 7
1.2.2
案例--使用Dreamweaver
编写JavaScript 8
1.3
JavaScript在HTML中的使用 9
1.3.1
案例--在HTML网页头中
嵌入JavaScript代码 9
1.3.2
案例--在HTML网页中
嵌入JavaScript代码 10
1.3.3
案例--在HTML网页的元素
事件中嵌入JavaScript代码 11
1.3.4
案例--在HTML中调用已经
存在的JavaScript文件 12
1.3.5
案例--通过JavaScript伪URL
引入JavaScript脚本代码 13
1.4
JavaScript和浏览器 14
1.4.1
案例--在Internet Explorer中
调用JavaScript代码 14
1.4.2
案例--在Firefox中调用
JavaScript代码 15
1.4.3
案例--在Opera中调用
JavaScript代码 15
1.4.4
案例--浏览器中的文档对象
类型 15
1.5 跟我练练手 16
1.6 实战演练--一个简单的JavaScript
实例 16
1.7 高手甜点 17
第2章读懂JavaScript代码前提--
JavaScript 编程基础 19
2.1
JavaScript的基本语法 20
2.1.1
语句执行顺序 20
2.1.2
区分大小写 20
2.1.3
分号与空格 20
2.1.4
对代码行进行折行 21
2.1.5
注释 21
2.1.6
语句 23
2.1.7
语句块 23
2.2
JavaScript的数据结构 24
2.2.1
标识符 24
2.2.2
关键字 25
2.2.3
保留字 25
2.2.4
常量 26
2.2.5
变量 26
2.3
JavaScript的数据类型 28
2.3.1
案例--typeof 运算符 28
2.3.2
案例--Undefined未定义
类型 29
2.3.3
案例--Null空值类型 30
2.3.4
案例--Boolean布尔类型 31
2.3.5
案例--Number数值类型 32
2.3.6
案例--String字符串数据
类型 32
2.3.7
案例--Object对象数据
类型 33
2.4
JavaScript的运算符 34
2.4.1
案例--算术运算符 34
2.4.2
案例--比较运算符 35
2.4.3
案例--位运算符 36
2.4.4
案例--逻辑运算符 37
2.4.5
案例--条件运算符 39
2.4.6
案例--赋值运算符 40
2.4.7
案例--运算符优先级 41
2.5 JavaScript的表达式 43
2.5.1
案例--赋值表达式 43
2.5.2
案例--算术表达式 44
2.5.3
案例--布尔表达式 44
2.5.4
案例--字符串表达式 45
2.5.5
案例--类型转换 46
2.6 实战演练--局部变量和全局变量的
优先级 47
2.7 跟我练练手 49
2.8 高手甜点 49
第3章改变程序执行方向--程序控制
结构与语句 51
3.1 基本处理流程 52
3.2 赋值语句 52
3.3 条件判断语句 53
3.3.1
案例--if语句 53
3.3.2
案例--"if...else"语句 54
3.3.3
案例--"if...else if"语句 55
3.3.4
案例--if语句的嵌套 56
3.3.5
案例--switch语句 57
3.4 循环控制语句 59
3.4.1
案例--while语句 59
3.4.2
案例--"do...while"语句 60
3.4.3
案例--for循环语句 61
3.5 跳转语句 62
3.5.1
案例--break语句 62
3.5.2
案例--continue语句 63
3.6 案例--使用对话框 64
3.7 实战演练--在页面中显示距离
2016年元旦节的天数 66
3.8 跟我练练手 68
3.9 高手甜点 68
第4章 JavaScript语言代码中的
密码--函数 69
4.1 函数的简介 70
4.2 定义函数 70
4.2.1
不指定函数名 70
4.2.2
指定函数名 71
4.2.3
函数参数的使用 71
4.2.4
案例--函数返回值 72
4.3 函数的调用 74
4.3.1
案例--函数的简单调用 74
4.3.2
案例--在表达式中
调用函数 75
4.3.3
案例--在事件响应中
调用函数 75
4.3.4
案例--通过链接调用函数 76
4.4
JavaScript中常用的函数 77
4.4.1
案例--嵌套函数 77
4.4.2
案例--递归函数 78
4.4.3
案例--内置函数 80
4.5 实战演练--购物简易计算器 87
4.6 跟我练练手 89
4.7 高手甜点 90
第5章 JavaScript 语言基础--对象
与数组 91
5.1 了解对象 92
5.1.1
什么是对象 92
5.1.2
面向对象编程 93
5.1.3
JavaScript的内部对象 94
5.2 对象访问语句 95
5.2.1
案例--"for...in"
循环语句 95
5.2.2
案例--with语句 96
5.3
JavaScript中的数组 97
5.3.1
案例--创建和访问数组
对象 97
5.3.2
案例--使用"for...in"语句
控制数组 99
5.3.3
案例--Array对象的常用
属性和方法 100
5.4 详解常用的数组对象方法 110
5.4.1
案例--连接其他数组到
当前数组 110
5.4.2
案例--将数组元素连接为
字符串 111
5.4.3
案例--移除数组中最后一个
元素 111
5.4.4
案例--将指定的数值添加到
数组中 112
5.4.5
案例--反序排列数组中的
元素 113
5.4.6
案例--删除数组中的第一个
元素 114
5.4.7
案例--获取数组中的一部分
数据 115
5.4.8
案例--对数组中的元素进行
排序 115
5.4.9
案例--将数组转换成
字符串 117
5.4.10
案例--将数组转换成本地
字符串 117
5.4.11
案例--在数组开头插入
数据 118
5.5 创建和使用自定义对象 119
5.5.1
案例--定义对象的
构造函数 119
5.5.2
案例--直接对对象初始化 121
5.5.3
案例--修改和删除对象
实例的属性 122
5.5.4
案例--通过原型为对象添加
新属性和新方法 123
5.5.5
案例--自定义对象的嵌套 125
5.5.6
案例--内存的分配和释放 127
5.6 实战演练--利用二维数组创建
动态下拉菜单 127
5.7 跟我练练手 129
5.8 高手甜点 129
第6章 JavaScript的内置对象--
日期与字符串对象 131
6.1 日期对象 132
6.1.1
案例--创建日期对象 132
6.1.2
案例--日期对象的方法 133
6.2 详解日期对象的常用方法 136
6.2.1
案例--返回当前日期和
时间 136
6.2.2
案例--以不同的格式显示
当前日期 137
6.2.3
案例--返回日期所对应的
周次 138
6.2.4
案例--显示当前时间 139
6.2.5
案例--返回距1970年1月1日
午夜的时差 140
6.2.6
案例--以不同的格式显示
UTC日期 140
6.2.7
案例--根据世界时返回日期
对应的周次 141
6.2.8
案例--以不同的格式显示
UTC时间 142
6.2.9
案例--设置日期对象中的
年份、月份与日期值 143
6.2.10
案例--设置小时、分钟与
秒钟的值 144
6.2.11
案例--设置Date对象的
UTC日期 145
6.2.12
案例--返回当地时间与
UTC时间的差值 146
6.2.13
案例--将Date对象中的日期
转化为字符串格式 147
6.2.14
案例--返回以UTC时间
表示的日期字符串 147
6.2.15
案例--将日期对象转化为
本地日期 148
6.2.16
案例--日期间的运算 148
6.3 字符串对象 149
6.3.1
创建字符串对象的方法 149
6.3.2
字符串对象的常用属性 150
6.3.3
字符串对象的常用方法 151
6.4 详解字符串对象的常用方法 152
6.4.1
案例--设置字符串字体
属性 152
6.4.2
案例--以闪烁方式显示
字符串 153
6.4.3
案例--转换字符串的
大小写 154
6.4.4
案例--连接字符串 155
6.4.5
案例--比较两个字符串的
大小 155
6.4.6
案例--分割字符串 156
6.4.7
案例--从字符串中提取
字符串 157
6.5 实战演练--制作网页随机验证码 158
6.6 跟我练练手 159
6.7 高手甜点 160
第7章 JavaScript的内置对象--
数值与数学对象 161
7.1
Number对象 162
7.1.1
案例--创建Number对象 162
7.1.2
案例--Number对象的属性 162
7.1.3
Number对象的方法 166
7.2 详解Number对象常用的方法 166
7.2.1
案例--把Number对象
转换为字符串 166
7.2.2
案例--把Number对象
转换为本地格式字符串 167
7.2.3
案例--四舍五入时指定
小数位数 167
7.2.4
案例--返回以指数记数法
表示的数字 168
7.2.5
案例--以指数记数法指定
小数位 169
7.3
Math对象 169
7.3.1
案例--创建Math对象 169
7.3.2
案例--Math对象的属性 170
7.3.3
Math对象的方法 171
7.4 详解Math对象常用的方法 172
7.4.1
案例--返回数的绝对值 172
7.4.2
案例--返回数的正弦值、
正切值和余弦值 173
7.4.3
案例--返回数的反正弦值、
正切值和余弦值 175
7.4.4
案例--返回两个或多个
参数中的最大值或最小值 177
7.4.5
案例--计算指定数值的
平方根 178
7.4.6
案例--数值的幂运算 178
7.4.7
案例--计算指定数值的
对数 179
7.4.8
案例--取整运算 180
7.4.9
案例--生成0到1之间的
随机数 180
7.4.10
案例--根据指定的坐标
返回一个弧度值 181
7.4.11
案例--返回大于或等于
指定参数的最小整数 182
7.4.12
案例--返回小于或等于
指定参数的最大整数 182
7.4.13
案例--返回以e为
基数的幂 183
7.5 实战演练--使用Math对象
设计程序 184
7.6 跟我练练手 185
7.7 高手甜点 185

第8章编程错误的终结者--
JavaScript的调试与优化 187
8.1 常见的错误和异常 188
8.2 处理异常的方法 189
8.2.1
案例--用onerror事件
处理异常 189
8.2.2
案例--使用
"try...catch...finally"
语句处理异常 191
8.2.3
案例--使用throw语句
抛出异常 192
8.3 使用调试器 193
8.3.1
案例--IE浏览器内建的
错误报告 193
8.3.2
案例--使用Firefox错误
控制台调试 194
8.4
JavaScript语言调试技巧 194
8.4.1
案例--使用alert语句
进行调试 194
8.4.2
案例--使用write语句
进行调试 195
8.5
JavaScript优化 195
8.5.1
案例--减缓代码下载时间 195
8.5.2
案例--合理声明变量 196
8.5.3
案例--使用内置函数缩短
编译时间 197
8.5.4
案例--合理书写if语句 197
8.5.5
案例--最小化语句数量 197
8.5.6
案例--节约使用DOM 197
8.6 跟我练练手 198
8.7 高手甜点 198

第2篇核心技术

第9章面向对象编程基础--
文档对象模型 203
9.1 了解文档对象 204
9.1.1
什么是文档对象模型 204
9.1.2
文档对象模型的功能 205
9.1.3
文档对象的产生过程 206
9.2 认识DOM的节点 207
9.3 节点的基本操作 208
9.3.1
案例--创建节点 209
9.3.2
案例--插入和添加节点 210
9.3.3
案例--复制节点 214
9.3.4
案例--删除节点和
替换节点 216
9.3.5
案例--修改节点 218
9.4 实战演练--在DOM模型中获得
对象 219
9.5 跟我练练手 221
9.6 高手甜点 221
第10章处理文档对象--Document
对象 223
10.1
文档对象概述 224
10.2
文档对象的属性和方法 224
10.2.1
文档对象的属性 224
10.2.2
文档对象的方法 225
10.3
文档对象的应用 225
10.3.1
案例--设置页面显示颜色 225
10.3.2
案例--网页锚点的设置 229
10.3.3
案例--窗体对象form的
应用 231
10.3.4
案例--在文档中输出数据 233
10.3.5
案例--打开新窗口并输出
内容 234
10.3.6
案例--引用文档中的
表单和图片 235
10.3.7
案例--设置文档中的
超链接 237

10.4
实战演练--综合使用各种对话框 238
10.5
跟我练练手 240
10.6
高手甜点 240
第11章处理窗口-- Window窗口
对象 241
11.1
了解window对象属性和方法 242
11.1.1
window对象的属性 242
11.1.2
window对象的方法 243
11.2
对话框 243
11.2.1
案例--警告对话框 243
11.2.2
案例--询问对话框 245
11.2.3
案例--提示对话框 247
11.3
窗口操作 248
11.3.1
案例--打开窗口 248
11.3.2
案例--关闭窗口 250
11.3.3
案例--控制窗口状态栏 251
11.4
实战演练--设置弹出窗口 251
11.5
跟我练练手 253
11.6
高手甜点 253
第12章有问就有答--
事件和事件处理 255
12.1
了解事件与事件处理 256
12.1.1
事件与事件处理概述 256
12.1.2
JavaScript的常用事件 256
12.1.3
事件处理程序的调用 259
12.2
鼠标键盘事件 260
12.2.1
案例--鼠标的单击事件 260
12.2.2
案例--鼠标的按下与
松开事件 261
12.2.3
案例--鼠标的移入与
移出事件 262
12.2.4
案例--鼠标的移动事件 263
12.2.5
案例--键盘事件 264
12.3
JavaScript处理事件的方式 266
12.3.1
案例--匿名函数方式 266
12.3.2
案例--显式声明方式 267
12.3.3
案例--手工触发方式 268
12.4
实战演练--通过事件控制
文本框的背景颜色 269
12.5
跟我练练手 271
12.6
高手甜点 271
第13章页面与用户的互动--
表单和表单元素 273
13.1
案例--表单概述 274
13.2
表单基本元素的使用 274
13.2.1
案例--单行文本输入框 275
13.2.2
案例--多行文本输入框 275
13.2.3
案例--密码域 276
13.2.4
案例--单选按钮 277
13.2.5
案例--复选框 278
13.2.6
案例--下拉选择框 279
13.2.7
案例--普通按钮 279
13.2.8
案例--提交按钮 280
13.2.9
案例--重置按钮 281
13.3
表单高级元素的使用 282
13.3.1
案例--url属性 282
13.3.2
案例--eamil属性 283
13.3.3
案例--date和time 284
13.3.4
案例--number属性 285
13.3.5
案例--range属性 285
13.3.6
案例--required属性 286
13.4
表单对象在javascript中的应用 287
13.4.1
案例--HTML表单基础 287
13.4.2
案例--编辑表单元素的
脚本 291
13.4.3
案例--使用JavaScript获取
网页内容实现数据验证 295
13.5
实战演练--创建用户反馈表单 297
13.6
跟我练练手 298
13.7
高手甜点 299
第14章级联样式表--CSS 301
14.1
CSS简介 302
14.1.1
CSS的功能 302
14.1.2
CSS发展历史 302
14.1.3
浏览器与CSS 303
14.1.4
CSS基础语法 303
14.2
编辑和浏览CSS 304
14.2.1
案例--手工编写CSS 304
14.2.2
案例--Dreamweaver
编写CSS 305
14.3
在HTML中使用CSS的方法 306
14.3.1
案例--行内样式 306
14.3.2
案例--内嵌样式 307
14.3.3
案例--链接样式 308
14.3.4
案例--导入样式 309
14.3.5
案例--优先级问题 310
14.4
CSS选择器 313
14.4.1
案例--标签选择器 313
14.4.2
案例--类选择器 314
14.4.3
案例--ID选择器 315
14.4.4
案例--全局选择器 317
14.4.5
案例--组合选择器 318
14.4.6
案例--继承选择器 319
14.4.7
案例--伪类 320
14.4.8
案例--属性选择器 321
14.4.9
案例--结构伪类选择器 323
14.4.10
案例--UI元素状态
伪类选择器 324
14.5
选择器声明 326
14.5.1
案例--集体声明 326
14.5.2
案例--多重嵌套声明 327
14.6
实战演练--制作五彩标题 328
14.7
跟我练练手 330
14.8
高手甜点 331
第15章 JavaScript控制样式表 333
15.1
DHTML简介 334
15.2
前台动态网页效果 334
15.2.1
案例--动态内容 334
15.2.2
案例--动态样式 335
15.2.3
案例--动态定位 337
15.2.4
案例--显示与隐藏 339
15.3
实战演练--控制表单背景色和文字提示 340
15.4
跟我练练手 343
15.5
高手甜点 343

第3篇高级应用

第16章页面打印和浏览器检测 347
16.1
案例--使用WebBrowser组件的
execWB方法打印 348
16.2
案例--打印指定框架中的内容 352
16.3
案例--分页打印 353
16.4
案例--设置页眉页脚 356
16.5
浏览器检测对象 359
16.5.1
浏览器对象的属性 359
16.5.2
案例--检测浏览器的
名称与版本 359
16.6
跟我练练手 360
16.7
高手甜点 361
第17章网络中的鸿雁
--Cookie 363
17.1
Cookie概述 364
17.1.1
设置Cookie 364
17.1.2
保存Cookie数据 367
17.2
Cookie的常见操作 368
17.2.1
案例--创建Cookie 368
17.2.2
案例--读取Cookie数据 369
17.2.3
案例--删除Cookie 369
17.3
实战演练--在欢迎界面中设置和
检查Cookie 370
17.4
跟我练练手 372
17.5
高手甜点 372
第18章 JavaScript中的XML编程 373
18.1
XML编程基础 374
18.1.1
XPath简介 374
18.1.2
XSLT简介 374
18.2
XML语法基础 375
18.2.1
案例--XML的基本应用 375
18.2.2
案例--XML文档组成和
声明 377
18.2.3
案例--XML元素介绍 378
18.3
CSS修饰XML文件 380
18.3.1
案例--XML使用CSS 380
18.3.2
案例--设置字体属性 381
18.3.3
案例--设置色彩属性 382
18.3.4
案例--设置边框属性 384
18.3.5
案例--设置文本属性 385
18.4
浏览器中的XML DOM 386
18.4.1
案例--IE浏览器中的
XML DOM 386
18.4.2
案例--Firefox浏览器中的
XML DOM 391
18.5
浏览器中的XPath 393
18.5.1
案例--IE浏览器中的
XPath 393
18.5.2
案例--Firefox浏览器中的
XPath 394
18.6
浏览器中的XSLT 395
18.6.1
案例--IE浏览器中的
XSLT 395
18.6.2
案例--Firefox浏览器中的
XSLT 399
18.7
跟我练练手 400
18.8
高手甜点 400
第19章 Ajax技术 401
19.1
Ajax概述 402
19.1.1
什么是Ajax 402
19.1.2
Ajax的关键元素 404
19.1.3
CSS在Ajax应用中的地位 405
19.2
Ajax快速入门 406
19.2.1
全面剖析XML Http Request
对象 406
19.2.2
发出Ajax请求 408
19.2.3
处理服务器响应 409
19.3
实战演练--制作自由拖动的网页 411
19.4
跟我练练手 416
19.5
高手甜点 416
第20章 JavaScript的优秀仓库--
jQuery 417
20.1
jQuery概述 418
20.1.1
jQuery能做什么 418
20.1.2
jQuery的特点 418
20.2
jQuery的配置 419
20.3
使用jQuery的插件 419
20.3.1
常见的jQuery的插件 420
20.3.2
案例--如何使用插件 421
20.4
jQuery选择器 422
20.4.1
案例--jQuery的工厂函数 422
20.4.2
案例--常见选择器 423
20.5
jQuery控制页面 425
20.5.1
案例--对标记的属性进行
操作 425
20.5.2
案例--对表单元素属性进行
操作 427
20.5.3
案例--对元素的CSS样式
进行操作 429
20.6
jQuery的事件处理 431
20.6.1
案例--页面加载响应事件 431
20.6.2
案例--事件捕获与
事件冒泡 432
20.7
jQuery的动画效果 433
20.7.1
案例--基本的动画效果 433
20.7.2
案例--动画的淡入和
淡出效果 437
20.7.3
案例--滑动效果 442
20.7.4
案例--自定义的动画效果 445
20.8
实战演练--制作绚丽的多级动画
菜单 446
20.9
跟我练练手 451
20.10
高手甜点 451
第21章 JavaScript的安全性 453
21.1
案例--设置IE浏览器的
安全区域 454
21.2
JavaScript代码安全 455
21.2.1
案例--屏蔽部分按键 455
21.2.2
案例--屏蔽鼠标右键 457
21.2.3
案例--禁止网页另存为 458
21.2.4
案例--禁止复制网页内容 459
21.3
案例--JavaScript代码加密 460
21.4
跟我练练手 461
21.5
高手甜点 462

第4篇网页特效应用案例

第22章经典的网页动态
特效案例 465
22.1
文字特效 466
22.1.1
案例--设置打字效果的
文字 466
22.1.2
案例--设置文字的
升降特效 468
22.1.3
案例--设置跑马灯效果 470
22.2
图片特效 471
22.2.1
案例--设置闪烁图片 471
22.2.2
案例--设置左右移动
的图片 473
22.3
网页菜单特效 475
22.3.1
案例--设置向上滚动
菜单 475
22.3.2
案例--设置树形菜单 477
22.4
鼠标特效 481
22.4.1
案例--设置图片跟踪
鼠标 482
22.4.2
案例--设置文字跟踪
鼠标 483
22.5
时间特效 485
22.5.1
案例--设置时钟特效 485
22.5.2
案例--制作日历表 489
22.6
页面特效 492
22.6.1
案例--设置颜色选择器 492
22.6.2
案例--设置网页
自动滚屏 494
22.7
跟我练练手 497
22.8
高手甜点 497

內容試閱：

第3章改变程序执行方向--程序控制结构与语句
JavaScript编程中对程序流程的控制主要通过条件判断、循环控制语句及continue、break来完成。其中，条件判断按预先设定的条件执行程序，包括if语句和switch语句；而循环控制语句则可以重复完成任务，包括while语句、"do...while"语句及for语句。本章将主要讲述JavaScript的程序控制结构与相关的语句。

本章要点已掌握的在方框中打勾
* 熟悉赋值语句的使用方法。
* 掌握条件判断语句的使用方法。
* 掌握循环控制语句的使用方法。
* 掌握跳转语句的使用方法。

3.1 基本处理流程
对数据结构的处理流程，称为基本处理流程。在JavaScript中，基本处理流程包含3种结构，即顺序结构、选择结构和循环结构。
顺序结构是JavaScript脚本程序中最基本的结构，它按照语句出现的先后顺序依次执行，如图3-1所示。
选择结构按照给定的逻辑条件来决定执行顺序，有单向选择、双向选择和多向选择之分，但程序在执行过程中都只执行其中一条分支。单向选择和双向选择结构如图3-2所示。

图3-1 顺序结构图3-2 单向选择和双向选择结构
循环结构即根据代码的逻辑条件来判断是否重复执行某一段程序，若逻辑条件为true，则进入循环重复执行，否则结束循环。循环结构可分为条件循环和计数循环，如图3-3所示。

图3-3 循环结构
一般而言，在JavaScript脚本语言中，程序总体是按照顺序结构执行的，而在顺序结构中又可以嵌入选择结构和循环结构。
3.2 赋值语句
赋值语句是JavaScript程序中最常用的语句。在程序中，往往需要大量的变量来存储程序中用到的数据，所以用来对变量进行赋值的赋值语句也会在程序中大量出现。赋值语句的语法格式如下：

变可量名=表达式

当使用关键字var声明变量时，可以同时使用赋值语句对声明的变量进行赋值。例如，声明一些变量，并分别给这些变量赋值，代码如下：

var username="Rose"
var bue=true
var variable="开怀大笑，益寿延年"
3.3 条件判断语句
条件判断语句是对语句中不同条件的值进行判断，进而根据不同的条件执行不同的语句。条件判断语句主要包括两大类，分别是if判断语句和switch多分支语句。
3.3.1
案例--if语句
if语句是使用最为普遍的条件选择语句。每一种编程语言都有一种或多种形式的if语句，在编程中它经常被用到。
If语句的格式如下：

if条件语句
{
执行语句;
}

其中，"条件语句"可以是任何一种逻辑表达式。如果"条件语句"的返回结果为true，则程序先执行后面大括号{}中的"执行语句"，然后执行它后面的其他语句。如果"条件语句"的返回结果为false，则程序跳过"条件语句"后面的"执行语句"，直接去执行程序后面的其他语句。大括号的作用就是将多条语句组合成一个复合语句，作为一个整体来处理。如果大括号中只有一条语句，那么这对大括号{}就可以省略。
【例3.1】实例文件：ch03\3.1.htmlif语句的使用。

!DOCTYPE html
html
body
p如果时间早于20:00，会获得问候"Good
day"。p
button
onclick="myFunction"点击这里button
p id="demo"p
script
type="textjavascript"
function myFunction
{

var x="";

var time=new Date.getHours;

if time20
{

x="Good day";
}

document.getElementById"demo".innerHTML=x;
}
script
body
html

上述代码在IE 9.0浏览器中的显示效果如图3-4所示。单击页面中的【点击这里】按钮，可以看到按钮下方显示出"Good day"问候语，如图3-5所示。

图3-4 程序运行结果图3-5 程序运行结果

请使用小写的if，如果使用大写字母IF则会生成JavaScript错误。另外，在这个语法中，没有else，因此，用户已经告诉浏览器只有在指定条件为true时才执行代码。
3.3.2
案例--"if...else"语句
"if...else"语句通常用于一个条件需要两个程序分支来执行的情况。"if...else"语句语法格式如下所示。

if 条件
{
当条件为true时执行的代码
}
else
{
当条件不为true时执行的代码
}

如果在该格式if从句后面再添加一个else从句，当条件语句返回结果为false时，那么程序将执行else后面的从句。
【例3.2】实例文件：ch03\3.2.html"if...else"语句的使用。

html
head

script type="textjavascript"

var a="john";

ifa!="john"
{
document.write"h1
style=''text-align:center;color:red;''欢
迎JOHN光临h1";
}

else{
document.write"p
style=''font-size:15px;font-

weight:bolder;color:blue''请重新输入名称p";
}

script
head
body
body
html

上述代码中使用了"if...else"语句，对变量a的值进行判断，如果a值不等于"john"则输出红色标题，否则输出蓝色信息。
上述代码在IE 9.0浏览器中的显示效果如图3-6所示，可以看到网页输出了蓝色信息"请重新输入名称"。

图3-6 "if...else"语句判断
3.3.3
案例--"if...else if"语句
使用"if...else if"语句来选择多个代码块之一来执行。"if...else
if"语句的语法格式如下：

if 条件1
{
当条件1为true时执行的代码
}
else if 条件2
{
当条件2为true时执行的代码
}
else
{
当条件1和条件2都不为true时执行的代码
}

【例3.3】实例文件：ch03\3.3.html使用"if...else if"语句输出问候语。

!DOCTYPE html
html
body
p if...else if语句的使用p
script
type="textjavascript"
var d = new Date
var time = d.getHours
if time10{

document.write"bGood morningb"}
else if time=10 time16

{document.write"bGood dayb" }
else{document.write"bHello
World!b"}
script
body
html

上述代码在IE 9.0浏览器中的显示效果如图3-7所示。

图3-7 "if...else if"语句判断结果
3.3.4
案例--if语句的嵌套
if语句可以嵌套使用。当if语句的从句部分大括号中的部分是另外一个完整的if语句时，外层if语句的{}部分的从句内容可以省略。但是，在使用if语句的嵌套应用时，最好使用{}来确定层次关系。否则，由于使用{}的位置不同，可能会导致程序代码的含义不同，从而输出不同的结果。例如下面的两个实例，由于{}位置的不同，导致输出结果不同。
【例3.4】实例文件：ch03\3.4.htmlif语句的嵌套。

!DOCTYPE html
html
body
script type="textjavascript"
var
x=20;y=x; x、y值都为20

ifx1 x为20，不满足此条件，故其下面的代码不会被执行
{

ify==5

alert"x1y==5";

else

alert"x1y!==5";
}

else ifx15 x满足条件，继续执行下面的语句
{

ify==5 y为20，不满足此条件，故其下面的代码不会被执行

alert"x15y==5";

else y满足条件，继续执行下面的语句

alert"x15y!==5"; 这里是程序输出的结果
}
script
body
html

上述代码在IE 9.0浏览器中的显示效果如图3-8所示。

图3-8 程序运行结果
【例3.5】实例文件：ch03\3.5.html调整嵌套语句中{}的位置。

!DOCTYPE html
html
body
script
type="textjavascript"
var
x=20;y=x; x、y值都为20

ifx1 x为20，不满足此条件，故其下面的代码不会被执行
{

ify==5

alert"x1y==5";

else

alert"x1y!==5";
}

else ifx15 x满足条件，继续执行下面的语句
{

ify==5 y为20,不满足此条件，故其下面的代码不会被执行

alert"x15y==5";
}

else x已满足前面的条件，这里的语句不会被执行

alert"x50y!==1"; 由于没有满足的条件，故没有可执行的语句，也就没有输出结果
script
body
html

运行该程序，则不会出现任何结果，如图3-9所示。可以看出，由于使用{}的位置不同，造成程序代码的含义完全不同。因此，在嵌套使用时，最好使用{}对程序代码的层次关系进行界定。

图3-9 程序运行结果
3.3.5
案例--switch语句
switch选择语句用于将一个表达式的结果同多个值进行比较，并根据比较结果选择执行语句。switch语句的语法格式如下：

switch 表达式
{

case 取值1 :

语句块1;break;

case 取值2 :

语句块2;break；
...

case 取值n;
语句块n;break;

default :

语句块n 1;
}

case语句只是相当于定义一个标记位置，程序根据switch条件表达式的结果，直接跳转到第一个匹配的标记位置处，开始顺序执行后面的所有程序代码，包括后面的其他case语句下的代码，直到碰到break语句或函数返回语句为止。default语句是可选的，它匹配上面所有case语句定义的值以外的其他值，也就是前面所有取值都不满足时，就执行default后面的语句块。
【例3.6】实例文件：ch03\3.6.html应用switch语句判断当前是星期几。

!DOCTYPE html
html
head
title应用switch判断当前是星期几title
script
language="javascript"
var now=new Date; 获取系统日期
var day=now.getDay; 获取星期
var week;
switch day{

case 1:

week="星期一";

break;
case 2:

week="星期二";

break;
case 3:

week="星期三";

break;
case 4:

week="星期四";

break;
case 5:

week="星期五";

break;
case 6:

week="星期六";

break;
default:

week="星期日";

break;
}
document.write"今天是" week; 输出中文的星期
script
head
body
body
html

上述代码在IE 9.0浏览器中的显示效果如图3-10所示。可以看到在页面中显示了当前是星期几。

图3-10 程序运行结果

在程序开发的过程中，要根据实际情况选择使用if语句和switch语句，不要因为switch语句的效率高而一味地使用它，也不要因为if语句常用而不使用switch语句。一般情况下，对于判断条件较少的程序可以使用if语句，在实现一些多条件判断的程序中，应该使用switch语句。
3.4 循环控制语句
顾名思义，循环语句就是在满足条件的情况下反复执行某个操作的语句。循环控制语句主要包括while语句、"do...while"语句和for语句。
3.4.1
案例--while语句
while语句既是循环语句，也是条件判断语句。while语句的语法格式如下：

while条件表达式语句
{
执行语句块
}

当"条件表达式语句"的返回值为true时，则执行{}中的语句块；当执行完{}中的语句块后，再次检测条件表达式的返回值，如果返回值还为true，则重复执行{}中的语句块，直到返回值为false时，结束整个循环过程，接着执行while代码段后面的程序代码。
【例3.7】实例文件：ch03\3.7.html计算1～100之间所有整数的和。

!DOCTYPE html
html
head

titlewhile语句的使用title
head
body

script type="textjavascript"

var i=0;

var iSum=0;

whilei=100
{

iSum =i;

i ;
}

document.write"1～100的所有数之和为" iSum;

script
body
html

上述代码在IE 9.0浏览器中的显示效果如图3-11所示。

图3-11 程序运行结果
使用while语句时应注意以下事项。
* 应使用{}包含多条语句一条语句最好也用{}。
* 在循环体中应包含使循环退出的语句，例如上例的i 否则循环将无休止的运行。
* 注意循环体中语句的顺序，例如上例中如果改变了"iSum =i;"与"i ;"语句的顺序，结果将完全不一样。

不要忘记增加条件中所用变量的值，如果不增加变量的值，该循环永远不会结束，可能会导致浏览器崩溃。
3.4.2
案例--"do...while"语句
"do...while"语句的功能和while语句差不多，只不过它是在执行完第一次循环之后才检测条件表达式的值，这意味着包含在{}中的代码块至少要被执行一次。另外，"do...while"语句结尾处的while条件语句的括号后有一个分号";"，该分号一定不能省略。
"do...while"语句的语法格式如下：

do
{
执行语句块
}while条件表达式语句;

【例3.8】实例文件：ch03\3.8.html计算1～100之间所有整数的和。

!DOCTYPE html
html
head
titleJavaScript do...while语句示例title
head
body

script type="textjavascript"
var
i=0;
var
iSum=0;
do
{

iSum =i;
i ;

}whilei=100

document.write"1-100的所有数之和为" iSum;

script
body
html

上述代码在IE 9.0浏览器中的显示效果如图3-12所示。

图3-12 程序运行结果
由实例可知，while与"do...while"的区别如下。
1 "do...while"将先执行一遍{}中的语句，再判断表达式的真假。这是它与while的本质区别。
2 "do...while"与while是可以互相转化的。
如果上面例子中i的初始值大于100，iSum的值将与示例的结果不同，这是因为"do...while"语句先执行了循环体中语句的缘故。
3.4.3
案例--for循环语句
for语句通常由两部分组成，一部分的条件控制部分，另一部分为循环部分。for语句的语法格式如下：

for初始化表达式; 循环条件表达式; 循环后的操作表达式
{
执行语句块
}

在使用for循环语句前要先设定一个计数器变量，该变量可以在for循环之前预先定义，也可以在使用时直接进行定义。在上述语法格式中，"初始化表达式"表示计数器变量的初始值；"循环条件表达式"是一个计数器变量的表达式，决定了计数器的最大值；"循环后的操作表达式"表示循环的步长，也就是每循环一次，计数器变量值的变化，该变化可以是增大的，也可以是减小的，或进行其他运算。for循环语句可以嵌套使用，也就是在一个循环里还可以有另一个循环。
【例3.9】实例文件：ch03\3.9.htmlfor循环语句的使用。

!DOCTYPE html
html
head

script type="textjavascript"

forvar i=0;i5;i {

document.write"p style=''font-size:" i "0px''欢迎学习

javascriptp";
}

script
head
body
body
html

上述代码使用for循环输出了字号大小不同的语句，在IE 9.0浏览器中的显示效果如图3-13所示。

图3-13 for循环语句运行结果
3.5 跳转语句
JavaScript支持的跳转语句主要有continue语句和break语句。continue语句与break语句的主要区别是：break是彻底结束循环；而continue是结束本次循环。
3.5.1
案例--break语句
break语句用于退出包含在最内层的循环或者退出一个switch语句。break语句通常用在for、while、"do...while"或switch语句当中。break语句的语法格式如下：

break;

【例3.10】实例文件：ch03\3.10.htmlbreak语句的使用。
在I have a dream字符串中找到第一个d的位置。

!DOCTYPE html
html
head

script type="textjavascript"

var sUrl = "I have a dream";

var iLength = sUrl.length;

var iPos = 0;

forvar i=0;iiLength;i

{

ifsUrl.charAti=="d" 判断表达式2

{
iPos=i 1;
break;

}
}

document.write"字符串" sUrl "中的第一个d字母的位置为" iPos;

script
head
body
body
html

上述代码在IE 9.0浏览器中的显示效果如图3-14所示。

图3-14 break语句运行结果
3.5.2
案例--continue语句
continue语句和break语句类似，不同之处在于，continue语句用于中止本次循环，并开始下一次循环，其语法格式如下：

continue;

continue语句只能用在while、for、"do...while"和switch语句当中。

【例3.11】实例文件：ch03\3.10.htmlcontinue语句的使用。
打印出I have a dream字符串中小于字母d的字符。

!DOCTYPE html
html
head

script type="textjavascript"

var sUrl = "i have a dream";

var iLength = sUrl.length;

var iCount = 0;

forvar i=0;iiLength;i
{

ifsUrl.charAti="d" 判断表达式2

{
continue;

}

document.writesUrl.charAti;
}

script
head
body
body
html

上述代码在IE 9.0浏览器中的显示效果如图3-15所示。

图3-15 Continue语句运行结果
3.6 案例--使用对话框
在JavaScript中有提示、确认和输入3种对话框，分别对应的函数是：alert、confirm和prompt。
1 alert：该对话框只用于提醒，不能对脚本产生任何改变。它只有一个参数，即显示需要提示的信息，没有返回值。
2 confirm：该对话框一般用于确认信息。它只有一个参数，返回值为true或者false。
3 prompt：该对话框可以进行输入，并返回用户输入的字符串。它有两个参数，第一个参数显示提示信息，第二个参数用于显示输入框和默认值。
【例3.12】实例文件：ch03\3.11.html3种对话框的使用方法。

!DOCTYPE html
head
title三种弹出对话框的用法实例title
script
language="javascript"
function ale
{弹出一个提醒的对话框

alert"呵呵，演示一完毕";
}
function firm
{利用对话框返回true 或者 false

ifconfirm"你确信要转去百度首页？"

{如果是true ，那么就把页面转向百度首页

location.href="http:www.baidu.com";
}

else
{

alert"按了【取消】按钮后，系统返回false";
}
}
function prom
{

var name=prompt"请输入您的名字","";将输入的内容赋给变量name

ifname如果返回的有内容
{

alert"欢迎您：" name
}
}
script
head
body
p对话框有三种p
p1：只是提醒，不能对脚本产生任何改变；p
p2：一般用于确认，返回true或者false
p
p3：一个带输入的对话框，可以返回用户填入的字符串 p
p下面我们分别演示：p
p演示一：提醒对话框p
p

input type="submit" name="Submit" value="提交"
onclick="ale"
p
p演示二：确认对话框 p
p

input type="submit" name="Submit2" value="提交"
onclick="firm"
p
p演示三：要求用户输入，然后给个结果p
p
input type="submit"
name="Submit3" value="提交"
onclick="prom"
p
body
html

运行上述代码，结果如图3-16所示。单击页面中演示一下的【提交】按钮，系统将弹出如图3-17所示的提示对话框。
单击页面中的演示二下的【提交】按钮，系统将弹出如图3-18所示的确认对话框。此时如果继续单击【确定】按钮，则打开百度首页；如果单击【取消】按钮，则弹出提示对话框，如图3-19所示。
单击页面中的演示三下的【提交】按钮，在弹出的对话框中输入如图3-20所示的信息后单击【确定】按钮，则弹出如图3-21所示的对话框。

图3-16 对话框用法示例图3-17 提醒对话框图3-18 确认对话框图3-19 取消对话框
图3-20 输入对话框

图3-21 单击【确定】按钮后
的对话框

3.7 实战演练--在页面中显示距离
2016年元旦节的天数
在学习了JavaScript的基本语句之后，即可实现多态效果。本实例将通过JavaScript实现在页面中显示距离2016年元旦的天数。
具体操作步骤如下。
定义JavaScript的函数，实现判断系统当前时间与2016年元旦相距天数的功能，代码如下：

function countdowntitle,Intime,divId{
var online= new DateIntime; 根据参数定义时间对象
var now = new Date; 定义当前系统时间对象
var leave = online.getTime -
now.getTime; 计算时间差
var day = Math.floorleave 1000 * 60 *
60 * 24 1;
if day 1{

ifdocument.all{

divId.innerHTML="b--距" title "还有" day
"天！b";页面显示信息
}
}else{
if
day == 1 {

ifdocument.all{

divId.innerHTML="b--明天就是" title "啦!b";
}
}else{

if day == 0 {divId.innerHTML="b今天就是" title "呀！b";

}else{

ifdocument.all{

divId.innerHTML="b--唉呀！" title "已经过了！b";

}

}
}
}
}

在页面中定义相关表格，用于显示当前时间距离2016年元旦的天数。代码如下：

table width="350"
height="450" border="0" align="center"
cellpadding="0" cellspacing="0"

tr

td valign="bottom" table width="346"
height="418" border="0"

cellpadding="0" cellspacing="0"

tr

td width="76"
td

td width="270"

div id="countDown"

b--bdiv

script language="javascript"
countdown"2016年元旦","112015",countDown; !--调用
JavaScript函数--

script

td

tr

tabletd

tr
table

运行相关程序，最终效果如图3-22所示。

图3-22 程序运行结果

3.8 跟我练练手
1. 练习目标
能够熟练掌握本章所讲内容。
2. 上机练习
练习1：赋值语句的使用。
练习2：条件判断语句的使用。
练习3：循环控制语句的使用。
练习4：跳转语句的使用。
练习5：在JavaScript中使用对话框。
3.9 高手甜点
甜点1：为什么会出现死循环？
在使用for循环语句时，需要保证循环可以正常结束，也就是保证循环条件的结果为true的情况，否则循环体会无限地执行下去，最终出现死循环。例如下面的代码：

fori=2;i=2;i
｛

alerti;
｝
甜点2：如何计算200以内所有奇数的和？
使用for循环语句可以解决计算奇数和的问题。代码如下：

script
type="textjavascript"
var sum=0;
forvar i=1;i10;i =2{

sum=sum i;
}
alert"200以内所有奇数的和为：" sum;
script

書城介紹　 \|　合作申請　\|　索要書目　 \|　新手入門　\|　聯絡方式　 \|　幫助中心　\|　找書說明　 \|　送貨方式　\|　付款方式	香港用户　 \|　台灣用户　\|　大陸用户　\|　海外用户

	megBook.com.hk
Copyright © 2013 - 2024 （香港）大書城有限公司　 All Rights Reserved.