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);
~~~
運行的結果為：
- 前言
- HTML學習1：Dreamweaver8的安裝
- HTML學習2：初識HTML
- HTML學習3：常用標簽之文本標簽
- HTML學習4：常用標簽之列表標簽
- HTML學習5：常用標簽之圖像標簽
- HTML學習6：常用標簽之超鏈接標簽
- HTML學習7：常用標簽之表格標簽
- HTML學習8：常用標簽之框架標簽
- HTML學習9：常用標簽之表單標簽
- HTML學習10：表單格式化
- HTML學習11：HTTP 方法
- HTML學習12：其他常見標簽之頭標簽
- HTML學習13：其他常見標簽之體標簽
- 輕松學習JavaScript一：為什么學習JavaScript
- 輕松學習JavaScript二：JavaScript語言的基本語法要求
- 輕松學習JavaScript三：JavaScript與HTML的結合
- 輕松學習JavaScript四：JS點擊燈泡來點亮或熄滅這盞燈的網頁特效映射出JS在HTML中作用
- 輕松學習JavaScript五：JavaScript的變量和數據類型
- 輕松學習JavaScript六：JavaScript的表達式與運算符
- 輕松學習JavaScript七：JavaScript的流程控制語句
- 輕松學習JavaScript八：JavaScript函數
- 輕松學習JavaScript九：JavaScript對象和數組
- 輕松學習JavaScript十：JavaScript的Date對象制作一個簡易鐘表
- 輕松學習JavaScript十一：JavaScript基本類型(包含類型轉換)和引用類型
- 輕松學習JavaScript十二：JavaScript基于面向對象之創建對象(一)
- 輕松學習JavaScript十二：JavaScript基于面向對象之創建對象(二)
- 輕松學習JavaScript十三：JavaScript基于面向對象之繼承(包含面向對象繼承機制)
- 輕松學習JavaScript十四：JavaScript的RegExp對象(正則表達式)
- 輕松學習JavaScript十五：JavaScript之BOM簡介
- 輕松學習JavaScript十六：JavaScript的BOM學習(一)
- 輕松學習JavaScript十七：JavaScript的BOM學習(二)
- 輕松學習JavaScript二十九：JavaScript中的this詳解
- CSS基礎學習一：CSS概述
- CSS基礎學習二：如何創建 CSS
- CSS基礎學習三：CSS語法
- CSS基礎學習四：元素選擇器
- CSS基礎學習五：類選擇器
- CSS基礎學習六：id選擇器
- CSS基礎學習七：屬性選擇器
- CSS基礎學習八：派生選擇器
- CSS基礎學習九：偽類
- CSS基礎學習十：偽元素
- CSS基礎學習十一：選擇器的優先級
- CSS基礎學習十二：CSS樣式
- CSS基礎學習十三：盒子模型
- CSS基礎學習十四：盒子模型補充之display屬性設置
- CSS基礎學習十五：盒子模型補充之外邊距合并
- CSS基礎學習十六：CSS盒子模型補充之border-radius屬性
- CSS基礎學習十七：CSS布局之定位
- CSS基礎學習十八：CSS布局之浮動
- CSS基礎學習十九：CSS布局之圖文混排，圖像簽名，多圖拼接和圖片特效
- DIV+CSS實操一：經管系網頁總體模塊布局
- DIV+CSS實操二：經管系網頁添加導航欄和友情鏈接欄
- DIV+CSS實操三：經管系網頁內容模塊添加標題欄和版權信息模塊
- DIV+CSS實操四：經管系網頁內容模塊內容添加(一)
- DIV+CSS實操五：經管系網頁內容模塊內容添加(二)
- DIV+CSS實操六：經管系網頁添加導航欄下拉菜單
- DIV+CSS實操七：中文系內容模塊控制文本不換行和超出指定寬度后用省略號代替
- JS中實現字符串和數組的相互轉化