《网站前端技术》（梁玲）621-7 教案 第20课 JavaScript基础（三）

PAGE4PAGE4PAGE3PAGE3PAGE3PAGE3

课题第20课JavaScript基础（三）课时2课时（90min）教学目标知识技能目标：掌握常用的流程控制语句、函数的使用方法素质目标：掌握JavaScript的相关知识，增加学生的知识储备教学重难点教学重点：流程控制语句、函数的使用方法教学难点：流程控制语句、函数的使用方法教学方法问答法、讨论法、讲授法、实践练习法教学用具电脑、投影仪、多媒体课件、教材、文旌课堂APP教学设计第1节课：→→→传授新知（33min）→上机操作（5min）第2节课：→传授新知（25min）→上机操作（10min）→课堂小结（3min）→作业布置（2min）教学过程主要教学内容及步骤设计意图第一节课课前任务【教师】布置课前任务，和学生负责人取得联系，让其提醒同学通过文旌课堂APP或其他学习软件，完成课前任务请大家了解JavaScript常用的流程控制语句和函数的相关内容。【学生】完成课前任务通过课前任务，使学生了解本次课的主要内容，增加学生的学习兴趣考勤

（2min）【教师】使用文旌课堂APP进行签到【学生】按照老师要求签到培养学生的组织纪律性，掌握学生的出勤情况问题导入（5min）【教师】提出以下问题什么是JavaScript流程控制语句？其包括哪些内容？【学生】思考、举手回答【教师】通过学生的回答引入要讲的知识通过问题导入的方法，引导学生主动思考，激发学生的学习兴趣传授新知

（33min）4.6流程控制语句【教师】讲解流程控制语句的分类及使用方法JavaScript提供了多种流程控制语句，可以分为条件语句和循环语句。其中，条件语句包括if语句和switch语句，循环语句包括for语句、while语句和do…while语句。4.6.1if语句【课堂互动】✈【教师】提问if语句具有什么功能？✈【学生】聆听、思考、回答if语句是最基本、最常用的流程控制语句，它通过判断条件表达式的值来选择不同的执行路线。1.if语句的基本结构if语句的基本结构如下：if(条件表达式){ 程序代码段1;}else{ 程序代码段2;}程序执行的过程中，首先判断括号中条件表达式的值，若条件表达式的值为true，则程序将执行程序代码段1；否则执行程序代码段2。【示例4-6-1】输入以下代码：vara,b;a=prompt("请您输入第1个数","");b=prompt("请您输入第2个数","");varmax;if(a>b){ max=a;}else{ max=b;}alert("两个数中的最大值是："+max);【教师】组织学生分组上机完成上面的任务，并在各组中挑选一位学生进行演示，演示完成后教师进行点评【学生】聆听、上机操作、演示效果：页面中分别弹出两个提示框，若在这两个提示框中分别输入数12和42，最终弹窗中显示“两个数中的最大值是：42”。2.if语句的简略形式当if语句结构中的一个程序代码段为空时，其结构相对简略，如下所示：if(条件表达式){ 程序代码段;}程序执行的过程中，首先判断括号中条件表达式的值，若条件表达式的值为true，则程序将执行程序代码段；否则直接跳过，执行if条件语句之后的程序代码。【示例4-6-2】vara;a=prompt("请您输入一个年份","");if((a%4==0&&a%100!=0)||(a%400==0)){ alert(a+"年是闰年");}效果：页面中弹出提示框，若输入的年份为“2004”，则弹出“2004年是闰年”；若输入的年份为“1900”，则不弹出任何信息。3.if语句的嵌套和变形if语句不仅可以单独使用，还可以嵌套使用，即在if语句结构中的一个程序代码段或两个程序代码段中嵌套其他的if语句，其语法格式如下：if(条件表达式1){ if(条件表达式2){ 程序代码段1 }else{ 程序代码段2 }}else{ if(条件表达式3){ 程序代码段3 }else{ 程序代码段4 }}【示例4-6-3】vara,b,c,max;a=prompt("请您输入第1个数","");b=prompt("请您输入第2个数","");c=prompt("请您输入第3个数","");if(a>b){ if(a>c){ max=a; }else{ max=c; }}else{ if(b>c){ max=b; }else{ max=c; }}alert(a+"、"+b+"、"+c+"三个数中的最大值为"+max);【教师】组织学生分组上机完成上面的任务，并在各组中挑选一位学生进行演示，演示完成后教师进行点评【学生】聆听、上机操作、演示效果：页面中依次弹出三个提示框，若依次输入的数为28、12、49，则弹出“28、12、49三个数中的最大值为49”。4.6.2switch语句【课堂互动】✈【教师】提问switch语句有什么功能？✈【学生】聆听、思考、回答switch语句是典型的多路分支语句，其作用与if语句基本相同，但是它比if语句更工整和清晰，且在编写代码的过程中也不容易出错。switch语句可以根据一个表达式的值，选择执行不同的分支，其语法格式如下：switch(表达式){ case常量表达式1: 程序代码段1 break; case常量表达式2: 程序代码段2 break; … case常量表达式n: 程序代码段n break; default: 程序代码段n+1}程序执行的过程中，若表达式的值与常量表达式的值相等，则执行此case分支后面的程序代码段，接着跳出switch语句。若表达式的值与常量表达式的值都不相等，则执行default后面的程序代码段。【示例4-6-4】求一个百分制成绩对应的等级。在HTML文档<script>标签内输入以下代码：varchengJi,b,dengJi; chengJi=prompt("请您输入一个百分制成绩",""); b=Math.floor(chengJi/10); switch(b){ case10: case9: dengJi="A"; break; case8: dengJi="B"; break;……（详见教材）【教师】组织学生分组上机完成上面的任务，并在各组中挑选一位学生进行演示，演示完成后教师进行点评【学生】聆听、上机操作、演示效果：页面中弹出一个提示框，若输入的百分制成绩为“98”，则弹出“98对应的等级为A”。【提示】switch语句结构中，每一个case分支中的程序代码段后必须添加break语句。若【示例4-6-4】中每个break语句均漏写，则无论输入的成绩为何值，程序最终都会执行default后面的程序代码段。4.6.3for语句【课堂互动】✈【教师】提问for语句一般用于什么情况？✈【学生】聆听、思考、回答for语句又称计次循环语句，一般用于已知循环次数的情况，在JavaScript中应用比较广泛。for语句的语法格式如下：for(初始化循环变量;终止循环条件表达式;循环变量自加1或自减1){ 循环体}程序从循环变量初值开始运行循环体，每执行完一次循环体，循环变量就增加1或减去1，直到循环变量不符合终止循环条件表达式。【示例4-6-5】求一个自然数的阶乘。在HTML文档<script>标签内输入以下代码：varn,jieCheng=1;n=prompt("请输入一个自然数","");for(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;for(variinnumbers){ sum=sum+numbers[i];}alert("总分为："+sum);效果：页面中弹出“总分为：352”。【提示】【示例4-6-6】中的代码“numbers=[98,87,73,94]”表示数组，页面中弹出的总分352是该数组中四个元素的和。4.6.4while语句【课堂互动】✈【教师】提问while语句有什么功能？✈【学生】聆听、思考、回答while语句又称前测试循环语句，它在执行循环体前测试条件。若条件成立则进入循环，执while(条件表达式){ 循环体}【示例4-6-7】在HTML文档<script>标签内输入以下代码：varnumbers=[98,87,73,94],sum=0,i=0;while(i<4){ sum=numbers[i]+sum; i++;}alert("总分为："+sum);【教师】组织学生分组上机完成上面的任务，并在各组中挑选一位学生进行演示，演示完成后教师进行点评【学生】聆听、上机操作、演示效果：实现效果与【示例4-6-6】一样，页面中弹出“总分为：352”。4.6.5do…while语句do…while语句又称后测试循环语句，它先执行循环体再测试条件。若条件成立则进入循环，执行循环体；否则，跳出循环，执行do…while语句后面的第一个语句。do…while语句的语法格式如下：do{ 循环体}while(条件表达式)【示例4-6-8】在HTML文档<script>标签内输入以下代码：varnumbers=[98,87,73,94],sum=0,i=0;do{ sum=numbers[i]+sum; i++;}while(i<4)alert("总分为："+sum);【教师】组织学生分组上机完成上面的任务，并在各组中挑选一位学生进行演示，演示完成后教师进行点评【学生】聆听、上机操作、演示效果：实现效果与【示例4-6-6】一样，页面中弹出“总分为：352”。【提示】do…while语句与while语句的不同是do…while语句至少会执行一次循环体，而while语句不一定会执行循环体。【学生】聆听、记录、理解通过教师讲解、课堂互动、演示操作等方式，使学生了解JavaScript常用流程控制语句的使用方法上机操作（5min）【教师】组织学生分组讨论，上机完成以下任务使用相关流程控制语句编写代码，实现若输入的百分制成绩为“98”“70”“85”，则弹出总分。【学生】讨论、上机操作通过上机操作巩固所学知识第二节课问题导入（5min）【教师】提出以下问题JavaScript中的函数是什么？【学生】思考、举手回答通过提问引导学生思考本节课内容传授新知

（25min）4.7函数【教师】讲解JavaScript常用函数的使用方法✈【多媒体】组织学生扫码播放“函数”视频（详见教材），让学生对这部分内容有一个大致地了解【课堂互动】✈【教师】提问JavaScript中的函数可以起到什么作用？✈【学生】聆听、思考、回答在JavaScript中，函数就是实现某特定功能的一组代码，是实现模块化程序设计的基础。使用函数不仅可以提高代码重复使用的频率，还可以让代码更简洁，从而大大提高工作效率。在JavaScript程序中，如果一段具有特定功能的程序代码需要多次使用，4.7.1函数的定义及函数的形参函数的定义其实就是将完成某一特定功能的代码段划分在一起，为其整体命名，并定义好入口参数。在JavaScript中，函数的定义方式比较灵活，每个函数都是作为一个对象被维护和运行的。定义函数的常用方法有以下几种。（1）使用function语句直接定义函数，其语法格式如下：function函数名(参数1,参数2,…){函数体return返回值;}（2）将一匿名函数值赋给一个变量，其语法格式如下：var函数名=function(参数1,参数2,…){函数体return返回值;}（3）将函数“函数名2”的返回值赋给变量“函数名1”，其语法格式如下：var函数名1=function函数名2(参数1,参数2,…){函数体return返回值;}（4）声明“函数名”为一个对象，其语法格式如下：var函数名=newFunction();【提示】通过函数对象的性质，可以极其方便地将函数的值赋给变量，也可以将函数的值作为参数进行传递。定义函数时，指定的参数（如“参数1,参数2,…”）称为形式参数，简称形参。它们可以直接使用，不需要定义。形参可以是一个或多个（多个参数之间用英文逗号“,”隔开），其作用是调用函数时，可以为被调用的函数传递一个或多个值。函数不一定有返回值，即函数定义中不一定含有语句“return返回值;”。4.7.2函数的调用及函数的实参函数定义之后并不会自动执行，要执行函数，就需要在特定的位置调用函数。调用函数就像启动机器一样，机器本身不会自行工作，只有启动机器，机器才能执行相应的操作。调用函数需要创建调用语句，其语法格式如下：函数名(传递给函数的参数1,传递给函数的参数2,…)调用函数时，实际传递给函数的参数（如“传递给函数的参数1,传递给函数的参数2,…”）称为实际参数，简称实参。通常，在定义函数时使用了多少个形参，在调用函数时也必须给出多少个实参，且多个实参之间用英文逗号“,”隔开。【课堂互动】✈【教师】提问实参与形参在函数调用时有什么区别？✈【学生】聆听、思考、回答在程序执行的过程中，函数的调用其实就是将实参传递给函数的形参，然后将函数体运行一次，直到函数体结束。如果有返回值，则将值返回；如果没有返回值，则直接执行调用函数语句之后的语句。【示例4-7-1】定义并调用一个求三个数中最大值的函数。在HTML文档<script>标签内输入以下代码：functionmaxS(a,b,c){ //定义函数maxS varmax; if(a>b){ if(a>c){ max=a; }else{ max=c; } }else{ if(b>c){ max=b; }else{ max=c; } } returnmax;}alert(maxS(12,34,9)); //调用函数maxS【教师】组织学生分组上机完成上面的任务，并在各组中挑选一位学生进行演示，演示完成后教师进行点评，并讲解代码的效果效果：页面中弹出12、34、9三个数中的最大值“34”。【示例4-7-2】定义并调用一个求三个数中最小值的函数。在HTML文档<script>标签内输入以下代码：varminS=function(a,b,c){ //定义函数minS varmin; if(a<b){ if(a<c){ min=a; }else{ min=c; }……（详见教材）效果：页面中弹出12、34、9三个数中的最小值“9”。【示例4-7-3】在HTML文档<script>标签内输入以下代码：varjieCheng=functionjieCheng1(n){ //定义函数jieCheng varjieCheng=1; for(vari=1;i<=n;i++){ jieCheng=jieCheng*i; } returnjieCheng;}alert(jieCheng(6)); //调用函数jieCheng【教师】组织学生分组上机完成上面的任务，并在各组中挑选一位学生进行演示，演示完成后教师进行点评，并讲解代码的效果效果：页面中弹出6的阶乘结果“720”。【示例4-7-4】在HTML文档<script>标签内输入以下代码：varmod=newFunction("n","k","return(n%k)"); //定义函数modalert(mod(12,5)); //调用函数mod效果：页面中弹出12对5求余的结果“2”。【提示】【示例4-7-4】中，“n”和“k”表示函数的参数（形参），“n%k”表示函数体，“return(n%k)”表示函数的返回值。4.7.3变量的作用域在JavaScript中，变量根据作用域的不同可分为全局变量和局部变量。全局变量是定义在函数外部的变量，其作用范围为整个HTML文档；局部变量是定义在函数体内部的变量，其作用范围仅限于函数体内部。【高手点拨】【示例4-7-1】中的变量max、【示例4-7-2】中的变量min、【示例4-7-3】中的变量jieCheng均为局部变量。4.7.4函数的嵌套在JavaScript中，允许函数进行嵌套，也就是说在一个函数的函数体中可以使用其他函数。使用嵌套函数可以在函数体内部定义函数或调用函数。（1）在函数体内部定义函数的语法格式如下：function函数名1(){ function函数名2(){ //函数体内部定义函数名2 代码段 } 代码段}【提示】在函数体内部定义的函数只能作用于函数体自身，对函数体外部没有任何作用。（2）在函数体内部调用函数的语法格式如下：function函数名1(){ 代码段}function函数名2(){ 函数名1(); //函数体内部调用函数名1}4.7.5时间函数在JavaScript中，除了自定义函数，还有内置函数。【课堂互动】✈【教师】提问JavaScript的内置时间函数有什么作用？✈【学生】聆听、思考、回答JavaScript的内置时间函数可以支持时间延迟和时间间隔，详细介绍如下所示。（1）时间延迟函数setTimeout()，表