Web前端开发（JavaScript+jQuery）【教案】《WEB前端技术混合式教学设计方案》单元设计

宁波城市职业技术学院混合式教学设计方案（2023～2024学年第2学期）课程名称：WEB前端技术 课程负责人： **** 开课学院（部）：******************** 联系电话：*************** 教务处制二○二*年*月课程基本情况网络教学平台超星学习通课程网址/mycourse/teachercourse?moocId=97062332&clazzid=27497035&edit=true&v=0&cpi=0&pageHeader=0联系方式电话箱：luqiujin@课程加入方式：二维码或直接导入教学实施进程表(整个学期)序号周次课时数项目任务名称授课方式以及线上线下课时分配1第01周4JavaScript入门线上1+线下32第02周4JavaScript基础线上1+线下33第03周4数组线上1+线下34第04周4函数线上1+线下35第05周4对象线上1+线下36第06周4BOM线上1+线下37第07周4DOM线上1+线下38第08周4JavaScript事件线上1+线下39第09周4jQuery基础线上1+线下310第10周4jQuery选择器线上1+线下312第11周4jQuery操作DOM线上1+线下312第12周4jQuery事件处理机制线上1+线下313第13周4jQuery动画线上1+线下314第14周4综合案例线上1+线下315第15周4综合实训线上1+线下316第16周4测试与作品提交线上1+线下3混合式教学单元设计方案一、教学基本情况项目（任务）名称JavaScript入门课程类型线上+线下授课时间第1周授课地点*****班级*****课时线上1+线下3二、教学目标和内容教学目标（用词表述要准确，可测量、可评价，建议根据布鲁姆教育目标分类法）素质目标包含课程思政内容知识目标熟悉JavaScript的用途和发展状况理解JavaScript与ECMAScript的关系掌握JavaScript的基本使用方法能力目标掌握变量的定义与赋值掌握数据类型与运算符的使用条件语句的使用素质目标养成细心、耐心、用心的学习习惯养成良好书写代码的习惯养成良好的浏览网页、发布网页的习惯具体团队合作意识具有吃苦耐劳的品质具有良好的网络素养教学内容在Web前端开发中，HTML、CSS和JavaScript是开发一个网页所必备的技术。在掌握了HTML和CSS技术之后，已经能够编写出各式各样的网页了，但若想让网页具有良好的交互性，JavaScript就是一个极佳的选择。本章将介绍JavaScript的基本概念，变量定义、数据类型、运算符等基础语法进行详细讲解。并通过实践案例来体验JavaScript编程。教学重点JavaScript引入方式、语法风格、注释、输出语句教学难点数据类型转换、字符串/赋值/逻辑运算符、运算符优先级教学重难点解决方法措施：通过上机操作加强学习和补充案例进行巩固。三、课前学习情况分析1.课前学习任务布置及推送提示：任务1:观看2个视频（共计15分钟）任务2：完成课前测试，共计5个单项选择题（共计5分钟）发布时间：202*年2月21日，截至时间：202*年06月30日。2.课前学习任务完成情况分析提示（实施完成后填写）：本次课前学习任务共有人完成视频观看，个同学未观看视频。本次课前测试共有个同学参加测试，从测试的结果来看，XX知识点掌握情况较好，XX知识点需要进一步讲解分析。四、教学实施过程教学环节（线上/线下）教学内容教学活动设计意图环节一：课前任务20分钟线上观看视频完成课前测试在线答疑指定安装软件为上课做准备，对课中内容有一个整体的把握环节二：课前回顾10分钟线下1.什么是JavaScript；2.JavaScript的由来与发展；3.JavaScript的特点；4.开发工具介绍什么是JavaScript作用：开发交互式的Web页面。分工：HTML负责结构，CSS负责样式，JavaScript负责行为。JavaScript可以嵌入到网页中。应用：演示JavaScript在网页开发中的应用，如轮播图、选项卡、地图、表单验证、百度搜索框等。优点：可以使网页的互动性更强，用户体验更好。JavaScript的由来与发展由来：1995年网景公司开发的LiveScript。名称改变：借用Java名气，改名为JavaScript，两者其实是不同的语言。设计初衷：嵌入到网页中的编程语言，用来控制浏览器的行为。滥用现象：广告、弹窗、恶意代码、安全漏洞。里程碑：Ajax技术的流行与发展。未来发展：服务器端Node.js、移动端开发、全栈开发。JavaScript的特点JavaScript是脚本语言，具有脚本语言的一些特点：简单、易学、易用。JavaScript可以跨平台，开发和使用都非常方便，支持PC和移动端。JavaScript支持面向对象，诞生了许多库和框架，提高开发速度，能够用来解决复杂问题。开发工具——浏览器介绍常见的浏览器和其开发厂商。了解常见浏览器的特点。注意老版本IE浏览器的市场占有率和兼容性问题。重点介绍标准浏览器——Chrome、火狐。介绍浏览器的引擎，并列举常见浏览器和与之相对应的引擎。理解浏览器引擎与浏览器、开发人员的关系。熟悉浏览器的兼容问题。熟悉Chrome浏览器的开发者工具。开发工具——代码编辑器了解常见的代码编辑器。选择一种代码编辑器进行详细讲解。掌握代码编辑器的安装和使用方法，并掌握基本的配置。对线上学习情况的回顾与总结能够加深学生对线上所学知识的理解。在此基础上老师深入讲解，学生进行操作，使学生的知识与能力得到进一步提升。环节三：教学演示学生练习30分钟线下创建一个JavaScript程序创建网页并设置编码创建hello.html文件。将编码设置为UTF-8无BOM格式。补充讲解常见字符集、编码格式，如ANSI、GB2312、GBK、Unicode、UTF-8，以及UTF-8的BOM的含义。将JavaScript嵌入到HTML思考如何在HTML中嵌入JavaScript，引出“落脚点”的概念。思考JavaScript代码应该写在什么位置。讲解JavaScript标记——<script>。介绍一个基本函数alert()的使用，输出一个字符串。讲解语句的概念，以及“;”的作用。测试网页程序使用浏览器打开hello.html。观察程序运行结果。总结JavaScript基本语法规则JavaScript严格区分大小写，演示将alert改成Alert观察效果。JavaScript对空格、换行、缩进不敏感，一条语句可以分成多行书写。演示将alert后面的括号“()”换到下一行，观察程序是否正确执行。JavaScript的分号可以省略，但要注意什么情况下可以省略，什么情况下不能省略。并指出代码风格的重要性，不建议省略分号。使学生掌握JavaScript的整体结构环节四：教师演示学生练习45分钟线下JavaScript的三种引入方式JavaScript引入方式——嵌入式<script>标记、type属性的作用。JavaScript引入方式——外链式演示外链式的实现方式，以及代码书写的细节。复习相对路径、绝对路径、URL地址的概念。比较外链式和嵌入式的优缺点，以及适合的应用场景。JavaScript引入方式——行内式了解行内式的代码书写方式。了解行内式的应用场景。JavaScript引入方式——异步加载讲解JavaScript在网页中的加载顺序，以及代码阻塞的问题。演示<script>的属性async和defer的作用，比较两者的区别。掌握JavaScript的三种引入方式环节五：教学演示学生练习20分钟线下JavaScript的常用输出语句；JavaScript中在注释的使用；JavaScript中数据的简单运算；注释理解注释的作用，为什么要在代码中使用注释。演示单行注释的基本代码。演示多行注释的基本代码，注意嵌套问题。比较单行注释和多行注释，掌握各自的特点。6.数据与运算演示如何利用JavaScript实现加、减、乘、除运算。演示如何利用JavaScript比较两个数字的大小。熟悉字符串的概念，演示如何使用字符串来保存数据。演示使用比较运算符“==”比较两个字符串是否相同。演示字符串与数字拼接的细节问题，“+”针对数字和字符串操作的区别。演示如何根据比较的不同结果，执行不同的代码。掌握JavaScript的常用输出语句；学会是还有注释；掌握简单的数据运算。环节六：教学演示学生练习20分钟线下8.数据类型的分类9.数据类型转换10表达式、算术运算符、字符串运算符、赋值运算符、比较运算符主要掌握数据类型及转换；条件语句的使用；环节七：课程小结等5分钟线下涵盖本单元所有教学内容。老师对本任务所学的基本知识及软件操作方法进行总结。总结有助于学生对本任务所学内容进行梳理。环节八：课程任务5分钟线上教师发放测试题目及案例素材，学生进行上机测试。以此检查学生对相关知识点的掌握情况。测试完成后将作品通过平台提交给老师。【动手实践】条件语句的实现--学生成绩等级的实现通过测试及动手制作使学生巩固课堂学的知识作业考核评价60分钟线上教师对学生的提交的上机测试作品进行点评，指出代码中容易出现错误的地方，并给与解答。有问题的同学点对点沟通指导反思与改进混合式教学单元设计方案一、教学基本情况项目（任务）名称JavaScript基础课程类型线上+线下授课时间第2周授课地点*****班级*****课时线上1+线下3二、教学目标和内容教学目标（用词表述要准确，可测量、可评价，建议根据布鲁姆教育目标分类法）素质目标包含课程思政内容知识目标1.掌握基本处理流程。2.掌握几种常用的循环语句能力目标1.掌握流程控制语句的使用 2.掌握变量的基本使用素质目标1.逐步培养细心、耐心的工作态度。2.培养团队协作和沟通交流的工作能力。3.培养表述、回答等语言表达能力，以及规范书写代码的习惯；4.培养学生具有良好的科学素养和职业道教学内容JavaScript条件语句多分支判断语句的使用JavaScript循环语句(while,dowhile,for)for循环嵌套语句的使用教学重点ifelseif，switch的异同dowhile,while语句的异同for循环嵌套语句的使用教学难点ifelseif，switch的异同dowhile,while语句的异同for循环嵌套语句的使用教学重难点解决方法措施：通过上机操作加强学习和补充案例进行巩固。三、课前学习情况分析1.课前学习任务布置及推送提示：任务1:观看2个视频（共计15分钟）任务2：完成课前测试，共计5个单项选择题（共计5分钟）发布时间：发布时间：202*年2月21日，截至时间：202*年06月30日。2.课前学习任务完成情况分析提示（实施完成后填写）：本次课前学习任务共有人完成视频观看，个同学未观看视频。本次课前测试共有个同学参加测试，从测试的结果来看，XX知识点掌握情况较好，XX知识点需要进一步讲解分析。四、教学实施过程教学环节（线上/线下）教学内容教学活动设计意图环节一：课前任务20分钟线上观看视频完成课前测试在线答疑为上课做准备，对课中内容有一个整体的把握环节二：课前回顾5分钟线下1.JavaScript表达式的使用；2.JavaScript的特点；3.开发工具的使用（1）思考如何将现实生活中的判断（假如..否则…等）以及只要符合某要求就重复执行某些操作的关系在程序中表示出来。流程控制语句：顺序、选择和循环。选择结构语句指的就是需要对一些条件进行判断，从而决定执行指定的代码。循环语句就是可以实现一段代码的重复执行，如计算给定区间内的偶数等。（2）明确学习方向。掌握选择结构语句if、switch的使用方法。掌握循环结构语句while、do…while、for的使用方法。掌握跳转语句break、continue的使用方法。重点介绍标准浏览器——Chrome、火狐。对线上学习情况的回顾与总结能够加深学生对线上所学知识的理解。在此基础上老师深入讲解，学生进行操作，使学生的知识与能力得到进一步提升。环节三：教学演示学生练习25分钟线下1.选择结构语句分类：单分支（if）、双分支（if…else）和多分支（if…elseif…else），switch也属于多分支。2.选择结构——单分支if作用：当满足某种条件时，就进行某种处理。演示单分支的语法结构，绘制流程图，以及示例代码。3选择结构——双分支if…else作用：当满足某种条件时，就进行某种处理，否则进行另一种处理。演示双分支的语法结构，绘制流程图，以及示例代码。主要掌握数据类型及转换；条件语句的使用；环节四：教学演示学生练习20分钟线下4.选择结构——多分支if…elseif…else作用：针对不同情况进行不同的处理。通过多分支语句，为学生的考试成绩划分等级，如优秀、良好、及格等。演示多分支的语法结构，绘制流程图。注意“elseif”中间有空格，如果遗漏，会造成语法错误。5.选择结构——多分支switchswitch语句也是多分支语句，功能与if系列条件语句相同。switch选择结构语句的特点就是代码更加清晰简洁、便于阅读。区分switch与if的不同。switch只能针对某个表达式的值进行判断，从而决定执行哪一段代码。注意在switch中，break和default的作用，以及在省略情况下的细节问题。主要掌握数据类型及转换；条件语句的使用；环节五：教学演示学生练习25分钟线下循环结构、跳转语句循环结构语句作用：实现一段代码的重复执行，例如连续输出1~100之间的数字。。分类：while、do…while和for循环语句。循环结构——while讲解while的语法结构，绘制流程图。通过编写代码演示while的应用。应注意，若循环条件永远为true时，则会出现死循环。案例：将while与if结合起来，实现计算100以内的奇数和。循环结构——do…while讲解do…while的语法结构，绘制流程图。比较while与do…while的异同。while是先判断条件后执行循环体，而do...while会无条件执行一次循环体后再判断条件，决定是否执行下次循环。掌握循环语句的几种使用方法环节六：教学演示学生练习15分钟线下循环结构、跳转语句跳转语句作用：实现程序执行过程中的流程跳转。分类：break和continue语句。break：在switch中终止当前语句的执行，或在循环语句中跳出循环。continue语句用于结束本次循环的执行，开始下一轮循环的执行操作。以在for循环中跳出为例，编写代码演示break的使用。将break换成continue，观察程序的运行结果。break可在死循环中使用，当满足一定条件时跳出循环。掌握循环语句的几种使用方法环节七：教学演示学生练习35分钟线下循环语句的应用【案例】打印金字塔介绍for语句的用法分析案例的功能和实现思路观察金字塔的显示效果，分析其基本规律。每层中星星的数量=当前层数*2-1。例如，当前为第4层，则星星数=4*2-1=7。每层星星前的空格=金字塔层数-当前层数。例如，当前行数为第3层，则空格数=5-3=2。编写代码完成案例的开发通过prompt()提示用户输入金字塔的层数。判断用户输入是否为一个合法的数字，如果不是则报错提示。编写外层for循环，遍历金字塔的层数。编写内层第1个for循环，输出星星前的空格。编写内层第2个for循环，输出指定数量的“*”。在一行输出结束后，使用“<br>”来进行换行。通过浏览器访问测试，观察运行结果。学以致用，使学生掌握循环语句的使用。环节八：课程小结等5分钟线下涵盖本单元所有教学内容。老师对本任务所学的基本知识及软件操作方法进行总结。总结有助于学生对本任务所学内容进行梳理。环节九：课程任务5分钟线上教师发放测试题目及案例素材，学生进行上机测试。以此检查学生对相关知识点的掌握情况。测试完成后将作品通过平台提交给老师。【动手实践】九九乘法表的实现通过测试及动手制作使学生巩固课堂学的知识作业考核评价60分钟线上教师对学生的提交的上机测试作品进行点评，指出代码中容易出现错误的地方，并给与解答。有问题的同学点对点沟通指导反思与改进混合式教学单元设计方案一、教学基本情况项目（任务）名称数组课程类型线上+线下授课时间第3周授课地点*****班级*****课时线上1+线下3二、教学目标和内容教学目标（用词表述要准确，可测量、可评价，建议根据布鲁姆教育目标分类法）素质目标包含课程思政内容知识目标掌握数组的创建掌握数组的访问与遍历掌握数组的属性与方法能力目标能够创建数组；能够对数组进行基本的操作素质目标养成细心、耐心、用心的学习习惯养成良好书写代码的习惯养成良好的浏览网页、发布网页的习惯具体团队合作意识具有吃苦耐劳的品质具有良好的网络素养教学内容数组是JavaScript中最常用的数据类型之一，它属于对象类型中的内置对象。相比前面学习过的基本数据类型，一个数组类型的变量可以保存一批数据，并且数据可以是任意类型，例如字符串、数字、数组或对象等。因此，利用数组可以很方便地对数据进行分类和批量处理。本章将围绕数组的使用进行详细讲解。教学重点创建数组、数组的访问与遍历、元素的添加与修改、二维数组的创建与遍历、数组检索方法教学难点数组的访问与遍历、二维数组的创建与遍历、数组栈方法、数组检索方法教学重难点解决方法措施：通过上机操作加强学习和补充案例进行巩固。三、课前学习情况分析1.课前学习任务布置及推送提示：任务1:观看2个视频（共计15分钟）任务2：完成课前测试，共计5个单项选择题（共计5分钟）发布时间：发布时间：202*年2月21日，截至时间：202*年06月30日。2.课前学习任务完成情况分析提示（实施完成后填写）：本次课前学习任务共有人完成视频观看，个同学未观看视频。本次课前测试共有个同学参加测试，从测试的结果来看，XX知识点掌握情况较好，XX知识点需要进一步讲解分析。四、教学实施过程教学环节（线上/线下）教学内容教学活动设计意图环节一：课前任务20分钟线上观看视频完成课前测试在线答疑为上课做准备，对课中内容有一个整体的把握环节二：课前回顾10分钟线下提出需求，导入学习任务（1）回顾一下数据类型在程序开发中起到的作用。针对需要保存的数据的特点，选择合适的数据类型。基本数据类型只能保存一个数据，复合数据类型则适合对数据进行分类或批量处理，如一个班级的学生信息，包括每个学生的名字、性别、年龄、爱好等。（2）明确学习方向。数组的分类。数组的定义。数组的访问。数组的遍历。数组的删除。对线上学习情况的回顾与总结能够加深学生对线上所学知识的理解。在此基础上老师深入讲解，学生进行操作，使学生的知识与能力得到进一步提升。环节三：教师演示学生练习35分钟线下初识数组、创建数组、数组的基本操作以实例形式进行知识讲解理解数组的用处在学习数组之前，若要操作一批数据，如一个班级的所有学生，为了保存他们的相关信息，则每一条信息都需要一个变量去保存。缺点：麻烦，容易出错，又不合理。数组就是一个可以存储一组或一系列数值的变量。通俗的讲，使用一个数组类型的变量可以保存一批数据，优点方便操作管理。数组的组成结构数组是由一个或多个数组元素组成的。每个数组元素由“索引下标”和“值”构成。“索引下标”用于识别元素，用数字表示，从0开始递增。“值”为元素的内容，可以是任意类型的数据。“索引下标”和“值”之间存在一种对应关系，称之为映射。3.数组的分类根据数组的维数可划分为一维数组、二维数组、三维数组等多维数组。二维数组是指数组元素的“值”是一个一维数组当一个数组的值又是一个数组时，就可以形成多维数组4.数组的索引教师展示数组的内存分配图，或通过绘制的方式一一讲解。主要适用于利用位置（0、1、2……）来标识数组元素的情况。数组的索引下标也可以自己指定。5.多维数组一维数组就是指数组的“值”是非数组类型的数据。二维数组是指数组元素的“值”是一个一维数组。多维数组指的是一个数组元素的值又是一个数组（一维、二维、三维…）。Array对象创建数组通过newArray()创建数组。数组元素可以是字符串、数值、混合型等。可以创建一个空数组。通过console.log()查看创建的数组的下标。使用“[]”语法创建数组对比newArray()和“[]”两种方式的区别。获取数组长度访问Array对象的length属性获取数组元素个数。对于保存了undefined的元素，也会占用元素的个数。设置数组元素通过数组的length属性还可以设置数组元素个数。对于空数组，设置length属性后，会占用存储位置。如果设置length属性小于数组原有长度，则多余元素舍弃。如果length属性大于数组原有长度，则不足的存储位置会被占用。访问数组元素通过“数组名[下标]”的方式来获取指定索引下标数组元素的值。使用console.log()将访问的数组元素打印到控制台，查看效果。遍历数组使用for的方式，利用自增的变量“i”访问数组中的每一个元素。使用for…in的方式实现数组的遍历。使用for…of的方式实现数组的遍历。对比for…in和for…of的区别。添加与修改通过“数组名[下标]”的方式对数组中的元素进行添加或修改。当下标不连续时，将会被空存储位置暂用。删除元素值通过delete关键字删除数组元素解构赋值演示ES6新增的数组解构赋值的方式。利用解构赋值方式实现交换两个变量。使学生掌握创建数组、数组的基本操作环节四：教学演示学生练习45分钟线下常见二维数组操作、数组排序1.二维数组的创建回顾一维数组创建的两种方式。引出二维数组的创建，只需将数组元素设置为数组即可。给出示例演示如何利用Array和[]如何创建二维数组。引申出多维数组的创建方式，即将数组元素设置为数组。2.二维数组的遍历回顾一维数组的遍历方式，for、for…in或for…of（ES6提供）。引出二维数组的遍历，只需在遍历数组后，再次遍历数组的元素即可。通过案例二维数组求和演示二维数组的创建和遍历指出在开发中为多维空数组添加元素时，要保证添加的元素已被定义为数组，防止程序报错。为便于阅读、调试和维护，推荐使用三维及以下的数组保存数据。3.【案例】二维数组转置分析什么是二维数组转置。通过画图的方式，演示二维数组的行、列矩阵效果。演示如何进行行列位置交换。先利用两层for循环遍历二维数组中所有的元素。准备一个空数组，用于保存转置后的数组结果。在内层for循环开始前，为保存结果的数组添加元素。将原数组的行的下标作为新数组的列的下标。将原数组的列的下标作为新数组的行的下标。输出数组，查看二维数组转置后的结果。4.5.冒泡排序冒泡排序是计算机科学领域中较简单的排序算法。实现原理：在冒泡排序的过程中，按照要求从小到大排序或从大到小排序，不断比较数组中相邻两个元素的值，较小或较大的元素前移。展示或绘制冒泡法的过程图。总结冒泡排序的规律：冒泡排序比较的轮数是数组长度减1，每轮比较的对数等于数组的长度减当前的轮数。演示冒泡排序法的代码实现。5.插入排序插入排序是一种直观的简单排序算法。实现原理：通过构建有序数组元素的存储，对于未排序数组元素的，在已排序的数组中从最后一个元素向第一个元素遍历，找到相应位置并插入。其中，待排序数组的第1个元素会被看作是一个有序的数组，从第2个至最后一个元素会被看作是一个无序数组。展示或绘制快速法的过程图。总结插入排序的规律：插入排序比较的次数与无序数组的长度相等，每次无序数组元素与有序数组中的所有元素进行比较，比较后找到对应位置插入，最后即可得到一个有序的数组。演示插入排序法的代码实现。使学生掌握常见二维数组操作、数组排序环节五：教学演示教师指导学生练习35分钟线下【案例】猴子选大王案例分析介绍“猴子选大王”的游戏规则。代码实现将可控的量分为“猴子的总数”和“每次踢出第几只猴子”。利用for循环，根据猴子的总数来创建猴子数组。遍历猴子数组，利用shift()方法从前往后依次取出猴子。判断当前未达到踢出猴子的数量时，通过push()方法将前面取出的猴子放入数组尾部。如果达到了数量，则跳过不进行处理，从而实现踢出猴子。在循环结束直到数组的长度等于1时，最后剩下的这个猴子就是我们要的结果了。学以致用环节六：课程小结等10分钟线下涵盖本单元所有教学内容。总结有助于学生对本任务所学内容进行梳理。环节七：课程任务10分钟线上教师发放测试题目及案例素材，学生进行上机测试。以此检查学生对相关知识点的掌握情况。测试完成后将作品通过平台提交给老师。【动手实践】省份城市的三级联动通过测试及动手制作使学生巩固课堂学的知识作业考核评价60分钟线上教师对学生的提交的上机测试作品进行点评，指出代码中容易出现错误的地方，并给与解答。有问题的同学点对点沟通指导反思与改进混合式教学单元设计方案一、教学基本情况项目（任务）名称函数课程类型线上+线下授课时间第4周授课地点*****班级*****课时线上1+线下3二、教学目标和内容教学目标（用词表述要准确，可测量、可评价，建议根据布鲁姆教育目标分类法）素质目标包含课程思政内容知识目标掌握函数的使用方法掌握变量的作用域掌握匿名函数与闭包函数能力目标能够进行函数的调用能够书写函数表达式素质目标养成细心、耐心、用心的学习习惯养成良好书写代码的习惯养成良好的浏览网页、发布网页的习惯具体团队合作意识具有吃苦耐劳的品质具有良好的网络素养教学内容函数是JavaScript中最常用的功能之一，它可以避免相同功能代码的重复编写，将程序中的代码模块化，提高程序的可读性，减少开发者的工作量，便于后期的维护。例如，在计算班级学生的平均分时，每计算一个学生的平均分，都要编写一段功能相同的代码，这样会导致代码量大大增加。为此，JavaScript提供了函数，通过函数可以将计算平均分的代码进行封装，在使用时直接调用即可，无需重复编写。本章将针对函数的内容进行详细讲解。教学重点函数的创建和使用、变量的作用域、匿名与回调函数、闭包函数教学难点函数嵌套与作用域链、闭包函数教学重难点解决方法措施：通过上机操作加强学习和补充案例进行巩固。三、课前学习情况分析1.课前学习任务布置及推送提示：任务1:观看2个视频（共计15分钟）任务2：完成课前测试，共计5个单项选择题（共计5分钟）发布时间：发布时间：202*年2月21日，截至时间：202*年06月30日。2.课前学习任务完成情况分析提示（实施完成后填写）：本次课前学习任务共有人完成视频观看，个同学未观看视频。本次课前测试共有个同学参加测试，从测试的结果来看，XX知识点掌握情况较好，XX知识点需要进一步讲解分析。四、教学实施过程教学环节（线上/线下）教学内容教学活动设计意图环节一：课前任务20分钟线上观看视频完成课前测试在线答疑为上课做准备，对课中内容有一个整体的把握环节二：课前回顾10分钟线下回顾上节课，引出本节课内容（1）对上节课布置的作业以及学生提出的问题进行答疑解惑。（2）回顾前面学过的内容，引出本节课主题。前面学习了PHP的一些基本语法，包括变量、表达式、数据类型、运算符、流程控制语句等，这些是最基本又很重要的内容。然后学习了数组，用来存储和管理大量的数据。接下来，本节将针对函数进行详细讲解，掌握函数的具体使用细节，使程序代码模块化，提高程序的可读性和后期的可维护性。（3）明确学习方向。能够充分理解函数的概念。能够独立的完成函数的定义。熟练掌握函数的各种参数设置。理解函数中变量的作用域机制。对线上学习情况的回顾与总结能够加深学生对线上所学知识的理解。在此基础上老师深入讲解，学生进行操作，使学生的知识与能力得到进一步提升。环节三：教师演示学生练习35分钟线下初识函数、参数设置、函数的调用、变量的作用域初识函数回顾之前学过的函数，如parseFlost()、isNan()、parseInt()等。回顾之前编写过的自定义函数。请学生讲出自己对函数的理解，引出函数的含义、作用、以及其好处。总结自定义函数的语法结构，以及返回值。注意函数的命名规则，不能使用数字开头。编写代码实现求最大值、最小值等功能。编写一个$()函数，封装document.getElementById()方法，从而更方便的获取DOM对象。函数的参数设置按照参数划分，函数分为：无参函数和有参函数。理解形参、实参的概念，演示函数参数的传递。函数的形参可以不设置，在函数内通过arguments即可获取调用函数时传递的具体参数。通过arguments.length可获取参数的数量。在ES6中，定义函数的语法得到了加强，可以为函数参数设置默认值，或在参数数量不确定时，利用“…变量名”的方式动态的接收参数。函数的调用讲解函数调用的语法，实参列表的概念。通过求和的案例，演示函数的调用，以及arguments的使用。提出问题：函数的声明与调用的顺序，可以先调用后声明。【案例】字符串大小写转换效果分析分析案例的实现效果，通过单击网页上的按钮，实现对文本框内的文本进行大写、小写转换，将转换结果显示在另一个文本框中。代码实现编写基本页面。为按钮添加deal()事件函数，用于单击后调用函数执行转换操作。为deal()函数传递参数（upper、lower），表示执行转大写还是转小写的操作。在deal()函数中，通过switch判断操作类型。分析如何实现字符串大小写转换，利用str.toLowerCase()、str.toUpperCase()方法来实现具体功能。使学生对函数、参数设置、函数的调用、变量的作用域有一个初步的认识环节四：教学演示学生练习45分钟线下函数表达式、匿名函数、回调函数函数表达式讲解什么是函数表达式，函数表达式的代码如何编写。注意函数表达式与函数声明的区别，若函数表达式写在函数调用的前面，将无法被调用。匿名函数作用：没有名称的函数，可避免全局变量命名污染即函数冲突问题。演示匿名函数的3种实现方式，方式1：省略函数名，方式2：自调用，方式3：处理事件时写的函数。分析3种方式的优缺点，以及应用场景。箭头函数作用：ES6新增的语法，方便代码书写。演示箭头函数的4种用法。对比讲解箭头函数代码与普通函数的代码。通过代码演示箭头函数的使用，设置1个参数与设置2个参数的语法。回调函数作用：将函数作为参数传递给另一个函数，然后调用这个函数。特点：根据传入的函数不同，执行结果不同。通过代码演示的具体实现。在JavaScript中，有一些数组方法支持使用回调函数，如find()、every()、some()、forEach()、map()、reduce()、reduceRight()等。演示这些方法的使用。使学生掌握函数表达式、匿名函数、回调函数的基本情况环节五：教学演示教师指导学生练习35分钟线下什么是闭包函数、闭包函数的实现、动手实践：网页计算器什么是闭包函数特点：内嵌函数可以访问定义在外层函数中的所有变量和函数，并包括其外层函数能访问的所有变量和函数。但是在函数外部则不能访问函数的内部变量和嵌套函数。作用1：可以在函数外部读取函数内部的变量。作用2：可以让变量的值保持在内存中。闭包函数的实现在函数中，通过return返回一个函数，然后在调用函数时，接收这个返回的函数。此时，就可以实现在函数外调用函数内部定义的函数。三、【动手实践】网页计算器案例分析展示案例完成后的效果，对功能进行分析。代码实现设计网页计算器的基本页面。提供两个文本框，用来输入数字，然后提供4个按钮，分别表示加、减、乘、除，用来对数字进行计算。编写add()、sub()、mul()、div()这4个函数，分部用于加法、减法、乘法、除法的运算。编写calc()函数，当单击按钮时，通过onclick事件调用此函数。该函数的参数func是一个回调函数，用来根据回调函数执行具体的计算。例如，当单击“加”按钮时，就调用calc()函数并将add函数作为参数传入，注意传入add函数时不要加小括号，否则就变成了调用add()将其返回值作为参数传入了，通过浏览器访问测试，观察运行结果。学以致用动手实践环节六：课程小结等10分钟线下涵盖本单元所有教学内容。回顾上课前的学习目标，对本节课知识点进行总结。老师对本任务所学的基本知识点及操作方法进行总结。使学生对本次课所学知识有一个整体的把握环节七：课程任务5分钟线上发布课后任务教师发放本章相关资料和素材，学生进行上机练习，以此检查学生对相关知识点的掌握情况。上机练习完成后将报告通过平台提交给老师。总结有助于学生对本任务所学内容进行梳理。作业考核评价60分钟线上教师发放测试题目及案例素材，学生进行上机测试。以此检查学生对相关知识点的掌握情况。测试完成后将作品通过平台提交给老师。教师对学生的提交的上机测试作品进行点评，指出代码中容易出现错误的地方，并给与解答。有问题的同学点对点沟通指导通过测试及动手制作使学生巩固课堂学的知识反思与改进教师对学生的提交的上机测试作品进行点评，指出代码中容易出现bug的地方，并给与解答。错误比较多的同学进行点对点，一对一指导混合式教学单元设计方案一、教学基本情况项目（任务）名称对象课程类型线上+线下授课时间第5周授课地点*****班级*****课时线上1+线下3二、教学目标和内容教学目标（用词表述要准确，可测量、可评价，建议根据布鲁姆教育目标分类法）素质目标包含课程思政内容知识目标理解面向对象思想，能够说出面向对象与面向过程的区别掌握JavaScript常用内置对象的使用方法掌握自定义对象的定义和基本操作，理解构造函数的概念掌握封装、继承、多态的设计思想，理解原型链机制熟悉错误的处理，掌握如何在浏览器中调试JavaScript程序能力目标能够使用常用内置对象能够进行对象的基本操作能够在浏览器中调试JavaScript程序素质目标养成细心、耐心、用心的学习习惯养成良好书写代码的习惯养成良好的浏览网页、发布网页的习惯具体团队合作意识具有吃苦耐劳的品质具有良好的网络素养教学内容本章将围绕JavaScript开发中的面向对象设计思想，以及对象相关的一些原理和应用进行详细讲解。教学重点构造函数、String对象、Math对象、Date对象、原型、继承教学难点深拷贝与浅拷贝、构造函数、原型、继承、原型链教学重难点解决方法措施：通过上机操作加强学习和补充案例进行巩固。

三、课前学习情况分析1.课前学习任务布置及推送提示：任务1:观看2个视频（共计15分钟）任务2：完成课前测试，共计5个单项选择题（共计5分钟）发布时间：发布时间：202*年2月21日，截至时间：202*年06月30日。2.课前学习任务完成情况分析提示（实施完成后填写）：本次课前学习任务共有人完成视频观看，个同学未观看视频。本次课前测试共有个同学参加测试，从测试的结果来看，XX知识点掌握情况较好，XX知识点需要进一步讲解分析。四、教学实施过程教学环节（线上/线下）教学内容教学活动设计意图环节一：课前任务20分钟线上观看视频完成课前测试在线答疑为上课做准备，对课中内容有一个整体的把握环节二：课前回顾10分钟线下（1）对上节课布置的作业以及学生提出的问题进行答疑解惑。（2）回顾前面学过的内容，引出本节课主题。在第1章已经介绍过面向对象的基本概念，本章将对JavaScript面向对象进行更深入和细致地讲解。（3）明确学习方向。理解面向对象思想出现的原因。能够说出面向对象与面向过程的区别。掌握对象的定义语法。掌握对象成员的访问方法。掌握对象成员的遍历。理解对象的深拷贝与浅拷贝机制。对线上学习情况的回顾与总结能够加深学生对线上所学知识的理解。在此基础上老师深入讲解，学生进行操作，使学生的知识与能力得到进一步提升。环节三：教师演示学生练习35分钟线下面向对象概述、面向对象的特征、对象的定义、访问对象成员、对象成员遍历、深拷贝与浅拷贝实例讲解知识点1.为什么学习面向对象当软件开发规模达到一定程度时，面向对象思想可以更好的解决问题。面向对象可以应用到许多领域，这里学习的重点是面向对象编程。2区分面向过程与面向对象面向过程：注重具体步骤，凡事都靠自己完成。面向对象：注重具体对象，指挥对象去完成任务。注意：如果对象一开始不存在，那就需要手动创造一个对象，将面向过程的代码封装起来，形成对象。创造对象的意义：当第一次用到某个功能的时候，将代码封装成对象，下次再需要用到这个功能时，直接调用对象就能完成任务，不需要重复编写代码。3面向对象的特征封装性：隐藏内部实现，对外开放接口。继承性：不改变另一个对象的前提下进行扩展。多态性：为不同的对象提供相同的接口（归一化设计），降低使用难度。4对象的定义使用“{}”来定义一个对象。对象的成员以键值对的形式保存，多个成员用逗号分隔。对象的成员可以是属性或方法，相当于变量和函数。对象的字面量语法，还常用于数据交互，称为JSON数据格式。5访问对象成员创建对象后，通过“.”来访问对象的成员。如果一个对象没有成员，可以手动赋值来添加成员。对象成员访问支持使用“[]”语法，相比“.”语法其命名可更加随意。通过例5-1演示如何在HTML页面中动态为对象增加成员。6对象成员遍历回顾数组的遍历，利用for…in语法对数组进行遍历。使用for…in语法可以遍历对象，其代码与遍历数组类似。使用“obj[k]”语法来访问对象中的元素，可以用“obj[k]()”调用方法。7判断对象成员是否存在使用“in”可以判断对象中是否存在某个成员。8深拷贝与浅拷贝对于基本数据类型，在进行赋值时，执行的是拷贝（复制）操作。对于复合数据类型（如数组、对象），在进行赋值时，执行的是浅拷贝操作。通过代码演示浅拷贝的情况，分析为什么会出现这种情况。通过文件夹、快捷方式的例子，来比较对象与普通数据的区别。分析为什么会出现浅拷贝机制：节省内存开销。对象可以保存大量的数据，因此更加占用内存。当在程序中操作对象时，（如将对象放入函数参数中传递），如果直接创建副本，会多占用一份内存空间。在实际开发中，也会遇到完全复制一个对象的需求，即深拷贝，这就需要自己动手来实现深拷贝的效果。动手编写deepCopy()函数实现对象的深拷贝。使学生对面向对象有一个初步的认识环节四：教学演示学生练习45分钟线下为什么使用构造函数，内置构造函数、自定义构造函数、私有成员、函数中的this指向1.为什么使用构造函数介绍传统面向对象编程语言中的类与对象的概念。类的作用：创建对象的模板，用来创建一些具有相同特征的对象。通过类创建对象的过程，称为实例化，创建对来的对象称为类的实例。JavaScript一开始没有class关键字（ES6新增了该语法），若要以模板的方式实例化对象，可以将创建对象的过程封装成函数，通过函数创建对象。分析这种方式的缺点：无法区分对象的类型。引出：利用构造函数来创建对象。2使用JavaScript内置的构造函数在学习自定义构造函数前，先来看一下内置构造函数如何使用。演示如何通过“new构造函数名()”来创建对象。通过constructor查看对象是由哪个构造函数创建的。字面量“{}”创建的对象，实际上是Object对象的实例。3自定义构造函数通过代码演示如何自定义一个构造函数。总结自定义构造函数的注意事项。注意在构造函数中，this在成员方法内，和成员方法外的区别。ES6新增的class关键字为什么新增class关键字：该关键字是Java、PHP等编程语言中有的，而JavaScript一开始没有。为了方便Java、PHP等Web开发程序员更方便地使用JavaScript来进行面向对象编程，因此加入了该关键字的支持。注意class关键字本质上是一个语法糖，可以用构造函数语法替代。私有成员在一些使用class关键字的编程语言中，可以用public、private关键字设定对象成员的可访问性，即划分公有成员和私有成员。在JavaScript中没有这些关键字，其实现方法是，在构造函数中使用this添加的成员相当于公有成员，而直接用var定义的变量相当于私有成员。什么情况下使用公有成员，什么情况下使用私有成员：为了体现面向对象的封装性，隐藏程序内部实现细节，仅对外开放接口，防止内部成员被外界随意访问。在函数中使用return关键字在构造函数中可以用return关键字，在使用时与普通函数有一定区别。在构造函数中使用return关键字时，有两种情况，一种是返回复合类型数据，一种是返回基本类型数据，这两种方式对返回的处理有区别。通过代码对比演示两种情况的具体区别。函数中的this指向分析this指向，分3种情况：①使用“new构造函数”实例化对象时；②直接通过函数名调用函数时；③将函数作为对象方法调用时。通过代码演示不同情况下this指向的具体是哪个对象。更改this指向（演示apply()、call()方法的使用，并对比两个方法的区别）。补充讲解ES5新增的bind()方法。使学生掌握，内置构造函数、自定义构造函数、私有成员、函数中的this指向用法环节五：教学演示教师指导学生练习35分钟线下案例：制作年历1.输入需要生成的年份通过输入框提示用户输入年份。2.编写calendar()函数生成指定年份的年历提供参数y表示指定的年份。返回生成的HTML结果。编写for循环遍历12个月份利用<table>进行页面布局，每个月份用一个<table>实现。利用CSS实现根据页面宽度进行排版，表格可以自动换到下一行。获取指定年份1月1日的星期值通过Date()实例化对象并调用getDay()方法来实现。获取每个月共有多少天通过Date()实例化对象并调用getDate()获得最大天数利用for循环从第1天遍历到最后1天。在循环中，控制星期值在0~6范围内变动。将每一天的数字拼接到表格中根据当前月份的第1天是星期几，来填充几个空白单元格。利用<td>单元格的colspan来实现填充空白单元格。遍历到星期六时，如果不是该月最后一天，则需要换行。如果到达该月最后一天，则闭合标签。测试程序通过浏览器访问，观察程序运行结果是否正确。掌握编程实现年历的制作，能够根据指定年份生成年历。熟练掌握Date对象的使用环节六：课程小结等10分钟线下对本章节知识点进行总结，使学生对面向对象有一个清晰的认识，并把握好重难点。使学生能够独立进行页面排版环节七：课程任务10分钟线上涵盖本单元所有教学内容。老师对本任务所学的基本知识点及操作方法进行总结。总结有助于学生对本任务所学内容进行梳理。作业考核评价60分钟线上教师发放测试题目及案例素材，学生进行上机测试。以此检查学生对相关知识点的掌握情况。测试完成后将作品通过平台提交给老师。上机测试主要针对本章中需要重点掌握的知识点，以及在代码中容易出错的操作步骤。通过上机测试可以考察同学对“面向对象”等知识点的掌握程度。通过测试及动手制作使学生巩固课堂学的知识反思与改进教师对学生的提交的上机测试作品进行点评，指出代码中容易出现bug的地方，并给与解答。针对错误比较多的同学进行一对一指导。混合式教学单元设计方案一、教学基本情况项目（任务）名称BOM课程类型线上+线下授课时间第6周授课地点*****班级课时线上1+线下3二、教学目标和内容教学目标（用词表述要准确，可测量、可评价，建议根据布鲁姆教育目标分类法）素质目标包含课程思政内容知识目标了解BOM的组成结构掌握定时器的操作熟悉location与history对象能力目标能够操作BOM对象能够使用定时器制作倒计时能够进窗口的操作素质目标养成细心、耐心、用心的学习习惯养成良好书写代码的习惯养成良好的浏览网页、发布网页的习惯具体团队合作意识具有吃苦耐劳的品质具有良好的网络素养教学内容BOM（BrowerObjectModel）指的是浏览器对象模型，DOM（DocumentObjectModel）指的是文档对象模型。那么接下来将在本章首先针对BOM的使用进行详细讲解。教学重点BOM组成结构、BOM常用对象和方法、定时器教学难点窗口位置和大小、框架操作、history、screen教学重难点解决方法措施：通过上机操作加强学习和补充案例进行巩固。三、课前学习情况分析1.课前学习任务布置及推送提示：任务1:观看2个视频（共计15分钟）任务2：完成课前测试，共计5个单项选择题（共计5分钟）发布时间：发布时间：202*年2月21日，截至时间：202*年06月30日。2.课前学习任务完成情况分析提示（实施完成后填写）：本次课前学习任务共有人完成视频观看，个同学未观看视频。本次课前测试共有个同学参加测试，从测试的结果来看，XX知识点掌握情况较好，XX知识点需要进一步讲解分析。四、教学实施过程教学环节（线上/线下）教学内容教学活动设计意图环节一：课前任务20分钟线上观看视频完成课前测试在线答疑为上课做准备，对课中内容有一个整体的把握环节二：课前回顾10分钟线下回顾前面学过的内容，引出本节课主题。（1）对上节课布置的作业以及学生提出的问题进行答疑解惑。（2）回顾前面学过的内容，引出本节课主题。在前面的学习中，用到的alert()、prompt()函数其实是window对象的方法，关于window对象具体如何使用，它有哪些常用的属性和方法，将在本节进行具体讲解。（3）明确学习方向。理解什么是BOM。掌握BOM的基本结构。理解window对象与其他BOM对象的关系。掌握如何弹出对话框和窗口。掌握如何控制窗口位置和大小。掌握如何进行框架操作。掌握定时器的使用方法。对线上学习情况的回顾与总结能够加深学生对线上所学知识的理解。在此基础上老师深入讲解，学生进行操作，使学生的知识与能力得到进一步提升。环节三：教师演示学生练习35分钟线下什么是BOM对象、window对象1.什么是BOMJavaScript是由ECMAScript、BOM和DOM组成的。BOM是指浏览器对象模型（BrowserObjectModel），DOM是指文档对象模型（DocumentObjectModel）。2.BOM的作用JavaScript经常需要操作浏览器窗口及窗口上的控件，实现用户和页面的动态交互。为此，浏览器提供了一系列内置对象，统称为浏览器对象。各内置对象之间按照某种层次组织起来的模型统称为BOM。3.BOM的结构window对象是BOM的顶层（核心）对象，其他的对象都是以属性的方式添加到window对象下，也可以称为window的子对象。4.BOM与DOM的关系DOM是W3C标准，是所有浏览器公共遵守的规则。而BOM是各浏览器根据DOM在各自浏览器上的实现，主要处理浏览器的窗口和框架。区别：DOM处理网页内容，BOM与浏览器进行交互。5.常用BOM对象介绍document对象：即DOM对象，用来处理网页内容。history对象：记录浏览器的访问历史记录，常用于开发前进与后退功能。location对象：用于控制URL地址栏。navigator对象：获取浏览器的相关信息，如名称、版本等。screen对象：获取与屏幕相关的信息，如屏幕分辨率，坐标等。6.脚下留心BOM没有相关标准，每个浏览器都有其自己对BOM的实现方式。而各浏览器间共有的对象就成为了事实上的标准。在利用BOM实现具体功能时要根据实际的开发情况考虑浏览器之间的兼容问题，否则会出现不可预料的情况。7.全局作用域window对象的特点：它是一个全局对象，定义在全局作用域中的变量、函数以及内置函数等，都可以被window对象调用。区别1：在JavaScript中直接使用一个未声明的变量会报语法错误，但是使用“window.变量名”的方式则不会报错，而是获得一个undefined结果。区别2：delete关键字仅能删除window对象自身的属性，对于定义在全局作用域下的变量不起作用。8.弹出对话框和窗口除了前面学过的alert()、prompt()，还有许多其他的属性和方法。列举常用的属性和方法。简单演示其具体使用。利用open()方法打开窗口，介绍该方法的常用可选参数。利用close()方法关闭打开的窗口。9.窗口位置和大小介绍window对象获取窗口位置和大小的常用属性和方法。演示如何获取这些信息。注意window.open()方法打开的窗口和选项卡（Tab），FireFox和Chrome浏览器才支持口位置和大小的调整。10.框架操作回顾HTML中的框架的使用。利用JavaScript来对框架进行操作。注意JavaScript对框架操作的限制，无法读写跨域内容。11.定时器介绍常用的定时器方法，注意setInterval()和setTimeout()的区别。讲解并演示如何取消定时器。通过计数器案例，演示定时器的使用。在网页中提供两个按钮，一个用于开始计数，一个用于停止计数当开始计数时，启动定时器，利用定时器更新页面中显示的数值。当停止计数时，取消定时器。【案例】限时秒杀开发背景电子商务网站，如淘宝、京东，商家经常会策划促销活动，限时秒杀是一种常见的手段。案例展示展示案例完成后的效果，在网页中显示倒计时。代码编写设计限时秒杀的页面。通过JavaScript实现倒计时效果。测试程序。使学生对盒子模型有一个初步的认识环节四：教学演示学生练习35分钟线下location对象、案例：定时跳转、history对象1.认识URL回顾URL的基本概念。URL的组成：网络协议、服务器主机名、端口号、URI、参数以及锚点。通过具体URL演示其组成部分。2.更改URL列举相关方法assign()、reload()、replace()，并比较其区别。通过具体案例来实现URL的更改。3.获取URL参数以一个具体的URL为例，演示如何获取URL中的参数。使用“location.href”也可以更改URL地址。4.history对象原本用于在浏览器中对访问过的URL历史记录进行操作。但用户的浏览历史是用户的隐私，且有可能会泄露网站的一些安全信息。出于安全考虑，history对象不能直接获取用户浏览过的URL。history对象可以控制浏览器前进、后退，或跳转到历史列表中的第几个页面。通过案例演示history对象的使用。【案例】定时跳转开发背景用户执行一个操作后，显示执行结果，在页面中停留5秒，然后自动跳转到其他页面。开发思路通过定时器和location来实现跳转功能。代码编写使学生掌计时器的用法环节五：教学演示学生练习45分钟线下navigator对象、screen对象1.navigator对象该对象用于获取浏览器的相关信息。通过具体代码演示该对象常用属性和方法的使用。更换不同的浏览器，观察输出结果的变化。2.screen对象该对象用于获取网页所在窗口与屏幕相关的信息，如宽度和高度等。通过具体代码演示该对象的常用属性。使学生能够掌握navigator对象、screen对象用法环节六：课程小结等10分钟线下回顾上课前的学习目标，对本节课知识点进行总结。总结有助于学生对本任务所学内容进行梳理。环节七：课程任务10分钟线上教师发放本章相关资料和素材，学生进行上机练习，以此检查学生对相关知识点的掌握情况。上机练习完成后将报告通过平台提交给老师。作业考核评价60分钟线上教师发放测试题目及案例素材，学生进行上机测试。以此检查学生对相关知识点的掌握情况。测试完成后将作品通过平台提交给老师。上机测试主要针对本章中需要重点掌握的知识点，以及在代码中容易出错的操作步骤。通过上机测试可以考察同学对“计时器”等知识点的掌握程度。通过测试及动手制作使学生巩固课堂学的知识反思与改进教师对学生的提交的上机测试作品进行点评，指出代码中容易出现bug的地方，并给与解答。针对错误比较多的同学进行一对一指导。混合式教学单元设计方案一、教学基本情况项目（任务）名称DOM课程类型线上+线下授课时间第7周授课地点*****班级*****课时线上1+线下3二、教学目标和内容教学目标（用词表述要准确，可测量、可评价，建议根据布鲁姆教育目标分类法）素质目标包含课程思政内容知识目标了解什么是DOM掌握元素与样式的操作掌握节点的操作能力目标能够进行元素操作。能够进行节点的操作。能够获取元素、添加节点素质目标养成细心、耐心、用心的学习习惯养成良好书写代码的习惯养成良好的浏览网页、发布网页的习惯具体团队合作意识具有吃苦耐劳的品质具有良好的网络素养教学内容DOM（DocumentObjectModel）文档对象模型可以用于完成HTML和XML文档的操作。其中，在JavaScript中利用DOM操作HTML元素和CSS样式则是最常用的功能之一，例如，改变盒子的大小、标签栏的切换、购物车等。本章将针对如何在JavaScript中进行DOM操作进行详细讲解。教学重点获取元素、元素操作、节点操作教学难点获取节点、节点追加教学重难点解决方法措施：通过上机操作加强学习和补充案例进行巩固。三、课前学习情况分析1.课前学习任务布置及推送提示：任务1:观看2个视频（共计15分钟）任务2：完成课前测试，共计5个单项选择题（共计5分钟）发布时间：发布时间：202*年2月21日，截至时间：202*年06月30日。2.课前学习任务完成情况分析提示（实施完成后填写）：本次课前学习任务共有人完成视频观看，个同学未观看视频。本次课前测试共有个同学参加测试，从测试的结果来看，XX知识点掌握情况较好，XX知识点需要进一步讲解分析。四、教学实施过程教学环节（线上/线下）教学内容教学活动设计意图环节一：课前任务20分钟线上观看视频完成课前测试在线答疑为上课做准备，对课中内容有一个整体的把握环节二：课前回顾10分钟线下回顾前面学过的内容，引出本节课主题。在前面讲解了BOM对象的使用，BOM对浏览器进行操作，而DOM用来对文档进行操作，因此本节课将会讲解如何利用DOM对象来对文档进行操作。明确学习方向。了解什么是DOM，DOM的版本和发展历史。掌握HTML节点树的概念，能够说出节点之间的关系。认识常用的DOM对象，能够区分元素与节点。掌握节点的类型。对线上学习情况的回顾与总结能够加深学生对线上所学知识的理解。在此基础上老师深入讲解，学生进行操作，使学生的知识与能力得到进一步提升。环节三：教师演示学生练习35分钟线下认识DOM、获取元素、内容操作、属性操作、样式操作什么是DOMDOM（DocumentObjectModel），即文档对象模型。一套规范文档内容的通用型标准。简要介绍DOM的发展历史。简要介绍DOM第1级、第2级、第3级的主要变化。主要用途：操作HTML、XML文档。DOMHTML节点树DOM中为操作HTML文档提供了一些属性和方法，将HTML文档以节点树的形式进行操作。演示如何将一段HTML代码转换成节点树。区分各个节点的关系，什么是根节点、子节点、父节点、兄弟节点。DOM对象的继承关系分析document对象的继承关系。分析document.getElementById()返回的元素对象的继承关系。区分document对象、Node对象、Element对象的区别和关系。通过代码演示节点操作与元素操作的区别。列举常见节点类型，通过代码演示如何比较两个对象节点类型是否相同。获取操作的元素在操作元素前，需要先获取元素。document提供了一些方法，用来根据id、name和class属性以及标签名的方式获取元素。通过代码演示常用获取元素方法的使用。注意返回的对象可能有一个或多个。当返回的是对象集合时，通过“[下标]”的方式来获取其中的对象。补充讲解HTML5新增的获取元素的方法。列举document中的一些用于获取元素的属性。演示这些属性的使用方法。通过代码验证利用document的属性获取到的对象，与通过方法获取到的对象是否是同一个对象。除了使用document对象可以获取对象，通过元素对象也可以获取对象。通过代码演示如何通过元素对象来获取对象，并注意与document对象获取对象时的区别，元素对象这种方式通常只用于获取该元素内部的对象。演示如何通过元素对象的children属性来获取该元素的子元素。补充讲解HTMLCollection与NodeList的区别。元素内容操作列举Element对象提供的操作元素内容的属性。列举document对象提供的操作元素内容的方法。通过代码演示这些属性和方法的具体使用。对比innerHTML、innerText和textContent属性的区别。对比innerHTML属性和document.write()方法的区别。元素属性操作列举常用的元素属性操作的属性和方法。通过代码演示元素属性的获取、修改、移除等操作。元素样式操作演示元素样式操作的基本语法。讲解如何将CSS样式名转换成style的属性名。列举常见的style属性名。通过代码演示如何对元素的样式进行添加。注意float样式在不同浏览器中的处理方案。演示通过className属性对元素的class属性进行操作。演示通过classList属性对元素的class属性进行操作。通过具体代码实现修改class、切换class、删除class等效果。【案例】标签栏切换效果开发背景标签栏在网页中使用非常普遍。其优势在于可以在有限的空间内展示多块的内容。案例分析用户可以通过标签在多个内容块之间进行切换。代码实现编写HTML页面，准备4个标签，和对应的4个<div>内容。利用JavaScript获取元素，并添加鼠标滑过事件。当鼠标滑过某个元素时，对所有标签进行遍历，通过样式操作实现标签的选中效果，并控制对应内容的显示或隐藏。测试程序。使学生掌握HTML节点树的概念，能够说出节点之间的关系。能够区分元素与节点。掌握节点的类型。环节四：教学演示学生练习45分钟线下获取节点、节点追加、节点删除1.获取节点列举获取节点的相关属性。注意节点操作与元素操作的区别，对比childNodes和children，节点操作会包含文本节点等其他类型的节点。对比节点操作和元素操作，获取到的是否为同一个对象。通过案例演示节点的查看获取。2.节点追加document对象提供了一些创建节点的方法，可以创建元素、文本、属性等类型的节点。通过节点追加相关方法，可以在指定节点的子节点末尾添加一个节点，或者将某个节点插入到指定节点之前。对于属性节点也可以对其进行获取或设置操作。通过代码演示节点创建、节点追加、属性节点操作方法的使用。3.节点删除列举常用的节点删除方法。通过代码演示节点删除，以及属性节点删除使学生掌握节点方式访问节点的常用属性的使用。掌握节点追加的相关方法的使用。掌握节点删除操作。环节五：教学演示教师指导学生练习35分钟线下动手实践：购物车1.案例分析购物车是电子商务网站的常见功能。利用购物车，可以保存用户选购的多件商品。在购物车页面中，可以进行商品数量的添加与减少，选中与取消选中（选中表示本次购买，未选中表示以后再购买），从购物车中删除等。显示每件商品的小计价格。显示购物车已选择商品数量和总计价格。2.准备工作编写HTML代码，设计购物车的结构和显示样式。封装ShopCart()函数，第1个参数表示class前缀，第2个参数表示页面打开后显示在购物车中的商品数据。封装Find()构造函数，用来查找元素。3.添加购物车商品编写Cart()构造函数，用来创建购物车。将需要操作的对象保存到成员属性中，方便在成员方法中使用。在Ctotype对象中编写add()方法，用来向购物车中添加一件商品。读取网页中的模板元素，新添加的商品基于模板克隆。编写Item()构造函数，用来创建购物车中的商品对象。通过成员属性data保存商品数据（数量、价格等）。在Itotype对象中编写updateSubtotal()方法，用来获取小计。4.修改商品修改商品包括商品数量修改以及删除商品操作。为元素添加事件，通过调用对象的属性和方法完成具体操作。为商品数量按钮添加事件，每当商品数量发生变化时，更新小计和总计。为商品删除链接添加事件，每当商品删除时，更新总计。5.实现总计、全选与删除在Ctotype对象中编写updateTotal()方法，用于更新购买数量和总计。实现全选功能、删除商品功能。拓展：以后可以学习artTemplate模板引擎来更方便的处理页面代码。使学生掌握 掌握DOM操作的综合运用。 掌握购物车功能的开发。环节六：课程小结等10分钟线下涵盖本单元所有教学内容。老师对本任务所学的基本知识点及操作方法进行总结。总结有助于学生对本任务所学内容进行梳理。环节八：课程任务10分钟线上教师发放测试题目及案例素材，学生进行上机测试。以此检查学生对相关知识点的掌握情况。测试完成后将作品通过平台提交给老师。上机测试主要针对本章中需要重点掌握的知识点，以及在代码中容易出错的操作步骤。通过上机测试可以考察同学对“元素的浮动属性”、“清除浮动”及“overflow属性”使用的熟练程度，以及对如何使用“元素的定位属性”、“元素的类型与转换”等知识点的掌握程度。作业考核评价60分钟线上教师对学生的提交的上机测试作品进行点评，指出代码中容易出现bug的地方，并给与解答。通过测试及动手制作使学生巩固课堂学的知识反思与改进混合式教学单元设计方案一、教学基本情况项目（任务）名称JavaScript事件课程类型线上+线下授课时间第8周授课地点*****班级*****课时线上1+线下3二、教学目标和内容教学目标（用词表述要准确，可测量、可评价，建议根据布鲁姆教育目标分类法）素质目标包含课程思政内容知识目标掌握事件的绑定方式熟悉事件对象的使用掌握常用事件的实现能力目标能够进行事件绑定。能够获取事件对象能够将事件对象应在网页中素质目标养成细心、耐心、用心的学习习惯养成良好书写代码的习惯养成良好的浏览网页、发布网页的习惯具体团队合作意识具有吃苦耐劳的品质具有良好的网络素养教学内容事件被看作是JavaScript与网页之间交互的桥梁，当事件发生时，可以通过JavaScript代码执行相关的操作。例如，用户可以通过鼠标拖拽登录框，改变登录框的显示位置；或者在阅读文章时，选中文本后自动弹出分享、复制选项。本章将对JavaScript中的事件进行详细讲解。教学重点事件的绑定方式、事件对象、鼠标事件、键盘事件教学难点事件的绑定方式、页面事件、鼠标事件教学重难点解决方法措施：通过上机操作加强学习和补充案例进行巩固。三、课前学习情况分析1.课前学习任务布置及推送提示：任务1:观看2个视频（共计15分钟）任务2：完成课前测试，共计5个单项选择题（共计5分钟）发布时间：发布时间：202*年2月21日，截至时间：202*年06月30日。2.课前学习任务完成情况分析提示（实施完成后填写）：本次课前学习任务共有人完成视频观看，个同学未观看视频。本次课前测试共有个同学参加测试，从测试的结果来看，XX知识点掌握情况较好，XX知识点需要进一步讲解分析。四、教学实施过程教学环节（线上/线下）教学内容教学活动设计意图环节一：课前任务20分钟线上观看视频完成课前测试在线答疑为上课做准备，对课中内容有一个整体的把握环节二：课前回顾10分钟线下回顾前面学过的内容，引出本节课主题。在前面的课程中，许多案例的实现都离不开事件，例如鼠标单击onclick、下拉菜单发生改变onchange、鼠标滑过onmouseover等。利用事件可以实现各种交互效果。本节将围绕事件进行详细讲解。明确学习方向。了解事件处理程序、事件驱动式、事件流的基本概念。掌握早期版本IE浏览器与标准浏览器在事件处理上的差别。掌握如何获取事件对象。掌握事件对象的常用属性和方法。掌握案例“缓动的小球”开发。对线上学习情况的回顾与总结能够加深学生对线上所学知识的理解。在此基础上老师深入讲解，学生进行操作，使学生的知识与能力得到进一步提升。环节三：教师演示学生练习35分钟线下事件概述、事件的绑定方式、获取事件对象、常用属性和方法事件概述事件可以用来实现网页交互。事件处理程序指的就是JavaScript为响应用户行为所执行的程序代码。JavaScript可以用来开发事件驱动式的程序。当事件发生时，有一个事件流机制。有事件捕获和事件冒泡两种形式。事件的绑定方式行内绑定式：通过HTML标签的属性实现。动态绑定式：为DOM元素对象添加事件处理程序。关于行内绑定式和动态绑定式，在前面都已经用过。注意在事件处理程序中，this的指向问题。以上两种方式的局限：同一个DOM对象的同一个事件只能有一个事件处理程序。事件监听：可以为同一个DOM对象添加多个事件处理程序。对比早期版本的IE浏览器和标准浏览器的区别。获取事件对象事件对象类似