JS笔记02

本文详细介绍了JavaScript中的算术运算符,包括浮点数精度问题、递增和递减运算符,以及比较和逻辑运算符的使用。此外,还探讨了流程控制结构,如if分支、switch语句、for和while循环,以及如何处理循环中的特殊情况。内容覆盖了从基本的算术操作到复杂的条件判断和循环控制,是理解JavaScript基础的重要参考资料。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

算术运算符

概念:算术运算使用的符号,用于执行两个变量或值的算术运算

运算符描述实例
+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. 前置递增和后置递增运算符可以简化代码的编写,让变量的值+1比以前写法更简单
  2. 单独使用时,运行结果相同
  3. 与其他代码联用时,执行结果会不同
  4. 后置:先原值运算,后自加(先人后己)
  5. 前置:先自加,后运算(先己后人)
  6. 开发时,大多使用后置递增/减,并且代码独占一行,例如:num++ 或者 num–;

比较运算符

概念:比较运算符(关系运算符)是两个数据进行比较时所使用的运算符,比较运算后,会返回一个布尔值(true/false)作为比较运算的结果

运算符名称说明案例结果
<小于号1 < 2true
>大于号1 > 2false
>=大于等于号(大于或者等于)2 >= 2true
<=小于等于号(小于或者等于)3 <= 2false
==判等号37 == 37true
!=不等号37 != 37false
=== !==全等 要求值和数据类型都一致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>
小结
符号作用用法
=赋值把右边给左边
==判断判断两边值是否相等(注意此时有隐式转换)
===全等判断两边的值和数据类型是否完全相同

逻辑运算符

概念:逻辑运算符是用来进行布尔值运算的运算符,其返回值也是布尔值。后面开发经常用于多个条件的判断

逻辑运算符说明案例
&&“逻辑与”,简称 “与” andtrue && false
||“逻辑或”,简称 “或” ortrue || 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案例

分析:

  1. 用户输入0~59之间的一个数字
  2. 如果数字小于10,则在这个数字面前补0(加0),否则不做操作
  3. 用一个变量接受这个返回值,输出
<!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中,主要有三种类型的循环语句:

  1. for循环
  2. while循环
  3. 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循环执行过程

  1. 首先执行里面的计数器变量 var i = 1,但是这句话在for里面只执行一次
  2. 去i <= 100 来判断是否满足条件,如果满足 就去执行 循环体 不满足就退出循环
  3. 最后去执行i++ 第一轮结束,接着去执行i <= 100 如果条件满足 就去执行 循环体 ……依此类推

断点调试

断点调试可以帮我们观察程序的运行过程

  1. 浏览器中按F12—>sources—>找到需要调试的文件—>在程序的某一行设置断点

    Watch:监视,通过watch可以监视变量的值的变化,非常的常用

  2. 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之间所有整数的累加和

分析:

  1. 需要循环100次,需要一个计数器i
  2. 需要一个存储结果的变量sum,但是初始值一定是0
  3. 核心算法: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

用户输入班级人数,之后依次输入每个学生的成绩,最后打印出该班级总的成绩以及平均值

分析

  1. 弹出输入框输入总的班级人数(num)
  2. 依次输入学生的成绩(保存起来score),此时我们需要用到for循环,弹出次数跟班级总人数有关系 条件表达式 i <= num
  3. 进行业务处理,计算成绩,先求总成绩(sum),之后求平均成绩(average)
  4. 弹出结果
<!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>

在这里插入图片描述

打印五行五列星星
  1. 内层循环负责一行打印5个星星
  2. 外层循环负责打印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>
九九乘法表

分析:

  1. 一共有9行,但是每行的个数不一样
  2. 外层的for控制行数i,循环9次,打印9行
  3. 内层的for控制每行公式j
  4. 核心算法:每一行公式的个数正好和行数一致,j <= i;
  5. 每行打印完毕,都需要换行
<!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 当……的时候
    //循环体代码
}

执行思路:

  1. 先执行条件表达式,如果结果为true,则执行循环体代码,如果为false,则退出循环,执行后面的代码
  2. 执行循环体代码
  3. 循环体代码执行完毕之后,程序会继续判断执行条件表达式,如条件仍为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 (条件表达式);

执行思路:

  1. 先执行一次循环体代码
  2. 再执行条件表达式,如果结果为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>

在这里插入图片描述

命名规范

  1. 变量、函数的命名必须要有意义
  2. 变量的名称一般用名词
  3. 函数的名称一般用动词

简易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>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值