基于OBE理念的JavaScript课堂实践教学探索.pdf

1 0 6 2 0 2 4年3期2 0 2 4年第4 6卷第3期基于O B E理念的J a v a S c r i p t课堂实践教学探索夏 维作者简介:夏维(1 9 8 2-),硕士,讲师,研究方向为软件技术。(湖南石油化工职业技术学院 湖南 岳阳4 1 4 0 0 0)摘 要 W e b前端开发方向是软件技术专业培养人才的的重要分支,“J a v a S c r i p t程序设计”是软件技术专业的一门基础课,是W e b前端开发方向的必修课程之一。文中结合O B E(O u t c o m eB a s e dE d u c a t i o n)理念开展混合式教学,充分挖掘“J a v a S c r i p t程序设计”课程中的实训项目与思政教育融合点,以“学生主体,关注学生全面发展”为教学方向,聚焦“岗课赛证”的理念,实现了综合育人。关键词:成果导向;J a v a S c r i p t;实践教学中图分类号 G 4 2 0E x p l o r a t i o no fJ a v a S c r i p tC l a s s r o o mP r a c t i c eT e a c h i n gB a s e do nO B EC o n c e p tX I A W e i(H u n a nP e t r o c h e m i c a lV o c a t i o n a lT e c h n o l o g yC o l l e g e,Y u e y a n g,H u n a n4 1 4 0 0 0,C h i n a)A b s t r a c t W e bf r o n t-e n dd e v e l o p m e n td i r e c t i o n i s a n i m p o r t a n tb r a n c ho f s o f t w a r e t e c h n o l o g ym a j o r s t oc u l t i v a t ep r o f e s-s i o n a l t a l e n t s.“J a v a S c r i p tp r o g r a mm i n g”i s ab a s i c c o u r s e f o r s o f t w a r e t e c h n o l o g ym a j o r s a n do n eo f t h e c o m p u l s o r yc o u r-s e s f o rW e bf r o n t-e n dd e v e l o p m e n t j o b s.T h i sp a p e rc o m b i n e st h ec o n c e p to fO B E(O u t c o m eB a s e dE d u c a t i o n)t oc a r r yo u tb l e n d e dt e a c h i n g,f u l l ye x p l o i t s t h ep r a c t i c a l t r a i n i n g i t e m s i nt h e“J a v a S c r i p tP r o g r a mm i n g”c o u r s ea n dt h e i n t e g r a-t i o np o i n to f i d e o l o g i c a l a n dp o l i t i c a l e d u c a t i o n,t a k e s“s t u d e n tm a i nb o d y,p a y sa t t e n t i o nt o t h ea l l-r o u n dd e v e l o p m e n t o fs t u d e n t s”a s t h e t e a c h i n gd i r e c t i o n,a n df o c u s e so nt h ec o n c e p to f“p o s t-c l a s sc o m p e t i t i o nc e r t i f i c a t e”t or e a l i z ec o m p r e-h e n s i v ee d u c a t i o n.K e y w o r d s R e s u l to r i e n t e d,J a v a S c r i p t,P r a c t i c a l t e a c h i n g0 引言随着互联网行业的发展,其产业规模不断扩大,技术领域逐步拓展,W e b前端技术也越来越受关注和重视。企业越来越注重用户体验,用户对体验的追求也在日益提升。大部分前端动态交互由J a v a S c r i p t完成,这是W e b应用开发中不可或缺的一部分。本文基于O B E教育理念,遵循W e b前端开发工作流程,根据学生认知规律开展教学,构建并实施了“校企协作+成果导向+任务驱动”的教学策略,关注学生个人或小组在每个任务中的学习成果,注重开发过程中学生职业素养的提升。本文针对O B E教学法在“J a v a S c r i p t程序设计”课程中的应用,展开了相关的研究与探讨。1 “J a v a S c r i p t程序设计”课程的实践教学模式改革背景 大学生就业难和企业招工难并存是一个长期存在的现象,究其原因,主要是人才培养不能很好地契合“技术链产业链人才链创新链”融通的标准,教学内容(特别是实践教学)难以赶上技术和岗位标准的更新速度。而实践教学作为人才培养的关键,对高职院校学生综合职业能力的提升尤为重要,是提升学生就业能力的根本保障1。传统“输灌式”“探究式”等教学模式以培养单一化、模式化的人格为主,不利于创新性、分析性学生的全面发展,不利于培养学生的创新思维和解决实际问题的能力,导致学生不能快速适应岗位需要。因此,结合O B E理念,探索新的软件技术课程教学模式,进一步提高软件技术专业的教学质量势在必行。2 重构“J a v a S c r i p t程序设计”课程教学体系课程是人才培养的核心,是提高教学质量的根本保障。本课程以企业典型工作任务成果为教学项目,以项目为载体、以学生为主体、以老师为引导,设置情景化、工程化的人才培养模式,将工作任务转化为学习任务,使课程内容与行业标准对接、教学过程与工作过程对接,通过W e b前端工作岗位分析,依据网页设计与制作典型工作任务,将课程划分为猜数字游戏、随机抽奖、故宫轮播图、商品放大镜、商品购物车、模拟滑块验证6个项目及美食汇综合实训项目,每个项目实训均能体现网页中的常见交互效果,整体设计体现了由易入难、由单一到综合的递进关系。2 0 2 4年3期1 0 7 3 基于O B E理念,采用“针对性”的教学策略(1)采用贯穿实战项目,基于慕课平台的混合式教学模式在教学内容组织上融入实战项目,形成整个课程单元教学的主体脉络。以校企合作为依托,采用理实一体化教学,实现课上课下、线上线下、全程全方位的教学资源共享和教学措施。通过“云班课”平台整合学习资源,满足学生课前预习、课中查阅资料和探究学习、课后拓展延伸等学习需求,为教师授课提供依据2。以云班课、微课视频、在线开放课程等多媒体手段辅助实践教学。利用项目开发实训平台,在实践教学环节模拟企业开发环境,对学生的项目开发进行全流程、信息化管理。(2)实行多师共育、梯次培养的育人机制校内教师与企业教师共同打造云端实训平台,坚持校企双元育人,将素质教育与课程思政贯穿于教育的全过程,全面实施人才培养与岗位需求、课程标准与行业标准、教学过程与生产过程、教学内容与企业项目、1+X证书与职业资格等5种育人模式。校内教师可以在平台上发布实训任务、管理实训项目、设置评价权重等,并对学生作品进行浏览点评。企业教师可以加入实训项目,补充实训要求,点评学生实训作品。工作过程化的实训环节需实时关注岗位需求,提升学生的个人能力。师生双方均可在平台上查看学生在整个课程体系中的成长轨迹。(3)融入思政元素通过校方教师和企业讲师的言传身教及企业标准开发流程的引领,以“美食汇”网页设计与制作项目开发为例,打造“润物无声”的思政情境,让学生熟悉“美食网站”开发流程,从根本上提升该课程的教学效果和课程思政的育人成效,如表1所列。表1“美食汇”网页设计与制作项目中的思政设计项目阶段思政元素植入点实现方式项目立项与开发树立正确的三观内容健康向上,具备应用价值校企双师引领学生分析项目需求分析遵守道德法纪搜集合规合法的素材校企双师引领师生探讨项目开发与测试(1)审美意识(2)合作意识(3)责任意识(4)质量意识(5)安全意识(6)精益求精(7)工匠精神(1)网站框架设计、色彩搭配、版面设计、特效设计(2)在各环节实施过程中,调整团队与个人的关系、成员之间的沟通、项目时间分配,解决项目瓶颈(3)表单数据有效性验证(4)规范代码质量,使代码结构合理、标记有效、注释优良(5)各阶段成果测试排错、修正、完善校企双师与学生探讨、互动,在 做 中 学,实 现多次迭代项目答辩(1)团队协作精神(2)创新创业意识(1)作品展示(2)提问:对“项目迁移”有什么样的构思和想法校企双师引领学生探讨 (4)校企共建共享,扩充教学资源库将“云移物大智”思维模式、知识基础、技能要求等融入专业课程资源库,建设立体化、多层次、可扩展的教学资源库。1)立体化。教学资源库包括教材、教学课件、案例库、项目库、试题库、学习手册、视频、W e b前端1+X证书试题库等。2)多层次。分层训练基础知识、进阶知识和综合知识,逐渐提升学生能力。3)可扩展。师生共同建设教学资源,通过平台不断沉淀优秀案例,不断更新资源。(5)多维度教学评价依据“J a v a S c r i p t程序设计”课程标准、软件技术顶岗实习标准、W e b前端开发职业技能等级标准等,组成教师、企业导师、学生等多元评价主体,构建“多元+多维”的全过程考核方式。1)课前预习平台评。对学生浏览资源的完成程度、课前活动的参与度、课前测试完成情况给予评价。2)课中学习师生及企业教师评。采用学生工单自评,对学生的上课表现、项目任务完成情况给予评价;教师点评任务编码的正确性、创新性及规范性;企业讲师平台参与综合考评,对项目开发流程、操作规范、成果是否符合行业标准等给予评价。通过三方评价,可以形成完善的课中整体考核结果3。3)课后拓展教师评。分析学生的题库完成情况、项目拓展任务完成情况,最终综合课前、课中、课后3个阶段,确定过程性考核成绩。综合以上各阶段评分,确定综合考评成绩,保证学习目标的达成和学习方法的持续改进。4 基于O B E理念的课堂实践教学实施过程以“美食汇网页设计与制作”项目为例,将该项目分为项目技术储备及项目实战过程两部分。项目实施包含项目立项、项目计划、需求分析、项目设计、项目编码、软件测试和项目验收7个环节,完全按照CMM I 3开发标准流程进行项目实施,重现前端开发工作的完整过程。在“美食汇”网页设计与制作过程中,根据客户端需求,要求学生设计登录页面、注册页面、首页、详情页及购物车页面。采用“知任务、引新知、析重点、破难点、强技能”5个环节的引导式教学流程。以轮播图任务点为例,整个课堂实施以“引新知”开启,在“任务实施”中突破重难点,用“任务拓展”巩固学生技能,环环相扣,层层推进。移动信息1 0 8 2 0 2 4年3期4.1 课前“知任务”(1)教师活动。教师在“云班课”教学平台中上传教学资源及任务工单,并发布课前讨论活动。课前查阅学生头脑风暴,词云定位关键问题,与企业老师勾通交流,掌握学生的基本学情,诊断难点,进行课中教学设计。(2)学生活动。学生登录课程平台,查收任务,阅读任务工单;分小组讨论,根据任务单进行轮播特效算法分析,并在头脑风暴中提出难点。(3)设计意图。对学生而言,可以拓展教学时空,让学生提前熟悉学习内容,养成良好的预习习惯,培养学生的自主学习能力,以便进行课堂学习;对于教师而言,可以方便进行数据采集,确定教学的重难点。4.2 课中“引新知析重点破难点”4.2.1 引新知(1)教师活动。播放学生阶段作品以及企业导师对阶段作品的点评视频,根据企业导师的点评内容,强调程序员的职业素养及提升代码质量的意识。以第一组源码为示例,一起探讨优化方案,引出新任务“箭头轮播图”。(2)学生活动。观看各小组轮播区视频,聆听企业导师的点评视频,了解作品的不足,并明确本次课的任务。(3)设计意图。通过引入企业导师点评视频,强调程序员的代码质量意识,导出学习重点,并促使学生自己发现问题,明确解决问题的方向,提高学习的主动性。4.2.2 析重点(1)教师活动。展示箭头轮播视频,提出箭头轮播图与自动轮播的区别,如B a n n e r区添加了哪些页面元素、页面元素如何实现布局、哪些元素可以实现用户的交互等。(2)学生活动。通过观看视频,明确箭头轮播任务的需求;在教师引导下探究任务,绘制任务流程图;以小组为单位,绘制布局草图、箭头区交互操作流程图,再根据流程图完成任务,可参考网络教学平台上的微视频、实训指导书、任务工单等教学资源。(3)设计意图。通过任务驱动+成果导向,采取探究式的学习方式,发挥学生的主观能动性。在任务实施过程中,培养学生的团队协作能力以及发现问题、解决问题的能力。4.2.3 破难点(1)教师活动。教师在云平台“轻直播”中观看学生上传的阶段性成果,发现问题箭头区定位不精准、箭头区事件响应异常两大共性问题。(2)学生活动。通过箭头区响应事件实施任务,落实本次课的技能点,与教师一起探讨问题,找到解决问题的方案。优秀学生主动上台演示、讲解共性问题及难点解决方案,提升课堂参与度。(3)设计意图。以小组为单位开展任务实施,凸显以学生为主体的教学理念;学生主动上台演示和讲解代码,帮助学生塑造勇敢的个性,展示自我风采;提高学生的代码调试及纠错能力,培养学生精益求精的工匠精神。4.3 课后“强技能”(1)教师活动。在云平台上布置拓展任务,使用S w i p e r插件实现轮播图功能;在W e b前端上传初级题库,让学生进行轮播练习。(2)学生活动。完成美食汇B a n n e r区轮播特效优化任务,并互相讨论、学习、总结。(3)企业老师。测试学生作品,将存在的B u g和优化方案反馈给学生。(4)设计意图。合理利用课后时间,完成美食汇首页优化,强化重难点,实现技能提升;通过企业对接,使设计更贴近企业实际需求,并从实训流程、操作规范是否符合行业标准等方面,使学生了解自己的学习情况。5 教学实施效果5.1 提升了学生的技能在整个项目实施过程中,学生逐渐熟悉了项目开发流程,具备了项目设计、文档编写及项目开发能力,基本掌握了“W e b前端开发”岗位需要的核心知识和技能,有效提高了学生的岗位适应性。5.2 提升了学生的核心素养在项目实施过程中,项目组成员齐心协力、互相帮助,保障了项目的有效推进,从接受式教育转变为自主探究、合作探究的学习方式,有效提升了学生的团结协作能力;各组成员在发现问题、查找解决方案和解决问题的过程中,产生了创造感和满足感,有效提升了自主学习能力;学生独立完成任务,教师关注任务的完成时间和质量,提升了学生的自我管理能力;项目编码要求学生注重代码编写规范性、结构合理性、代码可读性,提升了学生的职业规范意识。5.3 促进了学生的全面发展开展项目化教学,可以强化学生的动手能力,将零散、碎片化的设计转化为系统、规模的开发。学生在学习专业知识技能的同时,还掌握了职业技能,操作技巧得到提升,项目迁移能力得到加强。学生参加“移动应用开发”“W e b应用开发类技能大赛”“大学生创新创业大赛”的人次明显增多,并取得了较好的成绩。6 结语本文通过“J a v a S c r i p t程序设计”课堂教学,探索和实践了基于O B E理念的校企双师育人模式;创新化地实施了学校课堂“引新知、析重点、破难点、强技能”4个环节的实践教学。从应用效果来看,教师实践教学理念得到了更新,教师教学思路得到了拓展,教师教育教学水平得到了提升;从专业建设来看,改进了实践教学模式,提高了专业内涵水平;从学生发展来看,增强了学生的就业本领,提高了可持续发展能力;从企业需求来看,人才培养更具针对性,人才适应性得到了强化。参考文献1周洪 波,周 平.基 于O B E理 念的 高 校 教 学 模 式 改 革 研 究J.课程与教学,2 0 1 8(4):9 2-9 4.2霍聪,耿楠楠.基于O B E教育理念的“J a v aS c r i p t技术”课程教学改革研究J.无线互联科技,2 0 2 1(3):1 5 2-1 5 3.3周小丽.J a v a S c r i p t课程教学方法J.信息与电脑,2 0 2 1(4):2 4 5-2 4 6.移动信息