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

《JavaScript+jQuery交互式

Web南端开发（第2版）》

教学设计

语襟名蛛：____________________

授课年级：_____________

投课学期：_____________________

教师找名：____________________-

年月

计划

课题名称第3章数组6课时

课时

数组用于将一组数据集合在一起。将数组赋值给一个变量后，通过变量就

可以访问一组数据。在JavaScript中，使用数组可以很方便地对数据进行分类

教学引入

和批量处理。本章将对数组进行详细讲解，包括初识数组、创建数组、数组的

基本操作、数组元素排序和二维数组。

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

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

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

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

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

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

改、删除和筛选数组元素

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

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

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

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

•创建数组

•获取和修改数组长度

•访问数组

•遍历数组

•添加和修改数组元素

•删除数组元素

教学垂点

•筛选数组元素

・反转数组元素顺序

•冒泡排序

•插入排序

•创建与访问二维数组

•遍历二维数组

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

・冒泡排芹

教学难点

•插入排序

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

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

第一、二课时

（初识数组、创建数组、获取和修改数组长度、访问数组、遍历数组、添加和

教修改数组元素、删除数组元素、筛选数组元素、反转数组元素顺序、【案例】

学查找班级最高分和最低分）

过一、复习巩国

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

讲解。

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

在实际开发中，经常需要保存一批相关联的数据并进行处理。例如，保存

一个班级中所有学生的语文考试成绩并计算这些成绩的平均分。虽然我们可以

通过多个变昼分别保存每位学生的考试成绩，再将这些变量相加后除以班级人

数，求出平均分，但是这种方式非常麻烦和低效。此时，可以使用JavaScript

中的数组来保存班级内每位学生的成绩，然后通过对数组的处理求出平均分，

这种方式不仅简单，而且开发效率更高。下设本节课将对JavaScript中的数组

和数组的基在操作进行讲解。

三、新课讲解

知识点1-初识数组

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

1.数组的组成。

2.数组中索引和值的关系。

知识点2-创建数组

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

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

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

3.通过代码演示如何使用数组字面量“[「’创建数组。

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

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

I.什么是数组长度。

2.获取数组长度。

(1)获取数组长度的语法格式

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

3.修改数组长度。

(1)修改数组长度的语法

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

知识点4-访问数组

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

1.访问数组的语法格式。

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

知识点5-遍历数组

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

1.什么是遍历数组。

2.遍历数组的语法格式。

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

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

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

1.什么是添加数组元素。

2.什么是修改数组元素。

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

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

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

知识点7-删除数组元素

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

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

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

知识点8•筛选数组元素

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

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

2.通过代码演示筛选所有大于或等于80分的学生成绩，并将筛选出来的成

绩保存到一个新的数组中。

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

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

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

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

知识点10-【案例】查找班级最高分和最低分

教师通过PPT结合实际操作的方式讲解【案例】查找班级最高分和最低分。

I.实现本案例的具体思路是：假设数组中第一个元素为最大值，使用for

语句从数组索引为I的元素开始遍历到最后一个元素，将当前元素与

预先设置的最大值比较。如果当前元素比最大值大，则将当前元素设

置为最大值，再继续比较下一个元素，遍历完成后即可找到最大值。

查找最小值的方法与查找最大值的方法类似。

2.编写代码实现案例o

四、归纳总结

教师回顾本节课所讲的知识，并通过测试题的方式引导学生解答问题并给

予指导。

五、布置作业

教师通过高校教辅平台(htip://)布置本节课的作业以及下节

课的预习内容。

第三、四课时

(冒泡排序、插入排序、创建与访问二维数组、遍历二维数组、【案例】使用

二维数组实现矩阵转置)

一、复习巩国

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

讲解。

二、通过直接引入的方式导入新课

数组元素排序是指将数组中的元素排列成一个有序的序列。排序需要使用

算法来完成，下面木节课将讲解JavaScript中常见的数组元素排序算法以及二

维数组的创建、访问、遍历。

三、新课讲解

知识点1•冒泡排序

教师通过PPT结合实际操作的方式讲解冒泡排序。

1.什么是冒泡排序。

2.冒泡排序的具体过程.

3.通过代码演示冒泡排序的实现。

知识点2-插入排序

教师通过PPT结合实际操作的方式讲解插入排序。

1.什么是插入排序。

2.插入拌序的具体过程。

3.通过代码演示插入排序的实现。

知识点3.创建与访问二维数组

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

1.什么是二维数组。

2.二维数组的应用。

3.二维数组的创建。

4.通过代码演示如何创建与访问二维数组。

知识点4.遍历二维数组

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

1.通过代码演示如何遍历二维数组。

2.通过一个求和的案例演示二维数组的遍历方法。首先创建二维数组arr,

然后使用for语句遍历二维数组中的元素，最后进行求和。

知识点5•【案例】使用二维数组实现矩阵转置

教师通过PPT结合实际操作的方式讲解【案例】使用二维数组实现矩阵转

置。

1.什么是矩阵转置。

2.编写代码实现案例。

四、归纳总结

教师EI顾本节课所讲的知识，并通过测试题的方式引导学生解答问题并给

予指导。

五、布置作业

教师通过高校教辅平台()布置本节课的作业以及下节

课的预习内容。

第五、六课时(上机练习)

上机练习主要针对本章中需要重点掌握的知识点，以及在程序中容易出错

的内容进行练习，通过上机练习考察学生对知识点的掌握情况。

上机：(考察知识点为：遍历数组、筛选数组元素、反转数组元素顺序、【案

例】查找班级最高分和最低分、冒泡排序、插入排序、【案例】使用二维数组

实现矩阵转置)

形式：宜独完成

题目：按照要求编写程序。

具体要求：

(1)首先使用数组保存班级中所有学生的语