跟班学习JavaScript第二天———流程控制、分支、循环、函数-CSDN博客

本文链接：https://blog.csdn.net/h_jQuery/article/details/115182562

复习：

1内嵌到html标签中，配合使用

2在html标签中编写js语句块，语句块必须写在标签中，可以放在html的任意地方，

2.变量和常量

变量是程序运行的一段内存区域，用来存储可以改变的数据

变量申明：

var 变量名 = 值
var 变量名；

变量名 = 值

常量是一段被初始化赋值之后，就不允许被修改的数据

常量申明：

const 常量名 = 值；

常量和变量可以赋的值：

在js中。数据分为两大类型：

1.原始的基本数据类型

String 字符串

Number 数字类型

Boolean 布尔类型

Null 空类型

Undefined 未定义类型

类型之间的转换：

number和boolean转string类型：toString()

string和boolean转number类型：Number(value)，如果字符串里面的数据是数字则直接转成数字。但是会把左边的0去掉，如果不是正常数据，则会转成一个NaN的number类型的数据，如果是boolean转number的话，true转成1，false转成0

number和string转Boolean类型:Boolean(value)，如果是字符串里面是空字符则转成false，否则是true，如果是数字类型，0为false，非零数字则转成true

2.引用数据类型

3.运算符

3.1算术运算符

+、-、*、/、%

3.2赋值运算符

=：赋值

+=：左右两边的和赋给左边

-=：左右两边相减的结果赋值给左边

3.3比较运算符

==：比较数据是否相等

===：比较数据是否相等之外，还要比较数据的类型是否相等

3.4逻辑运算符

&&、||、！、&、|

&&和&的区别：

**&&**判断表达式1，如果为false，直接返回false，不再判断表达式2；

**&**判断表达式1为false时，依旧会去判断表达式2，所以&&比&效率高

||和|的区别：

**||**判断表达式1为true的话，直接返回true，不再判断表达式2；

**|**判断表达式1为true后，依旧会去判断表达式2，所以||比|效率高

3.5位运算

一个数亦或（^）同一个数量词，得到的是它本身

//不借用第三方数据，交换两个数据
var a=20;
var b= 30;
a^=b;		//a=a^b		20^30
b^=a;		//b=b^a		30^20^30		20
a^=b;		//a=a^b		20^30^20		30
console.log('a:'+a+'\nb:'+b)

a=a^b^b			//20^30^30=20

3.6三元运算符

表达式1 and 表达式2 ? “true”:“false”;

x=5;y=8;

x>y?x:y x大于y结果为false，所以输出y

**练习：**制作一个加密和解密的程序，比如原数据是5，输出通过程序加密之后的数据是30，然后再输出程序解密之后的数据为5

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script type="text/javascript">
			// 制作一个加密程序
			// 1.原始数据
			// 2.要有一个密钥
			// 3.加密是用过密钥进行原数据改变
			// 4.解密把原数据改变后的数据进行恢复
			const original = prompt('请输入原始数据');
			// var num = original*6;
			// alert('加密过后的数据：'+num);
			// var result = num/6;
			// alert('解密后的数据：'+result);
			var num;
			num=(original*30)/5;
			alert("加密过后的数据："+num);
			var result;
			result=original^num^num;
			alert("解密过后的数据："+result);
		</script>
	</head>
	<body>
		
	</body>
</html>

流程控制语句

分支语句

基础分支语句（判断语句）

if(表达式) {执行语句}（多选一）

执行语句要执行的话，表达式的结果必须为true

单分支语句（判断语句）

if(表达式) {语句1}else{语句2}（二选一）

表达式结果为true，执行表达式1，若不成立则执行表达式2

案例：成年可以进入网吧，未成年不可进入网吧

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>分支语句</title>
		<script type="text/javascript">
			var a = prompt("请输入你的年龄");
			if (a > 18) {
				alert('你已成年了，欢迎进入XXX');
			} else {
				alert('未成年禁止进入');
			}
		</script>
	</head>
	<body>
	</body>
</html>

多分支语句（多判断条件）

if(表达式1) {语句1}else if (表达式2){语句2}else if(表达式3) {语句2}…… else{语句n} 逐步判断

判断多个表达式，如果表达式成立即可执行后面的语句，若是不成立就判断下个else if后面的表达式

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			var num = prompt('请输入学生人数');
			if (0 < num && num <= 20) {
				alert('将进入1号教室');
			} else if (20 < num && num <= 50) {
				alert('将进入2号教室');
			} else if (50 < num && num <= 80) {
				alert('将进入3号教室');
			} else if (80 < num && num <= 200) {
				alert('将进入4号教室')
			} else {
				alert('场地有限，满足不了');
			}
		</script>
	</head>
	<body>
	</body>
</html>

案例：根据学生人数选择教教室，每个教室能容纳的人数不同

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			var num = prompt('请输入学生人数');
			if (0 < num && num <= 20) {
				alert('将进入1号教室');
			} else if (20 < num && num <= 50) {
				alert('将进入2号教室');
			} else if (50 < num && num <= 80) {
				alert('将进入3号教室');
			} else if (80 < num && num <= 200) {
				alert('将进入4号教室')
			} else {
				alert('场地有限，满足不了');
			}
		</script>
	</head>
	<body>
	</body>
</html>

案例：判断闰年

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			// 闰年：能被4整除且不能被100整除，或者能被400整除
			var year = prompt("请输入年份");
			if ((year % 4 == 0 && year % 100 != 0) || year % 400 == 0) {
				alert(year + "是闰年");
			} else {
				alert(year + '是平年');
			}
		</script>
	</head>
	<body>
	</body>
</html>

练习：根据用户输入的月份，打印出细节，比如：一到三月是春，四到六是夏，七到九是秋，十到十二是冬。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			var m = prompt('请输入要查询的月份');
			if (0 < m && m < 4) {
				alert("现在是春季");
			} else if (3 < m && m < 7) {
				alert("现在是夏季");
			} else if (6 < m && m < 10) {
				alert("现在是秋季");
			} else if (9 < m && m < 13) {
				alert("现在是冬季");
			} else {
				alert("没有这个月份，请输出正确的月份");
			}
		</script>
	</head>
	<body>
	</body>
</html>

特殊的分支语句

switch() {

case ‘值’:

执行语句;

break;

……

default:

执行语句

}

注意：switch() 括号里面的变量值的类型要与case后面的值的类型相同，是全比较（===）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
		//因为prompt()接受得到的值是String类型的，case后面的值是数字类型的，所以要把w转成数字型；或者让case后面的加引号，变成字符串型
			var w = prompt('请输入相应的星期日');
			w = Number(w);
			switch (w) {
				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('没有这个星期数');
			}
		</script>
	</head>
	<body>
	</body>
</html>

num与case后面的值匹配，匹配成功就输出，若是都不匹配，就输出default后面的执行语句
switch(num)里面的num在js里面可以传任意值
如果我们的判断条件是一个区间，这种情况就可以适使用if，如果我们的判断条件是固定的值，就用switch
注意事项：必须传入一个值和case后面的值去比较，然后每个case中的执行语句后面必须加上break

练习：判断用户输入的1-7弹出对应的星期，如果输出的不是1-7，就弹出不是

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			var w = prompt('请输入相应的数字');
			switch (w) {
				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('没有这个星期数');
			}
		</script>
	</head>
	<body>
	</body>
</html>


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			var num = 2;
			switch(num) {
				case 1:
				alert('1');
				break;
				case 2:
				alert('2');
				break;
				case 3:
				alert('3');
				break;
				default:
				 alert("null");
			}
			
		</script>
	</head>
	<body>
	</body>
</html>

循环语句

在生活中，我们可能需要程序来描述重复操作某一件事情，类似于跑二十圈，我们就是重复的执行跑步的操作

for循环

属于开发过程中，常用的分支之一，特点是分支条件丰富，可以提供复杂循环终止或者开始条件

for(表达式1;表达式2;表达式3) {

循环体，执行语句

}

注意：写for循环之前一定要先确定开始循环的条件，终止的条件，每次循环执行的操作

1.执行表达式1：var i=1;

2.执行表达式2,：i<=20;判断是否成立，

3.执行循环体：alert(‘跑了’+i+‘圈’);

4.执行表达式3：i++,i=2

2.执行表达式2，i<=20;判断是否成立

……一直循环2，3，4这三步，直到表达式2的结果为false，就结束循环

<script type="text/javascript">
			// 模拟跑步的操作
			for(var i=1;i<=20;i++) {
				alert('跑了'+i+'圈');
			}
		</script>

练习：

求1-10的和

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			// 1-10的和
			var sum = 0;
			for (var i = 1; i <= 10; i++) {
				// 1+2+3+4+5+6+7+8+9+10=55
				sum += i;
			}
			alert('sum：' + sum);
			alert('1-10的平均数：'+sum/10);
		</script>
	</head>
	<body>
	</body>
</html>

练习：求1-100中所有的奇数的和，和所有偶数的和

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			var oddnum = 0;
			var evennum = 0;
			for (var i = 1; i <= 100; i++) {
				if (i % 2 == 0) {
					evennum += i;
				} else {
					oddnum += i;
				}
			}
			alert('100以内所有的偶数和：' + evennum);
			alert('100以内所有的奇数和：' + oddnum);
		</script>
	</head>
	<body>
	</body>
</html>

嵌套循环：在一些特殊的场景下，我们可能一个for循环无法实现效果，需要在for循环中套入for循环

练习：打印出九九乘法表（必要掌握）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			document.write("<h1>九九乘法表</h1>");
			for(var x=1;x<=9;x++) {
				for(var y=1;y<=x;y++) {
					document.write(x+'*'+y+'='+(x*y));
					document.write("&nbsp&nbsp");
				}
				document.write("<br/>");
			}
		</script>
	</head>
	<body>
	</body>
</html>

while循环

语法：

while(循环条件) {

循环体

}

while循环的弊端：变量的申明在循环的外面，循环结束变量还在

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			var run = 1;
			while(run<10) {
				alert("跑了"+run+'圈');
				run++;
			}
		</script>
	</head>
	<body>
	</body>
</html>

do {

循环体

}while(循环条件)

不管while中的表达式是否成立，do中的循环体都会先执行一次

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			// 跑10圈之后就结束
			var run = 1;
			do {
				alert("跑了"+run+'圈');
				run++;
			}while(run<11)
		</script>
	</head>
	<body>
	</body>
</html>

练习：

1.1-100的和

2.1-100的和的平均数

3.1-100的所有偶数和

4.1-100的所有奇数和

5.1-100的能被4整除的数的和

for循环

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			// 1-100的和
			var sum = 0;
			var oddnum = 0;
			var evennum = 0;
			var sumf = 0;
			// for
			for (var i = 1; i <= 100; i++) {
				sum += i;
				if (i % 2 == 0) {
					evennum += i;
				} else {
					oddnum += i;
				}
				if (i % 4 == 0) {
					sumf += i;
				}
			}

			alert('1-100的和为:\n' + sum);
			alert('1-100的平均值:\n' + (sum / 100));
			alert("1-100的所有偶数和:\n" + evennum);
			alert("1-100的所有奇数和:\n" + oddnum);
			alert("1-100的能被4整除的数的和:\n" + sumf);
		</script>
	</head>
	<body>
	</body>
</html>

while循环

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>while</title>
		<script type="text/javascript">
			// 1-100的平均值
			var sum = 0;
			var oddnum = 0;
			var evennum = 0;
			var sumf = 0;
			var i=1;
			while (i<=100){
				// 1-100的和
				sum+=i;
				if (i % 2 == 0) {
					evennum += i;
				} else {
					oddnum += i;
				}
				if (i%4==0) {
					sumf+=i;
				}
				i++;
			}
			alert('1-100的和为:\n' + sum);
			alert('1-100的平均值:\n' + (sum / 100));
			alert("1-100的所有偶数和:\n" + evennum);
			alert("1-100的所有奇数和:\n" + oddnum);
			alert("1-100的能被4整除的数的和:\n" + sumf);
		</script>
	</head>
	<body>
	</body>
</html>

JS函数

把具备一定功能或者一定业务逻辑的代码放在一起，给它取一个名字，这个有名字的代码块就叫做函数，通过函数我们可以大大的减少重复的代码，减少代码量

函数语法声明：(function：函数的关键词，用来描述函数的)

1.变量形式的声明：

var fun = function() {

执行内容;

}

2.函数形式的声明：

function fun2() {

执行内容;

}

函数的调用

直接在js的代码块中，通过函数名()调用，若是不调用，函数就只加载，不执行

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			var fun= function() {
				alert("变量声明的函数");
			}
			function c() {
				alert('函数形式的声明');
			}
			fun();
			c();
		</script>
	</head>
	<body>
	</body>
</html>

练习：编写一个函数，该函数打印九九乘法表，然后再调用该函数

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			function m() {
				for(var x=1;x<=9;x++) {
					for(var y=1;y<=x;y++) {
						document.write(x+'*'+y+'='+(x*y));
						document.write("&nbsp&nbsp&nbsp&nbsp");
					}
					document.write("<br/><br/>")
				}
			}
			m();
		</script>
	</head>
	<body>
		
	</body>
</html>

函数种类：

1.按照参数类型划分

无参函数和有参函数

无参函数：函数的方法中没有传递任何参数，无需传递数据，直接调用

		var fun= function() {
		}

有参函数：函数的方法中需要传递参数，在调用时需要传递一个参数给函数

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			var run = function(num) {
				alert("跑了"+num+"圈");
			}
			run(5);
			run(10);
		</script>
	</head>
	<body>
	</body>
</html>

形参和实参：

形参：定义一个范型的参数，没有实际的值，可以是任何类型

实参：在函数中实际使用的参数值。

练习：班上有5位同学，要求编写一个函数记录每个同学的姓名，分数

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			function result(n,f) {
				document.write(n+'的分数为:&nbsp&nbsp&nbsp&nbsp'+f+"<br/>");
			}
			result("张三",88);
			result("李四",89);
			result("王五",80);
			result("周六",85);
			result("田七",87);
		</script>
	</head>
	<body>
	</body>
</html>

2.按照返回值区分

有返回值的函数：调用函数处理完毕之后，函数返回一个数据。

函数的返回值通过return关键字返回

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			// 编写一个函数，比较之间的最大数
			function max(num1,num2) {
				if(num1>num2) {
					return num1;
				}else if(num1<num2) {
					return num2
				}else {
					return num1;
				}
			}
			var maxnum = max(10,10);
			alert(maxnum);
		</script>
	</head>
	<body>
	</body>
</html>

无返回值的函数：调用函数处理完毕之后，函数不返回任何数据。