| 标题 | Web前端技术实验练习环节教学方法研究 |
| 范文 | 摘 要：本文着力解决学生在进行Web前端技术课程实验练习的过程中，学习效率低下和实践无法联系理论的问题。以Vue.js前端技术为例，本文分析了教学与实践过程的差异性，然后提出了适合于学生的渐进式实验课程目标，并根据知识点的复杂程度对实验进行了类别的划分，在此基础上探讨了其具体实施方法，为Web前端技术实验课程提供了高效、可行的教学方案。 关键词：Web前端技术;Vue.js;实验课程;教学方法 Web前端技术是计算机类院校普遍开设的一门实践类专业核心课程，上机实践课时占有较大比例。该课程与其他计算机类课程相比，不仅要求学生具有扎实的HTML5、CSS、JavaScript、前端框架类技术等基础知识，还要求学生具备一定的代码设计和编写能力。Vue.js是当前流行的Web前端开发框架技术之一[1]，具有学习成本低、学习曲线平稳等的优势，但是短时间内学通学精这门技术还有着不小的难度。因此，以vue.js为例探讨Web前端课程实践练习环节的相关教学方法，能够给相关的任课教师及学生提供一定的参考和借鉴，具有一定的研究价值和意义。 当前关于Web前端技术的教学研究，多倾向于整体的教育模式、方法的探讨，单纯论述实践练习环节的较少。现有的观点多集中在项目驱动和网络在线练习、讨论及答疑[2-4]、模仿工作流程[5]等实验方法上。这些方法大都关注实验课程的宏观方面，对课程的微观实施方面论述得不够细致。而学生缺乏的正是具体实验方法的指导，因此本文从学生在上机实践过程中遇到的问题入手，分析了教学和实践过程的差异性，提出了分步骤的渐进式实验目标和实验的分类练习方法;并以Vue.js前端技术为例，对其中的观点进行了阐释。 1 学生在上机实践中遇到的问题 （1）基础知识不扎实，查询资料浪费时间。学生对HTML标签、CSS样式规则、JavaScript库函数或Vue.js框架知识等不熟悉，致使在代码编写过程中反复查询校验知识细节，从而造成代码编写缓慢。 （2）受语法细节及语言形式变化困扰。Vue.js技术存在很多语法形式变化和细节，在编写代码过程中，学生往往无法区分和选择到底应该使用那一种语法形式，也容易因为忽视语法细节而出错。 （3）对编程及调试工具不熟悉。Vue.js主要使用Google等浏览器和命令终端进行查错，很多学生存在着看不懂错误提示的情况，造成调试过程浪费大量时间。 （4）实践应用联系不上理论知识。学生在解决实际问题时，往往缺乏做题思路和方法，无法确定使用那部分知识来解决问题，知识信息提取不畅。 2 教学与实践差异性分析 （1）教学过程的模型分析。教学的内在本质是分解理论，由抽象理论分解成具体、浅显的知识点;以知识点为据点，寻找能够解决的问题域，再由问题域设计形成对应的代码示例。这一过程逐渐细化和多样化，从左到右形成树状发散结构。教学中理论、问题、示例的联结模型如下： 抽象理论→细节知识点→对应问题域→对应代码示例 （2）实践过程的模型分析。实践解决的是实际问题，本质是以实际问题为据点来寻找理论方法的过程。实际问题一般都具有一定的抽象性，有隐藏条件和限制，通过分析和细化后变成不可分割的细节问题。在对技术知识熟练的情况下，可以直接根据问题找到对应的细节知识点，开始编写代码;但不熟练的情况下，细节问题确定后，一般会寻找解决问题的对应示例，然后由对应示例来确定细节知识点。实践中确定采用哪种技术之后，问题、理论、示例的联结模型如下： 抽象问题→细节问题→对应细节示例（非必需）→对应细节知识点→代码实现 （3）教学与实践过程的差异性。由上述分析可知，由實践到理论的过程并不顺利，首先是因为解决问题有繁杂和巧妙、成本高和成本低等的更高层次的考虑;其次教学过程和实践过程的信息提取过程是完全相反的;再次学生缺乏来源于真实案例的训练，教学时采用的实例更有针对性，但也必然存在角度单一、浅显、条件及限制因素少、不严谨的缺陷，对知识点的考查是平面化的;而实践时的问题是来源于现实，必然具有角度多、复杂、条件及限制因素多、严谨性要求更高的特点，而且对知识点的考查是非平面化的。 3 学生上机实践中问题的解决思路 针对语法和形式变化干扰问题，需要对知识点的分析更加透彻，尤其是对语法规则和形式变化要有更针对性的练习;解决问题的思路就是对经常出现的错误问题进行分类，并在此基础上设计实验进行强化练习。在解决该问题的同时，不熟悉编程及调试工具的问题也会随之解决。 针对基础知识不扎实和实践应用联系不上理论的问题，由上述分析可知，为了能够应付多变的实际问题，应该改变知识的信息提取方式。也即建立起“问题→示例→理论”的索引模式，以替代“理论→问题→示例”的索引模式。但是直接从实践中建立起“问题→示例→理论”的索引模式是困难的，仍需从教学过程中的理论、问题、示例模型入手，反向建立起可靠的信息索引模式。另外，应多从实际生活中选择真实的案例来练习，与其他课程相比，Web前端课程实际生活中的实例比较多，资源找寻并不困难。 因此，从培养学生动手实践能力的角度出发，针对学生在上机实践中遇到的问题，按照由易到难、循序渐进的教学思路，逐渐培养学生对该课程的自信心，本文设计了渐进式的实验目标：（1）能够看懂课件、教材及其他资料中的代码示例;（2）能够顺利对所给代码示例进行调试;（3）能够独立思考，写出各种单一效果的代码;（4）能够独立写出复杂效果的代码;（5）能够将前端与后端知识相结合，构建出完整的Web应用。 4 实验的分类 按照知识点在语义完整的基础上是否可以再分解，划分为单一实验（不可分）和综合实验（可分）。 （1）单一实验有三种。①介绍知识点语言规则的实验。几乎有编程语言出现的地方就会有语言规则，这部分练习是进行后续独立编程的基础。比如：书写位置、单词拼写、名称一致性、大小写、连接符、结束符等。②介绍知识点原理规则的实验。一般需要介绍原理规则的知识点不多，设计实验内容时使用类比及对比的方法，能够将特征理解的更为清晰。比如：Vue生命周期钩子函数、指令钩子函数等。③知识点单一应用场合的实验。应用性实验是最重要的，是解决实际问题的核心，丰富性在这部分实例中非常关键。比如：Vue指令v-for循环输出列表、表格和模块等。 （2）综合实验的划分。按照由易到难的顺序来排列：①知识点简单组合的实验。知识点及逻辑关系部分明确，知识点考查为平面。②知识点复杂组合的实验。知识点及逻辑关系不明确，需要经过思考，知识点考查为平面。③模拟现实作品的实验。截取现实中网站的网页截图，内容具有代表性;知识点及逻辑关系不明确，但效果直观可见，具有丰富的提示信息，知识点考查不为平面。④模拟现实问题的实验。问题来源于现实，并具有代表性，知识点及逻辑关系不明确，效果不直观，提示信息较少，知识点考查不为平面。 5 实验练习的具体方法 （1）实验练习的顺序。在每个章节的学习过程中，要求学生首先对课件及课本上的代码知识进行查询，然后再进行上机实验。练习的顺序为先进行单一实验的练习，再进行综合实验的练习;练习的顺序基本按照上文介绍顺序进行。根据学生的掌握情况，来调整进度。在课时量较少的情况下，单一实验可以合并进行，以掌握单一应用场合为主，同时解决语法规则和工具使用问题。而综合实验不适于合并，要按部就班进行。 （2）实验练习的方法。知识点语法规则的实验，要求学生不接助提示工具，完全手动输入;输入并调试教师给出的带有错误的完整代码案例，要求学生找出错误之后进行调试，引导学生向语法细节注意，也即向错误学习的方法。每个案例的错误设置不要超过4个，逻辑部分要尽量简单。知识点原理规则的实验，教师不再给出完整代码，而是以问题形式组织实验内容，让学生独立编写出代码。问题的设计采用类比和对比的方法，逻辑依然设计尽量简单，为了降低学生的实验难度，要将实现代码的关键知识写在实验文档中，方便学生进行查找。模拟现实作品的实验，一定要注意选取的网页截图要对应当下所学的知识。另外学生可以从网络中直接找到该网页，可以看到网页的效果和控件的功能，所以选取时不要选择后台代码浅显直观的网页。学生对实验的处理方法不全部相同，没有标准答案;在实验讲评时可以让不同版本的学生上台讲解自己的做题思路，然后由教师综合评述方法的优劣性、严谨程度及改进的方法。模拟现实问题的实验，也是来源于现实的真实案例，但是是以书面文字形式进行问题的描述。让学生尝试对抽象问题进行分解，然后寻找理论方法进行解决。也没有标准答案，但应从界面设计的合理性和代码编写的技巧性两个角度来选择进行点评的作业。 （3）实验练习量的变化。语法规则的实验随着新知识的出现而出现，在课程最初的几章里，这部分实验的练习强度大;但随着知识的增多练习量越来越少，没有新知识出现，就没有语法规则的练习。知识点原理规则实验的练习量跟章节中知识的特点关系密切，具有不确定性。综合实验的练习量是随着知识的积累而逐渐变多，综合性越来越强，难度也越来越加大;最初的几章可能找不到适合于学生练习的综合实验，尤其是来源于现实的真实案例，但到最后的章节时综合性实验就逐渐丰富起来。 6 总结 本文对学生在Web前端实验课程中遇到的问题进行了原因分析，并提出了具体可行的解决方法。不足之处是人数较少的班级执行效率高，但作业版本不够丰富;人数较多的班级的作业版本足够丰富，但实验的进度要相对缓慢些。因此，应该进一步研究对于不同规模的班级，如何設计更为合适的实验或管理方法。 参考文献： [1]黑马程序员.Vue.js前端开发实战[M].人民邮电出版社，2020. [2]焦禹淦.Web前端开发技术课堂教学改革的实践研究[J].科技经济导刊，2020，28（28）：149+148. [3]李宗剑.OBE理念下的Web前端设计课程教学改革[J].电子世界，2020，（19）：16-17. [4]魏欢.前端开发，数字媒体应用技术——浅析互联网下教学一体化Web前端开发课程的教学模式[J].科学咨询（教育科研），2020，（07）：38. [5]胡晓频.基于项目驱动的Web前端开发课程混合式教学探索[J].计算机产品与流通，2020，（05）：191. 项目：南阳师范学院校级青年项目（编号：2018QN027）题目：基于智能手机的实时图像计数研究 作者简介：梁媛媛（1984— ），女，硕士研究生，研究方向：图形图像处理。 |
| 随便看 |
|
科学优质学术资源、百科知识分享平台，免费提供知识科普、生活经验分享、中外学术论文、各类范文、学术文献、教学资料、学术期刊、会议、报纸、杂志、工具书等各类资源检索、在线阅读和软件app下载服务。