项目8-3JavaScript对象-正则表达式

项目8添加中华优秀传统文化网站动态行为课程名称授课内容JavaScript对象、正则表达式授课学期2024-2025（1）学期授课班级授课时间授课地点授课形式理论+实践授课课时学情分析授课对象计算机应用技术专业学生，开设于大一第二学期。学生知识经验分析学生已掌握JavaScript基础语法与函数知识，能编写简单代码实现“工匠信息输出”“基础逻辑判断”，对“引用数据类型”有初步认知。学生学习能力分析对抽象的“对象原型”“正则元字符组合”理解难度较大，易陷入“死记语法而不理解原理”的误区。学生思想状况分析渴望通过“成功存储工匠信息”“精准验证表单”获得成就感，对“即时反馈”需求强烈。教学目标知识目标掌握JavaScript对象的核心概念与操作；理解正则表达式的构成与功能；明晰技术与项目的关联。能力目标能根据“工匠信息存储”需求，选择合适方式声明对象；具备正则表达式应用能力。价值目标通过对象“键值对存储”特性，理解“将零散数据整合为结构化单元”的优势。通过正则表达式“精准匹配”特性与对象“属性操作规范性”要求，理解“编程需注重细节。重点难点解决策略：采取互动、分组讨论方法，通过案例落实重难点内容学习。思政资源教学方法线上线下混合式教学、任务驱动教学法、自主探究学习法、小组学习法、VR体验法教学手段多媒体、VR、动画视频等课程资源智慧树线上课程资源清华在线教学平台教学视频教学照片课程案例观看动画授课照片教学实施教学内容教师活动学生活动意义课前引入1.学生回顾前置知识：展示“中华优秀传统文化网站——工匠主题”页面中，用零散变量存储工匠信息的代码片段，引导学生思考“多工匠信息管理时，变量零散、不易维护的问题。2.提出问题“有没有办法把工匠的多维度信息‘打包’管理？3.演示演示“用对象存储工匠信息”的效果。1.教师通过智慧树教学平台发布课前预习讨论问答帖；2.通过多媒体展示零散变量存储工匠信息、简单if判断输入的代码片段，提问“大家看这些代码，管理多个工匠信息时会不会很麻烦。1.以小组为单位在线提交讨论结果；2.认真对比“零散变量/对象”“简单if/正则”的代码及效果，感受对象“数据结构化”和正则“匹配精准化”的优势1.通过回顾数据管理与格式验证的痛点，为对象“结构化存储”和正则“精准匹配”的核心知识学习搭建桥梁。2.紧密结合“讲好工匠故事”的项目需求，激发主动探索的内驱力。学习目标掌握JavaScript对象的核心概念与操作；理解正则表达式的构成与功能；明晰技术与项目的关联。教师发布课前预习PPT和动画视频资源。学生以小组形式预习PPT内容，观看动画资源。以学生为主体，学生明确学习目标，有助于实践学习。课前测验在智慧树平台互动问答模块设计“互动问答+题库测验”两类课前测验，兼顾实时互动摸底与系统结果反馈。在智慧树平台题库模块发布课前测验试题，平台反馈测验结果，对学生掌握情况摸底。教师通过智慧树发布线上问答和课前测验。学生完成智慧树平台线上问答和课前测验。了解学生知识水平，调整教学方案。参与式学习-词汇学习（4分钟）1.RegularExpression，正则表达式；2.Pattern，模式；3.Replace，替换。讲解本次课相关专业英语词汇，引领学生反复读并且记忆。小组间互相反复读，达到理解记忆的效果。1.思政元素：学好专业英语词汇，助力工匠精神的全球传播。2.培养学生编程学习能力。参与式学习-VR体验（5分钟）参与式学习-播放视频（3分钟）参与式学习-任务一：掌握JavaScript对象操作（20分钟）智慧树平台学习任务：1.基于文档8.2.4“JavaScript对象”核心内容，掌握对象两种声明方式；2.结合“中华优秀传统文化网站”需求，用对象结构化存储至少3位古代工匠（如鲁班、墨子、宋应星）的“姓名、核心技能、代表成就”信息。。引出知识点：1.布置“用对象存储3位工匠信息并遍历”的任务，巡视学生操作，针对“属性名拼写错误导致无法访问”“for…in循环语法遗漏”等问题2.通过清华在线平台发布课堂小测。明确知识点：1.实践操作：①用两种声明方式分别创建“墨子”对象，对比语法简洁度；②为对象添加“姓名、技能、成就”属性，定义showInfo()方法返回完整工匠信息；2.小组讨论操作流程和实现结果。1.落实文档8.2.4“JavaScript对象”核心知识点，让学生精准掌握对象声明、属性操作、遍历逻辑，避免“对象操作语法混乱”的问题。；2.培养学生“用对象结构化组织数据”的思维；3.了解学生知识点掌握情况。参与式学习-任务二：精通正则表达式基础（25分钟）智慧树平台学习任务：1.掌握正则表达式的核心构成：普通字符与元字符，理解元字符的组合规则；2.结合“中华优秀传统文化网站”注册表单，实现“非空验证”“工匠编号验证。引出知识点：1.案例演示：参照示例，编写“工匠编号验证”代码，在浏览器中输入“G1234”、“G123”，展示test()方法的实时验证效果；演示replace()方法替换工匠介绍中的错误表述，标注“第一个参数为正则，第二个为替换内容”的语法。。明确知识点：实践操作：①创建3个正则表达式，分别对应非空、工匠编号、中文姓名验证；②在HTML中创建简单表单，编写JavaScript函数，在页面显示“合法”或“非法”提示；③尝试用replace()方法，观察效果。1.思政元素：培养学生“用正则解决格式验证需求”的能力，为后续实现网站注册表单奠定技术基础，提升代码的实用性；2.通过智慧树平台课堂小测，了解学生知识点掌握情况。参与式学习-任务三：综合应用对象与正则（25分钟）智慧树平台学习任务：1.实现“对象存储+正则验证”的联动：定义包含“姓名、工匠编号、手机号”的工匠对象数组；2.遍历对象数组时，用正则表达式验证“工匠编号格式”，并通过replace()方法修正部分错误；3.将验证通过的工匠信息，通过对象方法在页面中格式化展示。引出知识点：1.教师展示表单验证与工匠信息展示的关联需求，指出“实际开发中，需先验证数据格式，再展示合法信息”，引出“对象存储数据+正则验证格式”的综合应用场景。2.巡视学生综合任务完成情况。明确知识点：1.实践操作：①创建包含3位工匠的对象数组，故意设置1-2个不合法属性；②编写验证函数，遍历数组并调用函数，记录错误信息；③用replace()修正可修复的错误；1.培养学生“整合多技术解决复杂问题”的思维，提升代码的逻辑性与实用性；2.培养学生“注重细节打磨、追求高质量交付”的工匠精神。参与式学习-总结提高（3分钟）课堂总结：总结知识点，强调重难点。点明任务：教师归纳总结，夯实基础。明确任务：学生通过回顾本节课知识点，拓展提高。思政元素：引导学生树立“严谨务实、精益求精”的工匠精神。课后测试（5分钟）智慧树平台发布课后测试：1.拓展任务：参照文档“技术服务网站动态行为”的目标，将对象与正则结合，实现“工匠信息对象数组遍历+属性值正则验证”，如验证对象中“工匠编