《网站前端技术》教案第21课JavaScript基础（四）.docx

《《网站前端技术》教案第21课JavaScript基础（四）.docx》由会员分享，可在线阅读，更多相关《《网站前端技术》教案第21课JavaScript基础（四）.docx（16页珍藏版）》请在优知文库上搜索。

1、课题第21课JaVaSCriPt基础（四）课时2课时(90min)教学目标知识技能目标：（1）掌握数组的使用方法（2）理解对象的使用方法,掌握常用的内置对象素质目标：掌握JavaScript的相关知识，增加学生的知识储备教学重难点教学重点：数组和对象的使用方法教学难点：JavaScript常用的内置对象教学方法问答法、讨论法、讲授法、实践练习法教学用具电脑、投影仪、多媒体课件、教材、APP教学设计第1节课：课前任务T考勤（2min）一问题导入（5min）一传授新知（28min）一上机操作（10min）第2节课：问题导入（3min）一传授新知（37min）一课堂小结（3min）一作业布置（2mi

2、n）教学过程主要教学内容及步骤设计意图第一节课课前任务【教师】布置课前任务,和学生负责人取得联系，让其提醒同学通过APP或其他学习软件，完成课前任务请大家了解JaVaSeriPl中数组和对象的相关内容。【学生】完成课前任务通过课前任务，使学生了解本次课的主要内容，增加学生的学习兴趣考勤(2min)【教师】使用APP进行签到【学生】按照老师要求签到培养学生的组织纪律性，掌握学生的出勤情况问题导入（5min）【教师】提出以下问题什么是JavaScripts数组？其包括哪些元素？【学生】思考、举手回答【教师】通过学生的回答引入要讲的知识通过问题导入的方法，引导学生主动思考，激发学生的学习兴趣传授新知

3、（28min）4.8数组【教师】讲解数组的相关内容及使用方法数组是一组数据的集合，是JaVaSCriPt中用来存储和操作有序数据集的数据结构。一个数组中可以包含多个元素,每个元素的类型可以是不同的。数组中元素的类型可以是数值型、字符串型、布尔型、数组型、对象型等。【多媒体】组织学生扫码播放“数组”视频（详见教材），让学生对这部分内容有一个大致地了解通过教师讲解、课堂互动、演示操作等方式，使学生了解数组和对象的相关内容及使用方法4.8.1数组的声明声明数组可以采用赋值法、构造法，也可以直接将捕获的对象数组赋值给变量。(1)采用赋值法声明数组的语法格式如下：var数组变量名=值1,值2,值n;【示

4、例4-8-1】声明一个包含元素a-j的数组CharSevarcharS=(2)采用构造法声明数组的语法格式如下：var数组变量名=newArray();【示例4-8-2声明一个名为persons的数组。varpersons=newArray();(3)直接将捕获的对象数组赋值给变量，其语法格式如下：var数组变量名=document类或标签选择器方法名0：【示例4-8-3X神获的对象数组赋值给变量text,代码如下：vartext=document.getElementsByClassName(text);4.8.2 数组元素的引用【课堂互动】十【教师】提问如何引用数组元素？【学生】聆听、思考

5、、回答每个数组元素都有一个索引号(数组的下标)，通过索引号可以方便地引用数组元素。数组的下标从0开始编号。引用数组元素的语法格式如下：数组名称下标值【示例4-8-4在HTML文档script标签内输入以下代码：varcharS=a,b,cd,e,f,g,h,i,j;alert(charS(2);【教师】组织学生分组上机完成上面的任务，并在各组中挑选一位学生进行演示，演示完成后教师进行点评，并讲解代码的效果效果：页面中弹出charS数组中的第3个元素的值c.4.8.3 数组的属性和方法数组的属性和方法有很多，常用的属性是length,它表示数组元素的个数，其语法格式如下：数组名称.length常

6、用的方法是SOrto,用于对数组元素进行排序，其语法格式如下：数组名称.son。【示例4-8-5】在HTML文档script标签内输入以下代码：varnums=|68,79,32,17.90;alert(nums.sort();【教师】组织学生分组上机完成上面的任务，并在各组中挑选一位学生进行演示，演示完成后教师进行点评,并讲解代码的效果效果：页面中弹出nums数组元素排序后的结果17,32,68,79,90。4.8.4 数组的遍历中【教师】提问数组可以借助哪种语句遍历数组元素？十【学生】聆听、思考、回答在JaVaSCriPt中，通常使用fo语句遍历数组元素，语法格式如下：for(vari=0

7、;i数组名称.length;i+)数组名称i相关表达式【示例4-8-6在HTML文档标签内输入以下代码：window.onload=function()vartext=document.getElementsByClassName(text);varstrings=衣服二帽子“J裤子”,“鞋二“围巾手套”,“头饰for(vari=0;istringS.length;i+)texti.innerHTML=stringSi;在HTML文档标签内输入以下7个相同的标签，代码如下：【教师】组织学生分组上机完成上面的任务，并在各组中挑选一位学生进行演示，演示完成后教师进行点评【学生】聆听、上机操作、演示

8、【教师】PPt展示”页面显示效果”图片(详见教材)，并讲解效果：页面加载后,程序获取类名为text的7个div盒子，通过for语句遍历text数组和字符串数组strings,并将strings中的元素值赋给text数组。【提示】若想要对页面元素进行操作，必须要在窗口加载事件中完成。【示例4-8-6】中的for语句还可以写成以下形式：fbr(iintext)texti.innerHTML=stringSi;【学生】聆听、记录、理解4.9对象【教师】讲解对象的相关内容及使用方法*【多媒体】组织学生扫码播放“对象”视频(详见教材)，让学生对这部分内容有一个大致地了解对象的概念来自对客观世界的认识，用

9、于描述客观世界存在的特定实体。在计算机的世界中，不仅存在来自客观世界的对象，还包含为解决问题而引入的比较抽象的对象。4.9.1对象的声明【课堂互动】十【教师】提问声明对象的方法有哪些？【学生】聆听、思考、回答1 .变量声明法变量声明法如同一般简单变量的命名方法，其语法格式如下：var对象名=属性名1：属性值L属性名2:属性值2,属性名n:属性值n,方法】：funclion()方法体)方法n：function()方法体n【提示】使用变量声明法声明的对象本身就是一个对象变量，可以直接引用，但不能当一个类使【示例4-9-1声明对象car,代码以下：varcar=type:porsche,model:

10、911,color:white,CallType:function()alert(this.type);【高手点拨】car对象包含三个属性typexmodelcolor,一个方法callType方法CallType的作用是弹出属性type的值。该对象本身就是一个对象变量，可以直接引用，但不能当一个类使用。2 .函数声明法函数声明法的语法格式如下：function对象名称惨数I.参数2,参数n)this.属性名I=参数1,this.属性名2=参数2,this.属性名n=参数n,this.method1=function()方法体)this.methodn：funclion()方法体nI【提示】使

11、用函数声明法声明的对象是一个类，它需要经过对象构造后才能够被访问。示例4-9-2声明对象person,代码如下：functionPerSOn(X,y,z)this.name=x;this.color=y;this.age=z;IhisxalIName=function()alert(this.name);)4.9.2 对象的构造对象的构造可理解为使用new实例化对象，其语法格式如下：var对象变量名=new类名()；【示例4-9-3在【示例4-9-2代码的末尾添加person类的实例化对象personA,代码如下：VarpersonA=newPerSon(李宁,黄,32);【高手点拨】new实

12、例化了一个对象变量personA,它的姓名为李宁，颜色为黄，年龄为32。4.9.3 对象属性的访问【课堂互动】十【教师】提问访问对象属性的方法有哪些？十【学生】聆听、思考、回答访问对象属性的方法有层级访问法和元素访问法。(1)层级访问法的语法格式如下：对象变量名.属性名【示例4-94】在【示例4-9-3】末尾输入如下代码：alert(personA.age);【教师】组织学生分组上机完成上面的任务，并在各组中挑选一位学生进行演示，演示完成后教师进行点评，并讲解代码的效果效果：页面中弹出personA对象中属性age的值32。(2)元素访问法的语法格式如下：对象变量名属性名称”-二-_F片.一：

13、，.芹，：-二一i-IIIIJMM三3【示例4-9-5在【示例4-9-3末尾输入如下代码：alert(personAcolor|);【教师】组织学生分组上机完成上面的任务，并在各组中挑选一位学生进行演示，演示完成后教师进行点评,并讲解代码的效果效果：页面中弹出PerSonA对象中属性CoIor的值黄。4.9.4对象方法的访问访问对象方法的基本语法如下：对象变量名.方法名称。【示例4-9-6在【示例4-9-3末尾输入如下代码：personA.callName();效果：调用对象PerSOnA中的方法CallName,页面中弹出属性name的值李宁。【学生】聆听、记录、理解上机操作(10min)【

14、教师】组织学生分组讨论，上机完成以下任务在创建的course.html文件中，设置程序获取类名为course”的7个div盒子，通过for语句遍历course数组和字符串数组s(ringS,并将StringS中的元素值一赋给course数组。【学生】讨论、上机操作通过上机操作巩固所学知识第二节课问题导入(3min)【教师】提出以下问题JavaScript有哪些内置又搀?【学生】思考、举手回答通过提问引导学生思考本节课内容传授新知(37min)4.10JavaScript内置对象【教师】讲解内置对象的相关内容及使用方法JavaScript中常见的内置对象有时间对象Date、数学对象Mathx字符串对象string.数期掇array等，