“Web前端开发”混合教学模式探索与实践.docx

“Web前端开发”混合教学模式探索与实践

中图分类号：G717?文献标识码：A?论文编号：1674-2117（2021）22-0104-05

随着互联网技术的发展，Web开发分工越来越细，出现了Web前端开发、移动开发、后端开发等岗位，它们分工明确且紧密配合。从当前互联网公司的就职要求来看，除了必须掌握HTML5、CSS3和JavaScript等的基础技能外，还需要熟悉vue、react等前端框架，熟悉后台管理系统的开发全流程。针对Web前端开发人才的需求，笔者所在学院计算机科学与技术专业开设了“Web前端开发”课程，但课程内容总体比较滞后，教学方法比较单一，因此，笔者结合自身的教学实践，提出了线上线下混合式教学模式，从课程的教学内容、教学方法、课程实践、课程考核方式四个方面进行改革与实践，以提升学生的学习兴趣和动手能力。[1]

●课程设计

1.教学中引入思政元素

立德树人是永恒的主题，教师需在教学中加入思政元素，如前端技术涉及界面设计，可以美育先行;一种界面效果有多种实现方法，需要培养学生多角度思考和分析问题的能力;代码的设计与调试过程需要培养学生的工匠精神，注入家国情怀，培养正确的世界观、人生观、价值观以及勇于挑战困难的精神。[2]

2.教学内容改革

Web前端开发技术所包含的内容较多，目前主要以HTML+CSS+JavaScript为基础课程，其知识面相对较广，因而教学设计需要注重整体性，让学生掌握多方面的知识，从而取得较好的教学质量。同时，基于混合式的教学模式，建设多层次可扩展的教学资源库尤其重要。教学资源包括教学课件、上机指导手册、实验库、案例库、试题库、项目库、教学视频等，这些资源又分为基础知识和提高知识。根据学生的不同基础，逐级提高学生的水平。需要注意的是，课程内容要与时俱进、由浅入深，可以考虑将主流Web前端开发技术引入课堂，要求学生至少掌握一种前端框架的使用方法，重点培养学生的实践应用、规范代码编写等能力。[3]

3.教学方式的改革

（1）课前充分预习

课前学生通过视频教程、PPT了解学习目标，知道学习任务，记录不懂的问题，写下学习心得。教师端可以通过雨课堂记录学生出勤情况，还可通过在线习题，了解学生自学后的知识掌握情况。

（2）课中交流讨论

（3）课中问题启发

启发式教学是教师经常使用的教学方法之一，即由教师提出问题引导学生思考，问题要具备典型性和实际性。例如，在Web前端开发中，教师展示表单的应用场景，如去银行柜台填写开卡申请单，填写网站注册信息等，再提出问题“如何在网页中实现表单？”，并以各大网站的登录页面为例，引出页面中的控件、表单的命名、数据传送方式等知识点。由此可见，与实际相关联的知识，可以让学习服务于实际应用，从应用角度出发学习知识，学生也更有兴趣。[4]

（4）课中案例讲解

Web开发离不开对各种案例的讲解，案例教学可引导学生将知识转变为能力。案例的设置要具有典型性和通用性，突出知识的重点和知识的应用。例如，在讲解JavaScript语法时，教师可以给出带有错误的完整代码，要求学生找出错误，引导学生注意语法细节。又如，导航栏是现在的主流网站都具有的功能，学生拿到案例后，先要进行分析，再经过小组讨论，提出解决问题的方案。教师再根据学生不同的理解，通过案例分析、知识点的分解、动画演示等一系列方法，消除学生的疑惑，让学生掌握Web前端开发相关技术，这样才能将知识内化，提升学习效率。

（5）课中原理剖析

教学中，教师围绕问题要点解析背后原理，并在讲解JavaScript中的变量时引出问题：直接输出一个a的值，为什么会出错？如果后面再用var来声明变量a，为什么没有出错？在学生讨论之后再讲解JavaScript引擎的工作机制。在进行原理讲解前，教师可以使用程序编辑器现场展示具体操作过程及相关代码运行后的具体效果。需要注意的是，在进行原理讲解的过程中，需要与提出的问题高度关联，结合所提出问题的具体情况进行教学，分步骤讲解，最后还需要进行知识的归纳总结，给出参考代码等辅助学生的后续实践操作。

（6）课后在线作业答疑及成果展示

教师通过雨课堂可查看课后作业，客观题可以要求学生在线回答提交，程序题可将源代码或截图发布到班级QQ群。另外，学生遇到的问题也可通过雨课堂提出评论反馈，或通过QQ群、微信群等即时通信工具进行交流和答疑。最后，把每次作业中的优秀作品放到教学平台上展示，方便学生浏览学习，提升学生的成就感。

4.实验与实训改革

“Web前端开发”课程的实践性非常强，学生需要通过写代码，调试代码，不断地总结才能获取技术的积累。但学院里规定这门课程的上机课仅16课时，学生要在短时间内做到熟练开发项目是有难度，鉴于学生动手能力参差不齐、个人的就业方向不同等因素，笔者采取了因材施教的方式开展实践教学。

（1）课