《JavaScript+jQuery交互式Web前端开发（第2版）》 教案-教学设计 第3章 数组.doc

博学谷——让IT教学更简单，让IT学习更有效

PAGE12

PAGE6

《JavaScript+jQuery交互式Web前端开发（第2版）》

教学设计

课程名称：

授课年级：

授课学期：

教师姓名：

年月

课题名称

第3章数组

计划课时

6课时

教学引入

数组用于将一组数据集合在一起。将数组赋值给一个变量后，通过变量就可以访问一组数据。在JavaScript中，使用数组可以很方便地对数据进行分类和批量处理。本章将对数组进行详细讲解，包括初识数组、创建数组、数组的基本操作、数组元素排序和二维数组。

教学目标

使学生了解数组的概念，能够描述数组的组成

使学生掌握数组的创建，能够灵活运用数组字面量的方式创建数组

使学生掌握获取和修改数组长度的方法，能够实现数组长度的获取和修改

使学生掌握访问数组的方法，能够访问数组元素

使学生掌握遍历数组的方法，能够使用for语句实现数组的遍历

使学生掌握添加、修改、删除和筛选数组元素的方法，能够实现添加、修改、删除和筛选数组元素

使学生掌握反转数组元素顺序的方法，能够实现数组元素顺序的反转

使学生掌握数组的排序，能够实现数组的冒泡排序和插入排序

使学生掌握创建与访问二维数组的方法，能够实现二维数组的创建与访问

使学生掌握遍历二维数组的方法，能够实现二维数组的遍历

教学重点

创建数组

获取和修改数组长度

访问数组

遍历数组

添加和修改数组元素

删除数组元素

筛选数组元素

反转数组元素顺序

冒泡排序

插入排序

创建与访问二维数组

遍历二维数组

教学难点

【案例】查找班级最高分和最低分

冒泡排序

插入排序

【案例】使用二维数组实现矩阵转置

教学方式

课堂教学以PPT讲授为主，并结合多媒体进行教学

教

学

过

程

第一、二课时

（初识数组、创建数组、获取和修改数组长度、访问数组、遍历数组、添加和修改数组元素、删除数组元素、筛选数组元素、反转数组元素顺序、【案例】查找班级最高分和最低分）

一、复习巩固

教师通过上节课作业的完成情况，对学生吸收不好的知识点进行再次巩固讲解。

二、通过需求引入的方式导入新课

在实际开发中，经常需要保存一批相关联的数据并进行处理。例如，保存一个班级中所有学生的语文考试成绩并计算这些成绩的平均分。虽然我们可以通过多个变量分别保存每位学生的考试成绩，再将这些变量相加后除以班级人数，求出平均分，但是这种方式非常麻烦和低效。此时，可以使用JavaScript中的数组来保存班级内每位学生的成绩，然后通过对数组的处理求出平均分，这种方式不仅简单，而且开发效率更高。下面本节课将对JavaScript中的数组和数组的基本操作进行讲解。

三、新课讲解

知识点1-初识数组

教师通过PPT的方式讲解初识数组。

数组的组成。

数组中索引和值的关系。

知识点2-创建数组

教师通过PPT结合实际操作的方式讲解创建数组。

使用数组字面量“[]”创建数组的语法格式。

数组中包含空位的语法格式。

通过代码演示如何使用数组字面量“[]”创建数组。

知识点3-获取和修改数组长度

教师通过PPT结合实际操作的方式讲解获取和修改数组长度。

什么是数组长度。

获取数组长度。

获取数组长度的语法格式

通过代码演示如何获取数组长度

修改数组长度。

修改数组长度的语法

通过代码演示如何修改数组长度

知识点4-访问数组

教师通过PPT结合实际操作的方式讲解访问数组。

访问数组的语法格式。

通过代码演示如何在创建数组后访问数组。

知识点5-遍历数组

教师通过PPT结合实际操作的方式讲解遍历数组。

什么是遍历数组。

遍历数组的语法格式。

以求班级中语文成绩的平均分为例演示遍历数组的使用。

知识点6-添加和修改数组元素

教师通过PPT结合实际操作的方式讲解添加和修改数组元素。

什么是添加数组元素。

什么是修改数组元素。

添加和修改数组元素的语法格式。

通过代码演示如何添加和修改数组元素。

通过for语句为数组添加多个数组元素。

知识点7-删除数组元素

教师通过PPT结合实际操作的方式讲解删除数组元素。

删除数组元素的语法格式。

通过代码演示如何删除数组元素。

知识点8-筛选数组元素

教师通过PPT结合实际操作的方式讲解筛选数组元素。

通过for语句和if语句实现筛选数组元素的功能。

通过代码演示筛选所有大于或等于80分的学生成绩，并将筛选出来的成绩保存到一个新的数组中。

知识点9-反转数组元素顺序

教师通过PPT结合实际操作的方式讲解反转数组元素顺序。

什么是反转数组元素顺序。

通过代码演示数组元素的反转。

知识点10-【案例】查找班