经过多年的发展，JavaScript技术已经成为Web前端应用开发的主流技术之一，为越来越多的前端应用开发人员所使用。本教材以引导读者探索并掌握基于JavaScript技术的前端项目开发能力为主旨，结合编者长期从事JavaScript教学与项目开发的实践经验，以创设的项目任务结构安排与知识体系设计，融入思政元素及先进的教学理念循序渐进地展开教学内容。本教材能够使初学者建立起基于JavaScript技术的前端应用开发设计理念，为其进行项目开发打下坚实的基础。与此同时，本教材也能够较好地帮助读者梳理知识体系，将各个分散的知识点凝聚到实际前端开发项目中来。在项目进行的同时，潜移默化之中也锻炼了读者的“德技”素质和能力。
本教材适用于具有HTML基础和CSS基础相关知识的读者学习。对于没有任何基础的读者，建议先学习《静态网页》。本教材配备了教学项目案例、微课视频、教学课件、关键知识点的动画讲解等学习资源，方便读者在课堂之外继续学习。本教材在编写中始终贯彻重点突出、由浅入深，项目贯穿等设计原则，在强调知识原理的基础上，始终注重思维训练，提高读者的项目开发能力。本教材的撰写，离不开教研团队的支持，参与项目编写的人员均来自全国顶尖高职院校的一线骨干教师。他们丰富的教学经验和项目开发实践经验赋予本教材更多的教学价值和实践意义。
本教材由四川信息职业技术学院软件教研室团队与大连东软信息学院合作开发。其中廖若飞、张俊晖任主编；林勤花、张玮、张光辉、杨霞（大连东软信息学院）任副主编；胡献宇（大连东软信息学院）任参编。全教材由廖若飞统稿和审核，具体分工如下：胡献宇完成“内容提要”“项目实践前的准备”的编写；林勤花、张玮完成“前篇”章节的编写。廖若飞完成项目1的编写；张俊晖、杨霞完成项目2的编写；张光辉负责项目美工的设计和代码审计工作。
在本教材的编写与出版过程中，东软电子出版社的编辑同志付出了大量的心血，感谢他们高度负责的敬业精神。同时我们也收到很多同行及专家的宝贵意见，在此表示衷心的感谢！由于水平所限，如有不妥之处敬请各位读者和专家不吝指正。
项目实践前的准备1
项目1快速上手JavaScript2
任务1.1认识JavaScript4
1.1.1什么是JavaScript4
1.1.2JavaScript的特点4
1.1.3JavaScript 的组成5
任务1.2搭建开发环境7
1.2.1代码编辑器7
1.2.2JavaScript脚本的嵌入方式8
任务1.3实现自我介绍页面16
1.3.1警告对话框alert()16
1.3.2确认框confirm()16
1.3.3提示对话框prompt()17
1.3.4控制台输出语句console.log()19
1.3.5输出语句document.write()20
任务1.4输出变量的数据类型23
1.4.1JavaScript的语法规则23
1.4.2变量24
1.4.3基本数据类型25
1.4.4数据类型转换26
1.4.5运算符28
任务1.5根据成绩给出等级评价33
1.5.1控制流程33
1.5.2选择结构33
任务1.6打印100以内的偶数40
1.6.1while循环语句40
1.6.2do…while循环语句42
1.6.3for循环语句43
1.6.4跳转语句45
1.6.5循环语句的嵌套46
任务1.7计算正方形的面积51
1.7.1函数概述51
1.7.2函数的定义51
1.7.3函数的调用53
1.7.4匿名函数53
1.7.5变量的作用域54
任务1.8计算购物车合计金额58
1.8.1事件概述58
1.8.2常用的事件类型58
1.8.3事件的绑定方法59
项目小结与评价68
课后练习69
目录项目2实现中国非物质文化遗产网站主页71
任务2.1实现主页显示当前时间73
2.1.1对象73
2.1.2对象的属性和方法73
2.1.3JavaScript对象74
2.1.4Date对象74
2.1.5Date对象常用方法75
2.1.6定时器函数76
2.1.7任务实施77
任务2.2实现非遗热搜排行换一批效果80
2.2.1Math对象的简介80
2.2.2Math对象的常用属性80
2.2.3Math对象的常用方法82
2.2.4任务实施83
任务2.3实现非遗新闻标题省略效果87
2.3.1String对象的简介87
2.3.2String对象的创建87
2.3.3String对象的常用属性和方法88
2.3.4任务实施90
任务2.4实现轮播图效果92
2.4.1数组的简介92
2.4.2数组的创建92
2.4.3数组的访问93
2.4.4数组的常用属性和常用方法94
2.4.5任务实施96
任务2.5实现注册页面的表单验证效果100
2.5.1RegExp对象的简介101
2.5.2RegExp对象的常用方法101
2.5.3RegExp对象的模式104
2.5.4任务实施106
任务2.6实现登录模态框打开关闭效果109
2.6.1BOM对象的简介109
2.6.2BOM对象的常用属性110
2.6.3任务实施118
任务2.7实现非遗项目图文混排的更多效果120
2.7.1DOM对象的简介121
2.7.2DOM对象的常用方法122
2.7.3任务实施135
任务2.8实现非遗新闻列表隔行换色效果140
2.8.1style属性140
2.8.2className属性142
2.8.3visibilit属性144
2.8.4display属性145
2.8.5任务实施146
项目小结与评价148
课后练习149
项目3实现“非物质文化遗产展馆”网站“西南地区详情页”151
任务3.1实现jQuery的引入153
3.1.1jQuery的简介153
3.1.2jQuery的发展沿革153
3.1.3jQuery的特点154
3.1.4jQuery的开发环境配置154
任务3.2实现分类列表的显示和隐藏效果161
3.2.1jQuery的基本选择器162
3.2.2jQuery的层次选择器163
任务3.3实现列表内容的不同CSS效果169
3.3.1jQuery的过滤选择器169
3.3.2基本过滤选择器169
3.3.3内容过滤选择器172
3.3.4属性过滤选择器174
3.3.5可见性过滤选择器176
3.3.6子元素过滤选择器176
3.3.7表单过滤选择器179
3.3.8元素查找和过滤方法179
任务3.4实现详情页评论（留言）效果182
3.4.1jQuery的事件概念182
3.4.2jQuery的事件绑定182
3.4.3jQuery的事件移除183
3.4.4jQuery的简写事件185
3.4.5jQuery的事件冒泡194
任务3.5实现新闻列表展示更多效果199
3.5.1jQuery的DOM属性操作200
3.5.2jQuery的DOM元素操作202
3.5.3jQuery的DOM与CSS交互205
任务3.6实现侧边导航栏隐藏显示效果214
3.6.1jQuery的显示或隐藏效果的实现215
3.6.2jQuery的自定义动画215
任务3.7实现动态显示信息效果228
3.7.1JSON对象的概念及使用229
3.7.2Ajax的概念231
3.7.3jQuery的Ajax方法的应用232
项目小结与评价239
课后练习240
本教材以高职高专计算机相关专业和其他有Web应用前端开发需求的读者为主要适用对象，也可以作为前端开发人员的参考教材。全教材将基于JavaScript的Web应用前端开发的核心知识点分解为3大篇章，以2个综合项目为主线，围绕JavaScript的基础知识点展开，内容包括：JavaScript语言概述、JavaScript语言的语法基础、BOM及DOM模型，jQuery框架以及Ajax等高级应用。本教材的内容主要基于ECMAScript 51版本进行讲授。教学过程中建议采用理论实践一体化教学模式，以实践开发的项目为载体，展开教学和知识点讲解。同时为了实现混合式教学立体课堂，本教材为读者设计了一个贯穿项目，在课堂学习和实践的同时，也为读者自主开发实践提供了充分的项目引导和学习资源。
