“我眼中的优秀教学设计”推荐系列之九
【前言】为鼓励支持教师教学模式和方式方法创新，激发教师课堂教学改革热情，深入推动“课堂革命”，全面提升教育教学质量。质量管理与教学督导处将持续刊发经各级督导推荐的优秀教学设计案例，供校内教师交流学习，为教师专业发展提供资源基础。
机电汽车学院邱馨亚老师讲授的《H5+JS前端界面设计》课程是物联网应用技术专业必修的一门专业基础课。H5位于物联网三层架构中的最上层——应用层，是构成物联网系统中面向用户的最后一环，所以H5前端技术和物联网是紧密相连、密不可分的。
本课程是一门“理实一体化”的课程。理论部分共分9个模块，全面讲解了javascript开发环境的安装、JavaScript快速入门、基本语法、数组、函数、对象、BOM、DOM、事件等内容。实训部分共分8个情景项目，依据人才培养方案、物联网岗位对接和技能竞赛标准，按照前端项目开发工作模式，串联知识点，进行巩固提升。
在专业衔接上实现了专业课程间逻辑上的递进和内容上的闭环，在岗位对接上既强调H5前端开发基础学习，又引入企业开发常用技术，注重培养学生知识活用的能力。
11月13日第三节课的课程教学中，邱老师凭借娴熟的专业背景和巧妙的课程设计，将讲、演、练及思政元素完美结合起来，不断引导学生跟着老师的教学节奏完成各个模块的程序代码的编写，学生也逐步进入沉浸式的学习状态，整节课讲、演、练安排合理，教学时间利用率极高，学生互动活跃。
以下是邱馨亚老师的《H5+JS前端界面设计》课程1学时的教学设计展示，供交流。
课程名称 |
H5+JS前端界面设计 |
授课章节 |
项目8“甜蜜之约”首页制作——任务3：“banner”模块 |
授课学时 |
1学时 |
授课类型 |
讲授课□讨论课□习题课□实验实训课□ |
教学内容 |
思政教学 |
中国传统文化源远流长，中式糕点作为传统文化的一种载体历久弥新。通过制作新中式糕点品牌官方网站，让学生体会中式糕点的历史发展和文化底蕴。 |
专业教学 |
DOM与BOM综合应用——事件函数与JS元素解析 |
教学目的与要求 |
知识目标：1.能熟练根据功能要求选用定时器；2.掌握DOM获取元素的多种方法；3.能完成图片的自动轮播功能。 素质目标：能分析页面构成、拆分功能要点并有效实现功能。 |
重点与难点 |
重点： 1.window.onload()事件的使用； 2.DOM获取元素多种方法返回值类型的区分和调用方法； 3.定时器的使用； 难点： 1.定时器的使用； 2.DOM获取元素多种方法返回值类型的区分和调用方法； |
教学设计 |
一、引任务（5min） 采用任务驱动法，通过一段中式糕点文化视频，以项目开发进度计划表的方式引出本节课的任务：新中式糕点品牌“甜蜜之约”首页制作中的任务3：“banner”模块。 二、析原理（15min） 采用讨论法，以思维导图的方式，带领学生以拆分功能点à锁定知识点à串联代码的思考步骤梳理编程逻辑。 三、练技能（15min） 采用演示法完成代码的基本框架，然后由学生根据思维导图思考完成核心功能的代码开发。学生实操过程中，实时关注学生编程中的共性问题和特性问题，并进行适当的提示和补充讲解。 四、评成果（5min） 从代码健壮性、高效性以及可读性等方面，综合评价学生实现功能的不同方式，拓宽学生的编程思路。 五、拓任务（5min） 从本节课任务出发进行纵向拓展，加深难度。引导学生参照本节课中思维导图的模式自主完成banner模块的优化任务。 |
|
作业布置 |
课内作业：优化banner图片切换特效——鼠标事件监听（第2节课实施） 课外自测：视频点播页面（职教云） |
参考资料 （含参考书、文献等） |
https://www.runoob.com/w3cnote/js-timer.html https://www.runoob.com/jsref/event-onload.html https://www.runoob.com/jsref/event-onmouseover.html |
（推荐人：校级督导潘群，编辑、审稿/马青兰，审核/齐求兵）
