任务1 搭建JavaScript开发
　环境　1
1.1　任务导入　2
1.2　成果目标　2
1.3　核心知识　3
1.3.1　JavaScript演进　3
1.3.2　JavaScript介绍　4
1.3.3　Web页面渲染过程　5
1.3.4　Visual Studio Code介绍　6
1.3.5　Visual Studio Code快捷键　6
1.3.6　EMMET语法　9
1.3.7　Node.js介绍　10
1.3.8　http-server介绍　10
1.3.9　在HTML中使用JavaScript　11
1.3.10　高性能JavaScript　12
1.3.11　JavaScript执行顺序　12
1.3.12　脚本位置　13
1.3.13　组织脚本　13
1.3.14　无阻塞脚本　14
1.3.15　选取DOM对象　17
1.3.16　addEventListener　20
1.3.17　读写HTML DOM style对象
　属性　20
1.3.18　cssText　21
1.4　任务实施　22
1.4.1　安装和配置Visual Studio Code　22
1.4.2　安装常用扩展　23
1.4.3　Chrome浏览器　24
1.4.4　Chrome开发者工具　24
1.4.5　安装Node.js　25
1.4.6　安装与配置http-server　25
1.4.7　编写HTML和CSS　25
1.4.8　编写JavaScript　27
1.4.9　测试页面　28
1.5　强化训练　28
1.6　学习成果评量　29
任务2　斑马线表格制作　30
2.1　任务导入　31
2.2　成果目标　31
2.3　核心知识　32
2.3.1　表格常用标签　32
2.3.2　表格斑马线原理　33
2.3.3　读写HTML DOM className
　属性　33
2.3.4　严格模式（use strict）　34
2.3.5　定义变量　35
2.3.6　常量　35
2.3.7　变量命名规则　35
2.3.8　JavaScript语法规范　36
2.3.9　变量类型　37
2.3.10　变量作用域　38
2.3.11　避免变量污染　40
2.3.12　闭包函数　40
2.3.13　JavaScript转义字符　40
2.3.14　相等操作符　41
2.3.15　toNumber　41
2.3.16　使用typeof检测类型　42
2.3.17　使用constructor检测类型　42
2.3.18　使用toString()检测封装类型　42
2.3.19　事件委托　43
2.4　任务实施　44
2.4.1　编写HTML　44
2.4.2　编写CSS样式　46
2.4.3　编写JavaScript　47
2.4.4　测试页面　48
2.5　强化训练　49
2.6　学习成果评量　49
任务3　弹出消息框　50
3.1　任务导入　51
3.2　成果目标　51
3.3　核心知识　51
3.3.1　基于负边距的垂直居中　51
3.3.2　基于transform属性的垂直
　居中　52
3.3.3　元素动画制作　53
3.3.4　警告对话框alert()　53
3.3.5　确认对话框confirm()　54
3.3.6　提示对话框prompt()　54
3.3.7　BOM介绍　54
3.3.8　window对象　54
3.3.9　location对象　55
3.3.10　screen对象　56
3.3.11　history对象　57
3.4　任务实施　57
3.4.1　编写HTML　57
3.4.2　编写CSS样式　58
3.4.3　编写JavaScript　60
3.4.4　测试页面　60
3.5　强化训练　61
3.6　学习成果评量　61
任务4　图片缩放特效　62
4.1　任务导入　63
4.2　成果目标　63
4.3　核心知识　63
4.3.1　DOM编程　63
4.3.2　DOM访问与修改　64
4.3.3　DOM遍历　64
4.3.4　innerHTML对比DOM方法　65
4.3.5　字符串连接　65
4.3.6　HTML集合length　66
4.3.7　减少浏览器重排与重绘　67
4.4　任务实施　69
4.4.1　编写页面结构　69
4.4.2　编写CSS样式　71
4.4.3　编写JavaScript　72
4.4.4　测试页面　73
4.5　强化训练　73
4.6　学习成果评量　74
任务5　网页换肤　75
5.1　任务导入　76
5.2　成果目标　76
5.3　核心知识　76
5.3.1　网页换肤原理　76
5.3.2　HTML文档对象模型　77
5.3.3　HTML DOM节点树　77
5.3.4　document对象属性和方法　78
5.3.5　element对象属性和方法　79
5.3.6　获取元素属性getAttribute()　82
5.3.7　设置元素属性setAttribute()　83
5.3.8　本地数据存储方案　83
5.3.9　WebStorage　84
5.3.10　WebStorage基本属性和
　方法　84
5.3.11　使用sessionStorage对象　84
5.3.12　使用localStorage对象　86
5.3.13　使用storage事件　86
5.3.14　cookie介绍　87
5.3.15　cookie构成　87
5.3.16　写入cookie信息　88
5.3.17　读取cookie信息　90
5.4　任务实施　91
5.4.1　编写HTML　91
5.4.2　编写CSS　92
5.4.3　编写JavaScript　94
5.4.4　测试页面　95
5.5　强化训练　95
5.6　学习成果评量　95
任务6　下拉广告　96
6.1　任务导入　97
6.2　成果目标　97
6.3　核心知识　97
6.3.1　transition属性　97
6.3.2　超时调用setTimeout()方法　98
6.4　任务实施　99
6.4.1　编写HTML　99
6.4.2　编写CSS样式　100
6.4.3　编写JavaScript代码　101
6.4.4　测试页面　102
6.5　强化训练　102
6.6　学习成果评量　103
任务7　轮播图　104
7.1　任务导入　105
7.2　成果目标　105
7.3　核心知识　105
7.3.1　间歇调用setInterval()　105
7.3.2　避免常见JavaScript错误　106
7.3.3　理解Error对象　106
7.3.4　错误处理思路　107
7.3.5　使用浏览器控制台调试
　程序　108
7.3.6　使用断点调试程序　109
7.3.7　使用try-catch处理异常　110
7.4　任务实施　111
7.4.1　编写HTML　111
7.4.2　编写CSS样式　113
7.4.3　编写JavaScript　116
7.4.4　测试页面　117
7.5　强化训练　117
7.6　学习成果评量　118
任务8　滚动公告　119
8.1　任务导入　120
8.2　学习成果　120
8.3　核心知识　120
8.3.1　HTML事件模型　120
8.3.2　DOM0级事件模型　121
8.3.3　DOM2级事件模型　122
8.3.4　IE事件模型　123
8.4　任务实施　124
8.4.1　编写HTML　124
8.4.2　编写CSS样式　125
8.4.3　编写JavaScript　126
8.4.4　测试页面　127
8.5　强化训练　128
8.6　学习成果评量　128
任务9　贷款计算器　129
9.1　任务导入　130
9.2　成果目标　130
9.3　核心知识　130
9.3.1　表单类型　130
9.3.2　表单结构　132
9.3.3　form对象　133
9.3.4　表单事件　134
9.3.5　表达式与操作符　135
9.3.6　转换为数字　136
9.3.7　设置小数位数　137
9.3.8　Math对象　137
9.3.9　条件语句　138
9.3.10　for循环　141
9.3.11　while循环　142
9.3.12　do-while循环　142
9.3.13　for-in循环　142
9.3.14　优化循环性能　143
9.3.15　forEach()　143
9.4　任务实施　143
9.4.1　编写HTML　143
9.4.2　编写CSS样式　145
9.4.3　编写JavaScript　147
9.4.4　测试页面　147
9.5　强化训练　148
9.6　学习成果评量　148
任务10　计算器　149
10.1　任务导入　150
10.2　成果目标　150
10.3　核心知识　150
10.3.1　函数介绍　150
10.3.2　定义函数　151
10.3.3　嵌套函数　152
10.3.4　调用函数　152
10.3.5　函数的实参和形参　155
10.3.6　将对象属性用作实参　157
10.3.7　实参类型　157
10.3.8　作为值的函数　157
10.3.9　自定义函数属性　158
10.3.10　slice()　158
10.3.11　isNaN()　158
10.4　任务实施　159
10.4.1　编写HTML　159
10.4.2　编写CSS样式　160
10.4.3　编写JavaScript　162
10.4.4　测试页面　164
10.5　强化训练　165
10.6　学习成果评量　165
任务11　投票　166
11.1　任务导入　167
11.2　成果目标　167
11.3　核心知识　167
11.3.1　匿名函数　167
11.3.2　数据存取方式　168
11.3.3　对象成员　169
11.3.4　函数作用域　170
11.3.5　闭包　171
11.3.6　闭包函数　173
11.3.7　递归函数　174
11.4　任务实施　174
11.4.1　编写HTML　174
11.4.2　编写CSS样式　175
11.4.3　编写JavaScript　176
11.4.4　测试页面　177
11.5　强化训练　177
11.6　学习成果评量　178
任务12　折叠面板　179
12.1　任务导入　180
12.2　成果目标　180
12.3　核心知识　180
12.4　任务实施　181
12.4.1　编写HTML　181
12.4.2　编写CSS　182
12.4.3　编写JavaScript　183
12.4.4　测试页面　184
12.5　强化训练　184
12.6　学习成果评量　185
任务13　银行客服电话查询　186
13.1　任务导入　187
13.2　成果目标　187
13.3　核心知识　187
13.3.1　Ajax简介　187
13.3.2　Ajax原理　188
13.3.3　HTTP请求　188
13.3.4　HTTP状态码　189
13.3.5　定义XMLHttpRequest
　对象　190
13.3.6　建立XMLHttpRequest
　连接　191
13.3.7　跟踪状态　192
13.3.8　中止请求　192
13.3.9　Ajax请求与响应模板　192
13.3.10　获取数据　193
13.3.11　获取纯文本　194
13.3.12　使用Ajax加载HTML　194
13.3.13　使用Ajax加载JSON　194
13.3.14　获取JavaScript脚本　194
13.3.15　使用Ajax加载其他服务器的
　数据　194
13.3.16　获取头部信息　195
13.3.17　JSONP工作原理　195
13.4　任务实施　196
13.4.1　编写HTML　196
13.4.2　编写CSS样式　196
13.4.3　编写JSON　197
13.4.4　编写JavaScript　199
13.4.5　测试页面　200
13.5　强化训练　200
13.6　学习成果评量　200
任务14　省、市、区联动菜单　201
14.1　任务导入　202
14.2　成果目标　202
14.3　核心知识　202
14.3.1　下拉列表select　202
14.3.2　HTML DOM Option对象　203
14.3.3　select add()方法　203
14.3.4　JSON简介　203
14.3.5　JSON语法　204
14.3.6　JSON与XML比较　205
14.3.7　访问JSON对象值　206
14.3.8　遍历JSON对象　206
14.3.9　修改JSON值　207
14.3.10　删除对象属性　207
14.3.11　解析JSON对象　207
14.3.12　JSON.stringify()　207
14.3.13　JSON转换为JavaScript
　对象　208
14.4　任务实施　208
14.4.1　编写HTML　208
14.4.2　编写CSS　209
14.4.3　JSON数据准备　210
14.4.4　编写JavaScript　211
14.4.5　测试页面　212
14.5　强化训练　213
14.6　学习成果评量　213
任务15　滚动监听　214
15.1　任务导入　215
15.2　成果目标　215
15.3　核心知识　215
15.3.1　滚动监听　215
15.3.2　CSS脚本化　215
15.3.3　访问CSS行内样式　216
15.3.4　使用styleSheets对象　217
15.3.5　计算样式　218
15.3.6　元素尺寸　220
15.3.7　window.scrollY　220
15.4　任务实施　221
15.4.1　编写HTML　221
15.4.2　编写CSS样式　222
15.4.3　编写JavaScript　223
15.4.4　测试页面　224
15.5　强化训练　224
15.6　学习成果评量　225
任务16　视频播放器　226
16.1　任务导入　227
16.2　成果目标　227
16.3　核心知识　227
16.3.1　HTML video标签　227
16.3.2　HTML音频/视频方法　228
16.3.3　HTML音频/视频属性　228
16.3.4　HTML音频/视频事件　229
16.3.5　浏览器支持的视频格式　230
16.3.6　浏览器视频能力检测　231
16.3.7　实现播放列表功能　231
16.4　任务实施　232
16.4.1　编写HTML　232
16.4.2　编写CSS样式　233
16.4.3　编写JavaScript　235
16.4.4　测试页面　236
16.5　强化训练　236
16.6　学习成果评量　236
任务17　刮刮乐　237
17.1　任务导入　238
17.2　成果目标　238
17.3　核心知识　238
17.3.1　事件基础　238
17.3.2　事件流　239
17.3.3　事件冒泡　239
17.3.4　事件捕获　240
17.3.5　事件对象　240
17.3.6　IE中的事件对象　243
17.3.7　跨浏览器的事件对象　245
17.3.8　共享onload事件　247
17.3.9　事件委托　248
17.3.10　事件类型　249
17.3.11　UI事件　249
17.3.12　焦点事件　250
17.3.13　鼠标事件　250
17.3.14　键盘事件　251
17.3.15　鼠标/键盘事件对象属性　251
17.3.16　鼠标/键盘事件方法　252
17.3.17　框架/对象（Frame/Object）
　事件　252
17.3.18　表单事件　253
17.3.19　剪贴板事件　253
17.3.20　打印事件　253
17.3.21　拖动事件　253
17.3.22　多媒体（Media）事件　254
17.3.23　动画事件　254
17.3.24　过渡事件　255
17.3.25　其他事件　255
17.3.26　模拟事件过程　255
17.3.27　模拟鼠标事件　256
17.3.28　模拟键盘事件　257
17.3.29　globalCompositeOperation
　属性　257
17.4　任务实施　258
17.4.1　编写HTML　258
17.4.2　编写CSS样式　258
17.4.3　编写JavaScript　259
17.4.4　测试页面　260
17.5　强化训练　260
17.6　学习成果评量　260
任务18　微信运动步数统计图　261
18.1　任务导入　262
18.2　成果目标　262
18.3　核心知识　262
18.3.1　HTML5 canvas　262
18.3.2　canvas坐标　263
18.3.3　canvas绘图步骤　263
18.3.4　canvas绘制渐变色　263
18.3.5　canvas绘制文本　263
18.3.6　canvas绘制直线　264
18.3.7　canvas绘制矩形　264
18.3.8　canvas绘制圆形　265
18.3.9　canvas绘制曲线　265
18.4　任务实施　265
18.4.1　编写HTML　265
18.4.2　编写JavaScript　266
18.4.3　测试页面　267
18.5　强化训练　267
18.6　学习成果评量　268
任务19　相册　269
19.1　任务导入　270
19.2　成果目标　270
19.3　任务实施　270
19.3.1　编写HTML　270
19.3.2　编写CSS样式　273
19.3.3　编写JavaScript　276
19.3.4　测试页面　277
19.4　强化训练　278
19.5　学习成果评量　278
任务20　选项卡　279
20.1　任务导入　280
20.2　成果目标　280
20.3　核心知识　281
20.3.1　选项卡HTML模型　281
20.3.2　重置ul属性　281
20.3.3　浮动（float）　282
20.3.4　绝对定位（absolute）　283
20.3.5　选项卡切换原理　283
20.4　任务实施　283
20.4.1　编写HTML　283
20.4.2　编写CSS　286
20.4.3　编写JavaScript脚本　288
20.4.4　浏览器测试　289
20.5　强化训练　289
20.6　学习成果评量　289
任务21　JavaScript抽奖器　290
21.1　任务导入　291
21.2　成果目标　291
21.3　核心知识　291
21.3.1　数据存储　291
21.3.2　数组　292
21.3.3　创建数组　292
21.3.4　数组元素的读和写　293
21.3.5　数组元素的添加和删除　293
21.3.6　稀疏数组　293
21.3.7　数组长度　294
21.3.8　数组遍历　294
21.3.9　ECMAScript3数组方法　294
21.3.10　ECMAScript5数组方法　296
21.4　任务实施　298
21.4.1　编写HTML　298
21.4.2　编写CSS　299
21.4.3　编写JavaScript　300
21.4.4　测试页面　301
21.5　强化训练　301
21.6　学习成果评量　302
任务22　座位预订程序　303
22.1　任务导入　304
22.2　成果目标　304
22.3　核心知识　304
22.3.1　面向对象背景　304
22.3.2　对象的属性和方法　305
22.3.3　创建对象方法——字面量
　语法　305
22.3.4　创建对象方法——构造函数
　语法　305
22.3.5　添加和删除属性　307
22.3.6　访问对象　307
22.3.7　this关键字　307
22.3.8　OOP相关概念　308
22.3.9　浏览器内置对象　308
22.3.10　浏览器对象模型BOM　309
22.3.11　document对象　309
22.3.12　window对象　311
22.3.13　navigator对象集合　313
22.3.14　screen对象　313
22.3.15　history对象　314
22.3.16　location对象　314
22.3.17　字符串对象　314
22.3.18　日期对象　315
22.3.19　数组对象　317
22.3.20　逻辑对象　317
22.3.21　算术对象　318
22.3.22　Number对象　318
22.3.23　Form对象　319
22.3.24　iframe对象属性　319
22.4　任务实施　320
22.4.1　编写HTML　320
22.4.2　编写CSS样式　321
22.4.3　编写JavaScript　323
22.4.4　测试页面　324
22.5　强化训练　324
22.6　学习成果评量　325
任务23　注册表单验证　326
23.1　任务导入　327
23.2　成果目标　327
23.3　核心知识　327
23.3.1　正则表达式的概念　327
23.3.2　正则表达式的工作原理　328
23.3.3　定义正则表达式　328
23.3.4　元字符　329
23.3.5　反义字符　329
23.3.6　限定字符　330
23.3.7　转义字符　330
23.3.8　字符分支　330
23.3.9　字符分组　330
23.3.10　贪婪匹配和懒惰匹配　331
23.3.11　后向引用　331
23.3.12　零宽断言　331
23.3.13　其他语法　332
23.3.14　常用简易规则　332
23.3.15　常用正则表达式　333
23.4　任务实施　338
23.4.1　编写HTML　338
23.4.2　编写CSS样式　339
23.4.3　编写JavaScript　341
23.4.4　测试页面　342
23.5　强化训练　343
23.6　学习成果评量　343

参考文献　344