DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 關於JavaScript >> 詳解JavaScript的流程控制語句
詳解JavaScript的流程控制語句
編輯:關於JavaScript     

 JS的核心ECMAScript規定的流程控制語句和其他的程序設計語言還是蠻相似的。我們選擇一些實用的例子來看
一下這些語句。順序結構我們在這裡就不再提到,直接說條件和循環以及其他語句。
一、條件選擇結構
       條件選擇語句用於基於不同的條件來執行不同的動作,通常在寫代碼時,總是需要為不同的決定來執行不同的
動作,可以在代碼中使用條件語句來完成該任務。
       在JavaScript中,我們可使用以下條件語句:
if 語句:只有當指定條件為true時,使用該語句來執行代碼

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title>JS流程控制語句</title> 
</head> 
 
<body> 
 
<p>如果時間早於 20:00,會獲得問候 "Good day"。</p> 
 
<button onclick="myFunction()">點擊這裡</button> 
 
<p id="demo"></p> 
 
<script type="text/javascript"> 
var time=new Date().getHours(); 
document.write("當前北京時間:"+time); 
function myFunction() 
{ 
 var x=""; 
 if (time<20) 
 { 
  x="Good day"; 
 } 
 document.getElementById("demo").innerHTML=x; 
} 
</script> 
 
</body> 
</html> 

       運行的結果為:

if...else語句:當條件為true時執行代碼,當條件為 false 時執行其他代碼

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title>JS流程控制語句</title> 
</head> 
 
<body> 
 
<p>如果時間早於 20:00,會獲得問候 "Good day"。如果時間晚於 20:00,會獲得問候 "Good evening"。</p> 
 
<button onclick="myFunction()">點擊這裡</button> 
 
<p id="demo"></p> 
 
<script type="text/javascript"> 
var time=new Date().getHours(); 
document.write("當前北京時間:"+time); 
function myFunction() 
{ 
var x=""; 
if (time<20) 
 { 
 x="Good day"; 
 } 
else 
 { 
 x="Good evening"; 
 } 
document.getElementById("demo").innerHTML=x; 
} 
</script> 
 
</body> 
</html> 

       運行的結果為:

 if...else if....else 語句:使用該語句來選擇多個代碼塊之一來執行

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title>JS流程控制語句</title> 
</head> 
 
<body> 
 
<p>如果時間早於 10:00,會獲得問候 "Good morning"。</p> 
<p>如果時間早於 20:00,會獲得問候 "Good day"。</p> 
<p>如果時間晚於 20:00,會獲得問候 "Good evening"。</p> 
 
<button onclick="myFunction()">點擊這裡</button> 
 
<p id="demo"></p> 
 
<script type="text/javascript"> 
var time=new Date().getHours(); 
document.write("當前北京時間:"+time); 
function myFunction() 
{ 
var x=""; 
if (time<10) 
 { 
 x="Good morning"; 
 } 
else if (time<20) 
 { 
 x="Good day"; 
 } 
else 
 { 
 x="Good evening"; 
 } 
document.getElementById("demo").innerHTML=x; 
} 
</script> 
 
</body> 
</html> 

       運行的結果為:

 

switch語句: 使用該語句來選擇多個代碼塊之一來執行。switch 語句用於基於不同的條件來執行不同的動作

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title>JS流程控制語句2</title> 
</head> 
 
<body> 
<p>點擊下面的按鈕來顯示今天是周幾:</p> 
 
<button onclick="myFunction()">點擊這裡</button> 
 
<p id="demo"></p> 
 
<script type="text/javascript"> 
var d=new Date().getDay(); 
document.write("今天的星期代表數字:"+d); 
function myFunction() 
{ var x; 
 switch (d) 
 { 
 case 0: 
 x="Today it's Sunday"; 
 break; 
 case 1: 
 x="Today it's Monday"; 
 break; 
 case 2: 
 x="Today it's Tuesday"; 
 break; 
 case 3: 
 x="Today it's Wednesday"; 
 break; 
 case 4: 
 x="Today it's Thursday"; 
 break; 
 case 5: 
 x="Today it's Friday"; 
 break; 
 case 6: 
 x="Today it's Saturday"; 
 break; 
 } 
 document.getElementById("demo").innerHTML=x; 
} 
</script> 
</body> 
</html> 

       運行的結果:

 default關鍵字的使用

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title>JS流程控制語句2</title> 
</head> 
 
<body> 
<p>點擊下面的按鈕來顯示今天是周幾:</p> 
 
<button onclick="myFunction()">點擊這裡</button> 
 
<p id="demo"></p> 
 
<script type="text/javascript"> 
var d=new Date().getDay(); 
document.write("今天的星期代表數字:"+d); 
function myFunction() 
{ var x; 
 switch (d) 
 { 
 case 6: 
 x="Today it's Saturday"; 
 break; 
 case 0: 
 x="Today it's Sunday"; 
 break; 
 default: 
 x="Looking forward to the Weekend"; 
 } 
 document.getElementById("demo").innerHTML=x; 
} 
</script> 
</body> 
</html> 

      運行的結果為:

二、循環結構
      循環可以將代碼塊執行指定的次數。
      JavaScript支持不同類型的循環:
(1)for語句:循環代碼塊一定的次數

for(var box=1;box<=10;box++) 
{ 
 document.write("box="+box+"<br/>"); 
} 

      運行的結果為:

(2)for...in語句: 循環遍歷對象的屬性

var box={ 
 name:"張三", 
 age:24, 
 sex:"男" 
 }; 
for(x in box) 
{ 
 document.write(box[x]+"<br/>"); 
} 

運行的結果為:

(3)while語句:當指定的條件為 true 時循環指定的代碼塊。先判斷,再執行語句,這種比較實用。

var box=1; 
while(box<=5) 
{ 
 document.write("box="+box+"<br/>"); 
 box++; 
} 

      運行的結果為:

 (4)do...while - 同樣當指定的條件為 true 時循環指定的代碼塊。先執行一次,再判斷

var box=1; 
do{ 
 document.write("box="+box+"<br/>"); 
 box++; 
}while(box<=10) 

      運行的結果為:

三、其他語句
(1)break語句:用於跳出循環。

for(var box=1;box<=10;box++) 
 { 
 if(box==5) 
 { 
 break;//強制退出整個循環 
 } 
 document.write("box="+box+"<br/>"); 
 } 

運行的結果為:

      執行到第四次循環時不再繼續執行,跳出了真個循環,,輸出的少了box=5以後的循環。
(2)continue語句:用於跳過循環中的一個迭代。

for(var box=1;box<=10;box++) 
{ 
 if(box==5) 
 { 
 continue;//退出當前循環,還會繼續執行後面的循環 
 } 
 document.write("box="+box+"<br/>"); 
} 

運行的結果為:

執行到第四次循環時,跳出第五次循環,繼續向下面執行,輸出的少了box=5。
(3)with語句:將代碼的作用域設置到一個特定的對象中
      先來看一般我們是怎麼樣輸出對象的屬性的值的:

 var box={ 
 name:"張三", 
 age:24, 
 sex:"男" 
 }; 
 var n=box.name; 
 var a=box.age; 
 var s=box.sex; 
 document.write(n+"<br/>"); 
document.write(a+"<br/>"); 
document.write(s); 

      運行的結果為:

      改用with語句來寫:

 var box={ 
 name:"張三", 
 age:24, 
 sex:"男" 
 }; 
 with(box){ 
 var n=name; 
 var a=age; 
 var s=sex; 
 }; 
document.write(n+"<br/>"); 
document.write(a+"<br/>"); 
document.write(s); 

運行的結果為:

從三大方面介紹了JavaScript的流程控制語句,希望大家仔細閱讀,數量掌握JavaScript流程控制語句的使用方法。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved