前言

JavaScript是Web开发的核心技术，常用来为网页添加各式各样的交互功能，为用户提供流畅的浏览体验和美观的浏览效果。

为贯彻落实党的二十大提出的“全面贯彻党的教育方针，落实立德树人根本任务，培养德智体美劳全面发展的社会主义建设者和接班人”要求，秉承“问题导向”和“系统观念”的教材建设思路，以交互式网页设计的典型工作任务为载体，以HTML5、CSS3和JavaScript为技术支撑，系统地阐述了JavaScript的关键知识和技术。在工作任务实现过程中，突出分析问题和解决问题的能力培养，为了充分发挥教材的铸魂育人功能，根据课程特点，将劳动精神、工匠精神、劳模精神、正确的技能观、正确的科学观、正确的网络安全观、软件工程师道德规范、网络安全意识和防护技能等素养目标融入8个典型工作任务之中，增强育人实效，做到目标明确、思路清晰、内容准确、层次分明、重点突出。

单元1：理解JavaScript脚本语言。本单元的关键知识和技术是搭建开发环境，主要内容是理解JavaScript的核心语法，构建JavaScript的知识结构。

单元2：设计网页换肤效果。本单元的关键知识和技术是DOM和本地存储，主要内容是DOM中的元素及节点操作，以及利用localStorage实现本地存储。

单元3：设计网站的二级导航效果。本单元的关键知识和技术是CSS和DOM事件，主要内容是使用CSS样式来改变元素的呈现效果，认识DOM事件，使用DOM事件处理程序、事件对象、事件类型、事件模拟和事件委托以实现交互效果。

单元4：设计公告栏信息滚动效果。本单元的关键知识和技术是函数和BOM，主要内容是认识函数、函数的参数与返回值，使用自定义函数、箭头函数、闭包函数、递归函数、全局函数等来简化程序，以实现程序的模块化设计；认识BOM，使用window、location、navigator、screen、history等对象实现与浏览器窗口的交互功能。

单元5：设计模态对话框效果。本单元的关键知识和技术是面向对象编程，主要内容是认识JavaScript对象、构造函数和原型对象，创建、管理和配置对象，掌握原型链和对象继承、JavaScript类和常用内置对象。

单元6：设计网页轮播图效果。本单元的关键知识和技术是JavaScript动画，主要内容是JavaScript动画实现技术，使用CSS和canvas绘图的方法。

单元7：设计表单校验效果。本单元的关键知识和技术是正则表达式和表单校验，主要内容是正则表达式及其使用方法、HTML5表单校验属性和事件、CSS3表单校验伪类选择器、JavaScript调用约束校验API。

单元8：设计网页抽奖器。本单元的关键知识和技术是JavaScript数组，主要内容是认识JavaScript数组、数组的基本操作方法和技术、数组的函数式编程。

本书的每个单元均包括任务描述、任务分析与设计、关键知识和技术、任务实现、任务拓展、课后训练6个环节，以此来训练学习者分析问题和解决问题的能力。其中，关键知识和技术环节帮助学习者构建交互式网页设计的知识结构和能力结构。

本书以典型工作任务为载体，将关键知识和技术融入应用场景之中进行讲解和训练，理论与实践并重，以能力培养为特色。在关键知识和技术的讲解和使用中融入ECMAScript 6的功能，体现出教材的先进性；将知识体系、能力体系和职业素质融入各单元的教学任务之中，体现出教材的系统性；内容融合了W3C标准、行业标准和Web前端职业技能等级标准的内容和能力要求，体现出教材的科学性和实用性。

本书由长春职业技术学院孙文江负责整体设计和统稿。其中孙文江编写单元1、单元2、单元3、单元4和单元5，陈义辉编写单元6、单元7和单元8，参与教材资源开发和校对工作的有孙文江、陈义辉、沈继伟、李东生。本书得到了吉和网前端开发工程师季长旭和吉林省途阳电子商务有限公司徐成伟给予的任务开发指导和建议，在此表示衷心的感谢。

本书配备了丰富的教材资源，包括教学课件、单元训练源代码、单元任务源代码、微课视频等资源。读者可以通过人邮教育社区（https://www.ryjiaoyu.com）下载本书配套的相关资源。在阅读本书时，读者扫描书中的二维码，即可观看各个单元任务实现全过程的视频，其中的任务讲解与操作采用情景式教学模式，形象直观，知识难点简单化，突出能力培养。

由于作者水平有限，书中有不足之处在所难免，恳请广大读者提出宝贵的意见和建议。作者邮箱地址：swjbook@126.com。

编者

2023年4月