流程控制(理解)
为什么要学习流程控制
实际项目中, 不可能都是简单的顺序结构(从上往下执行), 会出现不同的条件, 就要根据条件不同做出相应的处理
程序的三种基本结构
顺序结构
- 从上到下执行的代码就是顺序结构
- 程序默认就是从上到下,一行一行的顺序执行的
console.log("哈哈1");
console.log("哈哈2");
console.log("哈哈3");
图片.png
分支结构(重点)
-
分支结构, 也叫选择结构 , 根据不同的情况,执行对应的代码
图片.png
循环结构
-
循环结构：重复做一件事情
图片.png
prompt()方法(掌握)
语法：window.prompt(“弹出的输入框提示信息”,”弹出的输入框默认信息”);
描述：打开网页弹出一个输入框
// 弹出输入框
var str = window.prompt("请输入一个数字","1");
//打印用户输入的值
document.write(str);
脚下留心：
1、prompt()是window对象的方法
2、prompt()有两个参数，参数之间用“,”逗号隔开
3、prompt()方法会返回用户输入的信息
4、参数也可不写
逻辑分支(重点)
找个小姐姐是否愿意做你女朋友,是就约会,不是就自己走!!
if语句(选择分支)
语法:
if(条件){
执行语句
}
1、if是系统关键字得小写
2、小括号必须是英文下面，小括号结果只有两个状态：true或false，如果为真则执行花括号“{}”里面的js代码
例1:判断年龄是否大于18岁
var age = 10;
if (age >= 18) { // bool为true和false
console.log('可以访问该网站')
}
if....else...
语法
if(条件){
执行语句1，为真时执行
}else{
执行语句2，为假时执行
}
1、if 和 else 都是系统关键字
2、当条件为真，则执行第一个花括号内的代码
3、当条件为假，则执行第二个花括号内的代码
例1:输入一个年龄,大于18可以吃鸡,,小于18就回去玩泥巴（注：通过prompt() 方法）
<script>
// 定义一个num变量接受用户输入的数据
var num = prompt("请输入一个数字");
// console.log(num);
// 判断数字是奇数还是偶数
if(num>18){
// 当条件为真，则执行该code
document.write('可以吃鸡了');
}else {
// 当条件为假，则执行该code
document.write('不可以吃鸡');
}
</script>
例2:判断奇数还是偶数
准备: 奇数除以2不能除尽 偶数可以除尽
var a = 3;
console.log(a%2);
var b= 4;
console.log(b%2);
案例
var num = prompt('输入一个数字')
if(num%2==0){ // 偶数的判断
console.log('这是偶数')
}else{
console.log('这是奇数')
}
<font color="red">分号:表示一个语句结束</font>
<font color="red">{}:也表示语句结束,所以我们不要在{}后写 ;</font>
if ....else if...else
if(条件1){
执行语句1
}else if(条件2){
执行语句2
}else if(条件3){
执行语句3
}else{
执行语句4
}*/
1、if、else if、else 都是系统关键字
2、当条件1为真，则执行第一个花括号内的代码
3、当条件2为真，则执行第二个花括号内的代码
4、当所有条件都不为真，则执行else 花括内的代码
例:根据输入的成绩判断出级别
输入一个成绩判断该成绩属于哪个分类
思路
90分及以上，优秀； >= 90
80分及以上，良好 >=80
70分及以上，一般 >= 70
60分及以上，及格 >= 60
60分以下，不及格 >= 0
代码实现
<script>
// 多分支结构
// 场景:三种以上情况的使用
// if(条件1){
// 满足条件1,执行语句1
// }else if(条件2){
// 满足条件2,执行语句2
// }else if(条件3){
// 满足条件3,执行语句3
// }else{
// 不满足以上的条件,则执行这里
// }
// 根据输入的成绩判断级别
var score = prompt('输入成绩');
// 1 判断输入的是否为数字
// console.log(isNaN(score)) // 非数字则为true
if(isNaN(score)){
document.write('输入的成绩有误')
}else if(score>100){ // 判断成绩是否大于100
document.write('你是来搞事情的')
}else if(score>=90){ // 判断成绩是否大于等于90
document.write('你是优秀的孩子,奖励越南新娘一个')
}else if(score>=80){
document.write('成绩良好了,泰国人妖')
}else if(score>70){
document.write('成绩一般,给你乔碧萝')
}else if(score>60){
document.write('及格万岁,给你辣条');
}else{
document.write('不及格啦,给你一群羊');
}
</script>
回顾一下:
isNaN(x) 函数用于检查其参数是否是非数字值。
如果 x 是特殊的非数字值 NaN（或者能被转换为这样的值），返回的值就是 true。如果 x 是其他值,则返回 false
工作使用,集合逻辑运算符
判断年龄大于等于 14 ,或者是个女孩,,就可以报舞蹈班了
var age = 10;
var sex = '女';
if (age >= 14 || sex == '女') {
console.log('可以报舞蹈班');
} else {
console.log('不可以报舞蹈班');
}
判断年龄大于等于14,并且 是个男孩就可以玩吃鸡了
var age = 10;
var sex = '男';
if ( age >= 14 && sex == '男') {
console.log('可以吃鸡');
}else {
console.log('不可以吃鸡');
}
练习
1.判断一个整数属于哪个范围：大于0；小于0；等于0
var num = prompt();
if(num>0){
document.write('输入的数大于0');
}else if(num<0){
document.write('输入的数小于0');
}else{
document.write('输入的数等于0');
}
2.判断一个整数是偶数还是奇数，并输出判断结果
第三节
问题:
if 选择结构能够很好的实现条件判断处理，但也并非完美无瑕。有的时候我们需要处理的条件并没有那么复杂，而仅仅是一些等值判定。这样的时候，我们拥有另一种处理方式可供选择：switch选择结构 。
var userInput = prompt();
if (userInput == 0 ){
userFlag = '石头';
} else if ( userInput == 1 ){
userFlag = '剪刀';
} else {
userFlag = '布';
}
switch选择结构(重点)
语法
switch( 判断条件 ){
case expr1:
// 处理代码块
break;
case expr2:
// 处理代码块
break;
default:
// 处理代码块
}
1、switch、case、default、break都是系统关键字
2、switch中没加break会把所有的case判断一遍
3、switc是不可以写判断一定范围内的数据（前提：当exp不为true）
根据输入的成绩,判断出属于A,B,C,D那个级别
var sum=parseInt(prompt("请输入成绩"));
var str="";
if(isNaN(sum) || sum>100 || sum<0){
str="输入错误";
}else{
switch (parseInt(sum/10)){
case 10:
str="S";
break;
case 9:
str="A";
break;
case 8:
str="B";
break;
case 7:
str="C";
break;
case 6:
str="D";
break;
default:
str="E";
}
}
console.log(str);
break的使用
如果:case后面不使用break终止代码,他就会继续往下走.最终输出错误的结果
<script>
var str = prompt('请输入ABCD中的任意一个');
switch(str){
case 'A':
console.log('你输入的是A');
break;
case 'B':
console.log('你输入的是B');
break;
case 'C':
console.log('你输入的是C');
break;
case 'D':
console.log('你输入的是A');
break;
}
// 总结:break是防止穿越的,匹配到一个case则,停止向下执行
</script>
脚下留心
使用switch就一定要用break,否则就会出现穿透效果
switch和if判断的区别
判断的用途
if常用语判断一定范围内的数据 a>10 b<5
switch常用语判断固定的数据
例:比如判断输入的是男是女var sex = ‘男’;（switch）
switch(sex){
case ‘男’:
document.write(‘性别男’);
break;
case ‘女’:
document.write(‘性别女’);
break;
default:
document.write(‘人妖’);
}
脚下留心：如果数据是一个固定的值，用switch效率会比if判断更高
判断类型区别
if 判断是看运算符号，两个等于则判断值是否相等，三个等于则判断是否全等
switch 默认判断全等
例1: var str=1;使用if和switch的判断区别
// 判断类型的比较
var num = '2';
// if(num==2){
// alert('男儿何不带吴钩');
// }
// // 值和类型都要相等
// if(num===2){
// alert('收取关山五十州');
// }
// switch进行匹配的时候,是完全匹配,相当于 '==='
switch(num){
case 2:
alert('有意栽花花不发');
break;
case '2':
alert('无心插柳柳成荫');
break;
default:
alert('自古多情空余恨,此恨绵绵无绝期');
}
三元运算符(重点)
语法1 条件 <font color="red">?</font> 值1 <font color="red" >:</font> 值2
语法2 条件 ? 表达式1 : 表达式2
- 三元运算符会得到一个结果，结果根据
条件来确定。 - 如果
条件的值为true，会返回表达式1的值/值1 - 如果
条件的值为false，会返回表达式2的值/值2
例1:
// 输出两个数的最大值
var a=3;
var b=5;
// if(a>b){
// document.write(a);
// }else{
// document.write(b);
// }
// 三元运算符
var c = '';
var c = a>b ? a : b;
document.write(c);
例2:求两个值的最大值
var max = n1 > n2 ? n1 : n2;
例3:求三个数的最小值
var n1 = 34;
var n2 = 12;
var n3 = 3;
var min = n1 < n2 ? n1 : n2;
min = min < n3 ? min : n3;
console.log(min);
场景使用
//练习1：土豪的儿子, 输入ABCDE
//如果考了A： 买法拉利
//如果考了B： 买宝马
//如果考了C： 买三轮
//如果考了D： 买摩拜自行车
//如果考了E： 断绝父子关系
//如果是其他值，提示代码有bug
//练习2： 买手机，输入自己的工资
//如果超过30000: 买苹果手机
//如果10000-30000： 买vivo手机
//如果5000-10000 ： 买魅族手机
//如果低于5000 ： 还买个锤子
//练习3： 输入自己的每月薪资
//如果超过15000 : 高富帅
//如果不超过 ：穷矮丑
应用与练习
1 大于6岁且为男的就可以吃鸡
2.案例：输入年份，计算某一年是否为闰年
提示: 能被4整除且不能被100整除，或者能被400整除
<script>
// 1 弹出输入框
var year = prompt('请输入一个年份');
if(((year%4==0) && (year%100!=0)) || (year%400==0) ){
document.write('这是闰年');
}else{
document.write('这是平年');
}
</script>
3.案例：输入数字，显示星期几
提示: 假设1号就是周一
// 2 根据日期判断星期几
var date = prompt('请输入一个日期');
//输入的时间,除以7取余
var num = date%7;
//console.log(num);
var str;
switch(num){
case 0:
str = '今天是周日';
break;
case 1:
str = '今天是周一';
break;
case 2:
str = '今天是周二';
break;
case 3:
str = '今天是周三';
break;
case 4:
str = '今天是周四';
break;
case 5:
str = '今天是周五';
break;
case 6:
str = '今天是周六';
break;
}
console.log(str);
网友评论