《web前端技术》(赵敏)003-0教案 第21课 数组

PAGE6PAGE6PAGE5PAGE5

课题第21课数组课时2课时（90min）教学目标知识技能目标：（1）掌握数组的定义和数组元素的操作（2）熟悉数组的属性和方法素质目标：（1）探索数组的相关知识，增强自身的钻研精神（2）提高对事物的观察和归纳总结能力，养成良好的编程习惯和思维方式教学重难点教学重点：数组的定义和数组元素的操作教学难点：数组的属性和方法教学方法问答法、讨论法、讲授法、实践练习法、演示法教学用具电脑、投影仪、多媒体课件、教材、文旌课堂教学设计第1节课：→→→传授新知（20min）→实战拓展（20min）第2节课：→传授新知（15min）→实战拓展（20min）→课堂小结（3min）→作业布置（2min）教学过程主要教学内容及步骤设计意图第一节课课前任务【教师】布置课前任务，把和学生负责人取得联系，让其提醒同学通过文旌课堂APP或其他学习软件，完成课前任务了解数组的概念，数组元素的操作【学生】完成课前任务通过课前任务，让学生提前了解数组的概念和数组元素的操作，为课堂上学习相关知识点做准备考勤（2min）【教师】使用文旌课堂APP进行签到【学生】按照老师要求签到培养学生的组织纪律性，掌握学生的出勤情况问题导入（3min）【教师】提出问题什么是数组？【学生】思考、举手回答【教师】通过学生的回答引入要讲的知识通过问题导入的方法，引导学生主动思考，激发学生的学习兴趣传授新知（20min）10.3数组10.3.1认识数组【教师】讲解数组的概念，并展示图“数组结构”辅助理解在JavaScript开发中，数组主要用于临时存储多个数据，进行高速批量运算。例如，有一批用户名称需要临时进行记录保存，…（详见教材）数组本质上是一种具有顺序的特殊对象。数组由多个元素组成，每个元素由“下标”和“值”组成。其中，数组元素的“下标”又称“索引”或“键”，以数字标识，代表元素在数组中的位置，…（详见教材）【课堂拓展】前面介绍的是一维数组。所谓一维数组，就是数组元素的值是除数组以外的其他类型数据。除一维数组外，还有二维数组、三维数组等多维数组，当一个数组的值中有一维数组时，那这个数组就是二维数组。例如，[a,b,[c,d],e]就是一个二维数组。因此，也可以理解为，数组存储数组类型的数据即构成了多维数组。【学生】聆听、记录、理解10.3.2数组的定义【教师】讲解数组的定义在JavaScript中，定义数组的方式有两种，一种是通过实例化Array对象（JavaScript中的内置对象）的方式定义数组；另一种是直接使用“[]”定义数组，下面分别对两种方式进行介绍。1．使用Array对象使用Array对象定义数组是通过new关键字实现的，代码如下：…（详见教材）由上述示例可以看出，实例化Array数组时可以传入各种数据类型的值。需要注意的是，如果初始化对象时仅传入一个数值类型的参数，并不是定义了一个元素为对应数值的数组，而是定义了一个长度为对应数值的数组，代码如下：…（详见教材）使用Array对象定义数组时，可以省略关键字new，代码如下：…（详见教材）【课堂拓展】数组命名通常使用单词的复数形式，因为数组一般代表多个元素。2．使用“[]”定义数组使用“[]”和使用Array对象定义数组的方式类似，将newArray()替换为“[]”即可，代码如下：…（详见教材）【课堂拓展】使用Array对象和“[]”定义数组类似，不同之处在于，后者可以定义部分数据元素值为空的数组，如上述empty数组中包含两个值为空的元素，…（详见教材）【学生】聆听、记录、理解10.3.3数组元素的操作【教师】讲解数组元素的操作数组是数组元素的集合，对数组进行操作，实际上就是对数组元素进行操作。在实际开发中，常对数组元素进行的操作包括数组元素的输入和输出，数组元素的添加和删除等。1．数组元素的输入和输出数组元素的输入是指对数组中的元素进行赋值，其输入方法有3种。（1）在定义数组对象时直接输入数组元素。该方法只适用于数组元素确定的情况。例如，创建数组对象的同时输入字符串数组，代码如下：…（详见教材）利用数组对象的元素下标输入数组元素。该方法可以随意为数组对象中的各元素赋值，也可以修改数组中的任意元素值。例如，创建一个长度为5的数组对象，并为下标为1和2的元素赋值，代码如下：…（详见教材）利用for语句向数组对象中输入数组元素。该方法主要用于批量向数组对象中输入数组元素，一般用于为数组对象赋初值。例如，通过改变变量n的值为数组对象赋指定个数的数组元素，代码如下：…（详见教材）数组元素的输出是指获取数组中元素的值并输出，其输出方法也有3种。利用数组对象名获取并输出所有元素值。例如，输出数组对象中的所有元素值，代码如下：…（详见教材）利用下标获取指定元素值并输出。例如，获取数组对象中第2个元素的值并输出，代码如下：…（详见教材）【课堂拓展】如果获取元素时设置的数组元素下标不正确，则会输出结果undefined。例如，设置的数组元素的下标超出了数组的下标，将输出结果undefined，代码如下：…（详见教材）利用for语句获取数组中的元素值并输出。例如，获取数组对象中的所有元素值并输出，代码如下：…（详见教材）2．数组元素的添加和删除在定义数组时，虽然设置了数组元素的个数，但是该元素个数并不是固定不变的，用户可以通过添加或删除数组元素的方法来改变数组元素的个数。添加数组元素的方法非常简单，只需要对新的数组元素进行赋值即可。例如，定义一个包含3个元素的数组，然后为数组再添加2个元素，最后输出数组中的所有元素值，代码如下：…（详见教材）删除数组元素只是删除数组元素的值，也就是说将元素恢复为未赋值的状态（即undefined），数组中元素的个数不会减少。在JavaScript中，使用delete关键字可以删除数组元素的值。例如，删除数组中下标为1的数组元素的值，然后输出数组中的所有元素，代码如下：…（详见教材）【学生】聆听、记录、理解通过教师的讲解和演示例子，使学生了解数组的概念、数组的定义和数组元素的操作实战拓展（20min）定义一个含有30个整型元素的数组，按顺序分别赋予从2开始的偶数；然后按顺序每五个数求出一个平均值，放在另一个数组中并输出。试编程。【教师】讲解做题思路，引导学生思考，要求学生完成以上习题，有疑问可互相讨论或咨询老师，学生制作完成后教师再讲解答案：通过练习习题，将知识应用到实例中，锻炼学生的主动思考能力和编程能力第二节课问题导入（5min）【教师】提出问题数组有哪些属性和方法？【学生】思考、举手回答【教师】通过学生的回答引入要讲的知识通过问题导入的方法，引导学生主动思考，激发学生的学习兴趣传授新知（15min）10.3.4数组的属性和方法【教师】展示图“Array对象常用属性和方法”讲解数组的属性和方法在JavaScript中，Array对象（数组对象）拥有多种属性和方法。…（详见教材）【例10-11】Array对象常用属性和方法的应用…（详见教材）…（详见教材）【学生】聆听、记录、理解、观看效果通过教师的讲解和演示，让学生掌握数组的属性和方法实战拓展（20min）定义一个函数，用于计算一个长方体的底部面积和体积，并返回一个包含该长方体底部面积和体积的数组【教师】讲解做题思路，引导学生思考，要求学生完成以上习题，有疑问可互相讨论或咨询老师，学生制作完成后教师再讲解具体实现效果与代码可参考“素材与案例\第10章\实训练习”文件夹中的“shixun10(2).html”文档。制作项目，讨论通过完成习题，使学生巩固数组的相关知识，锻炼学生的动手操作能力课堂小结（3min）【教师】简要总结本节课的要点本节课主要介绍了数组的相关知识。通过本节课的学习，学生应重点掌握以下内容。（1）在JavaScript中，定义数组的方式有两种，一种是通过实例化Array对象（JavaScript中的内置对象）的方式定义数组；另一种是直接使用“[]”定义数组。（2）常对数组元素进行的操作包括数组元素的输入和输出，数组元素的添加和删除等。【学生】总结回顾知识点总结知识点，使学生牢固掌握数组的相关知识作业布置（2min）【教师】布置课后作业个人作业：请根据课堂所学知识，完成课后习题，实训练习请将制作界面截图并加上自己水印上传至文旌课堂APP【学生】完成课