HTML5+CSS3+JavaScript Web 前端基础教程电子教案 单元 11 JavaScript对象.docxVIP

PAGE3

PAGE

单元11JavaScript对象

课程名称

HTML5+CSS3+JavaScriptWeb前端基础教程

项目名称

JavaScript对象与内置API应用

任务名称

对象创建、内置对象使用与穿梭框组件开发

课时

5

项目性质

□演示性□验证性□设计性√综合性

授课班级

授课日期

授课地点

教学目标

知识目标

1．了解JavaScript对象的概念、结构与创建方式（字面量、构造函数）；

2．掌握对象的属性与方法的访问、添加、修改与删除；

3．熟悉常用内置对象（Number、String、Date、Array、Window）的核心方法；

4．了解对象的遍历方法（for...in、Object.keys）；

5．掌握数组的常用方法（push、pop、forEach、filter、map）；

6．了解JSON格式与对象的相互转换（JSON.stringify、JSON.parse）。

能力目标

1．能够创建自定义对象并操作其属性与方法；

2．能够使用String对象方法处理字符串（如截取、替换、大小写转换）；

3．能够使用Date对象获取当前时间、格式化日期显示；

4．能够使用Array对象方法处理数组数据（如筛选、遍历、转换）；

5．能够制作穿梭框组件，实现左右列表数据的迁移；

6．能够将对象数据转换为JSON格式，或解析JSON数据为对象。

素质目标

1．培养面向对象的编程思维；

2．养成数据结构化的处理习惯（如用对象存储复杂数据）；

3．提升对内置API的查阅与使用能力；

4．增强组件化开发的初步认知（如穿梭框组件封装）；

教学内容

1.任务描述：掌握JavaScript对象与内置API，开发穿梭框组件，实现复杂数据处理与展示；

2.任务展示与实现：

（1）教师讲解对象概念与结构，演示对象创建方式（字面量、newObject）；

（2）学生实操：创建用户对象（包含姓名、年龄、技能等属性），访问并修改属性；

（3）教师讲解对象方法的定义与调用，演示自定义方法；

（4）学生实操：为用户对象添加介绍自己的方法，调用后输出完整信息；

（5）教师讲解String对象常用方法（substring、replace、toUpperCase）；

（6）学生实操：实现字符串的截取、关键词替换功能；

（7）教师讲解Date对象，演示日期获取与格式化（年-月-日时：分:秒）；

（8）学生实操：制作时钟页面，实时显示当前时间；

（9）教师讲解Array对象核心方法（forEach、filter、map、push、pop）；

（10）学生实操：筛选数组中的偶数、遍历数组渲染页面；

（11）教师讲解JSON格式与对象转换，演示数据存储与解析；

（12）分组开发：制作穿梭框组件（左右两个列表，实现数据的添加、移除、全选迁移）；

3.核心知识点讲解：对象创建与操作、内置对象方法、数组处理、JSON转换、组件开发；

4.任务小结：对象与数组的实际应用场景（如数据存储、组件状态管理）；

教学重点

（1）JavaScript对象的创建与属性、方法操作；

（2）String对象的字符串处理方法（substring、replace）；

（3）Date对象的日期获取与格式化；

（4）Array对象的常用方法（forEach、filter、push、pop）；

（5）穿梭框组件的核心逻辑（数据迁移、列表渲染）；

教学难点

（1）对象的引用类型特性（如对象赋值是引用传递）；

（2）Atotype.forEach与for循环的差异；

（3）数组方法（filter、map）的返回值与原数组的关系；

（4）Date对象的月份计算（0-11）与时区问题；

（5）穿梭框组件中数据同步与列表渲染的联动逻辑；

教学准备

1.装有VSCode的电脑；

2.教学课件PPT（含对象结构示意图、内置对象方法表）；

3.自定义对象、内置对象练习案例代码；

4.日期格式化、数组处理练习素材；

5.穿梭框组件需求文档、参考效果与静态页面代码；

6.JSON数据样本（如用户列表JSON数据）；

作业设计

1.创建一个图书对象，包含属性（书名、作者、出版日期、价格）与方法（计算折扣价，接收折扣率参数，返回折后价格）；

2.定义一个字符串数组，使用forEach遍历数组，将所有字符串转换为大写并输出；使用filter筛选出长度大于5的字符串；

3.制作日期格式化工具：获取当前日期，格式化为XXXX年XX月XX日星期X时：分:秒；

4.完善穿梭框组件：添加全部添加、全部移除、双向