项目1
抽奖页面——初识JavaScript 1
情境导入 1
项目目标 1
知识储备 2
任务1.1 认识JavaScript 2
1.1.1 JavaScript的发展概况和特点 2
1.1.2 JavaScript的应用场景 4
【任务实践1-1】简单JavaScript——认识JavaScript 5
任务1.2 开启JavaScript编程 6
1.2.1 支持JavaScript的浏览器 6
1.2.2 代码编辑器 6
1.2.3 JavaScript在HTML中的应用 6
【任务实践1-2】希望你可以努力成为自己想要的样子——内嵌式 7
1.2.4 JavaScript常用的输入输出方式 9
【任务实践1-3】欢迎学习JavaScript——简单输入输出 10
1.2.5 JavaScript的注释 10
项目分析 11
项目实施 11
项目实训——输出个人信息 13
小结 14
拓展阅读——阿特伍德定律 14
习题 14


项目2
体脂率计算器——JavaScript程序设计基础 15
情境导入 15
项目目标 16
知识储备 16
任务2.1 使用变量 16
2.1.1 标识符 16
2.1.2 关键字和保留字 16
2.1.3 变量的命名 17
2.1.4 变量的声明和赋值 18
【任务实践2-1】求圆的周长——var和const 19
2.1.5 变量的类型 20
【任务实践2-2】输出课程成绩——变量声明和变量赋值 20
2.1.6 变量的作用域 21
任务2.2 认识数据类型 21
2.2.1 数据类型分类 21
2.2.2 基本数据类型 21
2.2.3 引用数据类型 22
2.2.4 特殊数据类型 22
2.2.5 数据类型判断 24
【任务实践2-3】测试变量类型——
typeof 24
2.2.6 数据类型转换 25
任务2.3 使用运算符 26
2.3.1 算术运算符 27
【任务实践2-4】计算账单金额——
算术运算符 27
2.3.2 关系运算符 28
【任务实践2-5】比较两个数的大小——
关系运算符 28
2.3.3 赋值运算符 29
【任务实践2-6】变量赋值——
赋值运算符 30
2.3.4 逻辑运算符 31
【任务实践2-7】判断某年是否为闰年——逻辑运算符 31
2.3.5 条件运算符 32
【任务实践2-8】判断是否成年——
条件运算符 32
2.3.6 位操作运算符 32
【任务实践2-9】交换两个变量的值——
位操作运算符 33
2.3.7 运算符优先级 34
任务2.4 认识表达式 34
【任务实践2-10】人民币和美元换算——
表达式 34
项目分析 35
项目实施 35
项目实训——验证用户输入的密码 35
小结 36
扩展阅读——symbol类型 36
习题 37

项目3
猜数字游戏——JavaScript流程
控制 39
情境导入 39
项目目标 40
知识储备 40
任务3.1 认识流程控制 40
【任务实践3-1】显示个人信息——
顺序结构 40
任务3.2 使用分支结构 41
3.2.1 单分支结构（if语句） 41
3.2.2 双分支结构（if…else语句） 42
【任务实践3-2】判断最大值——双分支
语句 42
3.2.3 分支结构（if…else语句）嵌套 43
【任务实践3-3】评定成绩等级——分支
结构嵌套 44
3.2.4 多分支结构（if…else if…else
语句） 45
【任务实践3-4】分时问候——多分支
结构 47
3.2.5 多分支结构（switch语句） 48
【任务实践3-5】判断今天是星期几——switch语句 50
任务3.3 使用循环结构 51
3.3.1 while循环语句 51
【任务实践3-6】求1到100的奇数累加和
——while循环 52
3.3.2 do…while循环语句 53
【任务实践3-7】求1到100的偶数累加和——do…while循环 53
3.3.3 for循环语句 54
【任务实践3-8】求1到100的累加和——for循环 54
3.3.4 循环语句嵌套 55
【任务实践3-9】输出直角三角形图案——循环嵌套语句 55
3.3.5 break和continue语句 56
【任务实践3-10】数值累加——continue和break 56
项目分析 57
项目实施 58
项目实训——答题小游戏 59
小结 60
扩展阅读——其他for循环语句 60
习题 61
项目4
计算个人所得税——JavaScript
函数 62
情境导入 62
项目目标 63
知识储备 63
任务4.1 认识函数 63
【任务实践4-1】输出个人信息——函数的
应用 63
任务4.2 使用预定义函数 64
4.2.1 消息对话框函数 64
【任务实践4-2】新学期寄语——警示
对话框 65
【任务实践4-3】确定诗句作者——确认
对话框 65
【任务实践4-4】诗词对答——提示
对话框 66
4.2.2 数值处理函数 67
【任务实践4-5】判断数据是否为数字——
isNaN()函数 68
【任务实践4-6】格式化数据——
parseFloat()和parseInt()函数 68
4.2.3 字符串处理函数 69
【任务实践4-7】计算表达式的值——
eval()函数 70
任务4.3 使用自定义函数 70
4.3.1 声明自定义函数 71
【任务实践4-8】计算商品总价——函数
定义 71
4.3.2 调用自定义函数 72
【任务实践4-9】计算商品总价——使用
函数名调用函数 72
【任务实践4-10】计算商品总价——使用
超链接调用函数 73
4.3.3 函数的参数和返回值 74

【任务实践4-11】计算任意商品总价——
有参函数 74
【任务实践4-12】求两个数的最大数——
return语句 75
4.3.4 函数变量的作用域 77
【任务实践4-13】输出变量的值——变量
的作用域 77
4.3.5 函数的嵌套 78
【任务实践4-14】求1+（1+2）+（1+2+3）+…+（1+2+…+n）的值——函数嵌套
78
任务4.4 运用函数进阶 79
4.4.1 函数表达式 79
4.4.2 匿名函数 80
4.4.3 箭头函数 80
【任务实践4-15】使用箭头函数实现不同
层数的三角形图案——箭头函数
81
项目分析 82
项目实施 82
项目实训——简易计算器 83
小结 84
扩展阅读——Java Script中的闭包函数
84
习题 85
项目5
毕业倒计时——JavaScript对象
87
情境导入 87
项目目标 87
知识储备 88
任务5.1 认识对象 88
5.1.1 认识面向过程与面向对象 88
【任务实践5-1】模拟洗衣机洗衣服——
面向过程 88

【任务实践5-2】模拟洗衣机洗衣服——
面向对象 89
5.1.2 对象的基本概念 90
5.1.3 JavaScript的对象框架 92
任务5.2 使用内置对象 92
5.2.1 Object对象类 93
5.2.2 Date对象类 93
【任务实践5-3】显示指定格式日期——
Date对象方法 95
【任务实践5-4】计算已经度过的时光——getTime()方法 96
5.2.3 String对象类 97
【任务实践5-5】提取数字——charAt()
方法 99
【任务实践5-6】将字符串反向并转换为大写
形式——toUpperCase()方法 102
5.2.4 Array对象类 105
【任务实践5-7】输出今天是星期几——
Array对象 107
【任务实践5-8】输出十二生肖——
for循环 109
【任务实践5-9】输出十二生肖——
for…in语句 110
【任务实践5-10】数组连接——concat()
方法 111
【任务实践5-11】数组元素升序排序——sort()方法 113
5.2.5 Math对象类 114
【任务实践5-12】计算圆的面积——Math对象属性 114
【任务实践5-13】求圆周率的4次方——Math.round()方法 115
【任务实践5-14】模拟抽奖过程——Math.random()方法 116
5.2.6 Number对象类 117
【任务实践5-15】输出JavaScript能够处理的数值区间——Number对象 117

任务5.3 使用自定义对象 118
5.3.1 通过Object对象创建对象 118
【任务实践5-16】创建对象——Object
对象类 119
5.3.2 通过字面量对象创建对象 119
【任务实践5-17】创建对象——字面量
对象 119
5.3.3 通过构造函数创建对象 120
【任务实践5-18】创建对象——构造函数
123
5.3.4 通过Function对象定义方法
124
【任务实践5-19】创建方法——显示创建Function对象 125
【任务实践5-20】创建方法——隐式创建Function对象 126
5.3.5 通过原型对象定义方法 126
【任务实践5-21】访问共享方法——原型
对象 126
5.3.6 通过for…in语句访问对象的属性
127
【任务实践5-22】遍历对象的属性——
for…in语句 127
5.3.7 通过with语句访问对象的属性
和方法 128
【任务实践5-23】输出当前日期——with
语句 129
5.3.8 继承 129
【任务实践5-24】子类拥有父类的属性和
方法——继承 130
项目分析 131
项目实施 131
项目实训——模拟随机选人 133
小结 133
扩展阅读——ES6新增面向对象 134
习题 134


项目6
商品放大镜——DOM对象 136
情境导入 136
项目目标 137
知识储备 137
任务6.1 认识DOM对象 137
6.1.1 DOM概述 137
6.1.2 核心DOM 137
【任务实践6-1】枚举Node对象——
核心DOM对象 138
6.1.3 Document对象 139
任务6.2 认识HTML DOM 139
6.2.1 DOM树 139
6.2.2 HTML DOM节点类型 140
【任务实践6-2】节点类型——HTML
DOM节点类型 140
6.2.3 HTML DOM对象分类 141
任务6.3 操作元素 142
6.3.1 获取HTML文档元素 142
【任务实践6-3】显示实时时间——document.getElementById()
方法 143
6.3.2 获取元素的集合对象 145
【任务实践6-4】显示文档的所有标签——DOM集合对象 145
【任务实践6-5】全选购物车商品——document.querySelectorAll()
方法 147
6.3.3 改变元素样式 147
【任务实践6-6】隔行换色——设置元素
样式 148
6.3.4 改变元素内容 149
【任务实践6-7】显示当前日期和时间——innerHTML、innerText和textContent 150
6.3.5 改变元素位置和大小 151
【任务实践6-8】商品放大镜的移动——offset系列属性 152
任务6.4 操作节点 154
6.4.1 节点关系 154
6.4.2 创建和添加节点 158
【任务实践6-9】列表移动——移动节点
159
6.4.3 复制和替换节点 160
【任务实践6-10】复制表单——复制节点
160
【任务实践6-11】替换内容——替换节点
162
6.4.4 删除节点 163
【任务实践6-12】删除水平线——删除节点 163
项目分析 164
项目实施 165
项目实训——各地人口数据的折叠菜单
167
小结 168
扩展阅读——循环遍历 168
习题 169

项目7
故宫轮播图——BOM对象 170
情境导入 170
项目目标 171
知识储备 171
任务7.1 认识BOM 171
【任务实践7-1】实时变化的时钟——
定时器 174
【任务实践7-2】打开/关闭新窗口——
open()方法 176
【任务实践7-3】改变窗口大小——resizeTo ()和resizeBy()方法 177

【任务实践7-4】改变窗口位置——moveTo()和moveBy()方法 179
任务7.2 使用Screen对象 181
【任务实践7-5】显示当前屏幕分辨率和
可用区域——Screen对象 181
任务7.3 使用Navigator对象 182
【任务实践7-6】显示当前浏览器和操作
系统信息——Navigator对象 182
任务7.4 使用Location对象 183
【任务实践7-7】显示当前窗口占据显示器的区域大小——Navigator对象 184
【任务实践7-8】登录成功，自动跳转——Location对象 185
任务7.5 使用History对象 186
【任务实践7-9】页面“前进”和“后退”——History对象 187
任务7.6 使用Document对象 188
【任务实践7-10】显示浏览某页面的
时间——Document对象 188
项目分析 190
项目实施 190
项目实训——北斗三号发射动画 192
小结 193
扩展阅读——轮播图的Swiper插件
193
习题 194

项目8
滑块验证码——事件和事件处理
196
情境导入 196
项目目标 196
知识储备 197
任务8.1 认识事件 197
8.1.1 事件的基本概念 197
8.1.2 事件处理 198
【任务实践8-1】天干地支——行内绑定
200
【任务实践8-2】天干地支——动态绑定
202
【任务实践8-3】天干地支——事件监听
203
任务8.2 认识事件对象 204
8.2.1 Event对象 205
【任务实践8-4】显示触发事件——Event对象 205
8.2.2 Event对象常用属性和方法 206
【任务实践8-5】显示触发事件名称——Event对象的属性 206
任务8.3 处理键盘事件 207
8.3.1 键盘事件 207
8.3.2 处理键盘事件 207
【任务实践8-6】按键以上、下、左、右
移动图片——处理字符键 210
【任务实践8-7】使用方向键改变图片
大小——处理非字符键 212
【任务实践8-8】取消组合键的全选功能
——处理组合键 213
任务8.4 处理鼠标事件 214
8.4.1 鼠标事件 215
【任务实践8-9】鼠标滑过显示不同图形
——鼠标移入和移出 215
8.4.2 处理鼠标事件 216
【任务实践8-10】判断鼠标按键——Event对象button属性 216
【任务实践8-11】跟随鼠标移动的雪花
——鼠标事件的位置属性 217
任务8.5 处理页面事件 218
8.5.1 页面加载 219
【任务实践8-12】网页加载时缩小图片——onload事件 220
8.5.2 页面大小事件 221
【任务实践8-13】改变浏览器大小时弹出
提示——onresize事件 221
任务8.6 处理文本编辑事件 222
【任务实践8-14】禁止使用复制、粘贴方式
输入密码——复制、剪切和粘贴操作 222
任务8.7 处理表单事件 223
8.7.1 表单和表单对象 224
【任务实践8-15】会员注册表单——
表单元素 226
8.7.2 访问表单和表单元素 227
【任务实践8-16】随机生成指定位数的
验证码——访问表单元素 230
8.7.3 操作表单对象 232
【任务实践8-17】验证表单合法性——
表单验证 236
项目分析 237
项目实施 238
项目实训——选项卡切换 241
小结 241
扩展阅读——事件流 242
习题 242

项目9
异步获取用户信息——AJAX技术
244
情境导入 244
项目目标 244
知识储备 245
任务9.1 认识AJAX 245
9.1.1 XMLHttpRequest对象 245
9.1.2 XMLHttpRequest对象的常用
属性 246
9.1.3 XMLHttpRequest对象的常用
方法 246
9.1.4 AJAX请求 247
【任务实践9-1】读取文本文件信息——AJAX异步获取文件 248
任务9.2 AJAX处理数据 249
9.2.1 AJAX处理文本数据 250
【任务实践9-2】读取“健走的好处”页面——AJAX异步获取HTML文件 250
9.2.2 AJAX处理XML数据 251
【任务实践9-3】读取学生信息——AJAX异步获取XML数据 252
9.2.3 AJAX处理JSON数据 253
【任务实践9-4】读取信息——AJAX异步获取JSON文件数据 254
任务9.3 AJAX与服务器数据交互 255
9.3.1 与PHP服务器交互 255
【任务实践9-5】验证表单用户名（一）
——AJAX访问PHP服务器 258
9.3.2 与Java服务器交互 260
【任务实践9-6】验证表单用户名（二）
——AJAX访问Java后台服务器 263
项目分析 265
项目实施 266
项目实训——获取宿舍学生信息 268
小结 269
扩展阅读——jQuery 实现AJAX 269
习题 270

项目10
综合项目——学生成绩查询 271
情境导入 271
项目目标 271
项目分析 272
项目实施 272
小结 280