JavaScript前端开发程序设计项目式教程（微课版 第2版）

　　JavaScript是一种广泛应用于Web前端开发的脚本语言，能够为网页添加各式各样的动态效果，为用户提供流畅、美观的浏览效果，具有简单、易学的特点。为了加深读者对知识的理解，本书采用项目驱动教学的思路编写，内容包括9个小项目和1个综合项目：抽奖页面——初识JavaScript、体脂率计算器——JavaScript程序设计基础、猜数字游戏——JavaScript流程控制、计算个人所得税——JavaScript？函数、毕业倒计时——JavaScript？对象、商品放大镜——DOM对象、故宫轮播图——BOM对象、滑块验证码——事件和事件处理、异步获取用户信息——AJAX技术、综合项目——学生成绩查询。各个项目通过情境导入引出教学核心内容，明确教学任务。本书在全面系统地讲解知识的基础上，配备精彩的任务实践，有助于读者对知识的理解。本书可以作为普通高等学校、高职高专院校计算机相关专业的教材，也可以作为JavaScript爱好者及相关技术人员自学的参考资料。

　　李玉臣老师，潍坊职业学院产学研合作办公室主任，潍坊金贝尔软件工程有限公司前端开发技术首席顾问，校企合作软件开发专业负责人，Web前端开发技术JavaScript课程开发者，Web前端开发教学资源库主持人，教育部首批“1+X”Web前端开发职业技能等级证书试点学院负责人。

项目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-7】显示当前窗口占据显示器的区域大小——Navigator对象　　183
任务7．4 使用Location对象　　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