项目9-2鼠标事件-键盘事件

项目9完善中华优秀传统文化网站课程名称授课内容鼠标事件、键盘事件授课学期2024-2025（1）学期授课班级授课时间授课地点授课形式理论+实践授课课时学情分析授课对象计算机应用技术专业学生，开设于大一第二学期。学生知识经验分析学生已掌握HTML、CSS基础与JavaScript事件基础，能实现简单的页面加载、表单验证交互，对“事件驱动交互”有基本认知。学生学习能力分析学生具备基础的代码编写与调试能力，对“视觉化的交互反馈”兴趣较高，能通过“修改代码-浏览器预览”快速验证事件效果。学生思想状况分析渴望通过“成功实现卡片悬停放大”“键盘快捷键触发搜索”获得成就感，对“事件触发后立即看到视觉/功能反馈”需求强烈。教学目标知识目标掌握鼠标事件核心知识；掌握键盘事件核心知识；明晰事件与项目的关联。能力目标具备鼠标事件应用能力；具备键盘事件应用能力。价值目标通过鼠标事件“精准响应用户鼠标操作”、键盘事件“捕捉按键细节”的特性。在使用鼠标事件优化工匠故事展示、键盘事件提升搜索效率时，体会“技术能让传统文化网站的交互更细腻、使用更高效”。重点难点解决策略：采取互动、分组讨论方法，通过案例落实重难点内容学习。思政资源教学方法线上线下混合式教学、任务驱动教学法、自主探究学习法、小组学习法、VR体验法教学手段多媒体、VR、动画视频等课程资源智慧树线上课程资源清华在线教学平台教学视频教学照片课程案例观看动画授课照片教学实施教学内容教师活动学生活动意义课前引入1.学生回顾前置知识：展示“中华优秀传统文化网站——工匠展示页面”的基础版本，引导学生思考“这样的页面交互不够生动，用户浏览工匠信息时缺乏视觉反馈，搜索操作也不够便捷”的问题。2.提出问题：提出问题“有没有办法让网页能更灵敏响应鼠标操作，比如鼠标悬停在工匠卡片上时卡片有变化，或者用键盘就能快速触发搜索？1.教师通过智慧树教学平台发布课前预习讨论问答帖；2.问题抛接与演示：提出“增强页面交互生动性与便捷性”的需求问题后，展示添加鼠标与键盘事件后的工匠展示交互页面。1.以小组为单位在线提交讨论结果；2.认真对比“静态页面”与“添加鼠标和键盘事件的动态页面”的操作及效果，感受鼠标事件和键盘事件的优势，对要学习的事件能解决的问题形成直观认知。1.通过回顾基础交互不足的痛点，为鼠标事件“响应鼠标操作”和键盘事件“响应按键操作”的核心知识学习搭建桥梁。2.通过网页对比演示，让学生提前感知鼠标事件“生动交互”和键盘事件“快捷操作”的核心优势。学习目标掌握鼠标事件核心知识；掌握键盘事件核心知识；明晰事件与项目的关联。教师发布课前预习PPT和动画视频资源。学生以小组形式预习PPT内容，观看动画资源。以学生为主体，学生明确学习目标，有助于实践学习。课前测验在智慧树平台互动问答模块设计“互动问答+题库测验”两类课前测验，兼顾实时互动摸底与系统结果反馈。在智慧树平台题库模块发布课前测验试题，平台反馈测验结果，对学生掌握情况摸底。教师通过智慧树发布线上问答和课前测验。学生完成智慧树平台线上问答和课前测验。了解学生知识水平，调整教学方案。参与式学习-词汇学习（4分钟）1.MouseEvent，鼠标事件；2.onclick，点击事件，当鼠标点击元素时触发；3.KeyboardEvent，键盘事件。讲解本次课相关专业英语词汇，引领学生反复读并且记忆。小组间互相反复读，达到理解记忆的效果。1.思政元素：学好专业英语词汇，助力工匠精神的全球传播。2.培养编程能力。参与式学习-VR体验（5分钟）参与式学习-播放视频（3分钟）参与式学习-任务一：运用鼠标事件，实现工匠卡片悬停交互（20分钟）智慧树平台学习任务：1.掌握onmouseover与onmouseout事件的触发场景、语法规则，理解两类事件的“触发-响应”逻辑，明确可通过事件处理函数修改元素CSS样式；2.制作中华优秀传统文化网站首页”中“讲好工匠故事”模块需求，为工匠卡片添加事件。引出知识点：结合文档首页效果，说明“工匠卡片悬停交互能提升用户浏览体验，让传统文化展示更生动”，强化“事件服务于项目需求”的认知。布置“为3个工匠卡片添加悬停交互”的任务，巡视学生操作。明确知识点：1.学生按照按照教师演示，进行实践项目操作；2.小组验证：组内互相检查卡片交互效果，指出“样式未重置”等问题，共同修正代码，确保每个成员都能通过鼠标事件实现工匠卡片的动态悬停。1.培养学生“用鼠标事件实现视觉化交互”的能力；2.，让学生精准掌握onmouseover/onmouseout的触发逻辑与样式控制，避免“事件与样式关联错误”的问题。参与式学习-任务二：运用键盘事件，实现搜索框快捷提交（25分钟）智慧树平台学习任务：1.掌握onkeydown事件的触发场景、语法规则及event对象的keyCode属性，结合文档示例，理解“通过keyCode判断按键类型”的逻辑；2.搭建网站框架”中“顶部搜索栏”需求，为搜索框添加onkeydown事件。引出知识点：1.结合文档的框架效果，说明“搜索框快捷提交能提升用户操作效率，让传统文化内容查找更便捷”，强化“键盘事件服务于项目实用性”的认知。明确知识点：1.组内互相测试搜索框快捷功能，模拟“输入场景，检查提示是否准确，修正“keyCode判断错误”“输入值未获取”等问题，确保onkeydown事件精准响应。1.思政元素：培养学生“用键盘事件优化操作便捷性”的能力；2.通过智慧树平台课堂小测，了解学生知识点掌握情况。参与式学习-任务三：运用综合运用鼠标与键盘事件（25分钟）智慧树平台学习任务：1.实现“鼠标点击+键盘辅助”的联动交互：①用onclick事件为工匠卡片添加“点击查看详情”功能，点击后显示工匠完整信息（；②用onkeydown事件实现“按Esc键关闭详情弹窗，结合event对象的keyCode判断，实现“打开-关闭”的完整交互逻辑。；2.，将交互整合到“中华优秀传统文化网站”中，确保鼠标与键盘事件协同工作，匹配文档中“多模块交互统一”的项目目标。。引出知识点：教师展示框架效果，指出“实际开发中需结合鼠标与键盘事件，实现更灵活的交互”，引出“点击查看详情+Esc关闭”的综合需求；以“鲁班卡片”为例，拆解任务流程。巡视学生综合任务完成情况。明确知识点：1.实践操作：为“讲好工匠故事”模块的鲁班卡片添加onclick事件。2.组内讨论“如何优化弹窗样式”，参照CSS样式调整弹窗外观，教师引导后总结“综合事件应用需兼顾功能完整性与视觉体验”。1.让学生掌握“鼠标与键盘事件协同工作”的逻辑，避免“单一事件无法满足复杂交互”的问题；2.养学生“整合多类事件解决项目需求”的思维，提升代码的逻辑性与实用性。参与式学习-总结提高（3分钟）课堂总结：总结知识点，强调重难点。点明任务：教师归纳总结，夯实基础。明确任务：学生通过回顾本节课知识点，拓展提高。思政元素：引导学生树立“严谨务实、精益求精”的工匠精神。课后测试（5分钟）智慧树平台发布课后测试：1.拓展任务：提炼鼠标事件中“onmouseover与onmouseout的样式控制”“onclick的参数传递”，键盘事件中“onkeydown的keyCode判断”“