前端---js（自学笔记7）（js代码块、流程控制语句、if练习）

痛定思痛。 2023-02-22 08:17 12阅读 0赞

# js代码块： #

在js中，我们的程序是由一条一条的语句构成的， 是按照从上到下的顺序进行执行的。

在js中我们可以用\{\}来为语句进行分组，同一个\{ \}里的语句我们称作为一组，他们要么同时执行，要么同时不执行。一个\{ \}中的语句我们也称作一个代码块。js的代码块，\{ \}只具有分组作用，没有其他作用。

# 流程控制语句：  #

因为我们的执行语句是从上到下一行一行执行的， 我们可以通过流程控制语句控制我们执行的流程，可以使程序更具一定条件来选择执行。

语句分类：

1.  条件判断语句
2.  条件分支语句
3.  循环语句

**1.条件判断语句： **

使用条件判断语句可以在执行某个语句前进行判断，如果条件成立，则会执行，如果条件不成立，则不会执行。

if语句的语法：

方法一
    if（条件表达式）{
            语句...
    }

if语句在执行前，对条件表达式进行求值判断，如果条件表达式的值为true，则执行if后的语句。如果条件表达式的值为false，则不执行if后的语句。

if语句只能控制紧随其后的一条语句，如果想控制多条语句，则将他们放到代码块中。如上图语法；

方法二
    if（条件表达式）{
            语句1...
    }else{
            语句2...
    }

方法二：先对if语句进行条件表达式判断，如果条件表达式为true，则执行语句1。如果条件表达式为false，则执行else之后的语句。

方法三
    if（条件表达式）{
            语句1...
    }else if{
            语句2...
    }else if{
            语句3...
    }else{
            语句4...
    }

方法三：当执行该语句时，会从上到下依次对条件表达式进行判断执行，如果值为true，则执行当前语句。如果值为false，则继续向下判断，如果还不能满足，则执行最后一条else语句。

该语句中，只能执行一个代码块，当一个代码块执行完毕，直接结束语句。

### **if练习题：** ###

**prompt（）可以弹出一个提示框，该提示框中，会带有一个文本框。用户可以在文本框中输入一段内容，该函数需要一个字符串作为参数，该字符串会作为提示框的提示文字，并且prompt返回数值类型为string。**

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title>if 练习题</title>
    		 
    		
    		 
    		<script type="text/javascript">
    			var score =prompt("输入成绩（0-100）：");
    			if (score>100 || score<0 || isNaN(score)){
    				alert('不属于范围之内')
    			}else{
    				if(score==100){
    				alert('奖励一辆车模型')
    			}else if(score>80 && score <=99){
    				alert('奖励一台手机')	
    			}else if(score>60 && score<= 80){
    				alert('奖励一台手机')	
    			}else{
    				alert('没有奖励')
    			}
    			
    			}
    			
    		</script>
    	</head>
    	<body>
    	</body>
    </html>

** 结果演示：**

![20200702173436931.gif][]

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title>if 练习题</title>
    		<script type="text/javascript">
    //			相亲要求,是否能成功牵手
    //			高:180cm以上,富:1000万以上,帅:500以上;
    //			当三个条件同时满足,则'成功牵手',
    //			当三个条件有为真的时候,则'考虑中'
    //			当三个条件都不满足,则'牵手失败'
    			var height = prompt("请输入身高（CM）：");
    			var money = prompt("请输入财富（万）：");
    			var face = prompt("请输入长相（px）：");
    			
    			if(height>=180 && money>=100 && face>=500){
    				alert('成功牵手')
    			}else if(height>=180 || money>=100 || face>=500){
    				alert('考虑中')
    			}else {
    				alert('牵手失败')
    			}
    		</script>
    	</head>
    	<body>
    	</body>
    </html>

**结果：**

![2020070220554124.gif][]

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title>if 练习题</title>
    		<script type="text/javascript">
    //			编写程序,由键盘输入三个整数分别存入变量num1,num2,num3,
    //			对他们进行排序,并且从小到大输出
    			var num1 = +prompt("请输入第一数字：")
    			var num2 = +prompt("请输入第二数字：")
    			var num3 = +prompt("请输入第三数字：")
    			
    			if(num1<num2 && num1< num3){
    				if(num2>num3){
    					alert(num1+","+num2+","+num3)
    				}else{
    					alert(num1+","+num3+","+num2)
    				}
    				
    			}else if(num2<num1 && num2< num3){
    				if(num1>num3){
    					alert(num2+","+num3+","+num1)
    				}else{
    					alert(num2+","+num1+","+num3)
    				}
    				
    			}else {
    				if(num1>num2){
    					alert(num3+","+num2+","+num1)
    				}else{
    					alert(num3+","+num1+","+num2)
    				}
    				}
    
    
    		</script>
    	</head>
    	<body>
    	</body>
    </html>

** 结果：**

![20200702214025287.gif][]

**2.条件分支语句： **

条件分支语句switch：

语法：
    
    switch(条件表达式）{
    
    case 表达式；
    
             语句...
    
             break;
    
    case 表达式；
    
            语句...
    
            break;
    
    case 表达式；
    
           语句...
    
           break;
    
    default:      
    
            语句...
    
           break;
    
    }

**执行流程：**

执行流程是，先将case后的表达式，与switch后的条件语句进行全等比较，如果结果为true，则从当前case开始执行代码。每个case后边都有一个break，是因为当执行完case之后不执行后面的case。如果比较结果为false，则继续向下比较，如果比较结果都为false，则直接执行default后的语句。

switch与if有很多相似之处，使用switch也可以实现if的语句，使用if也可以实现switch语句，看自身要求。

### 练习题： ###

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title>switch练习</title>
    		<script type="text/javascript">
    //			成绩大于60,输出合格,低于60,输出不合格
    			var score = prompt("请输入成绩：")
    			switch(true){
    				case score>=60:
    				alert("合格")
    				break;
    				default:
    				alert("不合格")
    				break;
    			}
    		</script>
    	</head>
    	<body>
    	</body>
    </html>

![2020070222322443.gif][]

[20200702173436931.gif]: https://img-blog.csdnimg.cn/20200702173436931.gif
[2020070220554124.gif]: https://img-blog.csdnimg.cn/2020070220554124.gif
[20200702214025287.gif]: https://img-blog.csdnimg.cn/20200702214025287.gif
[2020070222322443.gif]: https://img-blog.csdnimg.cn/2020070222322443.gif