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

最新推荐文章于 2025-04-28 20:01:28 发布

原创最新推荐文章于 2025-04-28 20:01:28 发布 · 5.3k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#javascript

javaScript 专栏收录该内容

29 篇文章

订阅专栏

js代码块：

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

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

流程控制语句：

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

语句分类：

条件判断语句
条件分支语句
循环语句

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>
		 
		<!--输出小白成绩
		当成绩为100，'奖励一辆车模型'
		当成绩为[80-90]，'奖励一台手机'
		当成绩为[60-80]，'奖励一本书'
		其他时，'没有奖励'-->
		 
		<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>

结果演示：

<!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>

结果：

<!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>

结果：

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>