JS基本语法（一）-----if语句的用法

84 阅读 0 评论 56 点赞

我是靠谱客的博主幽默机器猫，这篇文章主要介绍JS基本语法（一）-----if语句的用法，现在分享给大家，希望可以做个参考。

1、流程控制

JS程序一般是按照书写的顺序来执行的，这种运行称为顺序运行，是程序流的默认方向。与顺序运行不同的是另一种的运行将程序流转换到脚本的另外的部分，也就是说不按照程序流运行下一条语句，而是实现别的语句，为了试这个脚本可以使用，这个控制的转换就是一逻辑的方式运行，结果的返回值“true”还是“false”决定程序的流向。

程序的三大结构(所有的语言都有的)

三大结构一般使用的时候是相互嵌套的

1：顺序结构：代码从上往下依次执行

2：选择（条件）结构

3：循环结构

if选择语句：

单一选择结构：

if(条件){

代码块；

}

二路选择结构：

if(条件){

代码块；

}else{

代码块2；

}

如果if、else代码块的语句只有一句话则可以省略花括号，如果代码块中有多条语句则不能省略花括号

三目运算符：（简写的二路选择结构）

表达式1 判断语句表达式2 ？结果1：结果2

如果if（）{}else{}有多条语句，就不能使用三目运算符

多路选择结构：

if(条件1) {

结果1；

}else if(条件2){

结果2；

}

......

else{

结果n；

}

例1：比较两个数的大小

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	请输入第一个数：<input type="text" id="txt1"/><br/>
	请输入第二个数：<input type="text" id="txt2"/><br/>
	<input type="button" id="btn" value="比较" />
</body>
</html>
<script type="text/javascript">
function $(id){
	return document.getElementById(id);
}
window.onload = function(){
	$("btn").onclick = function(){
		var num1 = $("txt1").value;
		var num2 = $("txt2").value;
		if(num1>num2){
			alert("第一个数大于第二个数！");
		}else if(num1<num2){
			alert("第一个数小于第二个数！");
		}else{
			 alert("两个数相等！");
		}
	}
}
</script>

例2：判断一个年份是不是闰年

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	请输入您要查询的年份：<input type="text" id="txt"/>
	<input type="button" id="btn" value="判断" />
</body>
</html>
<script type="text/javascript">
// 判断一个年份是不是闰年
// 闰年的概念：四年一闰，百年不闰，四百年一闰
// 翻译成数学问题就是判断这一年能被4整除，且不能被100整除或者能被400整除
// 翻译成计算机语言就是如下代码
window.onload = function(){
	// 当点击判断按钮的时候获取输入的年份并且进行判断
	document.getElementById("btn").onclick = function(){
		var year = document.getElementById("txt").value;
		if((year%4==0 &&　year%100!=0)|| year%400==0){
			alert("这一年是闰年！");
		}else{
			alert("这一年是平年！");
		}
	}
}
</script>

例3：输入成绩判断成绩的等级

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	请输入成绩：<input type="text" id="txt"/>
	<input type="button" id="btn" value="查询" />
</body>
</html>
<script type="text/javascript">
// 判断成绩等级
// 60分以下：E
// 60-70：   D
// 70-80：   C
// 80-90：   B
// 90-100：  A
window.onload = function(){
	document.getElementById("btn").onclick = function(){
		var score = document.getElementById("txt").value;
		if(score>=90 && score<=100){
			alert("您的成绩等级是A！");
		}else if(score>=80 && score<90){
			alert("您的成绩等级是B！");
		}else if(score>=70 && score<80){
			alert("您的成绩等级是C！");
		}else if(score>=60 && score<70){
			alert("您的成绩等级是D！");
		}else if(score>=0 && score<60){
			alert("您的成绩等级是E！");
		}else{
			alert("请输入合法的成绩！");
		}
	}
}
</script>