目录
1.运算符
2.流程控制语句
1.运算符
- 数字运算符
- 关系运算符(比较运算符)
> >= < <== == !=
=== 恒等 !== 不恒等
注意:关系运算的结果为布尔类型
- 数字与数字比较
1. var r = 10 > 5; // r = true
- 数字与字符串进行比较 首先会自动将字符串转换为数字再进行比较,如果转换成功,按照数字之间的比较进行运算,如果转换失败,会变成数字与NaN之间的转换,结果永远是False et:
1. ‘18’ > 5; //true
'18a' > 5; //false
'你好' > 5; //false
- 字符串之间的比较,进行每位字符Unicode码的比较,当前位如果相同,就后移至下一位进行比较,当前位如果不同,直接出结果 et:
1. '10' > '5'; // false (字符串比较先比较1和5的unicode)
'ab' > 'ac'; //false
'张三丰' > '张无忌'; //false
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<script type="text/javascript">
var r = "10" > "5";
console.log(r);
var r2 = "张三丰" > "张无忌";
console.log(r2);
</script>
</head>
<body>
</body>
</html>
- == === / != !== 相等:==用于判断两个值是否相等,在比较时,会自动转换数据类型,只要值相等,结果就为true et:
'10' == 10; //true
恒等:=== 用于判断两个变量的数据类型和值是否完全相等,不会进行数据类型转换,只有当操作数的数据类型保持一致,值相等,才为true
et:
'10' === 10; //false
'10' === '10' //true
不等:!= 在两端值不相等的情况下,返回为true
不恒等:!== 两个操作数中,数据类型与值只要有一个不相等,就返回true,否则是false
et:
'10' != 10; //false
'10' != '10'; //false
'10' !== 10; //true
'10' !== '10'; //false
- 逻辑运算符
进行多项比较,并将结果组合为单一的布尔值
&&:逻辑与 等同于 python and,左右为表达式,只有两个表达式结果都为真,逻辑与的结果才为真
||:逻辑或 等同于 python or ,只要一个条件为真,结果就为真
!:逻辑非 等同于 python not ,对现有条件的结果进行取反操作 1. 条件1 && 条件2
逻辑与 | 条件1 | 条件2 | 结果 |
取值 | true | true | true |
| true | false | false |
| false | true | false |
| false | false | false |
2. 条件1 || 条件2
逻辑或 | 条件1 | 条件2 | 结果 |
取值 | true | true | true |
| true | false | true |
| false | true | true |
| false | false | false |
3. !条件
直接取反
非真即假, 非假即真
练习:
- 用户输入年份
var r = prompt('');
判断是否为闰年,并且在控制台输出结果
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<script type="text/javascript">
// 判断闰年
var input = prompt("请输入年份");
var res = input % 4 == 0 && input % 100 != 0 || input % 400 == 0;
console.log(input + "是闰年吗?" + res);
</script>
</head>
<body>
</body>
</html>
- 用户输入一个字符
判断
是数字吗?结果
是中文吗?结果
是英文吗?结果
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<script type="text/javascript">
var input = prompt("请输入一个字符");
var isNum = input >= 0 && input <= 9;
console.log(input + "是数字吗?" + isNum);
var isCHN = input >= "\u4e00" && input <= "\u9fa5";
console.log(input + "是中文吗?" + isCHN);
var isCAPS = input >= 'A' && input <= 'Z';
var isSmal = input >= 'a' && input <= 'z';
var isEng = isCAPS || isSmal;
console.log(input+"是英文吗?"+isEng);
</script>
</head>
<body>
</body>
</html>
- 位运算符
程序中所有的数据在计算机中都是以二进制存储的, 位运算,就是对二进制位进行操作
- 按位与:&
将整数转换为二进制形式,每一位都进行与操作(相同为1,不同则0)
3 & 5 ->1
011 & 101 ->001
注意:任何数字与1进行位与操作,结果为1时,表明操作数为奇数,结果为0,操作数为偶数,所以可以用来判断数字的奇偶
et:
3 & 1 -> 011 & 001 -> 001
2 & 1 -> 010 & 001 -> 000 - 按位或:| (一一则1)
3 | 5 -> 011 | 101 -> 111 - 按位异或:^ 两个数字的二进制位进行比较,相同则为0,不同则为1
3 ^ 5 -> 011 ^ 101 -> 110 ->6
注意:^ 操作可以在不借助第三方变量的情况下,交换两个变量的值
et:
var a = 3,b = 5
//交换a,b的值
//1.普通做法
var c = a;
a = b;
b = c;
//2. ^
a = a ^ b; -> a = 6;
b = a ^ b; -> 6 ^ 5 -> 110 ^ 011 -> 011 -> 3
a = a ^ b; -> 6 ^ 3 -> 110 ^ 011 -> 101 -> 5
- 三目运算符 三目运算符,有三个操作数 类似: 单目运算符(一元运算符)++ -- !typeof,只有一个操作的运算符 双目运算符(二元运算符)+ - * / % && || ,有两个操作数的运算符 语法: 条件表达式 ?表达式1 :表达式2; 先判断条件表达式的结果,为真,执行表达式1:为假,执行表达式2 et:
var a = 150;
var res = a > 120? '偏胖,该减肥了' : '正好,不胖不瘦';
console.log(res);
- 练习1: 成绩判定 接收用户输入的分数 score
1. score < 60 不及格
60 <= score <= 80 及格
80 <= score <= 90 良好
score >= 90 优秀
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<script type="text/javascript">
var score = prompt("请输入成绩");
var res = score >= 90 ? "优秀" : score >= 80 ? "良好" : score >= 60 ? "及格" : "不及格";
console.log("成绩"+score+"判定为"+res);
</script>
</head>
<body>
</body>
</html>
- 练习2:
BMI 身体指数计算
要求从弹框接收用户的身高
要求从弹框接收用户的体重
bmi = 体重 / 身高 * 身高;
bmi < 18.5 偏瘦
bmi > 23.9 偏胖
介于二者之间,属于健康
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<script type="text/javascript">
var height = prompt("请输入身高(m)");
var weight = prompt("请输入体重(kg)");
var bmi = weight / (height * height);
// 保留小数点后两位
bmi = bmi.toFixed(2);
var res = bmi >= 23.9 ? "偏胖" : bmi >= 18.5 ? "健康" : "偏瘦";
console.log("您的BMI为"+bmi+"属于"+res);
</script>
</head>
<body>
</body>
</html>
2.流程控制语句
控制当前代码的执行顺序
流程语句结构:
- 顺序结构
- 分支结构(选择结构)
- 循环结构
- 顺序结构
按照代码书写顺序,从上到下执行 - 分支(选择)结构
- 作用
根据条件选择某一段代码执行 - if 结构
1. if结构
语法:
if (条件){
//待执行的语句
//只有条件为真,才执行{}里的语句
}
注意:
1.if()后面的 {} 可以省略,省略之后,只控制该结构下的第一条语句
2.条件尽可能使布尔类型的
3.任何非0值都为真,0为假,以下情况,条件的结果都为假
if(0) {}
if(0.0) {}
if('') {}
if(NaN) {}
if(undefined)
if(null)
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<script type="text/javascript">
var score = prompt("请输入分数");
if(score >= 90){
console.log("当前成绩为优秀");
}
// 省略{}
if(score >= 80 && score < 90) console.log("当前成绩为良好");
console.log("普通语句");
// 以下条件结果都为假
console.log(Boolean(0));
console.log(Boolean(0.0));
console.log(Boolean(''));
console.log(Boolean(NaN));
console.log(Boolean(undefined));
console.log(Boolean(null));
console.log(Boolean(100));
console.log(Boolean('a'));
</script>
</head>
<body>
</body>
</html>
- if - else 结构 语法:
if(条件){
//条件为真要执行的语句
}else {
//条件为假时执行的操作
}
et:
var age = prompt('请输入年龄');
if(age >= 18){
console.log('可以去网吧');
} else {
console.log('未成年禁止进入');
}
多重分支结构
if(条件){
//条件1为真时执行
} else if(条件2){
//条件1为假,条件2为真时执行
} else if(条件3){
//条件2为假,条件3为真时执行
}
...
else{
}
练习:
- 判断成绩等级
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<script type="text/javascript">
var score = prompt("请输入分数");
if(score >= 90){
console.log("优秀");
} else if(score >= 80){
console.log("良好");
} else if(score >= 60){
console.log("及格");
} else{
console.log("不及格");
}
</script>
</head>
<body>
</body>
</html>
- 日期计算器
用户输入,年,月,日,计算当日是该年的第几天
例如:
用户输入 2018 - 1 -15
输出,当天是2018年的第15天
用户输入 2018 - 2 -15
输出,当天是2018年的第31+15天
注意:
如果是闰年,2月为29天,总天数+1
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<script type="text/javascript">
//接收用户输入的年 月 日
var year = Number(prompt("请输入年份"));
var month = Number(prompt("请输入月份"));
var day = Number(prompt("请输入日期"));
//总天数
var totalDays = 0;
//判断闰年
var isRun = year % 4 == 0 && year % 100 != 0 || year % 400 == 0;
//计算天数
if(month == 1){
totalDays = day;
}else if(month == 2){
totalDays = 31 + day;
}else if(month == 3){
totalDays = 31 + 28 + day;
}else if(month == 4){
totalDays = 31 + 28 + 31 + day;
}
//如果当年是闰年,并且月份大于2,总天数进行+1
if(isRun && month >2){
//totalDays = totalDays + 1;
totalDays += 1;
}
console.log(year+"年"+month+"月"+day+"日"+"是当年的第"+totalDays+"天");
</script>
</head>
<body>
</body>
</html>
- switch 语句
在进行值判断时用的比较多
语法:
switch(变量){
case 值1:
//如果变量的值与case给出的值相等,就会执行:后面的代码段代码块;
break; //跳出switch语句,不再向后进行匹配,可以省略
case 值2:
代码块;
break
case 值3:
代码块;
break;
...
default:
代码块; //所有case都匹配失败之后执行的默认语句
}
- 注意:
- 变量与case 值的匹配,是用===恒等来判断,只有数据类型与值都相等才能匹配成功
- break 表示跳出switch判断,后面的判断语句不执行
- default 关键字用于在表达式不匹配前面给出的任何一种情形时,最终执行的操作
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<script type="text/javascript">
//根据用户输入的数字判断星期几
var input = prompt('请输入0-6之间的整数');
switch(input){
case '0':
console.log('星期天');
break;
case '1':
console.log('星期一');
break;
case '2':
console.log('星期二');
break;
case '3':
console.log('星期三');
break;
case '4':
console.log('星期四');
break;
case '5':
console.log('星期五');
break;
case '6':
console.log('星期六');
break;
default:
alert('输入有误');
}
</script>
</head>
<body>
</body>
</html>
练习:
- 每周食谱,弹框输入1-7 表示星期几
星期一:今天是星期一,吃红烧肉
...
星期天:今天是星期天,吃红烧鱼
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<script type="text/javascript">
var input = Number(prompt('今儿星期几'));
switch(input){
case 1:
console.log('星期'+input+':','今天是星期'+input,'吃红烧鱼');
break;
case 2:
console.log('星期'+input+':','今天是星期'+input,'吃猴子');
break;
case 3:
console.log('星期'+input+':','今天是星期'+input,'吃蟹子');
break;
case 4:
console.log('星期'+input+':','今天是星期'+input,'吃熊掌');
break;
case 5:
console.log('星期'+input+':','今天是星期'+input,'吃大象');
break;
case 6:
console.log('星期'+input+':','今天是星期'+input,'吃泥巴');
break;
case 7:
console.log('星期天:','今天是星期天','吃东京');
break;
default:
alert('没得吃');
}
</script>
</head>
<body>
</body>
</html>
- 改写日期计算器,用户输入
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<script type="text/javascript">
//接收用户输入的年 月 日
var year = Number(prompt("请输入年份"));
var month = Number(prompt("请输入月份"));
var day = Number(prompt("请输入日期"));
//总天数
var totalDays = 0;
//month [1,12]
//匹配范围 [1,11]
//month-1[0,11] -> 12个月
switch (month-1) {
//月份按照倒序匹配,取值 1-11
//省略break,所有的代码语句都会执行
case 11 :
totalDays += 30;
case 10 :
totalDays += 31;
case 9 :
totalDays += 30;
case 8 :
totalDays += 31;
case 7 :
totalDays += 31;
case 6 :
totalDays += 30;
case 5 :
totalDays += 31;
case 4 :
totalDays += 30;
case 3 :
totalDays += 31;
case 2 :
totalDays += 28;
//判断闰年
if(year % 4 == 0 && year % 100 != 0 && year % 400 == 0)
totalDays += 1;
case 1 :
totalDays += 31;
}
// 加当月的天数
totalDays += day;
console.log(year+"年"+month+"月"+day+"日"+"是当年的第"+totalDays+"天");
//1. switch中的case,表示可以进行整月相加的部分1-11
//2. switch现在只匹配 1- 11月,将变量的范围调整在11月以内 month - 1
//3. 省略break之后,会从当前匹配到的case开始,依次执行后面所有case中的语句
//4. 当前月之前的整月部分累加之后,最后添加当前月的天数
</script>
</head>
<body>
</body>
</html>
- 循环结构
- 作用
重复执行某段代码 - 循环三要素
循环变量
循环条件
循环体 - while 循环
1. 语法:
while(循环条件){
循环体
}
et:
重复输出100次'编程使我快乐'
//1.定义循环变量
var i = 1; //表示循环次数
while(i <= 100){
console.log('编程使我快乐');
//更新循环变量
i++;
}
- 循环语句的执行流程
- 定义循环变量
- 判断循环条件
- 条件成立,执行循环体
- 更新循环变量
- 重复2 - 3 - 4 ...直到循环条件不成立,结束循环
练习:
- 打印1-100之间的所有数字
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<script type="text/javascript">
//输出1-100之间所有的数
var i = 1;
while(i <= 100){
console.log(i);
i ++;
}
</script>
</head>
<body>
</body>
</html>
- 打印1-100之间所有是数字的和,然后求被3整数的所有数字
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<script type="text/javascript">
//输出1-100之间所有的数
var i = 1;
var sum = 0;
while(i <= 100){
sum += i;
i ++;
}
console.log(sum);
var j = 1;
while(j < 101){
//能否被3整除
if (j % 3 == 0){
console.log(j);
}
j ++;
}
</script>
</head>
<body>
</body>
</html>
- do-while 循环
- 语法
1. do{
循环体
}while(循坏条件);
- 执行流程
- 定义循环变量
- 执行循环体
- 更新循环变量
- 判断循环条件,条件成立,重复2-3-4,条件不成立,结束循环
- while 与 do-while区别:
while循环先判断循环条件,为真才才执行循环体
do-while 循环不管条件是否成立,先执行循环体,后判断循环条件,即使循环条件不成立,也会执行一遍循环体
et:
var i = 101;
do{
console.log(i);
//更新循环变量
i ++;
}while(i < 101);
练习:
- 循环接收用户输入,并在控制台输出,直到用户输入'exit',结束循环
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<script type="text/javascript">
//循环接受用户输入 prompt
do{
var input = prompt('输入数据,exit表示退出');
if (input != 'exit'){
console.log(input);
}
}while(input != 'exit');
</script>
</head>
<body>
</body>
</html>
- 改版日期计算器
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<script type="text/javascript">
//改写日期计算器
//接收用户输入的年 月 日
var year = Number(prompt("请输入年份"));
var month = Number(prompt("请输入月份"));
var day = Number(prompt("请输入日期"));
//总天数
var totalDays = 0;
var i = 1;
//循环体中是month-1个月的天数累加
//month = 6
while(i < month){
//进行月份及天数区分
switch(i){
case 1 :
case 3 :
case 5 :
case 7 :
case 8 :
case 10 :
totalDays += 31;
break;
case 4 :
case 6 :
case 9 :
case 11 :
totalDays += 30;
break;
case 2 :
totalDays += 28;
if (year % 4 == 0 && year % 100 != 0 || year % 400 == 0) {
totalDays += 1;
break;
}
}
//更新循环变量
i ++;
}
//添加当月的天数
totalDays += day;
console.log(year+"年"+month+"月"+day+"日"+"是当年的第"+totalDays+"天");
</script>
</head>
<body>
</body>
</html>