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

图书标准信息

• 作者 李玉臣 臧金梅
• 出版社 人民邮电出版社
• 出版时间 2022-06
• 版次 2
• ISBN 9787115582119
• 定价 59.80元
• 装帧 其他
• 开本 其他
• 纸张 胶版纸
• 页数 280页
• 字数 475千字

【内容简介】

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