JavaScript语句篇

男娘i 2021-11-02 07:32 309阅读 0赞

**目录**

1.代码块

2.流程控制语句

3.if语句

4.switch语句

5.循环语句

6.for循环语句

7.嵌套for循环

8.break和continue

--------------------

### 1.代码块 ###

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    		<script type="text/javascript">
    			
    			/*
    			 * 我们的程序是由一条一条语句构成的
    			 * 	语句是按照自上向下的顺序一条一条执行的
    			 * 	在JS中可以使用{}来为语句进行分组,
    			 * 		同一个{}中的语句我们称为是一组语句，
    			 * 		它们要么都执行，要么都不执行，
    			 * 		一个{}中的语句我们也称为叫一个代码块
    			 * 		在代码块的后边就不用再编写;了
    			 * 
    			 * 	JS中的代码块，只具有分组的的作用，没有其他的用途
    			 * 		代码块内容的内容，在外部是完全可见的
    			 */
    			{
    				var a = 10;	
    				alert("hello");
    				console.log("你好");
    				document.write("语句");
    			}
    			
    			
    			console.log("a = "+a);
    		
    			
    			
    			
    		</script>
    	</head>
    	<body>
    	</body>
    </html>

### 2.流程控制语句 ###

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    		<script type="text/javascript">
    			
    			/*
    			 * 流程控制语句
    			 * 	- JS中的程序是从上到下一行一行执行的
    			 * 	- 通过流程控制语句可以控制程序执行流程，
    			 * 		使程序可以根据一定的条件来选择执行
    			 *  - 语句的分类：
    			 * 		1.条件判断语句
    			 * 		2.条件分支语句
    			 * 		3.循环语句
    			 * 
    			 * 
    			 * 条件判断语句：
    			 * 	- 使用条件判断语句可以在执行某个语句之前进行判断，
    			 * 		如果条件成立才会执行语句，条件不成立则语句不执行。
    			 *  - if语句
    			 * 	- 语法一：
    			 * 		if(条件表达式){
    			 * 			语句...
    			 * 		}
    			 * 			
    			 * 		if语句在执行时，会先对条件表达式进行求值判断，
    			 * 		如果条件表达式的值为true，则执行if后的语句，
    			 * 		如果条件表达式的值为false，则不会执行if后的语句。
    			 * 			if语句只能控制紧随其后的那个语句,
    			 * 				如果希望if语句可以控制多条语句，
    			 * 				可以将这些语句统一放到代码块中
    			 * 			if语句后的代码块不是必须的，但是在开发中尽量写上代码块，即使if后只有一条语句
    			 * 			
    			 */
    			
    			var a = 25;
    			
    			if(a > 10 && a <= 20){
    				alert("a大于10，并且 a小于等于20");
    			}	
    			
    			
    		</script>
    	</head>
    	<body>
    	</body>
    </html>

### 3.if语句 ###

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    		<script type="text/javascript">
    			
    			/*
    			 * if语句
    			 * 	语法二:
    			 * 		if(条件表达式){
    			 * 			语句...
    			 * 		}else{
    			 * 			语句...
    			 * 		}
    			 * 
    			 * 	if...else...语句
    			 * 		当该语句执行时，会先对if后的条件表达式进行求值判断，
    			 * 			如果该值为true，则执行if后的语句
    			 * 			如果该值为false，则执行else后的语句
    			 * 
    			 * 	语法三：
    			 * 		if(条件表达式){
    			 * 			语句...
    			 * 		}else if(条件表达式){
    			 * 			语句...
    			 * 		}else if(条件表达式){
    			 * 			语句...
    			 * 		}else{
    			 * 			语句...
    			 * 		}
    			 * 
    			 * 		if...else if...else
    			 * 			当该语句执行时，会从上到下依次对条件表达式进行求值判断
    			 * 			如果值为true，则执行当前语句。
    			 * 			如果值为false，则继续向下判断。
    			 * 			如果所有的条件都不满足，则执行最后一个else后的语句
    			 * 			该语句中，只会有一个代码块被执行，一旦代码块执行了，则直接结束语句
    			 */
    			
    			var age = 50;
    			
    			/*if(age >= 60){
    				alert("你已经退休了~~");
    			}else{
    				alert("你还没退休~~~");
    			}*/
    			
    			age = 200;
    			
    			/*if(age > 100){
    				alert("活着挺没意思的~~");
    			}else if(age > 80){
    				alert("你也老大不小的了~~");	
    			}else if(age > 60){
    				alert("你也退休了~~");
    			}else if(age > 30){
    				alert("你已经中年了~~");
    			}else if(age > 17){
    				alert("你已经成年了");
    			}else{
    				alert("你还是个小孩子~~");
    			}*/
    			
    			age = 90;
    			
    			if(age > 17 && age <= 30){
    				alert("你已经成年了");
    			}else if(age > 30 && age <= 60){
    				alert("你已经中年了");
    			}else if(age > 60 && age <= 80){
    				alert("你已经退休了");
    			}else{
    				alert("你岁数挺大的了~~");
    			}
    			
    			
    		</script>
    	</head>
    	<body>
    	</body>
    </html>

### 4.switch语句 ###

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    		<script type="text/javascript">
    			/*
    			 * 条件分支语句也叫switch语句
    			 * 	语法：
    			 * 		switch(条件表达式){
    			 * 			case 表达式:
    			 * 				语句...
    			 * 				break;
    			 *  		case 表达式:
    			 * 				语句...
    			 * 				break;
    			 * 			default:
    			 * 				语句...
    			 * 				break;
    			 * 		}
    			 * 
    			 * 	执行流程：
    			 * 		switch...case..语句
    			 * 		在执行时会依次将case后的表达式的值和switch后的条件表达式的值进行全等比较，
    			 * 			如果比较结果为true，则从当前case处开始执行代码。
    			 * 				当前case后的所有的代码都会执行，我们可以在case的后边跟着一个break关键字，
    			 * 				这样可以确保只会执行当前case后的语句，而不会执行其他的case
    			 * 			如果比较结果为false，则继续向下比较
    			 * 			如果所有的比较结果都为false，则只执行default后的语句
    			 * 
    			 * 	switch语句和if语句的功能实际上有重复的，使用switch可以实现if的功能，
    			 * 		同样使用if也可以实现switch的功能，所以我们使用时，可以根据自己的习惯选择。
    			 */
    			
    			//根据num的值，输出对应的中文
    			
    			var num = 3;
    			
    			/*if(num == 1){
    				console.log("壹");
    			}else if(num == 2){
    				console.log("贰");
    			}else if(num == 3){
    				console.log("叁");
    			}*/
    			
    			num = "hello";
    			
    			switch(num){
    				case 1:
    					console.log("壹");
    					//使用break可以来退出switch语句
    					break;
    				case 2:
    					console.log("贰");
    					break;
    				case 3:
    					console.log("叁");
    					break;
    				default:
    					console.log("非法数字~~");
    					break;
    			}
    			
    		</script>
    	</head>
    	<body>
    	</body>
    </html>

### 5.循环语句 ###

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    		<script type="text/javascript">
    			
    			
    			/*
    			 * 向页面中输出连续的数字
    			 */
    			/*var n = 1;
    			document.write(n++ +"<br />");*/
    			
    			/*
    			 * 循环语句：
    			 * 	通过循环语句可以反复的执行一段代码多次
    			 * 
    			 * while循环
    			 * 	- 语法：
    			 * 		while(条件表达式){
    			 * 			语句...
    			 * 		}
    			 * 
    			 * 	- while语句在执行时，
    			 * 		先对条件表达式进行求值判断，
    			 * 			如果值为true，则执行循环体，
    			 * 				循环体执行完毕以后，继续对表达式进行判断
    			 * 				如果为true，则继续执行循环体，以此类推
    			 * 			如果值为false，则终止循环
    			 * 
    			 * do...while循环
    			 * 	- 语法：
    			 * 		do{
    			 * 			语句...
    			 * 		}while(条件表达式);
    			 * 
    			 * 	- 执行流程：
    			 * 		do...while语句在执行时，会先执行循环体，
    			 * 			循环体执行完毕以后，在对while后的条件表达式进行判断，
    			 * 			如果结果为true，则继续执行循环体，执行完毕继续判断以此类推
    			 * 			如果结果为false，则终止循环
    			 * 
    			 * 		实际上这两个语句功能类似，不同的是while是先判断后执行，
    			 * 			而do...while会先执行后判断，
    			 * 		do...while可以保证循环体至少执行一次，
    			 * 			而while不能
    			 */
    			var n = 1;
    			
    			//向这种将条件表达式写死为true的循环，叫做死循环
    			//该循环不会停止，除非浏览器关闭，死循环在开发中慎用
    			//可以使用break，来终止循环
    			/*while(true){
    				alert(n++);
    				
    				//判断n是否是10
    				if(n == 10){
    					//退出循环
    					break;
    				}
    				
    			}*/
    			
    			//创建一个循环，往往需要三个步骤
    			
    			//1.创初始化一个变量
    			var i = 11;
    			
    			//2.在循环中设置一个条件表达式
    			/*while(i <= 10){
    				//3.定义一个更新表达式，每次更新初始化变量
    				document.write(i++ +"<br />")
    				
    			}*/
    			
    			/*do{
    				document.write(i++ +"<br />");
    			}while(i <= 10);*/
    			
    			/*while(true){
    				alert(1);
    			}*/
    			
    		</script>
    	</head>
    	<body>
    	</body>
    </html>

### 6.for循环语句 ###

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    		<script type="text/javascript">
    			
    			/*
    			 * for语句，也是一个循环语句，也称为for循环
    			 * 	在for循环中，为我们提供了专门的位置用来放三个表达式：
    			 * 		1.初始化表达式
    			 * 		2.条件表达式
    			 * 		3.更新表达式
    			 * 
    			 *  for循环的语法：
    			 * 		for(①初始化表达式;②条件表达式;④更新表达式){
    			 * 			③语句...
    			 * 		}
    			 * 
    			 * 		for循环的执行流程：
    			 * 			①执行初始化表达式，初始化变量（初始化表达式只会执行一次）
    			 * 			②执行条件表达式，判断是否执行循环。
    			 * 				如果为true，则执行循环③
    			 * 				如果为false，终止循环
    			 * 			④执行更新表达式，更新表达式执行完毕继续重复②
    			 */
    			
    			//创建一个执行10次的while循环
    			//初始化表达式
    			/*var i = 0;
    			
    			//创建一个循环，定义条件表达式
    			while(i < 10){
    				//设置更新表达式
    				alert(i++);
    			}*/
    			
    			for(var i = 0 ; i < 10 ; i++ ){
    				alert(i);
    			}
    			
    			/*
    			 * for循环中的三个部分都可以省略，也可以写在外部
    			 * 	如果在for循环中不写任何的表达式，只写两个;
    			 * 	此时循环是一个死循环会一直执行下去，慎用
    			 * 	for(;;){
    					alert("hello");
    				}
    			 */
    			
    		</script>
    	</head>
    	<body>
    	</body>
    </html>

### 7.嵌套for循环 ###

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8" />
    		<title></title>
    		<script type="text/javascript">
    			
    			/*
    			 
    			 	通过程序，在页面中输出如下的图形：
    			 	
    			 	*      1   <1   i=0
    			 	**     2   <2   i=1
    			 	***    3   <3   i=2
    			 	****   4   <4   i=3
    			 	*****  5   <5   i=4
    			 	
    			 	*****
    			 	*****
    			 	*****
    			 	*****
    			 	*****
    			 	
    			 	***** 1   j<5(5-0)  i=0
    			 	****  2	  j<4(5-1)  i=1
    			 	***   3   j<3(5-2)  i=2
    			 	**    4   j<2(5-3)  i=3
    			 	*     5   j<1(5-4)  i=4
    			 	
    			 
    			 */
    			
    			//向body中输出一个内容
    			//document.write("*****<br />");
    			
    			//通过一个for循环来输出图形
    			//这个for循环执行几次，图形的高度就是多少
    			//它可以用来控制图形的高度
    			for(var i=0 ; i<5 ; i++){
    				
    				/*
    				 * 在循环的内部再创建一个循环，用来控制图形的宽度
    				 * 目前我们的外部的for循环执行1次，内部的就会执行5次
    				 * 内层循环可以来决定图形的宽度，执行几次图形的宽度就是多少
    				 */
    				/*for(var j=0 ; j<i+1 ; j++){
    					document.write("*   ");
    				}*/
    				for(var j=0 ; j<5-i ; j++){
    					document.write("*   ");
    				}
    				
    				//输出一个换行
    				document.write("<br />");
    				
    				
    			}
    			
    			
    			
    		</script>
    	</head>
    	<body>
    		
    	</body>
    </html>

### 8.break和continue ###

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    		<script type="text/javascript">
    			
    			/*
    			 * break关键字可以用来退出switch或循环语句
    			 * 	不能在if语句中使用break和continue
    			 * 	break关键字，会立即终止离他最近的那个循环语句
    			 */
    			
    			/*for(var i=0 ; i<5 ; i++){
    				console.log(i);
    				
    				if(i == 2){
    					break;
    				}
    				
    			}*/
    			
    			
    			/*for(var i=0 ; i<5 ; i++){
    				console.log("@外层循环"+i)
    				for(var j=0 ; j<5; j++){
    					break;
    					console.log("内层循环:"+j);
    				}
    			}*/
    			
    			
    			/*
    			 * 可以为循环语句创建一个label，来标识当前的循环
    			 * label:循环语句
    			 * 使用break语句时，可以在break后跟着一个label，
    			 * 	这样break将会结束指定的循环，而不是最近的
    			 */
    			
    			/*outer:
    			for(var i=0 ; i<5 ; i++){
    				console.log("@外层循环"+i)
    				for(var j=0 ; j<5; j++){
    					break outer;
    					console.log("内层循环:"+j);
    				}
    			}*/
    			
    			
    			/*
    			 * continue关键字可以用来跳过当次循环
    			 * 	同样continue也是默认只会对离他最近的循环循环起作用
    			 */
    			/*for(var i=0 ; i<5 ; i++){
    				
    				if(i==2){
    					continue;
    				}
    				
    				console.log(i);
    			}*/
    			
    			outer:
    			for(var i=0 ; i<5 ; i++){
    				
    				for(var j=0 ; j<5 ; j++){
    					
    					continue;
    					
    					console.log("-->"+j);
    					
    				}
    				
    				console.log("@--->"+i);
    			}
    			
    			
    		</script>
    	</head>
    	<body>
    	</body>
    </html>