基于“1+X”认证的“JavaScript程序设计”课程案例库建设研究

关键词：JavaScript程序设计；“1+X”认证；课程案例库

中图法分类号：TP312 文献标识码：A

1“JavaScript程序设计”课程案例库建设的目的、意义、价值

1.1研究目的

本课题旨在建设1套以网站形式展示的“JavaScript程序设计”课程案例库。结合“1+X”Web前端开发初级认证标准中的考核内容、就业岗位所对应的工作领域，以及高职院校的课程教学目标，精选教学内容，设计教学案例，融入思政育人元素，搭建案例网站，录制案例演示视频及讲解视频，形成1套完整的课程案例库，旨在辅助学生实践技能训练，助力教师课程教学，提高学生的“1+X”认证通过率。

1.2研究意义

随着网络技术的不断发展，JavaScript语言越来越体现出不可替代的强大优势，目前其已经成为许多高校计算机相关专业的核心课程。“1+X”Web前端认证实施后，在JavaScript程序设计中体现出的动手实践能力也受到广大高校师生的重视。开发1套符合“1+X”Web前端开发认证标准、体系完整的“JavaScript程序设计”课程案例库，对教师教学及学生学好該课程均具有实际意义。

1.3研究价值

1.3.1理论价值

本课题通过细化分解“1+X”初级认证的标准，将主要考核知识点融入案例，结合高职院校“JavaScript程序设计”课程教学目标，构建1套以网页形式展示、包含案例演示视频及案例讲解视频的“JavaScript程序设计”课程案例库，以丰富课程教学资源。

1.3.2实践价值

教师可以利用案例库进行课题教学，以案例驱动法提高学生学习效果。学生查看案例演示视频后可以清楚了解案例所实现的功能，以及学习案例制作的过程，进而有效提升学生的学习兴趣及学习效果。

2“JavaScript程序设计”课程案例库研究流程

2.1组建研究团队

首先组建项目研究团队，选取专业技能强、教学经验丰富、学历层次较高、具有企业工作经历等特点的双师型课题研究成员。

2.2制定建设方案和实施计划

为确保基于“1+X”认证的“JavaScript程序设计”课程案例库建设研究工作能够有序完成，促进该课题研究工作的纵深发展，以及增强课题组成员的科研意识，通过会议研讨的形式，初步形成建设方案和实施计划，并根据建设内容对项目组成员进行分工，细化任务工期。

2.3解析“Web前端开发职业技能标准”初级知识点

研读工业和信息化教育部与考试中心发布了“Web前端开发职业技能等级标准”文件。该“标准”客观反映现阶段软件开发和互联网行业技术发展水平及其对从业人员的能力要求，明确了本专业职业技能人员的工作领域、工作任务、技能要求和知识要求，从而为技术人才的教育和培训提供科学、规范的依据。

2.4修订“JavaScript程序设计”课程大纲

根据“成果导向+行动学习”高职课程发展模式，在“1+X”认证标准的基础上，将知识点碎化，梳理知识点中的核心技能，并融入教学实践体系。根据高职院校“JavaScript程序设计”课程学时的实际情况，修订课程大纲。

2.5收集案例素材、融入对应适合的思政点，设计制作案例

2.5.1案例的收集

案例是案例库建设的核心内容，案例的数量、质量以及与知识点的契合度，直接影响案例库最终的使用效果。案例的收集主要采用以下几种方式。

（1）教材中的案例：本课程在授课时使用的是黑马程序员编著的“JavaScript前端开发案例教程”，收集教材中部分案例。

（2）教师根据知识点创作的案例：“改变网页背景颜色一黑龙江五色教育蓝图”：“判断要加入的值是否已在文本域中，不在则添加”。

（3）网络应用中常见案例：验证用户名是否为空；检测输入的值是否符合条件。

（4）各种竞赛中常出现功能：控制声音播放；加载进度条。

（5）授课中学生创作的案例：深夜的交通信号灯（如图1所示）；四季景象。

2.5.2思政素材的收集

案例库中每个案例都应适当融入思政点。而思政内容的融入既要合情合理合规，又要与时俱进、符合学生认知。因此，在案例制作中大量收集爱国诗句、法律标语、企业文化图片、惜时、修养、教育学习等内容素材，并深入分析，细致加工，为教师广开思路提供有效参考。

2.5.3设计并制作案例，巧妙融入思政点

大部分案例以网页的文件展示，涉及多页面的案例会以1个文件夹保存。案例的设计，从知识点出发，根据互联网上热门的特效和交互，融入思政理念，并按照教学需求制作而成。

2.5.4召开研讨会议，整理、交叉审核并修正案例

课题组成员分工进行案例设计制作，案例制作完成后，成员之间进行交叉审核，对存在问题的案例进行修正。

部分案例效果如图2所示。

2.6设计建设案例库网站

将全部案例融合到网站中，便于案例的查找和使用。网站目前设置了8个单元，共包含101个案例。每个单元设置1个导航页面，导航页面左侧边栏为章节导航目录，导航栏右侧主栏目为单元案例导航，其列出了本单元中所包含的全部案例。

2.7录制案例演示视频和讲解视频

2.7.1录制案例演示视频

案例中通常会包含文字、图片、声音、样式、布局等多种信息，以及网页交互功能。用文字描述案例是非常复杂的，通常很长的文字描述也难以清晰准确地掌握案例需求。案例演示视频使用户更清晰直观地了解案例的功能以及实现其需求需要注意的功能点。

2.7.2录制案例讲解视频

在案例讲解视频中，讲解教师细致地讲解案例代码的实现过程及运行结果。通过案例讲解视频，学生可以学习案例具体的实现代码。

2.8开展案例库应用实践

（1）在课堂中应用案例教学，能够引领学生通过大量案例训练，掌握新知识点，巩固已学内容，实现温故而知新的目的。Web前端开发技术不难掌握，但是知识点的体量庞大，只有反复训练，才能使知识、技能熟记于心。

（2）使用教学案例库开展公开课教学，让更多的教师和学生了解案例库在课堂教学中的使用效果，并广泛收集师生对案例库应用于教学的意见和建议。

（3）在“JavaScript程序设计”在线开放课程建设过程中，大量引入了案例库中的案例，部分课程直接应用案例演示视频和案例讲解视频完成课程的录制。目前“JavaScript程序设计”在线开放课程已上线，课程所在平台为智慧职教在线课程平台。

（4）基于案例库开展校内“‘JavaScript程序设计课程案例设计与制作”挑战赛。在案例库中抽取典型案例，并制作案例任务书及评分标准，各班选取优秀学生组成挑战赛团队，进行班级间的案例制作竞赛。通过竞赛提高学生动手实践能力，激发学生学习兴趣，实现以赛促教，以赛促学的目的。“深夜的交通信号灯”任务书及评分标准如表1所列。

3“JavaScript程序设计”课程案例库建设研究的创新与突破之处

以“多元”的视角来开展高职教育教学，找到高职“JavaScript程序设计”课程教学与“1+X”认证融合的切入点，通过“JavaScript程序设计”课程教学案例的建设，来探索更高效的课程教学模式。

3.1案例充分融入思政元素，实现“教”“育”同向同行

比如，在“外链式引入JS-弹出警告对话框”案例中，弹出内容为“人之为学有难易乎？学之则难者亦易也，不学则易者亦难也！”，学生在制作案例过程中体验知识通过“学”，从“难”到“易”的过程；在制作“百善孝为先图片浏览器”案例的过程中，会使学生记住“百善孝为先”这句话，以润物无声的方式提升“孝”的意识。

3.2生活化、情景化的案例，引发学生对案例的思考

如“深夜的交通信号灯”案例，学生参与案例的完善，提出红绿灯要确保每次停止在黄灯处，以提示驾驶员注意路口交通安全。

如“猜数游戏”案例，学生编写游戏后总结体会：“玩自己编的游戏，做游戏的主人，不做游戏的奴隶”。

3.3案例引导、案例驱动，案例库促使自主学习

在案例库的支撑下，教学按照“观看案例演示+学生分析探索案例实现+必备知识讲解+案例实现过程指导+在任务驱动下学生重现案例”的学习过程，使学生不断进行尝试性、探索性、发现性的实践学习，以有效激活学生的创新力、驱动力、战斗力，从而真正实现教学是一个以学生为中心，以学为主，以教为辅的过程。

4分析和讨论

4.1教学案例库建设可提高教师的专业技术、教学水平

建设“JavaScript程序设计”课程案例库，需要收集、设计、制作、录制大量丰富的案例，这一过程要求课题组的教师既要有扎实的理论知识，又具备丰富的实践教学经验，善于将理论知识与实践技能进行有机结合，深度探索并挖掘案例相关的思政点，从而促进教师提高专业技术水平，以及提升教学质量。

4.2有利于实现以学生为中心，因材施教的课堂模式

有了案例库，教师可以通过视频重复展示和讲解案例，而不耽误教师在课堂上对学生操作的指导和答疑。对于理解能力强，操作完成快的学生，教师也可以利用案例库为其布置更多的案例任務，实现同一班级学生不同的学习进度。建设实践教学案例库可以有效克服教师教学中学时受限，不能针对不同程度学生进行全面讲解的缺点。

5结束语

高等职业教育是以就业为导向的教育，必须具有职业针对性，实践技能是高职学生学习的核心内容。重视教学案例资源的建设及利用，可以从根本上确保“JavaScript程序设计”课程实践教学的有效进行，进而促进人才培养目标的实现，同时使学生更快更好地满足职业需求。

作者简介：

吕艳梅（1978—），硕士，副教授，研究方向：软件开发、网站建设。