程式語言教學誌 FB, YouTube: PYDOING: JavaScript 快速導覽

JavaScript 中最簡單的選擇結構 (selection structure) 為單一個 if 陳述 (if statement) ，通常在關鍵字 (keyword) if 後接一個小括弧，該小括弧內的運算式 (expression) 即為條件 (condition) 。形式如下

若運算式的結果為 true ，也就是條件為真，其後用大括弧圍起來的程式區塊 (block) 便會執行，而若運算式的結果為 false ，這樣一來條件就為假，程式會跳過大括弧，尋找右大括號 } 後的第一個陳述執行。

如果不用大括號圍住 if 陳述後作為分流的程式碼，通常編譯器只接受一行，因此為避免程式執行的歧異，或非預期的錯誤，養成使用大括弧會是好習慣。

以下程式示範使用單一的 if 陳述

function run() {
    var c = document.getElementById("content");
    var n = document.createElement("p");
    var message = "Welcome to my world!";
    var a = "h";
    var b = "h";
    
    if (a == b) {
        n.appendChild(document.createTextNode(message));
        c.appendChild(n);
    }
}

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

利用以下的 HTML 文件載入

<html>

<head>
<title>JavaScript Demo</title>
<script src="run20.js" type="text/javascript"></script>
</head>

<body>
<input id="b" type="button" value="RUN" onclick="run();">
<div id="content"></div>
</body>

</html>

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

瀏覽器 (broswer) 開啟後執行，如下

程式的第 8 行

if (a == b) {

由於變數 a 及變數 b 裡頭所儲存的值都是小寫字母 h 的字串 (string) ，所以條件為真， if 陳述後頭大括弧的陳述便會執行。

if 也可以跟關鍵字 else 連用，這樣一來， if 的條件為假時，程式跳過 if 陳述後頭的大括弧，而去找 else 後頭大括弧的陳述來執行。

以下程式示範 if-else 陳述的使用

function run() {
    var c = document.getElementById("content");
    var n = document.createElement("p");
    var message = "";
    var a = "h";
    var b = "k";
    
    if (a == b) {
        message = "Welcome to my world!";
    }
    else {
        message = "How do you do?";
    }
    
    n.appendChild(document.createTextNode(message));
    c.appendChild(n);
}

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

利用以下的 HTML 文件載入

<html>

<head>
<title>JavaScript Demo</title>
<script src="run21.js" type="text/javascript"></script>
</head>

<body>
<input id="b" type="button" value="RUN" onclick="run();">
<div id="content"></div>
</body>

</html>

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

瀏覽器開啟後執行，如下