本站電子書

您可以在這些電子書店找到本站電子書: Google Play 圖書iBooks StoreHyReadReadmooPubu
===>>>本站推出學習遊戲意見調查<<<===《如何自學程式設計》入選 Google Play 台灣地區2016年度最佳書籍

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 月 -->


瀏覽器開啟後執行,如下



此例中,由於第 6 行
if (a == b) {


由於變數 a 不等於變數 b ,所以程式會跳到執行 else 的部份執行。


中英文術語對照
選擇結構selection structure
if 陳述if statement
關鍵字keyword
運算式expression
條件condition
區塊block
瀏覽器broswer
字串string






沒有留言: