网页设计与制作（活页式） 课件 情景9-2分支循环结构

网页设计与制作分支循环结构授课教师：乔振华HTMLCSSJavaScriptJavaScript目录CONTENTS12学习目标知识讲解3小结学习目标01学习目标学习目标01掌握分支循环结构学习目标03会使用分支循环编写程序学习目标02了解break和continue的区别02知识点讲解

01JavaScript中有哪些分支结构和循环结构？

02break和continue这两个关键字有什么区别？思考知识点讲解

02不同的分支结构，或者不同的循环结构之间，可以互相转换吗？知识点讲解所谓的分支语句就是条件判断语句，条件判断语句是程序开发过程中经常使用的一种语句形式，可以根据不同的条件来执行不同的代码块，例如根据不同的数字，显示不同的日期。JavaScript中支持以下几种不同形式的条件判断语句：1if语句；2ifelse语句；3ifelseifelse语句；4switchcase语句。1.1JavaScript分支结构（if）（1）if条件语句，基本语法：

if(条件表达式){

//代码块

}语法解析：只有当指定条件为真的时候，才会执行代码块。1.2JavaScript分支结构（if-else）（2）if-else语句，基本语法：if(条件表达式){

//代码块1

}else{

//代码块2

}语法解析：条件为真的时候，执行代码块1；条件为假的时候，执行代码块2.1.3JavaScript分支结构（if-elseif-···else）（3）if-elseif-···else语句基本语法：if(条件1){//代码块1}elseif(条件2){//代码块2…}else{//代码块3}语法解析：1.条件1为真时执行的代码块1；2.条件1为假，而条件2为真时执行的代码块2;3.条件1和条件2同时为假时执行的代码块34.可以有多个elseif语句1.4JavaScript分支结构举例varscore=80; if(score>90){

document.write("优秀"); }elseif(score>70){ document.write("良好"); }elseif(score>60){ document.write("合格"); }else{ document.write("不合格"); }例：成绩大于90输出成绩优秀，大于70输出良好，大于60输出合格，否则输出不合格；代码如下：2.1JavaScript分支结构（switch）witch语句，语法格式如下：switch(表达式){case1:

代码块break;…casen:

代码块break;default:

默认代码块}语法解析：1.每计算一次switch表达式，会把得到的值与每个case的值进行对比，如果匹配就会执行相关的代码。2.break语句则会跳出switch，一旦遇到它，那么它后面的语句都不会执行。3.break语句可以节省一些时间，如果没有break语句则会一直执行到最后。4.default：不存在case匹配时所执行的代码。2.2JavaScript分支结构（switch）举例无break

有break3.1JavaScript循环结构（while）while循环，语法格式如下：while(表达式)

{

//要执行的代码块}语法解析：while循环在每次循环之前，会先对条件表达式进行求值，如果条件表达式的结果为true，则执行{}中的代码，如果条件表达式的结果为false，则退出while循环，执行while循环之后的代码。3.2JavaScript循环结构（while）举例例：计算1+2+3+…+100的和，并输出。代码如下：

vari=1;

varsum=0;

while(i<=100){

sum+=i;

i++; }document.write("1+2+3+…+100的和是："+sum);3.3JavaScript循环结构（do-while）do-while循环，语法格式如下：do{

要执行的代码块}while(表达式)在检查条件是否为真之前，该循环会先执行一次代码块，然后只要表达式为真就会重复循环。3.4JavaScript循环结构（for）for循环，适合在已知循环次数时使用，语法格式如下：for(语句1;语句2;语句3){

要执行的代码块}在for循环种会使用两个关键字控制循环：continue：跳过本次循环，继续下一次循环；break：跳出整个循环，循环结束。其中：语句1在循环（代码块）开始之前执行；

语句2定义运行循环（代码块）的条件；

语句3会在循环（代码块）每次被执行后执行。3.4JavaScript循环结构（for）for(vari=0;i<5;i++){if(i==2){

document.write("当前i==2<br/>");

break;

}

document.write("第"+i+"次循环<br/>");}for(vari=0;i<5;i++){if(i==2){ document.write("当前i==2<br/>"); continue; } document.write("第"+i+"次循环<br/>");}3.5JavaScript循环结构（for…in）for/in语句用于遍历对象的属性，语法格式如下：for(variableinobject){

要执行的代码块}语法解析：其中，variable为一个变量，每次循环时这个变量都会被赋予不同的值；object为要遍历的对象，在每次循环中，会将object对象中的一个属性的键赋值给变量variable，直到对象中的所有属性都遍历完。3.6JavaScript循环结构（for…in）举例例：创建一个学生对象，并输出。代码如下：varstuInfo={

stuName:"LinDa",

stunId:"2022",

age:17,

};

varstu="";

varkey;

for(keyinstuInfo){

stu+=stuInfo[key];

}

document.write(stu);输出为：LinDa20221703小结