单元1
理解JavaScript脚本语言 1
【单元目标】 1
【核心内容】 1
1.1 任务描述 2
1.2 任务分析与设计 2
1.2.1 JavaScript在Web中的地位和
作用 2
1.2.2 JavaScript学习路线 2
1.3 关键知识和技术——搭建开发环境 4
1.3.1 什么是JavaScript 5
1.3.2 在HTML中使用JavaScript 6
1.3.3 浏览器渲染Web页面的过程 8
1.3.4 浏览器中的开发者工具 10
1.3.5 利用Node.js安装http-server
服务器 13
1.4 任务实现 14
1.4.1 认识JavaScript词法符号 14
1.4.2 认识JavaScript数据类型 16
1.4.3 认识JavaScript变量 20
1.4.4 认识JavaScript常量 23
1.4.5 认识JavaScript运算符 26
1.4.6 认识JavaScript表达式 30
1.4.7 认识JavaScript语句 34
1.5 任务拓展——配置ECMAScript 6
兼容环境 44
1.5.1 了解JavaScript的常用扩展库、
常用框架和衍生语言 44
1.5.2 了解ECMAScript 6的新特性 44
1.5.3 配置ECMAScript 6的
兼容环境 44
1.6 课后训练 47
【归纳总结】 47

单元2
设计网页换肤效果 48
【单元目标】 48
【核心内容】 48
2.1 任务描述 49
2.2 任务分析与设计 49
2.3 关键知识和技术——DOM和
本地存储 49
2.3.1 HTML DOM的节点类型 50
2.3.2 HTML DOM节点的层级关系 50
2.3.3 DOM对象的继承关系 51
2.3.4 操作DOM节点 52
2.3.5 操作HTML元素 54
2.3.6 本地数据存储方案 58
2.4 任务实现 59
2.4.1 编写HTML文件 60
2.4.2 编写CSS文件 61
2.4.3 编写JavaScript脚本文件 63
2.5 任务拓展——设计网页文字的
缩放效果 63
2.5.1 任务描述 63
2.5.2 任务要求 64
2.6 课后训练 64
【归纳总结】 64
单元3
设计网站的二级导航
效果 65
【单元目标】 65
【核心内容】 65
3.1 任务描述 66
3.2 任务分析与设计 66
3.2.1 导航的表现形式 66
3.2.2 导航的设计流程 68
3.3 关键知识和技术——CSS和
DOM事件 68
3.3.1 获取元素的计算样式 69
3.3.2 设置元素的行内样式 69
3.3.3 操作CSS类样式 70
3.3.4 操作CSS样式表 71
3.3.5 认识元素的尺寸和位置 73
3.3.6 认识DOM事件 75
3.3.7 事件处理程序 75
3.3.8 事件对象 78
3.3.9 事件类型 80
3.3.10 事件模拟 89
3.3.11 事件委托 91
3.4 任务实现 93
3.4.1 编写HTML文件 93
3.4.2 编写CSS文件 94
3.4.3 编写JavaScript脚本文件 95
3.5 任务拓展——设计网页选项卡
效果 96
3.5.1 任务描述 96
3.5.2 任务要求 96
3.6 课后训练 96
【归纳总结】 97
单元4
设计公告栏信息滚动
效果 98
【单元目标】 98
【核心内容】 98
4.1 任务描述 99
4.2 任务分析与设计 99
4.2.1 滚动原理 99
4.2.2 设计流程 99
4.3 关键知识和技术——函数和BOM 99
4.3.1 认识函数 100
4.3.2 函数的参数与返回值 105
4.3.3 箭头函数 108
4.3.4 闭包函数 109
4.3.5 递归函数 110
4.3.6 全局函数 110
4.3.7 认识BOM 112
4.3.8 window对象 112
4.3.9 location对象 115
4.3.10 navigator对象 116
4.3.11 screen对象 117
4.3.12 history对象 117
4.4 任务实现 118
4.4.1 编写HTML文件 118
4.4.2 编写CSS文件 119
4.4.3 编写JavaScript脚本文件 120
4.5 任务拓展——设计公告栏信息
垂直滚动效果 120
4.5.1 任务描述 120
4.5.2 任务要求 121
4.6 课后训练 121
【归纳总结】 121
单元5
设计模态对话框效果 123
【单元目标】 123
【核心内容】 123
5.1 任务描述 124
5.2 任务分析与设计 124
5.2.1 模态对话框的实现原理 124
5.2.2 模态对话框的构成要素 124
5.2.3 模态对话框类设计 125
5.3 关键知识和技术——面向对象
编程 127
5.3.1 认识面向对象 127
5.3.2 认识JavaScript对象 129
5.3.3 构造函数 132
5.3.4 原型对象 133
5.3.5 创建对象 135
5.3.6 管理对象 137
5.3.7 配置对象 139
5.3.8 原型链 140
5.3.9 对象继承 141
5.3.10 JavaScript类 145
5.3.11 内置对象 149
5.4 任务实现 150
5.4.1 编写HTML文件 150
5.4.2 编写CSS文件 151
5.4.3 编写JavaScript脚本文件 153
5.5 任务拓展——设计基于类的
模态对话框效果 156
5.5.1 任务描述 156
5.5.2 任务要求 156
5.6 课后训练 156
【归纳总结】 156

单元6
设计网页轮播图效果 158
【单元目标】 158
【核心内容】 158
6.1 任务描述 159
6.2 任务分析与设计 159
6.2.1 动画原理 159
6.2.2 轮播效果的实现过程 159
6.3 关键知识和技术——JavaScript
动画 160
6.3.1 JavaScript动画实现技术 160
6.3.2 使用CSS绘图 163
6.3.3 使用canvas绘图 166
6.4 任务实现 168
6.4.1 编写HTML文件 168
6.4.2 编写CSS文件 169
6.4.3 编写JavaScript脚本文件 170
6.5 任务拓展——设计手风琴图片
切换效果 172
6.5.1 任务描述 172
6.5.2 任务要求 172
6.6 课后训练 173
【归纳总结】 173

单元7
设计表单校验效果 174
【单元目标】 174
【核心内容】 174
7.1 任务描述 175
7.2 任务分析与设计 175
7.2.1 分析表单校验任务 175
7.2.2 设计表单校验任务 175
7.3 关键知识和技术——正则表达式和
表单校验 176
7.3.1 认识正则表达式 176
7.3.2 正则表达式的使用方法 178
7.3.3 HTML5表单校验属性和事件 182
7.3.4 CSS3表单校验伪类选择器 184
7.3.5 JavaScript调用约束
校验API 185
7.4 任务实现 188
7.4.1 编写HTML文件 189
7.4.2 编写CSS文件 190
7.4.3 编写JavaScript脚本文件 192
7.5 任务拓展——设计登录表单校验
效果 196
7.5.1 任务描述 196
7.5.2 任务要求 196
7.6 课后训练 196
【归纳总结】 196

单元8
设计网页抽奖器 198
【单元目标】 198
【核心内容】 198
8.1 任务描述 199
8.2 任务分析与设计 199
8.2.1 抽奖算法 199
8.2.2 设计抽奖功能 199
8.3 关键知识和技术——JavaScript
数组 200
8.3.1 认识JavaScript数组 200
8.3.2 数组的基本操作 201
8.3.3 数组的函数式编程 205
8.4 任务实现 208
8.4.1 编写HTML文件 209
8.4.2 编写CSS文件 210
8.4.3 编写JavaScript脚本文件 212
8.5 任务拓展——设计手机号码
滚动抽奖器 215
8.5.1 任务描述 215
8.5.2 任务要求 215
8.6 课后训练 215
【归纳总结】 215

参考文献