1. 程式人生 > >JS基本語法(一)-----if語句的用法

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:比較兩個數的大小
<!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:判斷一個年份是不是閏年

<!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:輸入成績判斷成績的等級
<!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>