《网站前端技术》教案第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语句