第9单元 BOM对象模型简介和操作（教案2：2 学时）

教学设计一、基本信息课程名称Web前端开发技术（AIGC版）课题名称BOM对象模型简介和操作授课班级授课时间授课类型理实一体化、新授课授课地点机房授课学时40分钟*2学时教材分析本节选自教材第九单元核心内容，BOM是JS操作浏览器的核心技术，与DOM共同构成前端动态开发的基础。内容涵盖BOM概念、窗口对象（window）、导航对象（location）、历史对象（history）等核心对象及常用操作，教材案例贴合浏览器交互场景，可结合AIGC辅助生成API调用代码，降低抽象知识学习难度，契合职校理实一体化教学理念，是实现浏览器层面交互效果的重要支撑。学情分析1.前置基础：已掌握HTML/CSS布局、JS核心语法及DOM对象操作，能编写简单动态网页代码，熟悉VSCode与浏览器调试工具，具备AIGC工具基础使用能力，了解网页运行的基本环境。2.学情特点：动手能力强、具象思维突出，对“浏览器交互”类实操项目兴趣浓厚；抽象逻辑较弱，对BOM与DOM的区别、浏览器对象层级关系理解困难，易混淆相关API用法。3.衔接需求：通过本课程掌握BOM核心操作技能，衔接前序DOM知识，为后续事件处理、本地存储、数据交互等内容铺垫，完善前端动态开发知识体系。教学目标【知识目标】：1.理解BOM对象模型概念、核心对象构成及与DOM的区别与联系。2.掌握window、location、history对象的常用属性与方法，能结合教材案例编写代码。【能力目标】：1.能独立运用BOM方法实现浏览器窗口控制、页面跳转、历史记录操作等功能。2.能借助AIGC工具生成BOM操作代码，排查API调用语法与逻辑错误。【素质目标】：1.培养严谨的编码习惯与浏览器交互思维，提升问题排查与API应用能力。2.强化“AI协同开发”理念，提升高效解决浏览器层面交互问题的能力。教学重点1.window对象常用方法（alert、confirm、setTimeout等）的使用。2.location对象实现页面跳转、刷新，history对象操作浏览历史的方法应用。教学难点1.BOM与DOM的区别与联系，及BOM对象层级关系的理解。2.setTimeout与setInterval方法的使用差异，及定时器清除逻辑的实现。教学准备1.硬件：机房计算机、投影仪、网络环境。2.软件：VSCode、Chrome浏览器、超星教学平台、AIGC工具（通义灵码）。3.素材：教材BOM案例代码、BOM与DOM对比图、实操任务单、AIGC提示词模板、微课视频。教学方法1.主导方法：BOPPPS教学法。2.辅助方法：理实一体化教学法、案例演示法、讲练结合法、小组协作法、对比教学法。板书设计BOM对象模型及操作1.概念：浏览器对象模型，与DOM的区别2.核心对象：window（弹窗/定时器）、location（跳转）3.方法：alert、location.href、history.back()二、教学设计教学环节教学内容师生活动设计意图/时间一、导入（Bridge-in）1.情景演示：展示3个浏览器交互效果（弹窗提示、自动跳转页面、定时刷新），提问学生：“这些与浏览器本身交互的效果，如何通过JS实现？”2.引出主题：告知学生实现这些效果的核心技术是BOM，说明BOM的作用——让JS能“操控”浏览器，关联网站登录后自动跳转、弹窗提示等实际场景，激发学习兴趣。3.亮点预告：介绍本节课可借助AIGC工具生成BOM操作代码，快速区分易混淆API，帮助理解抽象概念。教师：1.演示浏览器交互效果，引导学生观察与DOM动态效果的区别，提出问题引发思考。2.简要说明BOM的核心价值，结合实际场景让学生感知知识的实用性。3.展示AIGC生成简单弹窗代码的过程，降低学生对新知识的畏惧感。学生：1.观察演示效果，对比DOM效果思考差异，主动回应教师提问。2.明确本节课学习目标，对AIGC辅助区分API用法产生兴趣，做好学习准备。设计意图：以浏览器交互效果导入，贴合职校生具象思维特点，激发学习兴趣；提前渗透AIGC辅助亮点，为后续实操铺垫。时间：5分钟（第一学时）二、目标（Objective）1.知识目标：掌握BOM概念、核心对象构成，学会window、location对象常用属性与方法的使用。2.能力目标：能独立完成教材范例9-3的简化版实操，借助AIGC优化代码，区分易混淆API。3.重难点告知：明确重点为window、location对象操作，难点为BOM与DOM区别及定时器逻辑，说明将通过对比演示与分步实操突破。教师：1.逐条明确教学目标，结合实操任务说明目标的可达成性。2.用通俗语言解读重难点，告知学生突破方法，让学生做到心中有数。学生：1.记录教学目标与重难点，明确学习重点方向。2.结合自身基础，预判学习难点（如定时器逻辑），做好针对性听讲准备。设计意图：明确目标与重难点，帮助学生聚焦学习核心，提升课堂效率；提前告知突破方法，增强学生学习信心。时间：3分钟（第一学时）三、前测（Pre-assessment）1.基础提问（口头）：DOM的核心作用是什么？JS中函数的调用方式有哪些？2.简单实操（5分钟）：让学生在VSCode中创建HTML文件，编写基础结构，引入JS脚本标签，尝试编写简单弹窗代码（可自主探索或借助AIGC）。3.结果反馈：快速巡视学生实操情况，了解学生对BOM的初步认知，纠正脚本引入错误等共性问题。教师：1.口头提问快速检验前置DOM知识，对回答不完整的地方补充讲解。2.巡视实操过程，对能自主写出弹窗代码的学生给予肯定，对无思路的学生提供简单提示。学生：1.积极回应口头提问，巩固前置知识。2.按要求完成简单实操，自主探索弹窗代码编写，对疑难问题举手求助。设计意图：检验前置DOM知识掌握情况，初步了解学生对BOM的认知，为后续教学调整节奏；通过简单实操铺垫BOM操作的基础环境。时间：7分钟（第一学时）四、参与式学习（ParticipatoryLearning）-新知讲授与实操11.BOM概念与核心对象（对比演示）：（1）展示BOM与DOM对比图，讲解BOM定义（浏览器对象模型），核心对象构成（window、location、history等），明确BOM操控浏览器、DOM操控网页元素的核心区别。（2）说明window对象是BOM的顶层对象，所有BOM对象都是window的子对象，可省略window前缀调用方法。2.window对象弹窗方法（案例演示+分步实操）：（1）讲解alert、confirm、prompt三种弹窗方法：分别演示用法，说明返回值差异（alert无返回值、confirm返回布尔值、prompt返回输入内容）。（2）学生实操：在之前的文件中，编写三个按钮，分别绑定三种弹窗方法，测试效果并记录返回值。3.AIGC辅助：给出提示词“用JS编写三个按钮，分别实现alert弹窗、confirm确认弹窗、prompt输入弹窗，打印confirm和prompt的返回值”，生成代码并对比讲解。教师：1.用对比图拆解抽象概念，语言通俗化，明确BOM与DOM的边界，突破理解难点。2.分步演示弹窗方法，结合浏览器控制台展示返回值，及时纠正学生的语法错误。3.指导学生使用AIGC生成代码，讲解代码逻辑，引导学生区分三种弹窗的适用场景。学生：1.结合对比图理解BOM概念与核心对象，记录三种弹窗方法的语法与返回值。2.按步骤完成实操，测试弹窗效果，通过控制台查看返回值，自主排查按钮绑定错误。3.尝试使用AIGC生成代码，对比自身代码，优化写法与注释。设计意图：通过对比演示突破BOM与DOM区别的难点，分步实操强化弹窗方法应用；融入AIGC辅助，提升代码编写效率，契合课程特色。时间：15分钟（第一学时）五、参与式学习（ParticipatoryLearning）-新知讲授与实操21.window对象定时器方法：（1）讲解setTimeout与setInterval方法：对比演示用法，说明差异（setTimeout延迟执行一次、setInterval重复执行），讲解clearTimeout与clearInterval清除定时器的方法。（2）学生实操：编写“延迟弹窗”按钮（3秒后弹出提示）和“循环弹窗”按钮（每2秒弹出一次），添加“清除定时器”按钮，测试效果。2.简单应用：结合教材案例，实现“3秒后自动隐藏提示文本”功能，整合定时器与DOM操作。教师：1.对比演示两种定时器方法，用实例说明适用场景，强调清除定时器的重要性，突破难点。2.巡视学生实操，重点指导定时器ID获取与清除逻辑，集中讲解共性问题（如忘记清除定时器导致循环弹窗）。学生：1.记录两种定时器方法的区别与用法，按要求完成实操任务，测试定时器与清除功能。2.自主整合DOM与BOM操作，实现提示文本隐藏功能，小组间相互检查效果。设计意图：通过对比演示与实操，让学生掌握定时器方法及清除逻辑，明确方法选型；整合DOM与BOM操作，强化知识关联性，提升综合应用能力。时间：10分钟（第一学时）六、后测（Post-assessment）-第一学时小结1.小组任务（5分钟）：2人一组，结合本节课内容，完成“弹窗+定时器”综合实操（如延迟3秒后弹出确认弹窗，点击确认执行页面提示），代码添加注释。2.成果抽检：选取2组学生作品，在投影仪展示，点评亮点与不足，纠正定时器清除逻辑错误。3.小结回顾：梳理本节课核心知识点，强调三种弹窗方法的区别、定时器的使用与清除技巧。教师：1.布置小组任务，明确时间与要求，巡视指导小组协作。2.点评抽检作品，集中讲解共性错误，强化知识点记忆。3.简洁小结，衔接下一时学内容（location、history对象操作）。学生：1.小组协作完成任务，相互检查代码，排查定时器逻辑错误。2.对照优秀作品，修正自身不足，记录小结要点。设计意图：通过小组任务检验学习效果，强化弹窗与定时器的综合应用能力；点评与小结结合，帮助学生梳理知识体系，为下一时学铺垫。时间：5分钟（第一学时）一、导入（Bridge-in）1.回顾衔接：提问上一时学内容（三种弹窗方法、定时器方法及区别），快速抽查2名学生回答。2.情景延伸：展示教材范例9-4效果（点击按钮跳转页面、返回上一页），提问“如何通过JS控制页面跳转与浏览历史？”，引出本节课内容（location、history对象操作）。3.任务预告：本节课将完成教材范例9-4的完整实操，掌握BOM核心对象全流程操作。教师：1.快速回顾旧知，强化记忆，为新知衔接铺垫。2.展示案例效果，提出问题引发思考，激发学生探索欲。学生：1.积极回应回顾提问，巩固旧知。2.观察案例效果，思考问题答案，明确本节课学习方向。设计意图：温故知新，实现新旧知识自然衔接；以案例提问导入，贴合职校生实操导向，激发学习兴趣。时间：4分钟（第二学时）二、目标（Objective）1.知识目标：掌握location对象常用属性（href）与方法（reload）、history对象常用方法（back、forward、go），理解教材范例9-4核心逻辑。2.能力目标：能独立完成教材范例9-4实操，实现页面跳转、刷新及历史记录操作。3.重难点告知：重点为location对象实现页面跳转，难点为history对象与浏览器历史记录的关联逻辑，将通过分步实操与案例拆解突破。教师：1.明确本节课教学目标，结合教材案例说明实操任务。2.解读重难点，告知突破方法，引导学生针对性学习。学生：1.记录目标与重难点，结合旧知预判学习难度。2.结合教材案例，做好听讲与实操准备。设计意图：明确学习核心，让学生聚焦重点；提前告知重难点及突破方法，提升课堂学习针对性。时间：3分钟（第二学时）三、前测（Pre-assessment）1.实操回顾：让学生打开上一时学的实操文件，快速修改代码，验证定时器清除功能的有效性。2.问题提问：网页中手动跳转页面的方式有哪些？JS中如何获取当前页面URL？（为location对象实操铺垫）3.反馈纠正：针对学生回顾实操中的错误，快速讲解修正，确保旧知掌握扎实。教师：1.巡视学生回顾实操情况，对遗忘定时器清除逻辑的学生单独指导。2.提问页面跳转相关知识，补充讲解URL的基本概念，为location对象实操铺垫。学生：1.快速回顾旧知实操，排查代码错误。2.回应提问，巩固URL相关基础，为新知实操做好准备。设计意图：巩固旧知，确保学生具备学习新知的基础；铺垫URL知识，降低location对象实操难度。时间：3分钟（第二学时）四、参与式学习（ParticipatoryLearning）-新知讲授与实操31.location对象操作（教材范例9-4拆解）：（1）讲解location.href属性与reload方法：演示通过href实现页面跳转（跳转到首页、指定网页），通过reload实现页面刷新，说明href属性的读写特性。（2）学生实操：创建3个按钮，分别实现“跳转到百度首页”“刷新当前页面”“跳转到上一时学实操页面”功能，测试效果。2.history对象操作（教材范例9-4拆解）：（1）讲解history.back、forward、go方法：演示back返回上一页、forward前进一页、go(-1)等价于back的用法，说明与浏览器历史记录的关联。（2）学生实操：添加“返回上一页”“前进一页”按钮，结合页面跳转功能测试历史记录操作。3.AIGC辅助：给出提示词“编写JS代码，实现页面跳转（百度）、刷新、返回上一页功能，绑定到对应按钮”，生成代码并优化。教师：1.分步拆解教材案例，演示每个方法的使用，结合浏览器地址栏与历史记录栏展示效果。2.重点讲解history对象与浏览器历史记录的关联，用通俗语言解释“历史栈”概念，突破难点。3.指导学生使用AIGC生成代码，对比教材案例优化逻辑，讲解代码注释写法。学生：1.跟随演示拆解案例，记录location、history对象方法的语法与使用步骤。2.按步骤完成实操，测试按钮功能，自主排查“跳转失败”“历史记录操作无效”等问题。3.借助AIGC优化代码，添加注释，规范编码格式。设计意图：拆解教材案例，降低实操难度，契合职校生分步学习习惯；强化AIGC辅助，提升代码质量与编码效率；突破history对象与历史记录关联的难点。时间：18分钟（第二学时）五、参与式学习（ParticipatoryLearning）-综合实操1.综合任务设计（教材案例拓展）：（1）任务要求：创建一个综合页面，整合本节课所有BOM知识，实现“弹窗提示→3秒后自动跳转到百度→点击返回按钮回到本页面→刷新页面”全流程功能。（2）实操步骤：①页面加载时弹出确认弹窗（是否进入跳转）；②点击确认则3秒后跳转，点击取消则弹出提示；③跳转后通过返回按钮回到本页面，添加刷新按钮测试刷新功能。2.问题排查：鼓励学生借助AIGC工具排查跳转逻辑错误、定时器与跳转协同问题。教师：1.明确综合任务要求与步骤，强调各BOM方法的协同逻辑，巡视指导实操过程。2.为遇到问题的小组提供AIGC提示词优化建议，帮助快速排查逻辑错误（如定时器与跳转顺序冲突）。3.收集共性问题，集中演示修正方法，强化综合应用能力。学生：1.独立或小组协作完成综合任务，按步骤编写代码，测试全流程功能。2.借助AIGC工具排查疑难错误，优化代码逻辑与交互体验，确保各功能衔接流畅。3.完成后添加详细注释，规范编码格式，小组间相互测试功能。设计意图：通过综合任务整合所有知识点，提升学生知识应用与协同开发能力；持续强化AIGC在复杂问题排查中的应用，落实“AI协同”核心亮点。时间：8分钟（第二学时）六、后测（Post