算术运算符
概念:算术运算使用的符号,用于执行两个变量或值的算术运算
运算符 | 描述 | 实例 |
---|---|---|
+ | 加 | 10 + 20 = 30 |
- | 减 | 10 - 20 = -10 |
* | 乘 | 10 * 20 = 200 |
/ | 除 | 10 / 20 = 0.5 |
% | 取余数(取模) | 返回除去的余数9 % 2 = 1 |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
console.log(1 + 1);//2
console.log(1 - 1);//0
console.log(1 * 1);//1
console.log(1 / 1);//1
// % 取余
console.log(4 % 2);//0
console.log(5 % 3);//2
console.log(3 % 5);//3
</script>
</head>
<body>
</body>
</html>
浮点数精度问题
浮点数值的最高精度是17位小数,但在进行算术计算时其精确度远远不如整数
var result = 0.1 + 0.2; //结果不是0.3,而是:0.30000000000000004
console.log(0.7 * 100); //结果不是7,而是:7.000000000000001
所以不要直接判断两个浮点数是否相等
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
//浮点数 算术运算里面会有问题
//我们不能直接拿着浮点数来进行相比较 是否相等
var num = 0.1 + 0.2;
console.log(num == 0.3);//false
</script>
</head>
<body>
</body>
</html>
递增和递减运算符
如需反复给数字变量添加或减去1,可以使用递增(++)和递减(–)运算符来完成
前置递增运算符
++num 前置递增,就是自加1,类似于num = num + 1,但是 ++num 写起来更简单
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
//1.想要一个变量自己加1 num = num + 1 比较麻烦
var num = 1;
num = num + 1;//++num
console.log(num);//2
//2.前置递增运算符 ++ 写在变量的前面
var age = 10;
++age;
console.log(age);//11
//3.先加1 后返回值
var p = 10;
console.log(++p + 10);//21
</script>
</head>
<body>
</body>
</html>
后置递增运算符
num++ 后置递增,就是自加1,类似于num = num + 1,但是 num++ 写起来更简单
使用口诀:先返回原值,后自加
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
var num = 10;
num++;// num = num + 1 ++num;
//前置自增和2后置自增如果单独使用 效果是一样的
var age = 10;
console.log(age++ + 10);//20
//这里age = 11
</script>
</head>
<body>
</body>
</html>
前置递增和后置递增小结
- 前置递增和后置递增运算符可以简化代码的编写,让变量的值+1比以前写法更简单
- 单独使用时,运行结果相同
- 与其他代码联用时,执行结果会不同
- 后置:先原值运算,后自加(先人后己)
- 前置:先自加,后运算(先己后人)
- 开发时,大多使用后置递增/减,并且代码独占一行,例如:num++ 或者 num–;
比较运算符
概念:比较运算符(关系运算符)是两个数据进行比较时所使用的运算符,比较运算后,会返回一个布尔值(true/false)作为比较运算的结果
运算符名称 | 说明 | 案例 | 结果 |
---|---|---|---|
< | 小于号 | 1 < 2 | true |
> | 大于号 | 1 > 2 | false |
>= | 大于等于号(大于或者等于) | 2 >= 2 | true |
<= | 小于等于号(小于或者等于) | 3 <= 2 | false |
== | 判等号 | 37 == 37 | true |
!= | 不等号 | 37 != 37 | false |
=== !== | 全等 要求值和数据类型都一致 | 37 === ‘37’ | false |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
//1.程序里面的等于符号是 == 默认转换数据类型 会把字符串型的数据转换为数字型 只要求值相等就可以
console.log(3 == 5)//false
console.log('阿波' == '波波');//false
console.log(78 == 78);//true
console.log(78 == '78');//true
console.log(78 != 78);//false
//2.程序里面有全等 一模一样 要求 两侧的值 还有 数据类型完全一致才可以true
console.log(18 === 18);//true
console.log(18 === '18');//false
</script>
</head>
<body>
</body>
</html>
小结
符号 | 作用 | 用法 |
---|---|---|
= | 赋值 | 把右边给左边 |
== | 判断 | 判断两边值是否相等(注意此时有隐式转换) |
=== | 全等 | 判断两边的值和数据类型是否完全相同 |
逻辑运算符
概念:逻辑运算符是用来进行布尔值运算的运算符,其返回值也是布尔值。后面开发经常用于多个条件的判断
逻辑运算符 | 说明 | 案例 |
---|---|---|
&& | “逻辑与”,简称 “与” and | true && false |
|| | “逻辑或”,简称 “或” or | true || false |
! | “逻辑非”,简称 “非” not | ! true |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
//1.逻辑与 && and 两侧都为true 结果才是true 只要有一侧为false 结果就为false
console.log(3 > 5 && 3 > 2);//false
console.log(3 < 5 && 3 > 2);//true
//2.逻辑或 || or 两侧都为false 结果才是假 false 只要有一侧为true 结果就是true
console.log(3 > 5 || 3 > 2);//true
console.log(3 > 5 || 3 < 2);//false
//3.逻辑非 ! not
console.log(!true);//false
</script>
</head>
<body>
</body>
</html>
小结
逻辑与&&:两边都是true才返回true,否则返回false
逻辑或||:两边都为false才返回false,否则都为true
逻辑非!:也叫取反符,用来取一个布尔值相反的值,如true的相反值是false
var isOk = !true;
console.log(isOk);//false
短路运算(逻辑中断)
当有多个表达式时,左边的表达式值可以确定结果时,就不再继续运算右边的表达式的值
逻辑与
语法:表达式1 && 表达式2
如果第一个表达式的值为真,则返回表达式2
如果第一个表达式的值为假,则返回表达式1
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
//1.用我们的布尔值参与的逻辑运算 true && false == false
//2.123 && 456是值 或者是 表达式 参与逻辑运算?
//3.逻辑与短路运算 如果表达式1为真 则返回表达式2 如果表达式1为假的 返回表达式1
console.log(123 && 456);//456
console.log(0 && 456);//0
console.log(0 && 1 + 2 && 456 * 56789);//0
console.log('' && 1 + 2 && 456 * 56789)//''
//如果有空的或者否定的为假 其余是真的 0、''、null、undefined、NaN
</script>
</head>
<body>
</body>
</html>
逻辑或
语法:表达式1 || 表达式2
如果表达式1为真,则返回表达式1
如果表达式1为假,则返回表达式2
console.log(123 || 456);//123
console.log(0 || 456);//456
console.log(123 || 456 || 789);//123
赋值运算符
赋值运算符 | 说明 | 案例 |
---|---|---|
= | 直接赋值 | var usrName = ‘我是值’ |
+=、-= | 加、减一个数 后再赋值 | var age = 10;age += 5; //15 |
*=、/=、%= | 乘、除、取模 后再赋值 | var age = 2; age *= 5; //10 |
var age = 10;
age += 5;//相当于 age = age + 5
age -= 5;//相当于 age = age - 5
age *= 10;//相当于 age = age * 10
运算符优先级
优先级 | 运算符 | 顺序 |
---|---|---|
1 | 小括号 | () |
2 | 一元运算符 | ++ – ! |
3 | 算术运算符 | 先 * / % 后 + - |
4 | 关系运算符 | > >= < <= |
5 | 相等运算符 | == != === !== |
6 | 逻辑运算符 | 先 && 后 || |
7 | 赋值运算符 | = |
8 | 逗号运算符 | , |
流程控制
流程控制主要有三种结构,分别是顺序结构、分支结构和循环结构
顺序流程控制
顺序结构是程序中最简单、最基本的流程控制,它没有特定的语法结构,程序会按照代码的先后顺序,依次执行
分支结构
由上到下执行代码的过程中,根据不同条件,执行不同的路径代码(执行代码多选一的过程),从而得到不同的结果
JS提供了两种分支结构语句:if语句 和 switch语句
if分支语句
语法结构:
//条件成立执行代码,否则什么也不做
if(条件表达式) {
执行语句
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
if(3 > 5) {
alert('阿波');
}
</script>
</head>
<body>
</body>
</html>
案例:进入网吧
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
var year = prompt('请输入年龄');
if(year >= 18) {
alert('允许进入网吧');
}
</script>
</head>
<body>
</body>
</html>
if else语句(双分支语句)
语法结构:
//条件成立执行if里面的代码,否则执行else里面的代码
if(条件表达式) {
//if条件成立执行的代码
} else {
//否则 执行的代码
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
var age = prompt('请输入年龄');
if(age >= 18) {
alert('我带你去网吧偷键盘');
} else {
alert('滚!回家做作业去!');
}
</script>
</head>
<body>
</body>
</html>
判断闰年
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
var year = prompt('请输入一个年份');
if(year % 4 == 0 & year % 100 != 0) {
alert('闰年');
} else {
alert('平年');
}
</script>
</head>
<body>
</body>
</html>
判断是否中奖
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
var name = prompt('请输入姓名');
if(name === '刘德华') {
alert('中了5块钱');
} else {
alert('没有中奖');
}
</script>
</head>
<body>
</body>
</html>
if else if 语句(多分支语句)
语法结构
//适合检查多重条件
if(条件表达式1) {
语句1;
} else if (条件表达式2) {
语句2;
} else if (条件表达式3) {
语句3;
...
} else {
//上述条件都不成立执行此处的代码
}
判断成绩级别
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
var grade = prompt('请输入你的分数');
if(grade >= 90) {
alert('成绩为A等级');
} else if(grade >= 80 && grade < 90) {
alert('成绩为B等级');
} else if(grade >= 70 && grade < 80) {
alert('成绩为C等级');
} else if(grade >= 60 && grade < 70) {
alert('成绩为D等级');
} else if(grade < 60) {
alert('成绩为E等级');
}
</script>
</head>
<body>
</body>
</html>
三元表达式
有三元运算符组成的式子我们称为三元表达式
语法结构
条件表达式 ? 表达式1 : 表达式2
//如果条件表达式结果为真 则返回 表达式1的值
//如果条件表达式结果为假 则返回 表达式2的值
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
var num = 10;
var result = num > 5 ? '是的' : '不是的';
console.log(result);
</script>
</head>
<body>
</body>
</html>
数字补0案例
分析:
- 用户输入0~59之间的一个数字
- 如果数字小于10,则在这个数字面前补0(加0),否则不做操作
- 用一个变量接受这个返回值,输出
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
var time = prompt('请输入一个0~59之间的一个数字');
//三元表达式
var result = time < 10 ? '0' + time : time;//把返回值赋值给一个变量
alert(result);
</script>
</head>
<body>
</body>
</html>
switch语句
当要针对变量设置一系列的特定值的选项时,就可以使用switch
语法结构
switch(表达式) {
case value1:
//表达式等于 value1 时执行的代码
break;
case value2:
//表达式等于 value1 时执行的代码
break;
default:
//表达式不等于任何一个value时要执行的代码
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
//switch注意事项
var num = 3;
switch (num) {
case 1:
console.log(1);
break;
case 2:
console.log(2);
break;
case 3:
console.log(3);
break;
}
//1.我们开发里面 表达式经常写成变量
//2.我们num里的值和case里面的值相匹配的时候是 全等 必须是值和数据类型一致才可以 num === 1
//3.break 如果当前的case里面没有break则不会退出switch 是继续执行下一个case
</script>
</head>
<body>
</body>
</html>
查询水果案例
用户在弹出框里面输入一个水果,如果有就弹出该水果的价格,如果没有该水果就弹出“没有此水果”。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
var fruit = prompt('请输入您查询的水果:');
switch (fruit) {
case '苹果':
alert('苹果一斤5块钱');
break;
case '香蕉':
alert('香蕉一斤2块钱');
break;
case '西瓜':
alert('西瓜一斤3块钱');
break;
case '桃子':
alert('桃子一斤6块钱');
break;
default:
alert('没有此水果');
}
</script>
</head>
<body>
</body>
</html>
案例
判断时间阶段
用户输入12点弹出中午好,18点弹出傍晚好,23点弹出深夜好
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
var time = prompt('请输入时间(0~24)');
switch (time) {
case '12':
alert('现在' + time + '点' + ' ' + '中午好');
break;
case '18':
alert('现在' + time + '点' + ' ' + '傍晚好');
break;
case '23':
alert('现在' + time + '点' + ' ' + '深夜好');
break;
default:
alert('现在' + time + '点');
}
</script>
</head>
<body>
</body>
</html>
比较最大值
用户依次输入两个值,最后弹出最大的那个
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
var a = prompt('请输入第一个数');
var b = prompt('请输入第二个数');
if (a > b) {
alert(a);
} else {
alert(b);
}
</script>
</head>
<body>
</body>
</html>
判断奇数偶数
用户输入一个数字,来判断是奇数还是偶数
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
var num = prompt('请输入一个数字');
if (num % 2 == 0) {
alert(num + '是偶数');
} else {
alert(num + '是奇数');
}
</script>
</head>
<body>
</body>
</html>
返回星期几
根据用户输入的数字(1~7),返回星期几
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
var week = prompt('请输入代表星期几的数字(1~7)');
switch (parseInt(week)) {
case 1:
alert('星期一');
break;
case 2:
alert('星期二');
break;
case 3:
alert('星期三');
break;
case 4:
alert('星期四');
break;
case 5:
alert('星期五');
break;
case 6:
alert('星期六');
break;
case 7:
alert('星期日');
break;
default:
alert('错误!请输入数字1~7');
}
</script>
</head>
<body>
</body>
</html>
班长口袋里的钱
接收班长口袋里的钱数,若大于等于2000,请大家吃西餐,若小于等于1500,请大家吃快餐,若小于1500、大于等于1000,请大家喝饮料。若小于1000、大于等于500,请大家吃棒棒糖,否则提醒班长下次把前带够。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
var money = prompt('输入班长口袋里的钱数');
if (money >= 2000) {
alert('班长请大家吃西餐');
} else if (money >= 1500 && money < 2000) {
alert('班长请大家吃快餐');
} else if (money >= 1000 && money < 1500) {
alert('班长请大家喝饮料');
} else if (money >= 500 && money < 1000) {
alert('班长请大家吃棒棒糖');
} else {
alert('请班长下次把钱带够');
}
</script>
</head>
<body>
</body>
</html>
循环
在JS中,主要有三种类型的循环语句:
- for循环
- while循环
- do…while循环
for 循环
语法结构
for (初始化变量; 条件表达式; 操作表达式) {
//循环体
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
for (var i = 1; i <= 100; i++) {
console.log('哈哈哈~');
}
/*
初始化变量 就是用var声明一个普通变量,通常用于作为计数器使用
条件表达式 就是用来决定每一次循环是否继续执行 就是终止的条件
操作表达式 是每次循环最后执行的代码 经常用于我们计数器变量进行更新(递增或者递减)
*/
</script>
</head>
<body>
</body>
</html>
for循环执行过程
- 首先执行里面的计数器变量 var i = 1,但是这句话在for里面只执行一次
- 去i <= 100 来判断是否满足条件,如果满足 就去执行 循环体 不满足就退出循环
- 最后去执行i++ 第一轮结束,接着去执行i <= 100 如果条件满足 就去执行 循环体 ……依此类推
断点调试
断点调试可以帮我们观察程序的运行过程
-
浏览器中按F12—>sources—>找到需要调试的文件—>在程序的某一行设置断点
Watch:监视,通过watch可以监视变量的值的变化,非常的常用
-
F11:程序单步执行,让程序一行一行的执行,这个时候,观察watch中变量的值的变化
for循环重复执行相同代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
//for循环可以执行相同的代码
for (var i = 1; i <= 10; i++) {
console.log('哈');
}
//我们可以让用户控制输入的次数
var num = prompt('请输入次数');
for (var i = 1; i <= num; i++) {
console.log("嘿");
}
</script>
</head>
<body>
</body>
</html>
for循环重复不相同的代码
for循环可以重复执行不同的代码,因为我们有计数器变量i的存在,i每次循环后值都会变化
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
//想要输出1个人从1到100岁
// for (var i = 1; i <= 100; i++) {
// console.log('这个人今年' + i + '岁了');
// }
for (var i = 1; i <= 100; i++) {
if (i == 1) {
console.log('这个人今年1岁了,他出生了');
} else if (i == 100) {
console.log('这个人今年100岁了,他死了');
} else {
console.log('这个人今年' + i + '岁了');
}
}
</script>
</head>
<body>
</body>
</html>
案例1
求1-100之间所有整数的累加和
分析:
- 需要循环100次,需要一个计数器i
- 需要一个存储结果的变量sum,但是初始值一定是0
- 核心算法:1 + 2 + 3 + 4……,sum = sum + i;
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
//求1-100之间所有的平均数
var sum = 0;
for (var i = 1; i <= 100; i++) {
sum += i;
}
alert(sum);//5050
</script>
</head>
<body>
</body>
</html>
案例2
用户输入班级人数,之后依次输入每个学生的成绩,最后打印出该班级总的成绩以及平均值
分析
- 弹出输入框输入总的班级人数(num)
- 依次输入学生的成绩(保存起来score),此时我们需要用到for循环,弹出次数跟班级总人数有关系 条件表达式 i <= num
- 进行业务处理,计算成绩,先求总成绩(sum),之后求平均成绩(average)
- 弹出结果
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
var num = prompt('请输入班级的总人数:');//num 总的班级人数
var sum = 0;// 求和的变量
var average = 0;// 求平均值的变量
for (var i = 1; i <= num; i++) {
var score = prompt('请输入第' + i + '个学生的成绩');
//因为从prompt取过来的数据是字符串型的,需要转换为数字型
sum = sum + parseFloat(score);
}
average = sum / num;
alert('班级总的成绩是:' + sum);
alert('班级平均分是:' + average);
</script>
</head>
<body>
</body>
</html>
案例3
打印五颗星星
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
// 一行打印五个星星
// 1.
// console.log('★★★★★');
// 2.
// var str = '';
// for (var i = 1; i <= 5; i++) {
// str = str + '★';
// }
// console.log(str);
// 3.
var num = prompt('请输入星星的个数');
var str = '';
for (var i = 1; i <= num; i++) {
str = str + '★';
}
console.log(str);
</script>
</head>
<body>
</body>
</html>
双重for循环
很多情况下,单层for循环并不能满足我们的需求,比如我们要打印一个5行5列的图形,打印一个倒三角等等,此时我们可以通过循环嵌套来实现。循环嵌套是指在一个循环语句中再定义一个循环语句的语法结构。
语法结构
双重for循环 语法结构
for (外层的初始化变量; 外层的条件表达式; 外层的操作表达式) {
for (里层的初始化变量; 里层的条件表达式; 里层的操作表达式) {
//执行语句;
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
// 1.我们可以把里面的循环看作是外层循环的语句
// 2.外层循环 循环一次,里面的循环执行全部
for (var i = 1; i <=3; i ++) {
console.log('这是外层循环第' + i + '次');
for (var j = 1; j <= 3; j++) {
console.log('这是里层循环第' + j + '次');
}
}
</script>
</head>
<body>
</body>
</html>
打印五行五列星星
- 内层循环负责一行打印5个星星
- 外层循环负责打印5行
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
// 打印五行五列星星
var str = '';
for (var i = 1; i <= 5; i++) {
for (var j = 1; j<= 5; j++) {
str += '★';
}
//如果一行打印完5个星星,就要另起一行 加\n
str = str + '\n';
}
console.log(str);
</script>
</head>
<body>
</body>
</html>
打印倒三角
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
//打印倒三角
var str = '';
for (var i = 1; i <= 10; i++) { //外层循环控制行数
for (var j = i; j <= 10; j++) { // 里层循环控制打印的个数不一样 j = i
str += '*';
}
str += '\n';
}
console.log(str);
</script>
</head>
<body>
</body>
</html>
打印正三角
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
//打印正三角
var str = '';
for (var i = 1; i <= 10; i++) {
for (var j = 1; j <= i; j++) {
str += '*';
}
str += '\n';
}
console.log(str);
</script>
</head>
<body>
</body>
</html>
九九乘法表
分析:
- 一共有9行,但是每行的个数不一样
- 外层的for控制行数i,循环9次,打印9行
- 内层的for控制每行公式j
- 核心算法:每一行公式的个数正好和行数一致,j <= i;
- 每行打印完毕,都需要换行
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
var str = '';
for (var i = 1; i <= 9; i++) {
for (var j = 1; j <= i; j++) {
// 1 x 2 = 2
str += j + 'x' + i + '=' + i * j + '\t';
}
str += '\n';
}
console.log(str);
</script>
</head>
<body>
</body>
</html>
while循环
while (条件表达式) {//while 当……的时候
//循环体代码
}
执行思路:
- 先执行条件表达式,如果结果为true,则执行循环体代码,如果为false,则退出循环,执行后面的代码
- 执行循环体代码
- 循环体代码执行完毕之后,程序会继续判断执行条件表达式,如条件仍为true,则会继续执行循环体,直到循环条件为false时,整个循环过程才会结束
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
var num = 1;
while (num <= 10) {
console.log('哈哈哈~');
num++;
}
// 里面应该也有计数器 初始化变量
// 里面应该也有操作表达式 完成计数器的更新 防止死循环
</script>
</head>
<body>
</body>
</html>
案例
1
打印人的一生,从1岁到100岁
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
var time = 0;
while (time < 100) {
time++
console.log(time + '岁');
}
</script>
</head>
<body>
</body>
</html>
2
计算1~100之间所有整数的和
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
var sum = 0;
var i = 0;
while (i <= 100) {
sum += i;
i++;
}
console.log(sum);
</script>
</head>
<body>
</body>
</html>
do while循环
do {
//循环体代码 --- 条件表达式为true时重复执行
} while (条件表达式);
执行思路:
- 先执行一次循环体代码
- 再执行条件表达式,如果结果为true,则继续执行循环体代码,如果为false,则退出循环,继续执行后面的代码
注意:先执行循环体,再判断,do…while循环语句至少会执行一次循环体代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
var i = 1;
do {
console.log('How are you?');
i++;
} while (i <= 100);
</script>
</head>
<body>
</body>
</html>
案例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
var i = 1;
do {
console.log(i + '岁');
i++;
} while (i <= 100);
</script>
</head>
<body>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
var sum = 0;
var i = 0;
do {
sum += i;
i++;
} while (i <= 100);
console.log(sum);//5050
</script>
</head>
<body>
</body>
</html>
continue
continue关键字用于立即跳出本次循环,继续下一次循环
例如:吃5个包子,第三个包子有虫子,就扔掉第3个,继续吃第4个第5个包子
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
for (var i = 1; i <= 5; i++) {
if (i == 3) {
// console.log('第' + i + '个包子有虫子,不吃,扔掉');
continue;
}
console.log('正在吃第' + i + '个包子');
}
</script>
</head>
<body>
</body>
</html>
break
break关键字用于立即跳出整个循环(循环结束)
例如:吃5个包子,吃到第3个发现里面有半个虫子,没胃口,其余的不吃了
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
for (var i = 1; i <= 5; i++) {
if (i == 3) {
// console.log('第' + i + '个包子有虫');
break;
}
console.log('正在吃第' + i + '个包子');
}
</script>
</head>
<body>
</body>
</html>
命名规范
- 变量、函数的命名必须要有意义
- 变量的名称一般用名词
- 函数的名称一般用动词
简易ATM
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
var money = 100;// 原先的钱,余额
while (a != 4) {
var a = prompt('请输入您要的操作:' + '\n'
+ '1.存钱' + '\n'
+ '2.取钱' + '\n'
+ '3.显示余额' + '\n'
+ '4.退出');
if (a == 1) {
var add = prompt('请输入存储的钱数:');
money += parseFloat(add);
continue;
} else if (a == 2) {
var sub = prompt('请输入要取出的钱数:');
money -= parseFloat(sub);
continue;
} else if (a == 3) {
alert('当前余额为:' + money + '元');
continue;
} else if (a == 4) {
alert('退出');
}
else {
alert('错误,请输入1~4之间的数字!');
continue;
}
}
</script>
</head>
<body>
</body>
</html>