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

课题第20课JaVaSCriPt基础（三）课时2课时(90min)教学目标知识技能目标：掌握常用的流程控制语句、函数的使用方法素质目标：掌握JaVaSCriPI的相关知识，增加学生的知识储备教学重难点教学重点：流程控制语句、函数的使用方法教学难点：流程控制语句、函数的使用方法教学方法问答法、讨论法、i并授法、实践练习法教学用具电脑、投影仪、多媒体课件、教材、APP教学设计第1节课：课前任务T考勤（2min）一问题导入（5min）一传授新知（33min）一上机操作（5min）第2节课：问题导入（5min）一传授新知（25min）一上机操作（IOmin）一课堂小结（3min）一作业布置（2min）教学过程主要教学内容及步骤设计意图第一节课课前任务【教师】布置课前任务，和学生负责人取得联系，让其提醒同学通过APP或其他学习软件，完成课前任务请大家了解JavaScript常用的流程控制语句和函数的相关内容。【学生】完成课前任务通过课前任务，使学生了解本次课的主要内容，增加学生的学习兴趣考勤(2min)【教师】使用APP进行签到【学生】按照老师要求签到培养学生的组织纪律性，掌握学生的出勤情况问题导入（5min）【教师】提出以下问题什么是JavaScript流程控制语句？其包括哪些内容?【学生】思考、举手回答【教师】通过学生的回答引入要讲的知识通过问题导入的方法，引导学生主动思考，激发学生的学习兴趣传授新知（33min）4.6流程控制语句【教师】讲解流程控制语句的分类及使用方法JavaScript提供了多种流程控制语句，可以分为条件语句和循环语句。其中，条件语句包括if语句和switch语句,循环语句包括for语句、while语句和do.while语句。4.6.1 if语句【课堂互动】通过教师讲解、课堂互动、演示操作等方式，使学生了解JavaScript常用流程控制语句的使用方法【教师】提问if语句具有什么功能？+【学生】聆听、思考、回答if语句是最基本、最常用的流程控制语句，它通过判断条4牛表达式的值来选择不同的执行路线。1. if语句的基本结构if语句的基本结构如下：if(条件表达式)程序代码段1;else程序代码段2;J程序执行的过程中，首先判断括号中条件表达式的值，若条件表达式的值为t-ue,则程序彳各执行程序代码段1；否则执行程序代码段2。【示例4-6-1随幡入两个数,甜蜥它们的最大值。在HTML文档scrip0标签内输入以下代码：Vara,b;a=PromP1(“请您输入第1个数7");b=PrOmP1("谓您输入第2个数varmax;if(ab)max=a;elsemax=b;)alert("两个数中的最大值是："+max);【教师】组织学生分组上机完成上面的任务，并在各组中挑选T立学生进行演示，演示完成后教师进行点评【学生】聆听、上机操作、演示效果：页面中分别弹出两个提示框，若在这两个提示框中分别输入数12和42,最终弹窗中显示"两个数中的最大值是：42"。2. if语句的简略形式当if语句结构中的一个程序代码段为空时，其结构相对简略，如下所示：if(条1牛表达式)程序代码段；)程序执行的过程中，首先判断括号中条件表达式的值，若条件表达式的值为t1ue,则程序将执行程序代码段；否则直接跳过，执行if条件语句之后的程序代码。【示例4-6-2判断输入的年份是否为闰年.在HTML文档scripl标签内输入以下代码：vara;a=PrOmPt("请您输入一个年份if(a%4=0&&a%100!=0)(a%400=0)alert(a+"年是闰年")：效果：页面中弹出提示框，若输入的年份为"2004",则弹出"2004年是闰年"；若输入的年份为"1900”,则不弹出任何信息。3. if语句的嵌套和变形if语句不仅可以单独使用，还可以嵌套使用，即在语句结构中的一个程序代码段或两个程序代码段中嵌套其他的if语句，其语法格式如下：if(条件表达式1)(if(条件表达式2)程序代码段1else程序代码段2)elseif(条件表达式3)(程序代码段3else(程序代码段4I【示例4-6-3求输入的三个数的最大值。在HTML文档script"磁内输入以下代码：vara,b,c,max;a=prompt。请您输入第1个数b=PromP1("请您输入第2个数c=PromP1(”请您输入第3个数if(a>b)(if(a>c)(max=a;elsemax=c;I)elseif(b>c)max=b;elsemax=c;)alerts+"、"+b+"、"+c+"三个数中的最大值为"+max);【教师】组织学生分组上机完成上面的任务，并在各组中挑选一位学生进行演示，演示完成后教师进行点评【学生】聆听、上机操作、演示效果：页面中依次弹出三个提示框，若依次输入的数为28、12、49,则弹出“28、12、49三个数中的最大值为49"。4.6.2switch语句【课堂互动】+【教师】提问SWitCh语句有什么功能？【学生】聆听、思考、回答SWiICh语句是典型的多路分支语句，其作用与if语句基本相同，但是它比if语句更工整和清晰，且在编写代码的过程中也不容易出错.SWitCh语句可以根据一个表达式的值，选择执行不同的分支，其语法格式如下：SWitCh(表达式)case常量表达式1:程序代码段【break;case常量表达式2:程序代码段2break;case常量表达式n:程序代码段nbreak:default:程序代码段n+1程序执行的过程中，若表达式的值与常量表达式的值相等，则执行此CaSe分支后面的程序代码段，接着跳出switch语句。若表达式的值与常量表达式的值都不相等，则执行default后面的程序代码段。【示例4-6-4求一个百分制成绩对应的等级。在HTML文档script标签内输入以下代码：varChengJibdengJi;ChengJi=PrOmPl("潮入一*Is*百佛b=Math.floor(chengJi/10);switch(b)case10:case9:dengJi="A"break;case8:dengJi="B"break;(洋见教材)【教师】组织学生分组上机完成上面的任务，并在各组中挑选T立学生进行演示，演示完成后教师进行点评【学生】聆听、上机操作、演示效果：页面中弹出一个提示框，若输入的百分制成绩为"98",则弹出"98对应的等级为A”.【提示】SWiICh语句结构中，每一个CaSe分支中的程序代码段后必须添加break语句。若【示例4-6-4中每个break语句均漏写，则无论输入的成绩为何值，程序最终都会执行default后面的程序代码段。4.6.3 for语句中【教师】提问for语句一般用于什么情况？十【学生】聆听、思考、回答for语句又称计次循环语句，一般用于已知循环次数的情况，在JaVaSeriPt中应用比较广泛。for语句的语法格式如下：for(初始化循环变量；终止循环条!牛表达式；循环变量自加1或自减1)循环体)程序从循环变量初值开始运行循环体，每执行完一次循环体，循环变量就增加1或减去1,直到循环变量不符合终止循环条件表达式。【示例4-6-5求一个自然数的阶乘。在HTML文档VSCriPl标签内输入以下代码：varn,jieCheng=1;n=PromP("请输入一自然数'，"")；fbr(vari=1;i=n;i+)jieCheng=jieCheng*i;alert(n+"="+jieCheng);【教师】组织学生分组上机完成上面的任务，并在各组中挑选一位学生进行演示，演示完成后教师进行点评【学生】聆听、上机操作、演示效果：页面中弹出提示框，若输入的自然数为"6",则弹出"6!=720”.此外，for语句还有一个特殊的形式，如下所示：for(声明变量in集合类变量)循环体该形式的for语句用于遍历集合类变量，每次循环将集合类变量中的每一个元素依次赋值给声明变量，并执行循环体，遍历完集合类变量的所有元素后，循环结束。【示例4-6-6求一个数字数组的元素之和。在HTML文档script标签内输入以下代码：varnumbers=98.87,73,94,sum=0;fbr(variinnumbers)sum=sum+numbersi;)alert("总分为:"+sum);效果：页面中弹出“总分为：352".【提示】【示例466】中的代码"numbers=98,87,73,94"表示数组，页面中弹出的总分352是该数组中四个元素的和。4.6.4 whilei吾句十【教师】提问WhiIe语句有什么功能？【学生】聆听、思考、回答WhiIe语句又称前测试循环语句，它在执行循环体前测试条件。若条件成立则进入循环,执行循环体；否则，跳出循环，执行while语句后面的第句。while语句的语法格式如下：While（条件表达式）循环体）【示例4-6-7】在HTML文档script标签内输入以下代码：varnumbes=98,87,73,94,sum=O,i=0;while（i4）sum=numbersi+sum;i+;）alert（"总分为："+sum）;【教师】组织学生分组上机完成上面的任务，并在各组中挑选T立学生进行演示,演示完成后教师迸行点评【学生】聆听、上机操作、演示效果：实现效果与【示例4-6-6】一样，页面中弹出"总分为：352"。4.6.5 do.while语句do.while语句又称后测试循环语句，它先执行循环体再测试条件。若条件成立则进入循环，执行循环体；否则，跳出循环，执行do.while语句后面的第一个语句。do.while语句的语法格式如下：do循环体while（条件表达式）【示例4-6-8】在HTML文档script标签内输入以下代码：varnumbers=98,87,73,94,sum=0,i=0;dosum=numbersi+sum;i+；while（i4）alert（"总分为："+sum）;【教师】组织学生分组上机完成上面的任务，并在各组中挑选T立学生进行演示，演示完成后教师迸行点评【学生】聆听、上机操作、演示效果：实现效果与【示例4-6-6】一样，页面中弹出"总分为：352"。【提示】O一。二；5fcI.»»»i-er.,II音：,一一一二题二".K-一UrL-三M%=W.J+二;NRgr二Ido.while语句与while语句的不同是do.while语句至少会执行一次循环体，而while语句不一定会执行循环体。【学生】聆听、记录、理解上机操作(5min)【教师】组织学生分组讨论，上机完成以下任务使用相关流程控制语句编写代码，实现若输入的百分制成绩为"98""70”"85”则弹出总分。【学生】讨论、上机操作通过上机操作队固所学知识第二节课问题导入(5min)【教师】提出以下问题JavaScript中的函数是什么？【学生】思考、举手回答通过提问引导学生思考本节课内容传授新知(25min)4.7函数【教师】讲解JaVaSCriPt常用函数的使用方法÷【多媒体】组织学生扫码播放“函数”视频(详见教材)，让学生对这部分内容有一个大致地了解【课堂互动】【教师】提问JavaScript中的函数可以起到什么作用？十【学生】聆听、思考、回答在JavaScript中，函数就是实现某特定功能的一组代码，是实现模块化程序设计的基础。使用函数不仅可以提高代码重复使用的频率,还可以让代码更简洁,从而大大提高工作效率。在JavaScript程序中，如果一段具有特定功能的程序代码需要多次使用,就可以先将这段代码定义为函数,然后在需要这个功能的地方调用函数即可。4.7.1 函数的定义及函数的形参函数的定义其实就是将完成某一特定功能的代码段划分在一起，为其整体命名，并定义好入口参数。在JavaScript中，函数的定义方式比较灵活，每个函数都是作为一个对象被维护和运行的。定义函数的常用方法有以下几种。(1)使用function语句直接定义函数，其语法格式如下：function函数名(参数1.参数2,.)函数体return返回值；通过教师讲解、课堂互动、演示操作等方式，让学生了解JavaScript常用函数的使用方法(2)将一匿名函数值赋给一个变量，其语法格式如下：var函数名=function(参数1.参数2,.)函数体return返回值；(3)将函数"函数名2n的返回值赋给变量"函数名1",其语法格式如下：var函数名1=function函数名2(参数1,参数2,)函数体return返回值：I(4)声明"函数名"为一个对象，其语法格式如下：var函数名=newFunction();【提示】通过函数对象的性质,可以极其方便地将函数的值赋给变量，也可以将函数的值作为参数进行传递。定义函数时，指定的参数(如"参数1,参数2,")称为形式参数，简称形参。它们可以直接使用，不需要定义。形参可以是一个或多个(多个参数之间用英文逗号隔开)，其作用是调用函数时，可以为被调用的函数传递一个或多个值。函数不一定有返回值,即函数定义中不一定含有语句"relum返回值;"。4.7.2 函数的调用及函数的实参函数定义之后并不会自动执行,要执行函数,就需要在特定的位置调用函数。调用函数就像启动机器一样，机器本身不会自行工作,只有启动机器，机器才能执行相应的操作。调用函数需要创建调用语句，其语法格式如下：函数名(传递给函数的参数I,传递给函数的参数2,)调用函数时，实际传递给函数的参数(如"传递给函数的参数1.传递给函数的参数2.”)称为实际参数，简称实参。通常,在定义函数时使用了多少个形参,在调用函数时也必须给出多少个实参，且多个实参之间用英文逗号隔开。【课堂互动】+【教师】提问实参与形参在函数调用时有什么区别？十【学生】聆听、思考、回答在程序执行的过程中，函数的调用其实就是将实参传递给函数的形参，然后将函数体运行一次，直到函数体结束。如果有返回值，则将值诋回；如果没有返回值，则直接执行调用函数语句之后的语句。【示例4-7-1定义并调用一个求三个数中最大值的函数。在HTML文档script标签内输入以下代码：functionmaxS(a,b,c)定义函数maxSvarmax;if(ab)elseif(b>c)max=b;else(max=c;Ireturnmax;alert(maxS(12,34,9);调用函数maxS【教师】组织学生分组上机完成上面的任务，并在各组中挑选一位学生进行演示，演示完成后教师迸行点评，并讲解代码的效果效果：页面中弹出12、34、9三个数中的最大值"34"。【示例4-7-2定义并调用一个求三个数中最小值的函数。在HTML文档<scripl>标签内输入以下代码：varminS=function(a,b,c)定义函数HiinSvarmin;if(a<b)if(a<c)min=a;elsemin=c;(详见教材)效果：页面中弹出12、34、9三个数中的最小值"9"。【示例4-7-3】定义并调用一个求自抽阶乘的函数。在HTML文档<script>标签内输入以下代码：VarjieCheng=functionJieChengI(n)定义函数jieChengVarjieCheng=1;fbr(vari=l;i<=n;i+)jieCheng=jieCheng*i;IreturnjieCheng;Ialert(jieCheng(6);调用函数jieCheng【教师】组织学生分组上机完成上面的任务，并在各组中挑选一位学生进行演示，演示完成后教师进行点评，并讲解代码的效果效果：页面中弹出6的阶乘结果"720"。【示例4-7-4定义并调用f求余函数。在HTML文档scrip。标签内输入以下代码：varmod=newFunction("n"."k","return(n%k)'t);定义函数modalert(mod(12,5);调用函数mod效果：页面中弹出12对5求余的结果"2".【提示】【示例4-7Y】中，"n"和"k”表示函数的参数(形参)，“n%k”表示函数体，"return(n%kf表示函数的返回值。4.7.3 变量的作用域在函数外部的变量，其作用范围为整个HTML文档；局部变量是定义在函数体内部的变量，其作用范围仅限于函数体内部。【高手点拨】【示例4-7-1中的变量max、【示例4-7-2中的变量min、【示例4-7-3中的变量JieCheng均为局部变量。4.7.4 函数的嵌套在JavaScript中,允许函数进行嵌套，也就是说在一个函数的函数体中可以使用其他函数。使用嵌套函数可以在函数体内部定义函数或调用函数。(1)在函数体内部定义函数的语法格式如下：function函数名1()function函数名2()(函数体内部定义函数名2代码段)代码段I【提示】在函数体内部定义的函数艮能作用于函数体自身,对函数体外部没有停可作用。(2)在函数体内部调用函数的语法格式如下：function函数名1()代码段function函数名2()(函数名1();函数体内部调用函数名1I4.7.5 时间函数在JaVaSCriPt中，除了自定义函数，还有内置函数。【课堂互动】十【教师】提问JavaScript的内置时间函数有什么作用？十【学生】聆听、思考、回答JaVaSCriPt的内置时间函数可以支持时间延迟和时间间隔，详细介绍如下所示。(I)时间延迟函数SClTimeOUl(),表示延迟一定时间后开始执行延时行为，其语法格式如下：var变量名称=SetTimeoUt(function。延时行为,延时时间)；(2)清除时间延迟函数CIearTimeoUl(),用于清除延时函数变量，其语法格式如下：ClearTimeoU1(延时函数变量)：(3)时间间隔函数SetIntervalO,表示每间隔一定的时间运行一次间隔行为，且将该对象赋值给指定变量，所得变量数据类型为对象(Object),其语法格式如下：西,辱.二WJ送国二-J'!>.S=var变量名称=SetlnIerval(function()(间隔行为,间隔时间)；(4)清除时间间隔函数ClearlmerValo,用于清除时间间隔函数赋值的对象，其语法格式如下：CIearInlerVaI(间隔时间函数对象名称)【学生】聆听、记录、理解上机操作(10min)【教师】组织学生分组讨论，上机完成以下任务定义并调用一个求斐波那契数列的函数。【学生】讨论、上机操作通过上机操作巩固所学知识课堂小结(3min)【教师】简要总结本节课的要点本节课主要学习了JavaScript常用的流程控制语句、函数等内容，希望通过本节课的讲解，大家可以掌握这些流程控制语句和函数的具体使用方法，增加JaVaSCriPt的知识储备。总结知识点，巩固学生对JavaScript流程控制语句、函数等相关知识的印象作业布置(2min)【教师】布置课后作业个人作业：请根据课堂所学知识，完成课后习题团队作业：围绕第一节课制定的主题项目，设置页面中弹出一个提示框，若输入的百分制成绩为"98",则弹出"98对应的等级为A",并将其形成文档上传至APP【学生】完成课后任务通过课后作业复习巩固学到的知识，提高学生的理解能力教学反思本节课学生接触了新的知识，学习兴趣较高。不过知识点较多，全部消化还是比较难。在教学中，教师要将学生作为教学的主体，时刻关注学生学习成绩、方法等各方面的变化，引导学生从被动学习转为自主学习和思考，从而提高学习的积极性和主动性。IIr.-