《《网站前端技术》教案第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字符
15、串对象string.数期掇array等，每一个对象都有自己的方法和属性。4.10.1 Date对象【课堂互动】十【教师】提问通过Date对象可以获取哪些内容？十【学生】聆听、思考、回答Date对象提供了使用日期和时间的方法集合。用户可以利用Date对象获取系统日期和时间。使用Date对象之前需要先对其进行初始化，然后才可以调用该对象中的方法,从而获取和设置该对象的内容。1.Date对象初始化初始化Date对象的语法格式如下：var对象名称=newDale(参数):通过教师讲解、课堂互动、演示操作等方式，使学生了解内置对象的相关内容及使用方法var对象名称=newDate();【示例4-10-1
16、在HTML文档script标签内输入以下代码：varmyDate=newDate();alert(myDate);【教师】组织学生分组上机完成上面的任务，并在各组中挑选一位学生进行演示，演示完成后教师进行点评，并讲解代码的效果效果：页面中弹出此时的系统时间，如WedMar31202116:36:50GMT+0800(中国标准时间)”.(2)参数为year,month,day,hours,minutes,seconds,milliseconds,依次代表年、月、日、时、分、秒、亳秒。其中，参数年月不能省略，其他参数可以省略；日的默认值为1,时、分、秒的默认值均为0。使用该参数形式初始化Date对
17、象的语法格式如下：var对象名称=newDate(year,month,day,hours,minutes,seconds,milliseconds);【示例4-10-2在HTML文档script标签内输入以下代码：varmyDate=newDate(2021,2,12,16,51,51,0);alert(myDate);效果：页面中弹出定义的时间“FriMar12202116:51:51GMT+0800(中国标准时间)”。【示例4-10-3在HTML文档script标签内输入以下代码：varmyDate=newDate(2019,8);alert(myDate);【教师】组织学生分组上机完成
18、上面的任务，并在各组中挑选一位学生进行演示，演示完成后教师迸行点评，并讲解代码的效果效果：页面中弹出定义的时间”SunSep01201900:00:00GMT+0800(中国标准时间)”。(3)参数为milliSeCondS”,代表毫秒，表示自从1970年1月1日0时0分0秒后经历的毫秒数，用这个毫秒数可触算成对应的“年月日时分秒型日期。使用该参数形式初始化Date对象的语法格式如下：var对象名称=newDate(milliseconds);【示例4-10-4在HTML文档。CriPD标签内输入以下代码：varmyDate=newDate(180000);alert(myDate);效果：页
19、面中弹出时间ThuJanOl197008:03:00GMT+0800(中国标准时间。(4)参数为日期字符串，如“2021-8-1217:07:12。使用该参数形式初始化Date对象的语法格式如下：var对象名称=newDaie(日期字符串)：示例4-10-5在HTML文档script标签内输入以下代码：varmyDate=newDate(2021-8-1217:07:12);alert(myDate);【教师】组织学生分组上机完成上面的任务，并在各组中挑选一位学生进行演示，演示完成后教师进行点评，并讲解代码的效果效果：页面中弹出日期字符串所代表的时间,ThuAug12202117:07:12G
20、MT+0800(中国标准时间)”.【提示】参数为日期字符串时，字符串中表示月份的数字是实际月份，不再是一个序号。2.Date对象的获取方法Date对象的获取方法是指获取Date对象中指定的属性值。【教师】PPt展示“Date对象常用获取方法”的表格(详见教材)，并讲解调用Date对象方法的语法格式如下：Date对象方法名称()【示例4-10-6在HTML文档VSCriPl标签内输入以下代码：varmyDate=newDate(2019-8-1217:35:23:895);varmilliseconds=myDate.getMilliseconds();alert(milliseconds);效
21、果：页面中弹出DaIe对象myDate中的亳秒数895。3. DatC对象的设置方法Date对象的设置方法用来设置Date对象的某一部分。【课堂互动】+【教师】提问常用的Date对象设置方法有哪些？【学生】聆听、思考、回答【教师】PPt展示“Date对象设置方法”的表格(详见教材)，并讲解【示例4-10-7在HTML文档script标签内输入以下代码：varmyDate=newDate(2019-8-l217:35:23:895);myDate.setMonth(11);alert(myDate);【教师】组织学生分组上机完成上面的任务，并在各组中挑选T立学生进行演示，演示完成后教师进行点评，
22、并讲解代码的效果效果：页面中弹出修改月份后的Date对象myDate的值ThuDec12201917:35:23GMT+0800(中国标准时间)，月份由原来的8月份变为12月份。4.10.2 Math对象数学运算是程序中不可或缺的一部分，JavaScript程序也不例外。JavaScript提供了Math对象用于实现数学运算。该对象在JavaScript中是全局变量,不需要创建，直接使用即可调用Math对象方法的语法格式如下：Math.方法名称0该对象中规范了常用的数学方法，如取随机数、向下取整、向上取整、四舍五人等。1 .取随机数random。该方法可以返回0(包含)到1(不包含)之间的随机
23、数。【示例4-10-8在HTML文档script标签内输入以下代码：alert(Math.random();效果：页面中弹出随机数0.23844303393113075”(该值是每次调用随机函数后随机生成的，不是固定值)。2 .向下取整oor()该方法用于对数值向下取整。【示例4-10-9在HTML文档scripl标签内输入以下代码：alcrt(Malh.floor(234.8);效果：页面中弹出234。【提示】向下取整是指无论小数点后的数值是多少，小数部分都会去掉。3 .向上取整ceil()该方法用于对数值向上取整。示例4-10-10在HTML文档script标签内输入以下代码：alert(
24、Math.ceil(234.2);【教师】组织学生分组上机完成上面的任务，并在各组中挑选一位学生进行演示，演示完成后教师进行点评，并讲解代码的效果效果：页面中弹出235。【提示】向上取整是指无论小数点后的数值是多少，整数部分都会加U4 .四舍五入round()该方法用于对数值进行四舍五入。示例4-10-11在HTML文档script标签内输入以下代码：alert(Math.round(234.2);alert(Math.round(234.8);效果：页面中依次弹出234235.4.10.3 string对象【教师】讲解String对象字符串(string)是JavaScript中一种基本的数
25、据类型。【课堂互动】【教师】提问JavaScript的对象方法有哪些？十【学生】聆听、思考、回答JaVaSCriPt提供了很多String对象方法，如获取字符串长度、杳找字符串中的字符串、提取部分字符串、字符串分割为数组等。调用String对象方法的语法格式如下：字符串数据.方法名称01 .获取字符串长度IengthO该方法用于返回字符串的长度。字符串的长度包含字符串中的空格等字符,1个汉字也按照1个字符计算。示例4-10-12在HTML文档script标签内输入以下代码：VarStringA=Thisisastudent.;alert(stringA.length);效果：页面中弹出字符串的
26、长度18。2 .查找字符串中的字符串indexf()和IastIndexOfOindexf()用于返回字符串中指定文本首次出现的索引(位置)，索引从0开始计算。(示例4-10-13在HTML文档script标签内输入以下代码：varStringA=Thisisastudent.;varStringB=student;alert(stringA.indexOf(s(ringB);【教师】组织学生分组上机完成上面的任务，并在各组中挑选T立学生进行演示，演示完成后教师进行点评，并讲解代码的效果效果：页面中弹出字符串StringA中出现文本StringB的索引10。IaSHndeXof()用于返回字符
27、串中指定文本最后一次出现的索引(位置)，索引从0开始计算。【示例4-10-14在HTML文档script标签内输入以下代码：varSlringA=nThisisastudent.;varstringB=s;alert(stringA.IastIndexOf(StringB);效果：页面中弹出字符串StringA中最后一次出现文本StringB的索引10。3 .提取部分字符串SliCe()、SUbString0、SUbStroSIiCeo用于提取字符串的某部分，并在新字符串中返回被提取的部分，其语法格式如下：字符串对象.slice(开始索引.结束索引)【提示】新字符串的字符包括字符串对象从开始索
28、引(包括开始索引)到结束索引(不包括结束索引)为止的所有字符。索引的值必须是有意义的整数，可以是正整数、0、负整数。(详见教材)【示例4-10-15在HTML文档script标签内输入以下代码：varStringA=Thisisastudent.;varStringB=stringA.slice(5,7);varStringC=stringA.slice(-8,-l);alert(stringB):alert(stringC);【教师】组织学生分组上机完成上面的任务，并在各组中挑选T立学生进行演示,演示完成后教师进行点评，并讲解代码的效果效果：提取字符串StringA中索引5到索引7(包括5不
29、包括7)的片段“is”赋值给StringB；提取字符串StringA中倒数第8位至璃数第1位的片段student”赋值给StringCe页面中依次弹出StringB的值is”和StringC的值student.SUbSlring()的功能同SliCe(),但该方法的索引值不能为负数，其语法格式如下：字符串对象.substring(开始索引,结束索引)【示例4-10-16在HTML文档script标签内输入以下代码：varStringA=Thisisastudent.;varStringB=stringA.substring(5,7);alert(stringB);效果：提取字符串StringA
30、中索引5到索引7(包括5不包括7)的片段is赋值给SlringBe页面中弹出SlringB的值is。SUbStr()的功能也同slice(),不同之处是该方法的第二个参数是指提取字符的长度，其语法格迎吓：字符串对象SUbSIr(开始索引,提取字符的长度)【示例4-10-17在HTML文档scripl标签内输入以下代码：varStringA=Thisisastudent.;varStringB=stringA.substr(5,2);aIert(stringB);【教师】组织学生分组上机完成上面的任务，并在各组中挑选一位学生进行演示，演示完成后教师进行点评，并讲解代码的效果效果提取字符串Stri
31、ngA中从索引5开始2个字符长度组成的片段is赋值给StringBe页面中弹出s(ringB的值i$。4 .字符串分割为数组SPlit()该方法用于将一个字符串分割成字符串数组，其语法格式如下：字符串对象SPlit(分隔符)【提示】当没有分隔符时，字符串分隔后仍为原字符串，即其实没有被分隔。当分隔符为空时，字符串分隔后为一个个单独的字符。当分隔符为空格时,字符串分隔后为一个个单词，但最后一个数组元素会保留原有字符串的标点符号.【示例41(M8在HTML文档scripl标签内输入以下代码：varStringA=Thisisastudent.;varStringB=stringA.split(,)
32、;alert(stringB);alert(stringBl);效果：将字符串以空格分隔为4个部分，并赋值给数组StringBe页面中依次弹出数组StringB的元素”Thisjsasiudeni.和数组StringB下标为I的元素值is。4.10.4 array对象在JavaScript中，数组也是一种对象,称为数组对象，即array对象。【课堂互动】中【教师】提问array对象方哪些？【学生】聆听、思考、回答array对象中有很多方法,如删除元素、添加元素等。调用array对象方法的语法格式如下：数组对象.方法名称()下面详细介绍JavaScript提供的array对象方法。1.删除元素P
33、OPO和ShiftoPoPO用于删除数组中的最后一个元素，并返回最后一个元素，其语法格式如下：数组对pop0【示例4-10-19在HTML文档scripl标签内输入以下代码：vararrayA=13,16,234,43,8,90;varB=arrayA.pop();alert(B);alert(arrayA);效果：删除数组arrayA的最后一个元素,并将该元素赋给变量Be页面中依次弹出B的值90和数组arrayA的新值13,16,234,43,8”.ShiftO用于删除数组中的第一个元素，并返回第一个元素，其语法格式如下：一*d二-L:-J、,一一一；烽-三三5一E七FI【示例4-10-20
34、在HTML文档script标签内输入以下代码：vararrayA=1316,234,43,8,90;varB=arrayA.shift();alert(B);alert(arrayA);【教师】组织学生分组上机完成上面的任务,并在各组中挑选T立学生进行演示，演示完成后教师进行点评，并讲解代码的效果效果：删除数组aayA的第一个元素，并将该元素赋给变量B.页面中依次弹出B的值13和数组arrayA的部直”16.234.43,8,90。2.添加元素PUSh()和unshift()PUSho用于在数组的末尾添加元素，并返回数组新的元素个数，其语法格式如下：数组对象push(元素I,元素2,.)【示例
35、4-1021在HTML文档script标签内输入以下代码：vararrayA=13,16,234,43,8,90;varB=arrayA.push(489);alert(B);alert(arrayA);效果：在数组arrayA末尾添加元素489,并把数组arrayA新的元素个数赋给变量Be页面中依次弹出B的值7和数组arrayA的新值13,16,234,43,8,90,489。UnShifIO用于在数组的开头添力阮素，并返回数组新的元素个数，其语法格式如下：数组对象unshift(元素1,元素2,.)【示例4-10-22在HTML文档script标签内输入以下代码：vararrayA=13,
36、16,234,43,8,90;varB=arrayA.unshift(489);alert(B);alert(arrayA);【教师】组织学生分组上机完成上面的任务，并在各组中挑选T立学生进行演示，演示完成后教师进行点评,并讲解代码的效果效果：在数组arrayA开头添加元素489”,并把数组arrayA新的元素个数赋给变量B0页面中依次弹出B的值7和数组arrayA的新值“489,13,16,234,43,8,90。【学生】聆听、记录、理解课堂小结(3min)【教师】简要总结本节课的要点本节课主要学习了JavaScript的数组、对象及内置对象等相关内容，希望通过本节课的讲解，大家可以理解对象
37、的使用方法，掌握数组的使用方法和常用内置对象，课下及时巩固所学理论知识。【学生】总结回顾知识点总结知识点，巩固学生对JaVaScript中数组、对象及内置对象等相关知识的印象作业布置(2min)【教师】布置课后作业个人作业：请根据课堂所学知识，完成课后习题团队作业：围绕第一节课制定的主题项目,new实例化一个对象变量personA,它的姓名为李宁，成绩为94,性别为男，并形成文档上传至APP【学生】完成课后任务通过课后作业复习巩固学到的知识，提高学生的理解能力教学反思本节课效果不错，每个学生都积极参与到教学活动中，发挥了自己的价值。教学中注意分析学生的特点，根据不同学生的学习情况采用灵活多样的教学方法，极力营造一种平等和谐、活跃有序的课堂氛围。
