一、流程控制语句
1、程序都是自上向下的顺序执行的,
通过流程控制语句可以改变程序执行的顺序,或者反复的执行某一段的程序。
2、 分类:
- 条件判断语句
- 条件分支语句
- 循环语句
二、分支语句
1、 条件判断语句(if)
条件判断语句也称为if语句
语法一:
if(条件表达式){
语句...
}
流程图:
执行流程:
if语句执行时,会先对条件表达式进行求值判断,
如果值为true,则执行if后的语句
如果值为false,则不执行
语法二:
if(条件表达式){
语句...
}else{
语句...
}
执行流程:
if…else语句执行时,会对条件表达式进行求值判断,
如果值为true,则执行if后的语句
如果值为false,则执行else后的语句
流程图:
代码示例:
<script>
/*var age=35;
if(age<18){
alert("您还没有成年");
}*/
/*
* prompt()可以弹出一个提示框,该提示框中会带有一个文本框,
* 用户可以在文本框中输入一段内容,该函数需要一个字符串作为参数,
* 该字符串将会作为提示框的提示文字
*
* 用户输入的内容将会作为函数的返回值返回,可以定义一个变量来接收该内容
*/
var age=prompt("请输入您的年龄");
/*if(age<18){
alert("您还没有成年");
}else{
alert("您已成年,请提供您的身份证号");
}*/
if(age<18){
alert("您还没有成年");
}else if(age>=18 && age<=59){ // 18岁到59岁之间
alert("您可以进入");
}else{
alert("您已超出年龄限制");
}
</script>
语法三:
if(条件表达式){
语句...
}else if(条件表达式){
语句...
}else if(条件表达式){
语句...
}else if(条件表达式){
语句...
}else{
语句...
}
执行流程
if…else if…else语句执行时,会自上而下对条件表达式进行求值判断,
如果判断结果为true,则执行当前if后的语句,执行完成后语句结束。
如果判断结果为false,则继续向下判断,直到找到为true的为止。
如果所有的条件表达式都是false,则执行else后的语句
流程图:
代码示例:
<script>
var password=prompt("请设置您的密码");
// 判断密码的长度,如果不是6位,否则
if(password.length!=6){
alert("请输入6位的数字密码");
}else{
// 如果密码是非数字,否则是数字
if(isNaN(password)){
alert("密码必须要是数字");
}else{
alert("密码设置正确");
}
}
</script>
2、条件分支语句(switch)
switch语句
语法:
switch(条件表达式){
case 表达式:
语句...
break;
case 表达式:
语句...
break;
case 表达式:
语句...
break;
default:
语句...
break;
}
执行流程:
switch…case…语句在执行时,会依次将case后的表达式的值和switch后的表达式的值进行全等比较,如果比较结果为false,则继续向下比较。如果比较结果为true,则从当前case处开始向下执行代码。
如果所有的case判断结果都为false,则从default处开始执行代码。
示例代码1:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>switch输出星期</title>
</head>
<body>
<script>
var week=prompt("请输入数字");
console.log(typeof week)
var weekstr="";
// 多条件的判断 switch
switch(week){
case '0':
weekstr="日";
break; // 退出
case '1':
weekstr="一";
break;
case '2':
weekstr="二";
break;
case '3':
weekstr="三";
break;
case '4':
weekstr="四";
break;
case '5':
weekstr="五";
break;
default:
weekstr="六";
}
document.write("今天是星期"+weekstr);
</script>
</body>
</html>
示例代码2:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>判断成绩</title>
</head>
<body>
<script>
var score=prompt("请输入您的成绩");
var level="";
// 成绩的类型:如果成绩是非数字
if(isNaN(score)){
alert("成绩必须是数字");
}else{
if(score<0 || score>100){
alert("成绩输入有误!");
}else{
switch(parseInt(score/10)){
case 0:
case 1:
case 2:
case 3:
case 4:
case 5:
level="不及格";
break;
case 6:
level="及格";
break;
case 7:
level="一般";
break;
case 8:
level="良";
break;
case 9:
level="优";
break;
default:
level="满分";
}
alert("您的成绩是"+level);
}
}
</script>
</body>
</html>
三、循环语句
通过循环语句可以反复执行某些语句多次
1、while循环
语法:
while(条件表达式){
语句...
}
执行流程:
while语句在执行时,会先对条件表达式进行求值判断,
如果判断结果为false,则终止循环
如果判断结果为true,则执行循环体
循环体执行完毕,继续对条件表达式进行求值判断,依此类推
代码示例:
<script type="text/javascript">
/*
* 循环语句:
* 通过循环语句可以反复的执行一段代码多次
*
* while循环
* - 语法:
* while(条件表达式){
* 语句...
* }
*
* - while语句在执行时,
* 先对条件表达式进行求值判断,
* 如果值为true,则执行循环体,
* 循环体执行完毕以后,继续对表达式进行判断
* 如果为true,则继续执行循环体,以此类推
* 如果值为false,则终止循环
*
*/
var n = 1;
var i = 11;
while(i <= 10){
//3.定义一个更新表达式,每次更新初始化变量
document.write(i++ +"<br />")
}
</script>
2、do…while循环
语法:
do{
语句...
}while(条件表达式)
执行流程
do…while在执行时,会先执行do后的循环体,然后在对条件表达式进行判断,
如果判断判断结果为false,则终止循环。
如果判断结果为true,则继续执行循环体,依此类推
do…while和while的区别:
while:先判断后执行
do...while: 先执行后判断
do...while可以确保循环体至少执行一次。
代码示例:
<script type="text/javascript">
/*
* 循环语句:
* 通过循环语句可以反复的执行一段代码多次
*
* do...while循环
* - 语法:
* do{
* 语句...
* }while(条件表达式)
*
* - 执行流程:
* do...while语句在执行时,会先执行循环体,
* 循环体执行完毕以后,在对while后的条件表达式进行判断,
* 如果结果为true,则继续执行循环体,执行完毕继续判断以此类推
* 如果结果为false,则终止循环
*
* 实际上这两个语句功能类似,不同的是while是先判断后执行,
* 而do...while会先执行后判断,
* do...while可以保证循环体至少执行一次,
* 而while不能
*/
var n = 1;
var i = 11;
do{
document.write(i++ +"<br />");
}while(i <= 10);
/*while(true){
alert(1);
}*/
</script>
3、 for循环
语法:
for(①初始化表达式 ; ②条件表达式 ; ④更新表达式){
③语句...
}
执行流程:
首先执行①初始化表达式,初始化一个变量,
然后对②条件表达式进行求值判断,如果为false则终止循环
如果判断结果为true,则执行③循环体
循环体执行完毕,执行④更新表达式,对变量进行更新。
更新表达式执行完毕重复②
代码示例:
for循环:
<script type="text/javascript">
/*
* for语句,也是一个循环语句,也称为for循环
* 在for循环中,为我们提供了专门的位置用来放三个表达式:
* 1.初始化表达式
* 2.条件表达式
* 3.更新表达式
*
* for循环的语法:
* for(①初始化表达式;②条件表达式;④更新表达式){
* ③语句...
* }
*
* for循环的执行流程:
* ①执行初始化表达式,初始化变量(初始化表达式只会执行一次)
* ②执行条件表达式,判断是否执行循环。
* 如果为true,则执行循环③
* 如果为false,终止循环
* ④执行更新表达式,更新表达式执行完毕继续重复②
*/
for(var i = 0 ; i < 10 ; i++ ){
alert(i);
}
/*
* for循环中的三个部分都可以省略,也可以写在外部
* 如果在for循环中不写任何的表达式,只写两个;
* 此时循环是一个死循环会一直执行下去,慎用
* for(;;){
alert("hello");
}
*/
</script>
for嵌套循环:
<script type="text/javascript">
/*
通过程序,在页面中输出如下的图形:
***** 1 j<5(5-0) i=0
**** 2 j<4(5-1) i=1
*** 3 j<3(5-2) i=2
** 4 j<2(5-3) i=3
* 5 j<1(5-4) i=4
*/
//通过一个for循环来输出图形
//这个for循环执行几次,图形的高度就是多少
//它可以用来控制图形的高度
for(var i=0 ; i<5 ; i++){
/*
* 在循环的内部再创建一个循环,用来控制图形的宽度
* 目前我们的外部的for循环执行1次,内部的就会执行5次
* 内层循环可以来决定图形的宽度,执行几次图形的宽度就是多少
*/
/*for(var j=0 ; j<i+1 ; j++){
document.write("* ");
}*/
for(var j=0 ; j<5-i ; j++){
document.write("* ");
}
//输出一个换行
document.write("<br />");
}
</script>
4、死循环-禁用
while(true){
}
for(;;){
}
五、跳出循环控制——break和continue
1、break
break关键字可以用来退出switch或循环语句,不能在if语句中使用break和continue。
break关键字,会立即终止离他最近的那个循环语句
代码示例:
<script type="text/javascript">
/*
* break关键字可以用来退出switch或循环语句
* 不能在if语句中使用break和continue
* break关键字,会立即终止离他最近的那个循环语句
*/
/*for(var i=0 ; i<5 ; i++){
console.log(i);
if(i == 2){
break;
}
}*/
/*for(var i=0 ; i<5 ; i++){
console.log("@外层循环"+i)
for(var j=0 ; j<5; j++){
break;
console.log("内层循环:"+j);
}
}*/
/*
* 可以为循环语句创建一个label,来标识当前的循环
* label:循环语句
* 使用break语句时,可以在break后跟着一个label,
* 这样break将会结束指定的循环,而不是最近的
*/
/*outer:
for(var i=0 ; i<5 ; i++){
console.log("@外层循环"+i)
for(var j=0 ; j<5; j++){
break outer;
console.log("内层循环:"+j);
}
}*/
</script>
2、continue
continue关键字可以用来跳过当次循环
同样continue也是默认只会对离他最近的循环循环起作用
代码示例:
<script type="text/javascript">
/*
* continue关键字可以用来跳过当次循环
* 同样continue也是默认只会对离他最近的循环循环起作用
*/
/*for(var i=0 ; i<5 ; i++){
if(i==2){
continue;
}
console.log(i);
}*/
outer:
for(var i=0 ; i<5 ; i++){
for(var j=0 ; j<5 ; j++){
continue outer;
console.log("-->"+j);
}
console.log("@--->"+i);
}
</script>