《web前端技术》(赵敏)003-0教案 第18课 JavaScript基础之流程控制语句

PAGE1PAGE1PAGE2PAGE2

课题第18课JavaScript基础之流程控制语句课时2课时（90min）教学目标知识技能目标：（1）掌握JavaScript中的选择结构语句和循环结构语句，以及这两种结构语句中涉及的跳转语句（2）独立制作项目——计算银行存款收益素质目标：（1）学习JavaScript中流程控制语句的基础知识，激发了解和探索新技术的欲望（2）积极参与实战演练，提升自身动手能力，强化实践能力教学重难点教学重点：选择结构语句和循环结构语句教学难点：制作项目——计算银行存款收益教学方法问答法、讨论法、讲授法、实践练习法、演示法、翻转课堂教学法、对比分析法教学用具电脑、投影仪、多媒体课件、教材、文旌课堂教学设计第1节课：→→→传授新知（30min）→课堂评价（10min）第2节课：→实战演练（20min）→实训练习（15min）→课堂小结（3min）→作业布置（2min）教学过程主要教学内容及步骤设计意图第一节课课前任务【教师】布置课前任务，把和学生负责人取得联系，让其提醒同学通过文旌课堂APP或其他学习软件，完成课前任务请同学们提前了解JavaScript中的流程控制语句的用法以及分类，常见的语句有哪些。将学生分为8个小队，每个小队负责查找一种语句的相关知识点（老师分好），并准备课件，上课讲解，可自行设计，例如举例子演示，利用微课等方法。【学生】完成课前任务通过课前任务，让学生提前了解JavaScript中的流程控制语句，为课堂上学习相关知识点做准备考勤（2min）【教师】使用文旌课堂APP进行签到【学生】按照老师要求签到培养学生的组织纪律性，掌握学生的出勤情况问题导入（3min）【教师】提出问题在数据结构中我们学习过数据的三种基本结构，有没有同学说下都是什么?在JavaScript中，也有三种流程控制语句，同学们知道是哪些么？那我们在程序设计的时候都要怎么书写和表达？【学生】思考、举手回答【教师】通过学生的回答引入要讲的知识JavaScript提供了一些语句（即流程控制语句）来控制程序的执行流程。这些语句可分为顺序结构语句、选择结构语句和循环结构语句。前面编写的自上而下按顺序执行的程序都是顺序结构语句。下面请同学们详细介绍选择结构语句和循环结构语句，以及这两种结构语句中涉及的跳转语句。通过问题导入的方法，引导学生主动思考，激发学生的学习兴趣传授新知（30min）9.6流程控制语句9.6.1选择结构语句【教师】让讲解if语句和switch语句的两个小队讲解人员上台讲解，队员可进行补充，其他队的同学可以提出疑问。在结束后教师对知识点进行补充，并对小组讲解情况进行评价选择结构语句就是通过对程序中给出的不同条件进行判断，进而决定要执行的语句。常用的选择结构语句有if语句和switch语句两种。if语句if语句是最基本、最常见的选择结构语句，其语法格式如下：if(判断条件){ 代码块1}else{ 代码块2}…（详见教材）根据分支数量的多少，if语句又可以分为单分支、双分支和多分支语句。单分支语句。在单分支if语句中省略了else分句，当满足判断条件时，就向下执行程序，否则不做任何处理。…（详见教材）【课堂拓展】当代码段中只有一条语句时，“{}”可以省略。双分支语句。在双分支语句中有一个else分句，当满足判断条件时就执行某一个语句块，否则执行另一个语句块。…（详见教材）多分支语句。在多分支语句中一个if可以接上多个elseif分句。…（详见教材）switch语句除if语句外，还可以通过switch语句进行流程控制。switch语句是多分支选择结构语句，和if系列语句功能相同。不同的是，switch语句会针对某个表达式的值进行判断，从而决定执行哪一段代码，其代码结构更加清晰简洁。switch语句的语法格式如下：…（详见教材）switch语句主要是通过case进行条件判断，一个case代表一种结果，当满足case条件后，会执行case内的代码块；当前面所有case都没有匹配成功时，会执行default内的代码块。值得注意的是，表达式匹配成功后还会继续匹配下一个case，此时若需要跳出选择结构语句，可以使用break语句。【课堂拓展】switch语句中的default属于可选值，具体应用时可根据实际情况选择是否设置default。当遇到需要对同一个变量进行多次判断的场景时，可以考虑使用switch语句。例如：…（详见教材）【课堂拓展】switch语句在进行条件判断时，使用全等运算符“===”进行判断，因此在判断时不会发生类型转换。例如，num的值为'1'时，case1无法成功匹配，必须写为case'1'。9.6.2循环结构语句【教师】讲解循环结构语句及常见类别循环结构语句用于反复执行一系列语句，直到条件表达式的值为假为止。JavaScript中常用的循环结构语句包括for语句、for-in语句、while语句和do-while语句。【学生】聆听、记录、理解【教师】让讲解for语句、for-in语句、while语句、do-while语句的四个小队讲解人员上台讲解，队员可进行补充，其他队的同学可以提出疑问。在结束后教师对知识点进行补充，并对小组讲解情况进行评价for语句for语句是最常用的循环结构语句，适合循环次数已知的情况，其语法格式如下：for(初始化表达式;循环条件;操作表达式){ 循环体}…（详见教材）【课堂拓展】for循环中的初始化表达式、循环条件及操作表达式都是可选的，如果在for语句中一个表达式都不写，将创建一个无限循环。例如：…（详见教材）for-in语句for-in语句主要用于遍历数组元素或者对象的属性，其语法格式如下：for(变量in对象){ 循环体}使用JavaScript变量前一般需要先进行声明。在ECMAScript6版本以前，使用var关键字声明变量，其语法格式如下：…（详见教材）在ECMAScript6版本之后，增加了let关键字声明变量，其语法格式如下：…（详见教材）【课堂拓展】for循环中的初始化表达式、循环条件及操作表达式都是可选的，如果在for语句中一个表达式都不写，将创建一个无限循环。例如：…（详见教材）声明变量之后，还需要给变量赋值，否则该变量的值默认为undefined。在JavaScript中，使用等号（=）为变量赋值。变量赋值的方式有两种，一种是先声明后赋值，另一种是声明的同时赋值，其语法格式如下：…（详见教材）例如，使用以下代码声明变量并赋值。…（详见教材）while语句while语句根据循环条件来判断是否重复执行一段代码，它的结构比for语句更简单，其语法格式如下：while(循环条件){循环体}…（详见教材）do-while语句do-while语句和while语句类似，最大的不同在于，while语句是先判断循环条件再执行循环体，而do-while是无条件执行一次循环体后再判断循环条件，其语法格式如下：do{循环体}while(循环条件);…（详见教材）9.6.3跳转语句【教师】让讲解break语句和continue语句的四个小队讲解人员上台讲解，队员可进行补充，其他队的同学可以提出疑问。在结束后教师对知识点进行补充，并对小组讲解情况进行评价在实际应用中，循环语句并不是必须等到循环条件不满足时才结束循环。在很多情况下，开发者希望循环能根据某种情况提前退出或者终止某一次循环。要实现这些需求，需要使用跳转语句。跳转语句包括break语句和continue语句。1．break语句break语句的语法格式如下：break;…（详见教材）2．continue语句除break语句外，还有一个跳转语句continue，其语法格式如下：continue;…（详见教材）本节课利用翻转课堂的形式，充分发挥学生的自主能动性，活跃课堂气氛，课下课上相结合，锻炼学生自主学习的能力，课堂互相提问和答疑，便于学生更好的掌握JavaScript中的流程控制语句课堂评价（10min）【教师】对本节课的知识点进行补充，并对本节课的整体效果进行评价，让同学们对其他队的表现进行打分，选出本节课最佳小组，进行奖励通过奖励和激励评价的方式，激发学生的进取心，培养学生做事做优的态度第二节课问题导入（5min）【教师】提出问题在上节课中我们讲解了8种语句，具体应该怎么应用呢？这节课我们开学习一个案例——计算银行存款收益，其中出现一些名词，“定期存款”、“存款年限”、“年利率”，有没有同学解释一下这些名词？那我们计算银行收益，应该怎么计算呢？【学生】思考、举手回答【教师】通过学生的回答引入要讲的知识通过问题导入的方法，引导学生主动思考，激发学生的学习兴趣实战演练（20min）计算银行存款收益【教师】介绍制作计算银行存款收益项目的重点部分和容易出错的地方并演示，要求学生制作该项目，遇到不会的问题可以扫描微课二维码观看视频”计算银行存款收益“（详见教材），可以互相讨论或询问老师小明在中国建设银行、中国工商银行、中国农业银行分别存入10000元定期存款，存款年限分别为4年、5年、6年，年利率分别为3.75%、3.25%、3%。请问当所有定期存款日期结束时，小明在哪家银行获得的收益最高。【课堂拓展】这是一个简单的数学运算，只需要分别循环计算出各个银行到期之后存款的总额度，然后将这3个数值进行比较，即可得到结果。步骤1HBuilderX中导入本书配套素材“素材与案例\第9章\实战演练\9.6”文件夹，然后打开“shouyi.html”文档，在</body>标签前添加<script></script>标签对，然后在该标签对中编写JavaScript代码。步骤2声明3个变量并赋值，分别表示3家银行的定期存款金额，代码如下：……（详见教材）步骤3使用for语句分别计算存款日期结束时3家银行的存款总金额，代码如下：……（详见教材）步骤4使用if多分支语句比较各银行最终的存款总金额，代码如下：……（详见教材）步骤5运行“shouyi.html”文档，页面中弹出显示“中国农业银行收益最高”的弹窗，如图9-11所示。由此可知，当所有定期存款日期结束时，小明在中国农业银行获得的收益最高。……（详见教材）制作项目，观看微课，讨论通过制作项目“计算银行存款收益，”使学生巩固流程控制语句的用法，锻炼动手操作能力实训练习（15min）【教师】先演示下最终效果，要求学生完成课后实训练习部分，可以互相讨论或询问老师（1）一辆卡车装着从果园运来的苹果、梨和橘子三种水果，总计有500斤。其中苹果的重量是梨的2倍，橘子比梨重20斤，请计算出三种水果的重量。（2）在控制台输出一个九九乘法表，显示效果如图所示。【学生】讨论、思考、操作通过实训练习，巩固学生对JavaScript中的流程控制语句的理解与掌握，并锻炼学生的实际操作能力课堂小结（3min）【教师】简要总结本节课的要点本节课主要介绍了JavaScript的流程控制语句。通过本节课的学习，学生应重点掌握以下内容。流程控制语句包括选择结构语句和循环结构语句。其中，常用的选择结构语句有if语句和switch语句；常用的循环结构语句有for语句、for-in语句、while语句和do-while语句。此外，根据实际应用需要，JavaScript中还有两个跳转语句，即break语句和continue语句。【学生】总结回顾知识点总结知识点，使学生牢固掌握JavaScript的选择结构语句和循环结构语句，以及涉及的跳转语句作业布置（2min）【教师】布置课后作业请同学们完成以下程序，并将代码打包至文旌课堂APP（1）大家都知道，男大当婚，女大当嫁。那么女方家长要嫁女儿，当然要提出一定的条件：高：180cm以上;富:1000万以上;帅:500以上;如果这三个条件同时满足，则:‘我一定要嫁给他’如果三个条件有为真的情况，则:‘嫁吧，比上不足，比下有余。’如果三个条件都不满足，则:‘不嫁！’（2）