项目9-1事件概述-窗口事件

项目9完善中华优秀传统文化网站课程名称授课内容事件概述、窗口事件授课学期2024-2025（1）学期授课班级授课时间授课地点授课形式理论+实践授课课时学情分析授课对象计算机应用技术专业学生，开设于大一第二学期。学生知识经验分析学生已掌握JavaScript基础语法，能编写简单代码，对“网页交互”有直观认知，为学习“事件”提供了知识铺垫。学生学习能力分析学生具备基础的代码编写与调试能力，对“即时反馈的交互效果”兴趣较高，能通过“修改代码-浏览器预览”快速验证事件效果。学生思想状况分析部分学生认为“事件只是简单的函数调用，与直接写函数无差异”，忽视事件“特定时机触发”的核心价值。教学目标知识目标明确JavaScript“事件驱动”的编程范式；熟练掌握4类窗口事件；明晰事件与项目的关联。能力目标具备事件绑定与实现能力；具备窗口事件应用能力。价值目标通过事件“响应用户操作”的特性，理解“网页开发需以用户体验为核心”的思想。通过事件“触发时机精准性”与“处理逻辑规范性”要求，理解“编程需注重细节。重点难点解决策略：采取互动、分组讨论方法，通过案例落实重难点内容学习。思政资源教学方法线上线下混合式教学、任务驱动教学法、自主探究学习法、小组学习法、VR体验法教学手段多媒体、VR、动画视频等课程资源智慧树线上课程资源清华在线教学平台教学视频教学照片课程案例观看动画授课照片教学实施教学内容教师活动学生活动意义课前引入1.学生回顾前置知识：展示登录页面的静态版本，引导学生思考“这样的网页交互性差，用户输入错误无法及时知晓，体验不好”的问题。2.提出问题“有没有办法让网页能‘感知’用户的操作，比如输入框失去焦点时检查内容是否合法，页面加载完成时给出提示，表单提交前验证信息。3.演示“添加事件后的动态登录页面”。1.教师通过智慧树教学平台发布课前预习讨论问答帖；2.提出“增强网页交互性”的需求问题后，展示添加事件后动态登录页面，边演示边讲解“这些就是事件的作用：让网页能‘感知’并响应用户或浏览器的操作。1.以小组为单位在线提交讨论结果；2.仔细观察教师展示的静态与动态登录页面，结合提问，思考静态网页在“用户反馈”“操作验证”等方面的问题，明确静态网页交互性不足的弊端。1.通过回顾静态网页交互性差的痛点，为事件“响应用户操作、实现动态交互”的核心知识学习搭建桥梁。2.将抽象的事件学习与网页交互优化任务挂钩，让学生明确学习目的，激发主动探索的内驱力。。学习目标明确JavaScript“事件驱动”的编程范式；熟练掌握4类窗口事件；明晰事件与项目的关联。教师发布课前预习PPT和动画视频资源。学生以小组形式预习PPT内容，观看动画资源。以学生为主体，学生明确学习目标，有助于实践学习。课前测验在智慧树平台互动问答模块设计“互动问答+题库测验”两类课前测验，兼顾实时互动摸底与系统结果反馈。在智慧树平台题库模块发布课前测验试题，平台反馈测验结果，对学生掌握情况摸底。教师通过智慧树发布线上问答和课前测验。学生完成智慧树平台线上的问答和课前测验。了解学生知识水平，调整教学方案。参与式学习-词汇学习（4分钟）1.WindowEvent，窗口事件；2.onload，加载完成事件；3.onchange，值改变事件。讲解本次课相关专业英语词汇，引领学生反复读并且记忆。小组间互相反复读，达到理解记忆的效果。1.思政元素：学好专业英语词汇，助力工匠精神的全球传播。2.培养学生编程学习能力。参与式学习-VR体验（5分钟）参与式学习-播放视频（3分钟）参与式学习-任务一：掌握事件三要素与绑定方式（20分钟）智慧树平台学习任务：1.明确事件“三要素”的定义与关联逻辑，理解“事件驱动”是JavaScript响应用户/浏览器操作的核心范式；2.结合“中华优秀传统文化网站”需求，用onload事件实现“首页加载完成后弹出‘欢迎浏览中华优秀传统文化网站’提示”，验证事件绑定与执行逻辑。引出知识点：1.结合文档“中华优秀传统文化网站”背景，以“首页加载反馈”为例，完整演示“确定事件源→选择事件类型→编写处理程序”的流程，强化“事件三要素缺一不可”的认知；2.通过清华在线平台发布课堂小测。明确知识点：1.学生按照按照教师演示，进行实践项目操作；2.小组验证：组内互相检查事件绑定规范性，指出问题，共同修正代码，确保每个成员都能通过onload事件实现页面加载交互。1.培养学生“根据交互需求选择事件绑定方式”的意识，为后续复杂元素事件（如输入框失焦、表单提交）奠定基础；2.，让学生精准掌握事件三要素与绑定逻辑，避免“事件源与处理程序不匹配”的问题。参与式学习-任务二：精通onblur事件，实现登录表单输入验证（25分钟）智慧树平台学习任务：1.掌握onblur事件的触发场景、语法规则，代码绑定；2.针对“中华优秀传统文化网站”，用onblur事件实现“手机号/邮箱输入框失焦验证”。引出知识点：1.在HBuilder中演示“输入为空时添加红色边框+提示”“输入非空时清除边框”的效果，标注“this传递事件源可避免重复获取元素”的优势。明确知识点：1.组内互相测试输入框，模拟“空输入失焦”等场景，检查验证结果是否符合预期，修正“未判断空格字符”等问题，确保onblur事件精准响应。1.思政元素：培养学生“用事件实现即时交互反馈”的能力；2.通过智慧树平台课堂小测，了解学生知识点掌握情况。参与式学习-任务三：运用onsubmit事件，实现登录表单提交防护（25分钟）智慧树平台学习任务：1.掌握onsubmit事件的触发场景、语法规则与核心特性，结合文档示例理解“表单提交前合法性检查”的逻辑。；2.在网站的“古代工匠”“近代工匠”两个页面中，调用同一封装函数，传入不同工匠信息，生成统一风格的信息卡片，体会函数“减少冗余、便于维护”的优势。引出知识点：1.教师展示“登录页面优化”的最终效果以“登录表单提交防护”为例，拆解任务流程：①绑定onsubmit事件→②编写检查函数→③判断输入合法性→④返回布尔值控制提交。用”的必要性。明确知识点：1.实践操作：①在“login.html”表单中添加onsubmit事件绑定；②编写checkForm()函数；；2.在小组内展示自己的网页效果，介绍所用技术与解决的问题。1.让学生掌握“返回值控制提交”的关键逻辑，避免“表单提交失控”的问题。；2.培养学生“综合运用多类窗口事件解决复杂交互需求”的思维，提升代码的逻辑性与安全性。参与式学习-总结提高（3分钟）课堂总结：总结知识点，强调重难点。点明任务：教师归纳总结，夯实基础。明确任务：学生通过回顾本节课知识点，拓展提高。思政元素：引导学生树立“严谨务实、精益求精”的工匠精神。课后测试（5分钟）智慧树平台发布课后测试：1.拓展任务：运用窗口事件优化“中华优秀传统文化网站”登录页面，实现“输入框onblur失焦验证”“表单onsubmit提交检查”“页面onloa