JavaScript 入門指南 - 選擇

JavaScript 入門指南 - 選擇

程式中的選擇 (selection) 就是依條件 (condition) 使程式有不同的執行方向，若條件為真，也就是 true ，程式就會跳過 false 的部份執行 true 的部份，反之亦然




選擇結構有單一選擇跟多重選擇，兩者都可使用 if 陳述 (if statement) ， if 為關鍵字 (keyword) 之一，若是多重選擇 if 須與 else 連用。單一選擇，也就是單獨使用 if 陳述如下

if (3 > 5) {
    document.write("喔，3大於5發生了！");
}

以上條件為 3 大於 5 ，如果 3 大於 5 為真，程式就會執行條件後的大括弧的程式區塊 (block) ，如果 3 大於 5 為假，程式自然跳過條件後的程式區塊，去找區塊後的第一個陳述 (statement) 執行。


if 與 else 連用，條件為真，執行 if 後的程式區塊，條件為假，就執行 else 後的程式區塊

if (3 > 5) {
    document.write("喔，3大於5發生了！");
}
else {
    document.write("還好，3沒有大於5！");
}

if-else 也可以多個連用，形成 if-else if-else 的多重選擇，最後的 else 表示以上皆非

if (3 > 5) {
    document.write("喔，3大於5發生了！");
}
else if (4 > 5) {
    document.write("喔，4大於5發生了！");
}
else if (5 > 5) {
    document.write("喔，5大於5發生了！");
}
else if (6 > 5) {
    document.write("6當然大於5哩！");
}
else {
    document.write("以上沒有符合的條件 :(");
}

我們將以上寫成完整的範例程式，如下

if (3 > 5) {
    document.write("喔，3大於5發生了！");
}
else if (4 > 5) {
    document.write("喔，4大於5發生了！");
}
else if (5 > 5) {
    document.write("喔，5大於5發生了！");
}
else if (6 > 5) {
    document.write("6當然大於5哩！");
}
else {
    document.write("以上沒有符合的條件 :(");
}

/* 《程式語言教學誌》的範例程式
   http://pydoing.blogspot.com/
   檔名：selectiondemo.js
   功能：示範 JavaScript 程式
   作者：張凱慶
   時間：西元 2012 年 12 月 */

我們用以下的 HTML 文件載入

<script language="JavaScript" src="selectiondemo.js"></script>

<!-- 《程式語言教學誌》的範例程式
      http://pydoing.blogspot.com/
      檔名：selectiondemo.html
      功能：示範 JavaScript 程式
      作者：張凱慶
      時間：西元 2012 年 12 月 -->

瀏覽器開啟如下



if-else if-else 多重選擇的缺點是需要很多個條件，程式需要做很多個條件判斷，因此另外有個 switch 陳述 (switch statement) ，條件為一個常數 (constant) 值，然後程式自動尋找符合的 case 。同樣的 switch 、 case 也都是關鍵字

switch (6) {
    case 3:
        document.write("選擇是3...");
        break;
         
    case 4:
        document.write("選擇是4...");
        break;
    
    case 5:
        document.write("選擇是3...");
        break;
         
    case 6:
        document.write("選擇是6..."); 
        break;
    
    default:
        document.write("以上沒有符合的條件 :(");
}

這裡， switch 後面的小括弧必須是常數值，此例中直接使用字面常數 (literal) ，也可以使用有常數值的變數 (variable) 。 case 後空一格，然後也是接常數值，通常就是直接填入符合情況的字面常數，注意，每個 case 的常數後都要接冒號。


case 底下的陳述，習慣上沒有用大括弧，而是用縮排 (indentation) 的方式表示屬於哪個 case 的工作。每個 case 最後，我們都有加上 break 陳述 (break statement) ，這是中斷跳出執行的意思，就是說，這個 case 符合並且執行了 case 所屬的工作，到此跳出 switch-case 的範圍，程式繼續執行switch 大括弧後的陳述。


switch-case 最下面有個 default ， default 就是預設情況，如果以上皆非就會執行 default 的工作，這跟 if-else if-else 最後的 else 的用法相同。但是，如果 case 後沒有 break ，每一次執行 default 都會被執行。同樣的， break 與 default 也都是關鍵字之一。


我們將此例寫成完整的範例程式，如下

switch (6) {
    case 3:
        document.write("選擇是3...");
        break;
         
    case 4:
        document.write("選擇是4...");
        break;
    
    case 5:
        document.write("選擇是3...");
        break;
         
    case 6:
        document.write("選擇是6..."); 
        break;
    
    default:
        document.write("以上沒有符合的條件 :(");
}

/* 《程式語言教學誌》的範例程式
   http://pydoing.blogspot.com/
   檔名：switchdemo.js
   功能：示範 JavaScript 程式
   作者：張凱慶
   時間：西元 2012 年 12 月 */

我們用以下的 HTML 文件載入

<script language="JavaScript" src="switchdemo.js"></script>

<!-- 《程式語言教學誌》的範例程式
      http://pydoing.blogspot.com/
      檔名：switchdemo.html
      功能：示範 JavaScript 程式
      作者：張凱慶
      時間：西元 2012 年 12 月 -->

瀏覽器開啟如下



複合陳述 (compound statement) 除了選擇結構 (selection structure) 還有重複結構 (repetition structure) ，重複結構也被稱為迴圈 (loop) ，接下來我們就來看看如何使用迴圈吧！

中英文術語對照
選擇	selection
條件	condition
if 陳述	if statement
關鍵字	keyword
區塊	block
陳述	statement
編譯	compile
switch 陳述	switch statement
常數	constant
字面常數	literal
變數	variable
縮排	indentation
break 陳述	break statement
複合陳述	compound statement
選擇結構	selection structure
重複結構	repetition structure
迴圈	loop

您可以繼續參考

基礎篇

• 認識 JavaScript 語言


• 如何執行 Javascript 程式


• 資料型態與變數


• 變數命名規則


• 運算式與陳述


• 選擇


• 迴圈


• 函數


• 物件

相關目錄

回 JavaScript 入門指南
回 JavaScript 教材
回首頁

參考資料

https://developer.mozilla.org/en-US/docs/JavaScript/Guide/Statements
http://www.w3schools.com/JS/js_if_else.asp
http://www.w3schools.com/JS/js_switch.asp
http://www.tutorialspoint.com/javascript/javascript_ifelse.htm
http://www.tutorialspoint.com/javascript/javascript_switch_case.htm

訂閱：
張貼留言 (Atom)

window.___gcfg = { 'lang': 'zh-TW' };