目 录
项目1
抽奖页面——初识JavaScript 1
情境导入 1
学习目标 1
知识储备 2
任务1.1　认识JavaScript 2
1.1.1　JavaScript的发展概况和特性 2
1.1.2　JavaScript的应用场景 4
【素养进阶】阿特伍德定律 4
任务1.2　搭建JavaScript开发环境 4
1.2.1　支持JavaScript的浏览器 5
1.2.2　JavaScript代码编辑器 5
1.2.3　Visual Studio Code概述 5
【素养进阶】人工智能助手：工具而非替
代品 8
【能力提升】VS Code编辑器的使用技巧 8
任务1.3　开启JavaScript编程 8
1.3.1　JavaScript在HTML中的应用
方式 8
【任务实践1-1】弹出鼓励信息——内嵌式 9
1.3.2　JavaScript代码编写的基本规范 10
1.3.3　JavaScript的常用输入和输出
方式 11
【任务实践1-2】欢迎学习JavaScript——
简单输入和输出 11
1.3.4　在JavaScript中实现换行 12
1.3.5　JavaScript的注释 13
项目分析 13
资源准备说明 13
项目准备 13
项目实施 14
项目实训——输出个人信息 15
项目小结 16
巩固练习 16

项目2
健康体脂率速算器——JavaScript
程序设计基础 17
情境导入 17
学习目标 18
知识储备 18
任务2.1　使用变量和常量 18
2.1.1　标识符 18
2.1.2　关键字和保留字 18
2.1.3　变量的命名 19
【素养进阶】变量命名的艺术 19
2.1.4　变量和常量的声明和赋值 19
【任务实践2-1】求圆的周长——变量和常量的声明和赋值 20
2.1.5　变量的类型 22
【任务实践2-2】输出课程成绩——变量的
类型 22
2.1.6　变量的作用域 23
任务2.2　认识数据类型 23
2.2.1　数据类型概览 23
2.2.2　基本数据类型 23
【能力提升】模板字符串的简单用法 25
【能力提升】转义字符 25
【能力提升】null与undefined的差异 26
【任务实践2-3】确定变量类型——typeof 27
2.2.3　引用数据类型 27
【能力提升】BigInt类型 28
任务2.3　使用运算符 28
2.3.1　运算符的分类 28
【任务实践2-4】检查用户是否符合法定投票年龄要求——条件运算符 29
2.3.2　算术运算符 29
【任务实践2-5】计算购物账单——算术运
算符 30
【能力提升】使用ES6字面量模板简化字符
串的拼接操作 30
2.3.3　关系运算符 31
【任务实践2-6】购物比价小助手——关系
运算符 31
2.3.4　赋值运算符 32
【能力提升】解构赋值 32
【任务实践2-7】计算学生成绩总分——赋值运算符 33
2.3.5　逻辑运算符 33
【任务实践2-8】判断某年是否为闰年——
逻辑运算符 34
2.3.6　位操作运算符 34
【任务实践2-9】模拟朋友间交换秘密
数字——位操作运算符 35
2.3.7　运算符的优先级 35
任务2.4　认识表达式 36
【任务实践2-10】零花钱兑换——表达式 37
任务2.5　转换数据类型 37
2.5.1　隐式类型转换 37
2.5.2　显式类型转换 38
项目分析 38
项目实施 39
项目实训——验证用户输入的密码 39
项目小结 39
巩固练习 40

项目3
猜数字游戏——JavaScript流程
控制 41
情境导入 41
学习目标 41
知识储备 42
任务3.1　认识流程控制 42
【任务实践3-1】学生信息登记——顺序
结构 42
任务3.2　使用分支结构 43
3.2.1　单分支结构 43
3.2.2　双分支结构 44
【任务实践3-2】比较两个同学的成绩——
双分支语句 44
3.2.3　分支结构嵌套 45
【任务实践3-3】评定学生的考评等级——
分支结构嵌套 46
3.2.4　多分支结构（if…else if…else
语句） 47
【任务实践3-4】咖啡店优惠活动——多分支结构 49
【能力提升】深入理解分支结构中else的
含义 50
3.2.5　多分支结构（switch语句） 51
【任务实践3-5】判断今天是星期几——
switch语句 53
任务3.3　使用循环结构 53
3.3.1　while循环语句 54
【任务实践3-6】累加正整数序列——while
循环 54
3.3.2　do…while循环语句 55
【任务实践3-7】查找第一个能被5整除的
三位数——do…while循环 55
【素养进阶】循环与坚持的力量 56
3.3.3　for循环语句 56
【任务实践3-8】计算1～100自然数的累加和——for循环 56
【能力提升】其他for循环语句 57
3.3.4　循环语句的嵌套 57
【任务实践3-9】输出直角三角形图案——
循环嵌套语句 57
任务3.4　探究跳转语句 58
【任务实践3-10】正数累加——continue和
break语句的应用 58
项目分析 60
项目实施 60
项目实训——加法答题小游戏 61
项目小结 63
巩固练习 63

项目4
计算个人所得税——JavaScript
函数 64
情境导入 64
学习目标 65
知识储备 65
任务4.1　认识函数 65
【任务实践4-1】展示个人信息——函数的
使用 65
任务4.2　使用预定义函数 66
4.2.1　消息对话框函数 66
【任务实践4-2】新学期寄语——警示
对话框 67
【任务实践4-3】服务协议确认——确认
对话框 67
【任务实践4-4】诗词接力——提示
对话框 68
4.2.2　数值处理函数 69
【任务实践4-5】数据有效性验证——
isNaN()和isFinite()函数的使用 69
【任务实践4-6】数据格式化——parseFloat()
和parseInt()函数的使用 70
4.2.3　字符串处理函数 71
【任务实践4-7】计算数学表达式——
eval()函数 72
任务4.3　使用自定义函数 72
4.3.1　声明自定义函数 73
【任务实践4-8】计算商品总价——函数
定义 73
4.3.2　调用自定义函数 74
【任务实践4-9】计算商品总价——直接使用函数名调用函数 74
【任务实践4-10】计算商品总价——通过
超链接调用函数 75
4.3.3　函数的参数和返回值 75
【任务实践4-11】计算任意商品总价——
有参函数 76
【任务实践4-12】计算两个成绩的平均值——
return语句的简单应用 77
4.3.4　函数作用域与块级作用域的对比 77
【任务实践4-13】输出变量的值——变量的
作用域 78
4.3.5　函数的嵌套 79
【任务实践4-14】计算累加和——函数嵌套
的应用 79
任务4.4　运用函数进阶 80
4.4.1　函数表达式 80
4.4.2　匿名函数 80
4.4.3　箭头函数 81
【任务实践4-15】绘制星号三角形图案——
箭头函数 82
【能力提升】闭包函数 83
项目分析 83
项目实施 83
项目实训——简易计算器 85
项目小结 85
巩固练习 86

项目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　面向对象的核心概念 90
5.1.4　面向对象的特征 91
5.1.5　JavaScript的对象 91
任务5.2　使用内置对象 92
5.2.1　Object构造函数与原型对象 92
5.2.2　Date对象 93
【任务实践5-3】以用户友好的方式显示当前
日期——Date对象方法 95
【任务实践5-4】计算已经度过的时光并给出
温馨寄语——getTime()方法 96
5.2.3　String对象 96
【任务实践5-5】提取数字——charAt()
方法 99
【任务实践5-6】反转短句并转换为大写形式
输出——toUpperCase()方法 101
【能力提升】startsWith()、endsWith()、
includes()方法的进阶用法 104
5.2.4　Array对象 104
【任务实践5-7】输出今天是星期几——
Array对象 105
【能力提升】使用解构赋值为数组元素
赋值 106
【任务实践5-8】输出十二生肖——for
循环 107
【任务实践5-9】输出十二生肖——for…in
循环 108
【任务实践5-10】合并学习小组——concat()
方法 109
【任务实践5-11】成绩升序排列——sort()
方法 110
5.2.5　Math对象 111
【任务实践5-12】计算圆的面积——Math
对象属性 111
【任务实践5-13】求圆周率的4次方——
Math.round()方法 112
【任务实践5-14】模拟抽奖——
Math.random()方法 113
5.2.6　Number对象 114
【任务实践5-15】探索JavaScript能处理的数值范围——利用Number对象 114
任务5.3　使用自定义对象 115
5.3.1　使用Object()构造函数创建对象 115
【任务实践5-16】创建学生对象——Object()
构造函数 115
5.3.2　使用字面量创建对象 116
【任务实践5-17】创建学生对象——
字面量 116
5.3.3　使用构造函数创建对象 117
【任务实践5-18】创建学生对象——构造
函数 118
【能力提升】ES6的类语法 119
5.3.4　使用Function对象定义方法 120
【任务实践5-19】创建方法——显式创建
Function对象 120
【任务实践5-20】创建方法——隐式创建
Function对象 121
5.3.5　使用原型对象定义方法 121
【任务实践5-21】添加共享方法——原型
对象 121
【能力提升】原型方法的动态性 122
5.3.6　使用for…in循环访问对象的
属性 122
【任务实践5-22】遍历对象的属性——
for…in循环 123
5.3.7　原型链与继承机制 124
【任务实践5-23】Student类继承自Person
类——继承 124
项目分析 126
项目实施 126
项目实训——模拟随机选人 127
项目小结 128
巩固练习 129

项目6
商品放大镜——DOM对象 130
情境导入 130
学习目标 130
知识储备 131
任务6.1　探究DOM对象 131
6.1.1　DOM概述 131
6.1.2　核心DOM概览 131
【任务实践6-1】枚举节点对象——核心
DOM对象 132
6.1.3　文档对象 132
任务6.2　认识HTML DOM 132
6.2.1　DOM树 133
6.2.2　HTML DOM节点类型 133
【任务实践6-2】查看节点类型——HTML
DOM节点类型 134
6.2.3　HTML DOM对象的分类 134
任务6.3　操作元素 136
6.3.1　获取HTML文档元素 136
【任务实践6-3】创建简单时钟——获取
DOM元素 137
6.3.2　获取元素集合 138
【任务实践6-4】统计页面标签名——DOM
元素集合 138
【任务实践6-5】购物车商品全选功能——
获取元素集合 139
【能力提升】循环遍历 140
6.3.3　改变元素样式 141
【任务实践6-6】新闻列表隔行换色——设置
元素样式 141
【能力提升】高效修改多个元素的样式 142
6.3.4　改变元素内容 143
【任务实践6-7】显示当前日期和时间——
改变元素内容 143
6.3.5　改变元素位置和尺寸 144
【任务实践6-8】实现商品放大镜移动
效果——offset系列属性 145
任务6.4　操作DOM节点 147
6.4.1　节点关系 147
6.4.2　创建和添加DOM节点 150
【任务实践6-9】列表元素移动——移动
节点 151
6.4.3　复制和替换DOM节点 152
【任务实践6-10】复制表单对象——复制
节点 152
【任务实践6-11】替换列表内容——替换
节点 153
6.4.4　删除DOM节点 154
【任务实践6-12】优化页面布局——删除
特定节点 154
项目分析 155
项目实施 156
项目实训——全国人口普查数据的折叠
菜单 158
项目小结 159
巩固练习 159

项目7
故宫轮播图——BOM对象 161
情境导入 161
学习目标 161
知识储备 162
任务7.1　认识BOM对象 162
7.1.1　BOM对象概述 162
7.1.2　Window对象详解 162
【任务实践7-1】实时更新的时钟——
定时器 165
【任务实践7-2】打开/关闭新窗口——open()/
close()方法 166
【任务实践7-3】动态调整窗口大小——
resizeTo()和resizeBy()方法 168
【任务实践7-4】灵活改变窗口位置——
moveTo()和moveBy()方法 170
任务7.2　使用Screen对象 171
【任务实践7-5】显示当前屏幕的信息——
Screen对象 172
【能力提升】Screen对象的应用 173
任务7.3　使用Navigator对象 173
【任务实践7-6】显示当前浏览器和操作系统
信息——Navigator对象 173
任务7.4　使用Location对象 174
【任务实践7-7】登录成功，自动跳转——
Location对象 175
任务7.5　使用History对象 176
【任务实践7-8】页面“前进”和“后退”——
History对象 176
项目分析 177
项目实施 178
【能力提升】轮播图的Swiper插件 180
项目实训——火箭发射动画 181
项目小结 181
巩固练习 182

项目8
滑块验证码——事件和事件处理 184
情境导入 184
学习目标 184
知识储备 185
任务8.1　认识事件 185
8.1.1　事件的基本概念 185
8.1.2　事件处理 186
【任务实践8-1】天干地支——行内绑定 189
【任务实践8-2】天干地支——动态处理 190
【任务实践8-3】天干地支——事件监听 191
【能力提升】事件委托 192
任务8.2　认识Event对象 192
8.2.1　Event对象 192
【任务实践8-4】显示触发事件类型——
Event对象 192
8.2.2　Event对象的常用属性和方法 193
【任务实践8-5】探索事件坐标——Event
对象的属性 193
任务8.3　键盘事件 194
8.3.1　键盘事件类型 194
8.3.2　处理键盘事件 195
【任务实践8-6】使用键盘控制图片移动——
处理字符键 196
【任务实践8-7】使用方向键改变图片大小——
处理非字符键 198
【任务实践8-8】取消Ctrl+A组合键的全选
功能——处理组合键 199
任务8.4　鼠标事件 200
8.4.1　鼠标事件类型 200
【任务实践8-9】鼠标指针进入/离开切换
图片——鼠标事件 201
8.4.2　处理鼠标事件 202
【任务实践8-10】识别被按下的鼠标按键——
Event对象的button属性 202
【任务实践8-11】雪花图片跟随鼠标指针移
动的效果——鼠标事件的坐标属性 203
任务8.5　页面事件 204
8.5.1　页面加载事件 205
【任务实践8-12】页面加载时调整图片
大小——DOMContentLoaded
事件 205
8.5.2　resize事件 206
【任务实践8-13】改变浏览器窗口大小时
弹出提示——resize事件 206
任务8.6　文本编辑事件 207
【任务实践8-14】禁止密码框中的复制、剪切
和粘贴操作——文本编辑事件 207
任务8.7　表单事件 209
8.7.1　表单和表单元素 209
【任务实践8-15】创建会员注册页面——
表单元素 212
8.7.2　访问表单和表单元素 213
【任务实践8-16】随机生成指定位数的
验证码——访问表单元素 215
8.7.3　操作表单对象 216
【任务实践8-17】验证表单合法性——
表单验证 219
项目分析 220
项目实施 220
项目实训——选项卡切换 223
项目小结 224
巩固练习 224

项目9
异步获取学生信息——Ajax+Node.js
技术 226
情境导入 226
学习目标 226
知识储备 227
任务9.1　认识Ajax 227
9.1.1　创建XMLHttpRequest对象 227
9.1.2　XMLHttpRequest对象的常用
属性 227
9.1.3　XMLHttpRequest对象的常用
方法 228
9.1.4　发送Ajax请求 228
【任务实践9-1】读取文本文件内容——
Ajax异步获取文件 229
【能力提升】jQuery实现Ajax 230
任务9.2　Ajax处理数据 231
9.2.1　Ajax处理文本数据 231
【任务实践9-2】读取HTML文件——
Ajax处理文本数据 231
9.2.2　Ajax处理XML格式数据 232
【任务实践9-3】读取学生信息——通过
Ajax异步获取XML格式数据 233
9.2.3　Ajax处理JSON格式数据 234
【任务实践9-4】读取信息——通过Ajax
异步获取JSON格式数据 234
任务9.3　构建Node.js服务器环境 236
9.3.1　搭建Node.js开发环境 236
9.3.2　Node.js模块 237
9.3.3　Node.js项目依赖管理 241
9.3.4　Node.js服务器开发 243
9.3.5　Express框架 246
9.3.6　Express中间件 247
9.3.7　Express模块化路由 250
9.3.8　使用Express接收请求参数 252
任务9.4　Ajax与Node.js服务器数据
交互 255
9.4.1　获取服务器的响应 255
9.4.2　传递请求参数 256
项目分析 259
项目实施 260
项目实训——实时天气查询 262
项目小结 262
巩固练习 263

项目10
综合项目——学生成绩查询 264
情境导入 264
知识储备 264
任务　使用Node.js操作数据库 264
项目分析 267
项目实施 267
项目小结 270