JS基础（2）
一、流程控制
控制代码的执行顺序
流程控制语句：
1. 顺序结构：按照代码书写顺序，代码自上至下一行一行执行
2. 选择结构（分支结构）
3. 循环结构
（一）选择结构：
根据条件判断的结果选择执行某一段代码执行
1、if 条件语句
1、if语句
if(判断条件){
条件为真时执行的代码段，
条件为假时，会跳过
}
注意：
1. if()后面的{} 可以省略，省略之后，认为if()后面的第一条语句是条件成立时待执行的语句
2. 判断条件必须是布尔类型的结果
3. 任何非0值都为真，0为假，以下条件的结果都为假 ：
if(0){}
if(0.0){}
if(""){}
if(NaN){}
if(undefined){}
if(null){}
<html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script type="text/javascript"> var a = 101; if(a > 100){ console.log("a>100"); } console.log("正常语句"); if(true){ console.log("hello"); console.log("world"); } if(false) console.log("省略{}"); console.log("省略之后第二行语句"); if(NaN){ alert("非零值为真"); } </script> </head> <body> </body> </html>
2、if-else语句
语法：if(条件){
条件为真时执行
}else {
条件为假时执行
}
et:
var age = prompt("请输入年龄");
if(age >= 18){
console.log("成年人可以进网吧");
} else {
console.log("未成年人禁止入内");
}
3、if-else if语句
多重分支结构
语法：
if(条件1){
条件1成立时执行
} else if(条件2){
条件1为假，条件2成立时执行
} else if(条件3){
条件2为假，条件3为真时执行
}
...
}else{
条件不满足时执行
}
练习：
1、成绩等级判定
<html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script type="text/javascript"> //成绩判定 var score = prompt("请输入成绩"); if(score >= 90){ console.log("A"); }else if(score >= 80){ console.log("B"); }else if(score >= 60){ console.log("C"); }else{ console.log("D"); } </script> </head> <body> </body> </html>
2、日期计算器
1. 接收用户输入 年 月 日，判断用户输入的日期是当年的第几天
et: 用户输入 2018-1-15
输出 当天是2018年的第15天
用户输入 2018-10-15
输出 当天是2018年的第31 + 15天
实现：
1. 将当前月之前的整月天数累加
2. 加上当前月的天数
3. 判断当前年份是否是闰年，若当年是闰年，并且用户输入的月份>2,总天数再+1
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script type="text/javascript"> //1.接收用户输入，转换数据类型 var year = Number(prompt("请输入年份")); var month = Number(prompt("请输入月份")); var day = Number(prompt("请输入日期")); //总天数 var dayNum = 0; //闰年判断 var isRun = year % 400 == 0 || (year % 100 != 0 && year % 4 == 0); //2. 月份判断实现天数累加 if(month == 1){ dayNum = day; }else if(month == 2){ dayNum = 31 + day; }else if(month == 3){ dayNum = 31 + 28 + day; }else if(month == 4){ dayNum = 31 + 28 + 31 + day; } //3. 根据是否为闰年，计算最终天数 if(isRun && month > 2){ dayNum++; } console.log(year+"年"+month+"月"+day+"日"+"是当年的第"+dayNum+"天"); </script> </head> <body> </body> </html>
2、switch 语句
在进行值判断时用的比较多
1）语法：
switch(值){
case 值1 :
值匹配恒等时，执行的语句
break;
case 值2 :
值匹配恒等时，执行的语句
break;
...
default :
待执行的语句
}
2）注意 ：
1. switch一般用于值得匹配，()中表示的是值
2. case 可以使用多个，每个case对应一种情况
3. case 后面直接写要对应匹配的值
et:
var a = 10;
swicth(a){
case 1 :
console.log("a=1");
break;
case 12 :
console.log("a=10");
break;
default :
console.log("查询不到");
}
4. 如果case给出的值匹配成功，执行当前case :后面的语句
5. break 用于跳出switch语句匹配，不再向下执行匹配，可以省略
6. default 表示所有的case都匹配失败之后默认执行的语句
3）其他情况：
1. default 关键字一般写在switch的末尾，匹配失败之后最终执行的操作，可以省略
2. break 表示跳出switch语句，可以省略，如果省略break，会从当前匹配到的case开始向后依次执行所有的语句。
3. case 关键字，可以共用代码语句,注意配合break
et：
case 1：
case 2:
case 3:
console.log();
break;
练习：
1、每周食谱
用户输入星期几 （1-7）
判断当前日期对应的食谱
星期一 ：今天是星期一，吃红烧肉
...
星期天 ：今天是星期天，吃红烧鱼
switch_食谱2、改版日期计算器，计算当日是当年的第几天
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script type="text/javascript"> var month = Number(prompt("请输入月份")); var day = 0; //计算当前月之前的总天数 //month = 12 // 1 3 5 7 8 10 : 31 //4 6 9 11: 30 //2 : 28 switch(month-1){ case 11: day += 30; //day = day + 31 case 10 : day += 31; case 9: day += 30; //day = day + 31 case 8 : day += 31; case 7: day += 31; //day = day + 31 case 6 : day += 30; case 5: day += 31; //day = day + 31 case 4 : day += 30; case 3 : day += 31; case 2 : day += 28; case 1 : day += 31; } console.log(day); //根据用户输入的月份，告知用户当前月有多少天 switch (month){ case 1 : case 3 : case 5 : case 7 : case 8 : case 10 : case 12 : console.log("本月有31天"); break; case 4 : case 6 : case 9 : case 11 : console.log("本月有30天"); break; case 2 : console.log("本月有28天"); break; } </script> </head> <body> </body> </html>
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script type="text/javascript"> //1.接收用户输入，转换数据类型 var year = Number(prompt("请输入年份")); var month = Number(prompt("请输入月份")); var day = Number(prompt("请输入日期")); //总天数 var dayNum = 0; //闰年判断 var isRun = year % 400 == 0 || (year % 100 != 0 && year % 4 == 0); //2. 月份累加 switch (month - 1){ case 11: dayNum += 30; case 10: dayNum += 31; case 9: dayNum += 30; case 8: dayNum += 31; case 7: dayNum += 31; case 6: dayNum += 30; case 5: dayNum += 31; case 4: dayNum += 30; case 3: dayNum += 31; case 2: dayNum += 28; if(isRun){ dayNum += 1; } case 1: dayNum += 31; } //3.累加当前月的天数 dayNum += day; console.log(year+"年"+month+"月"+day+"日"+"是当年的第"+dayNum+"天"); </script> </head> <body> </body> </html>
（二）循环结构：
重复执行某一段代码
1、循环语句的三要素
1. 循环变量
2. 循环条件
3. 循环体
2、语句
1、while 循环
2、do-while循环
3、for循环
1）while 循环
1、语法：
while(循环条件){
条件成立时，执行循环体
}
2、执行流程 ：
1. 定义循环变量
2. 判断循环条件
3. 条件成立，执行循环体
4. 更新循环变量 （重点）
5. 重复步骤 2 - 3 - 4,直到条件不成立,跳出循环
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script type="text/javascript"> //在控制台中输出一百次“编程使我快乐” var i = 1; while(i < 101){ console.log("编程使我快乐"); //更新循环变量 i++; } </script> </head> <body> </body> </html>
练习 ：
1. 输出 1-100之间的数字
2. 计算 1-100之间所有数字的和
3. 输出 1-100之间所有3的倍数
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script type="text/javascript"> //1. 输出1-100的数字 //2. 求和 var i = 1; var num = 0; while(i < 101){ console.log(i); num += i; //求和 i ++; } console.log("1-100之间所有数字的和为",num); var j = 1; while(j < 101){ if(j % 3 == 0){ console.log(j); } j ++; } </script> </head> <body> </body> </html>
2）do-while循环
1、语法：do{
//循环体
}while(循环条件);
2、执行流程 ：
1. 定义循环变量
2. 执行do操作，循环体
3. 循环体中更新循环变量
4. 判断循环条件，决定是否继续执行循环体
3、特点：
do-while循环不管条件是否成立，都至少执行一次循环体
4、while 与 do-while区别：
while循环先判断循环条件，为真才执行循环体；
do-while循环不管条件是否成立，先执行循环体，后判断循环条件。即使循环条件不成立，也会执行一遍循环体。
et:
var i = 101;
do{
console.log(i);
//更新循环变量
i ++;
}while(i < 101);
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script type="text/javascript"> var i = 101; while(i < 101){ console.log(i); i++; } do{ console.log(i); i ++; }while(i < 101); </script> </head> <body> </body> </html>
练习：
1、循环接收用户输入，并在控制台中输出；
直到用户输入“exit”,结束循环
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script type="text/javascript"> //1. 循环接收用户输入，并输出 do{ var input = prompt("请输入内容，exit表示退出"); if(input != "exit"){ console.log(input); } }while(input != "exit"); </script> </head> <body> </body> </html>
2、使用while循环改版日期计算器
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script type="text/javascript"> //1.接收用户输入，转换数据类型 var year = Number(prompt("请输入年份")); var month = Number(prompt("请输入月份")); var day = Number(prompt("请输入日期")); //总天数 var dayNum = 0; //闰年判断 var isRun = year % 400 == 0 || (year % 100 != 0 && year % 4 == 0); //2.使用循环实现月份累加 var i = 1; //month = 5 累加前4个月 while(i < month){ switch(i){ case 1 : case 3 : case 5 : case 7 : case 8 : case 10 : dayNum += 31; break; case 4 : case 6 : case 9 : case 11 : dayNum += 30; break; case 2 : dayNum += 28; if(isRun){ dayNum++; } break; } i++; } //累加当前月的天数 dayNum += day; console.log(year+"年"+month+"月"+day+"日"+"是当年的第"+dayNum+"天"); </script> </head> <body> </body> </html>
3）for循环
1、语法：
for(定义循环变量;循环条件;更新循环变量;){
//循环体
}
et:
for(var i = 1;i < 101; i ++){
console.log(i);
}
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script type="text/javascript"> // 跑十圈 for(var i = 1; i < 11;i ++){ if(i == 5){ /* console.log("中场休息，歇一圈"); continue; */ console.log("跑不动了"); break; } console.log("第"+i+"圈"); } </script> </head> <body> </body> </html>
2、for循环与while循环区别：
1、循环的执行流程相同
2、for 循环常用于确定循环次数的场合
while循环常用于不确定循环次数的场合
4）循环控制
1、continue 表示跳出本次循环，开始下一次循环
2、break 表示跳出循环，结束整个循环，并且循环体中break后面的语句都不执行
练习 ：
1. 判断素数（质数）
只能被1和自身整除的数是质数
接收用户输入的数字，判断是否为素数
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script type="text/javascript"> //判断素数 var num = Number(prompt("请输入数字")); var isSu = true; // 2 至 num-1 for(var i = 2;i < num; i ++){ if(num % i == 0){ isSu = false; break; //console.log(num+"不是素数"); } } if(isSu){ console.log("是素数"); }else{ console.log(num+"不是素数"); } </script> </head> <body> </body> </html>
2. 接收用户输入年月日，判断当日是星期几
参考 ：已知 1990年1月1日是星期一
解决思路 ：
1. 接收年月日，转换为Number
2. 计算当前日期与1990-01-01之间间隔多少天
年累加 1990 -> year-1
当前年中月份的累加
当前月的天数
3. 总天数 % 7（0 - 6 代表周日 - 周六）
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script type="text/javascript"> //1.接收用户输入，转换数据类型 var year = Number(prompt("请输入年份")); var month = Number(prompt("请输入月份")); var day = Number(prompt("请输入日期")); //总天数 var dayNum = 0; //2. 相隔的年份对应天数相加 for(var i = 1990; i < year; i ++){ dayNum += 365; //闰年判断 if(i % 400 == 0 || (i % 100 != 0 && i % 4 == 0)) dayNum ++; } //3. 当前年中经过的天数 for(var j = 1; j < month; j ++){ switch(j){ case 1 : case 3 : case 5 : case 7 : case 8 : case 10 : dayNum += 31; break; case 4 : case 6 : case 9 : case 11 : dayNum += 30; break; case 2 : dayNum += 28; if(year % 400 == 0 || (year % 100 != 0 && year % 4 == 0)) dayNum ++; } } dayNum += day; //余数范围 0 - 6 周日 - 周六 var weekDay = dayNum % 7; var show = ""; switch(weekDay){ case 0 : show = "日"; break; case 1 : show = "一"; break; case 2 : show = "二"; break; case 3 : show = "三"; break; case 4 : show = "四"; break; case 5 : show = "五"; break; case 6 : show = "六"; break; } console.log(year+"年"+month+"月"+day+"日"+"是星期"+show); </script> </head> <body> </body> </html>
3、循环的嵌套
可以再循环中再次嵌套其他循环
语法：for(var i = 0; i < 10; i ++){
for(var j = 0; j < 10 ; j ++){ ....
}
}
练习：
1. 在控制台中输出以下图形
*
**
***
****
*****
2. 在控制台中输出图形
*
***
*****
*******
*********
3. 控制台输出99乘法表
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script type="text/javascript"> //练习1 for(var i = 1; i < 6;i ++){ //行数 //空字符串用来拼接每行的星星符号 var show = ""; for(var j = 1; j <= i;j ++){ //星星数 = 行数 //内层循环，确定星星个数，以字符串形式保存到变量show中 show += '*' } //按行输出 console.log(show); } console.log("---------------------"); //练习2 for(var i = 1; i < 6 ; i ++){ //行数 var show = ""; //输出空格 第五行 i = 5 for(var j = 1; j <= 5 - i;j ++){ show += " "; } //星星数 for(var k = 1; k <= 2 * i - 1;k ++){ show += "*"; } console.log(show); } console.log("---------------------"); //练习3 for(var i = 1; i <= 9; i ++){ //第一个操作数 var show = ""; for(var j = 1; j <= i; j ++){ show += i + '*' + j + '=' + i * j +"\t"; } console.log(show); } </script> </head> <body> </body> </html>
posted on 2018-10-18 21:22 破天荒的谎言、谈敷衍 阅读(232) 评论(0) 收藏 举报
浙公网安备 33010602011771号