JavaScript是一种轻量级、解释型编程语言，也是深受广大编程者喜爱的、能够实现跨领域开发的“多面能手”。《JavaScript迭代渐进式前端开发实践》以前端开发为应用领域，精选《成绩转换系统》《验证码及其应用》《网站换肤》《用户注册与数据提交》《打地鼠游戏》五个实战主题，通过多版迭代，生动有趣地介绍了JavaScript语言和软件开发的核心知识，包括JavaScript编程基础、数组、函数、对象、DOM、正则表达式与数据交互、BOM及第三方工具、ES6等。通过本书的学习，读者不仅能在知识层面有所收获，而且可以潜移默化地提高软件开发能力和个人综合素养。本书可以作为高职高专、应用型本科、培训机构JavaScript语言课程的教材，也可作为Web前端开发人员的参考书，以及JavaScript语言爱好者的自学用书。

?素养引领，项目育人?重构知识，打破困境?实战导向，迭代渐进?掌握语言，学会编程?一书多用，适配灵活

前? 言PREFACE

JavaScript是一种轻量级、免费、开源且跨平台的脚本语言，功能强大而灵活。作为现代Web开发的基石语言，JavaScript已经连续多年位居“使用最广泛的编程语言”前列。它不仅驱动着前端领域90%以上的动态网页交互，支撑着React、Vue等主流框架的生态繁荣，而且成功跻身于服务端开发、桌面开发、嵌入式开发等多个领域，堪称“一次学习，多端应用”的典范。JavaScript的亮眼表现，使得许多高校纷纷为计算机类专业开设JavaScript程序设计相关课程，并将其列为核心专业课程，尤其是软件开发类专业。
《JavaScript迭代渐进式前端开发实践》以前端应用领域为研究对象，主要介绍使用JavaScript语言进行Web前端开发的相关知识，同时融入一些软件开发的相关常识、基本思想、思维技巧，以及程序员职业道德、工匠精神等，本书的宗旨是：不仅要教会读者JavaScript语言，更要教会读者如何编程，以及如何成为一名的程序员。
我本科和研究生均就读于计算机应用专业，热爱教育，喜欢编程，是一名不折不扣的双师型教师。二十多年的从教经历和多家大、中、小型企业项目研发经历，使我十分了解软件行业的人才需求，也十分了解学生的学情和一般计算机语言学习者的“痛点”。在历经十余载的JavaScript相关课程教学沉淀后，我决定重构JavaScript知识体系，编写这部教材，精选经典案例与实战高频内容，汇集成册，以期能够符合读者学习和认知规律，贴近实战。
本书特点
1. 素养引领，项目育人
软件行业作为赋能各行各业的“数字生产力”，其增长势头强劲。工业和信息化部发布的数据显示，2024年，我国软件业务收入137 276亿元，同比增长10.0%，软件业利润总额16 953亿元，同比增长8.7%，这一数据凸显了软件行业对国民经济发展的关键推动作用，不仅助力技术进步，还为就业和提供了新的机会。优质软件犹如清泉，润泽社会；而劣质软件乃至病毒、木马，则如同毒瘤，贻害无穷。党的二十大报告强调：“育人的根本在于立德。”一名的软件从业者需要拥有炽热的爱国情怀、高尚的道德情操、正确的价值取向和精益求精的工匠精神，并坚守遵纪守法的行为准则。本书将这些素养元素巧妙地融于项目之中，引导读者树立正确的人生观，争当的IT人。
2. 重构知识，打破困境
本书通过重构JavaScript知识体系，巧妙地将各个知识点融入实战场景，打破学生“似懂非懂，学而不会”的困境。学习知识旨在应用，所以，为了解决实际问题而组织知识，而不是为了编写者方便而堆砌知识，这才是编程类书籍的编写奥义所在！
那么在知识点安排上，如何既科学合理又兼顾读者的学习和认知规律呢？在翻阅了大量书籍之后，我终于找到了答案。清华大学出版社经典计算机语言书籍《汇编语言》(王爽著)的知识屏蔽与线索化创作理念，点亮了我的思路，使我豁然开朗，茅塞顿开。
零散的知识点难以记忆并付诸实践，因此，本书以项目为载体，通过一条条清晰的需求线索，将知识点紧密串联，使读者既能掌握知识，又能学会应用，一举两得；每个知识点学习和理解难度有所不同，有些知识点放在前面很难理解透彻，放在后面就水到渠成，易于理解。因此，我根据知识点自身的特性对其进行组织和安排。在具体的知识介绍和例题分析中，按照“知识屏蔽”的原则，所有用于解决问题的知识，必须是已经讲解过的知识，尽量避免使用后面还没介绍的知识，以减轻读者的学习困扰。一步一步，循序渐进。五大实战主题的先后顺序安排，也是按照难度层层递进，而非平级罗列，充分考虑读者的学习特点和认知规律。
3. 实战导向，迭代渐进
所谓实战导向，是指教材中的主题实战气息浓厚。既然学习就是为了应用，那就干脆把企业项目中的真实内容直接拿来或适当裁剪后当作知识载体，尽量缩小和填补课堂与职场之间的差距。
事实上，本书就是这样做的，小到知识学习环节中的例题，大到五大实战主题，再到课后编程实践题。模拟“百度搜索”效果的例题，源自我研发语料库系统时检索数据的真实案例；“图片能放大能缩小”是我为企业研发项目时客户的真实需求；而删除数据前确认弹窗、注册账户合法性验证、动态地址配置、验证码等案例，更是实战味道满格，稍加修改甚至不用修改就可以拿到企业级项目中使用。课后习题中的电子相册、秒表DIY、倒计时、音乐播放器等，不仅能够激发读者的创造潜能，提高读者的实战能力，而且在生活中也能直接使用，“学以致用”的理念得到了充分体现。
对于初学者而言，在学习语言的同时掌握企业级项目模块的开发，这似乎是个遥不可及的梦想。为了这个难题，本书创造性地将难度分解，使用“迭代渐进”的编写模式：每个大的实战主题都分为三版迭代，每迭代一版，会增加若干个维度的知识点和难度级别，对应的代码功能也越来越强大。从简约原型版到基本完善版，再到终极应用版，就像是沿“之”字形路爬山一样，每一步不是特别累，却能轻松登顶！看似遥不可及的目标，被努力与智慧化解！读者能否达到预期的效果呢？我们拭目以待！
4.掌握语言，学会编程
本书的编写目标不仅是让读者掌握使用JavaScript语言编写前端项目的基本知识和常用技巧，更是让读者学会如何编写程序。因此，读者将在本书中发现例题分析、编程引导，以及软件开发相关的常识、程序员职业素养、经典编程思想和实战经验小贴士等丰富内容，这些内容均为读者掌握通用编程技能提供有力支持。
了解“软件工程”的读者会发现，本书每一个实战场景的内容安排都有一根隐藏的主线，那就是软件开发生命周期：“任务描述”对应“需求分析”；“执行效果图”对应“概要设计”；“技术分析”对应“详细设计”；“编程实现”对应“编码实现”；“多版迭代”对应“测试阶段”和“维护阶段”。这种“润物细无声”的方式，可以让读者在潜移默化中得到专业的技术熏陶。
5.一书多用，适配灵活
为了兼具编程作品集的实用性和传统教材的系统性，本书配备一主一辅双重目录，前者以场景的实现环节为索引对象，后者则以具体的知识点为呈现目标。高校学生可以将本书用作教材，前端开发人员可以将本书用作参考书，JavaScript语言爱好者可以将本书用作自学书籍。
本书作为教材使用时，可根据实际情况灵活安排教学内容：课时够用或学情良好时，可进行完整学习；课时紧张或学情欠佳时，可采用选择性组合学习，如每个实战主题V1.0实现+V2.0、V3.0知识点学习。这种方式灵活适配多种学情，进可攻，退可守，对柔性分层教学和因材施教非常友好。
配套资源与答疑服务
为了方便读者学习和教师教学，本书提供教学大纲、教学课件、电子教案、教学进度表、课后习题参考答案、模拟试卷、程序源代码等配套教学资源，可扫描下列二维码或书中二维码获取。如果读者在本书阅读过程中发现问题或者存有疑问，可发邮件到我的邮箱：71304690@qq.com。
鸣谢
在本书编写过程中，北京楷斯科技有限公司技术总监马翔和清华大学出版社编辑王定对本书样张给予了中肯的建议，河北软件职业技术学院张莹、胡金扣、闫绍惠、杨宁侠、崔秀艳等老师参与了本书电子资源制作、辅助资源建设及后续课程服务。我的家人与朋友们同样对本书的编写给予了极大的支持与理解，他们慷慨地腾出自己的宝贵时间去分担我的其他工作，让我得以心无旁骛地雕琢和完善本书内容，在此，

目? 录CONTENTS

实战主题 1 成绩转换系统 001
1.1　《成绩转换系统V1.0》需求与技术分析003
1.1.1　《成绩转换系统V1.0》任务描述003
1.1.2　《成绩转换系统V1.0》任务效果003
1.1.3　《成绩转换系统V1.0》技术分析003
1.2　《成绩转换系统V1.0》知识学习004
1.2.1　JavaScript简介004
1.2.2　JavaScript历史004
1.2.3　JavaScript标准与组成005
1.2.4　JavaScript在浏览器上的执行过程006
1.2.5　编程IDE：VSCode006
1.2.6　在网页中使用JavaScript的方法007
1.2.7　JavaScript编程常识与命名规范007
1.2.8　JavaScript变量、常量及作用域009
1.2.9　JavaScript数据类型013
1.2.10　JavaScript运算符022
1.2.11　JavaScript数据类型转换025
1.2.12　数据输入输出027
1.2.13　if 语句030
1.3　《成绩转换系统V1.0》编程实现033
1.4　《成绩转换系统V2.0》需求与技术分析034
1.4.1　《成绩转换系统V2.0》任务描述034
1.4.2　《成绩转换系统V2.0》任务效果034
1.4.3　《成绩转换系统V2.0》技术分析035
1.5　《成绩转换系统V2.0》知识学习035
1.5.1　从页面元素中获取数据035
1.5.2　在HTML元素中呈现处理结果035
1.5.3　为按钮绑定单击事件035
1.6　《成绩转换系统V2.0》编程实现036
1.7　《成绩转换系统V3.0》需求与技术分析037
1.7.1　《成绩转换系统V3.0》任务描述037
1.7.2　《成绩转换系统V3.0》任务效果038
1.7.3　《成绩转换系统V3.0》技术分析038
1.8　《成绩转换系统V3.0》知识学习038
1.8.1　switch语句039
1.8.2　程序调试040
1.8.3　异常捕获043
1.9　《成绩转换系统V3.0》编程实现044
课后习题046
实战主题 2 验证码及其应用 048
2.1　《验证码及其应用V1.0》需求与技术分析050
2.1.1　《验证码及其应用V1.0》任务描述050
2.1.2　《验证码及其应用V1.0》任务效果050
2.1.3　《验证码及其应用V1.0》技术分析051
2.2　《验证码及其应用V1.0》知识学习051
2.2.1　JavaScript内置对象051
2.2.2　Math对象051
2.2.3　JavaScript循环简介053
2.2.4　for循环语句053
2.2.5　JavaScript函数056
2.3　《验证码及其应用V1.0》编程实现058
2.4　《验证码及其应用V2.0》需求与技术分析060
2.4.1　《验证码及其应用V2.0》任务描述060
2.4.2　《验证码及其应用V2.0》任务效果060
2.4.3　《验证码及其应用V2.0》技术分析060
2.5　《验证码及其应用V2.0》知识学习061
2.5.1　while循环语句061
2.5.2　do...while循环语句063
2.5.3　String对象064
2.6　《验证码及其应用V2.0》编程实现065
2.7　《验证码及其应用V3.0》需求与技术分析067
2.7.1　《验证码及其应用V3.0》任务描述067
2.7.2　《验证码及其应用V3.0》任务效果067
2.7.3　《验证码及其应用V3.0》技术分析068
2.8　《验证码及其应用V3.0》知识学习068
2.8.1　JavaScript数组068
2.8.2　使用JavaScript控制颜色071
2.8.3　双重循环072
2.9　《验证码及其应用V3.0》编程实现074
课后习题077
实战主题 3 网站换肤 079
3.1　《网站换肤V1.0》需求与技术分析081
3.1.1　《网站换肤V1.0》任务描述081
3.1.2　《网站换肤V1.0》任务效果081
3.1.3　《网站换肤V1.0》技术分析081
3.2　《网站换肤V1.0》知识学习082
3.2.1　DOM简介082
3.2.2　通过方法获取页面元素083
3.2.3　通过属性获取页面元素084
3.2.4　操作页面元素属性086
3.2.5　创建节点087
3.2.6　挂载节点088
3.2.7　删除节点092
3.3　《网站换肤V1.0》编程实现094
3.4　《网站换肤V2.0》需求与技术分析095
3.4.1　《网站换肤V2.0》任务描述095
3.4.2　《网站换肤V2.0》任务效果095
3.4.3　《网站换肤V2.0》技术分析096
3.5　《网站换肤V2.0》知识学习096
3.5.1　实现图文黑白风格096
3.5.2　使用select下拉框097
3.6　《网站换肤V2.0》编程实现097
3.7　《网站换肤V3.0》需求与技术分析099
3.7.1　《网站换肤V3.0》任务描述099
3.7.2　《网站换肤V3.0》任务效果100
3.7.3　《网站换肤V3.0》技术分析100
3.8　《网站换肤V3.0》知识学习100
3.8.1　JavaScript事件概述100
3.8.2　为HTML元素指定事件101
3.8.3　为整个页面指定事件103
3.8.4　event对象104
3.8.5　阻止默认行为107
3.8.6　JavaScript事件流模型111
3.8.7　Date对象116
3.9　《网站换肤V3.0》编程实现119
课后习题121
实战主题 4 用户注册与数据提交 124
4.1　《用户注册与数据提交V1.0》需求与技术分析126
4.1.1　《用户注册与数据提交V1.0》任务描述126
4.1.2　《用户注册与数据提交V1.0》 任务效果126
4.1.3　《用户注册与数据提交V1.0》技术分析127
4.2　《用户注册与数据提交V1.0》知识学习127
4.2.1　RegExp对象127
4.2.2　正则表达式语法131
4.2.3　利用正则表达式规范数据格式133
4.3　《用户注册与数据提交V1.0》编程实现134
4.4　《用户注册与数据提交V2.0》需求与技术分析139
4.4.1　《用户注册与数据提交V2.0》任务描述139
4.4.2　《用户注册与数据提交V2.0》任务效果139
4.4.3　《用户注册与数据提交V2.0》技术分析140
4.5　《用户注册与数据提交V2.0》知识学习140
4.5.1　增加用户账号验证强度140
4.5.2　增加身份证号码验证强度140
4.5.3　密码明文密文切换141
4.5.4　同步数据提交142
4.5.5　JSON数据格式143
4.5.6　简易API服务器搭建145
4.6　《用户注册与数据提交V2.0》编程实现147
4.7　《用户注册与数据提交V3.0》需求与技术分析152
4.7.1　《用户注册与数据提交V3.0》任务描述152
4.7.2　《用户注册与数据提交V3.0》任务效果152
4.7.3　《用户注册与数据提交V3.0》技术分析153
4.8　《用户注册与数据提交V3.0》知识学习154
4.8.1　第三方工具jQuery 154
4.8.2　即时错误提示 157
4.9　《用户注册与数据提交V3.0》编程实现 158
课后习题165
实战主题 5 打地鼠游戏 167
5.1　《打地鼠游戏V1.0》需求与技术分析169
5.1.1　《打地鼠游戏V1.0》任务描述169
5.1.2　《打地鼠游戏V1.0》任务效果169
5.1.3　《打地鼠游戏V1.0》技术分析169
5.2　《打地鼠游戏V1.0》知识学习170
5.2.1　BOM简介171
5.2.2　window对象171
5.2.3　setInterval()定时计时172
5.2.4　setTimeout()延时计时174
5.2.5　location对象175
5.2.6　history对象176
5.2.7　navigator对象177
5.2.8　screen对象177
5.3　《打地鼠游戏V1.0》编程实现178
5.4　《打地鼠游戏V2.0》需求与技术分析181
5.4.1　《打地鼠游戏V2.0》任务描述181
5.4.2　《打地鼠游戏V2.0》任务效果181
5.4.3　《打地鼠游戏V2.0》技术分析181
5.5　《打地鼠游戏V2.0》知识学习182
5.5.1　this的含义182
5.5.2　对象的构造函数189
5.6　《打地鼠游戏V2.0》编程实现191
5.7　《打地鼠游戏V3.0》需求与技术分析194
5.7.1　《打地鼠游戏V3.0》任务描述194
5.7.2　《打地鼠游戏V3.0》任务效果194
5.7.3　《打地鼠游戏V3.0》技术分析195
5.8　《打地鼠游戏V3.0》知识学习196
5.8.1　修改鼠标指针外观196
5.8.2　播放声音文件197
5.8.3　JavaScript键盘事件198
5.8.4　第三方工具ECharts201
5.9　《打地鼠游戏V3.0》编程实现203
课后习题208
附录 　ECMAScript 2015(ES6) 核心特性 210
JavaScript 知识点索引

JavaScript编程基础
JavaScript简介 004
JavaScript历史 004
JavaScript标准与组成 005
JavaScript在浏览器上的执行过程 006
编程IDE：VSCode 006
在网页中使用JavaScript的方法 007
JavaScript 编程常识与命名规范 007
JavaScript 变量、常量及作用域 009
JavaScript 数据类型 013
JavaScript 运算符 022
JavaScript 数据类型转换 025
数据输入输出 027
异常捕获 043
程序调试 040
if语句 030
switch语句 039
for循环语句 053
while循环语句 061
do...while循环语句 063
双重循环 072
JavaScript编程进阶
JavaScript数组 068
JavaScript 函数 056
JavaScript 对象编程
this的含义 182
对象的构造函数 189
Math对象 051
String对象 064
Date对象 116
JavaScript编程高级
DOM简介 082
通过方法获取页面元素 083
通过属性获取页面元素 084
操作页面元素属性 086
创建节点 087
挂载节点 088
删除节点 092
JavaScript事件概述 100
为HTML元素指定事件 101
为整个页面指定事件 103
event对象 104
阻止默认行为 107
JavaScript事件流模型 111
JavaScript键盘事件 198
BOM简介 171
window对象 171
setInterval()定时计时 172
setTimeout()延时计时 174
location对象 175
history对象 176
navigator对象 177
screen对象 177
RegExp对象 127
正则表达式语法 131
利用正则表达式规范数据格式 133
JavaScript综合与拓展
JSON数据格式 143
同步数据提交 142
第三方工具jQuery 154
第三方工具ECharts 201
简易API服务器搭建 145
ECMAScript 2015(ES6)核心特性 210