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

迴圈 (loop) 是用來進行進行重複性的工作，典型的迴圈會進行下列三項基本任務

1. 控制變數初始設定

2. 迴圈結束條件測試

3. 調整控制變數的值

關鍵字 (keyword) do 與 while 構成 JavaScript 中迴圈的一種，常用於後測式的迴圈，意思是迴圈會先進行第一輪，然後才進行迴圈的結束條件測試，形式如下

類似 while 陳述， do-while 下方 while 後的小括號為結束條件測試，小括號後需接分號，另外有關控制變數的初始設定及調整，這都需要放在其它地方。

下例計算 1 到 100 所有整數的和，示範 do-while 迴圈的簡單使用

function run() {
    var c = document.getElementById("content");
    var n = document.createElement("p");
    var i = 1;
    var sum = 0;
    
    do {
        sum += i;
        i++;
    } while (i <= 100);
    
    message = "1 + 2 + .... + 99 + 100 = " + sum;
    n.appendChild(document.createTextNode(message));
    c.appendChild(n);
}

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

利用以下的 HTML 文件載入

<html>

<head>
<title>JavaScript Demo</title>
<script src="run31.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/
     檔名：jsexample34.html
     功能：示範 JavaScript 程式 
     作者：張凱慶
     時間：西元 2010 年 11 月 -->

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

迴圈也可以是巢狀的 (nested) ，所謂巢狀的迴圈是指迴圈中包含其他的迴圈，由於我們利用程式碼縮排 (indentation) 的方式，使該段程式碼凹陷進去，看似巢的樣子，故稱巢狀。

下例程式印出九九乘法表，就是利用兩個 do-while 迴圈，一個 do-while 迴圈之中包含另一個 do-while 迴圈

function run() {
    var c = document.getElementById("content");
    var n = document.createElement("p");
    var i = 1;
    var j = 1;
    
    do {
        j = 1;
        do {
            n.appendChild(document.createTextNode(i * j + " "));
            c.appendChild(n);
            j++;
        } while (j <= 9);
        
        n.appendChild(document.createElement("br"));
        c.appendChild(n);
        i++;
    } while (i <= 9);
}

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

利用以下的 HTML 文件載入

<html>

<head>
<title>JavaScript Demo</title>
<script src="run32.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/
     檔名：jsexample35.html
     功能：示範 JavaScript 程式 
     作者：張凱慶
     時間：西元 2010 年 11 月 -->

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

若利用關鍵字 break 則可以挑出迴圈，利用關鍵字 continue 則會跳過迴圈這一輪的執行，下例在印出九九乘法表的程式中加入了 break 與 continue 陳述

function run() {
    var c = document.getElementById("content");
    var n = document.createElement("p");
    var i = 1;
    var j = 1;
    
    do {
        if (i == 4) {
            i++;
            continue;
        }
        
        j = 1;
        do {
            if (j == 8) {
                break;
            }
            
            n.appendChild(document.createTextNode(i * j + " "));
            c.appendChild(n);
            j++;
        } while (j <= 9);
        
        n.appendChild(document.createElement("br"));
        c.appendChild(n);
        i++;
    } while (i <= 9);
}

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

利用以下的 HTML 文件載入

<html>

<head>
<title>JavaScript Demo</title>
<script src="run33.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/
     檔名：jsexample36.html
     功能：示範 JavaScript 程式 
     作者：張凱慶
     時間：西元 2010 年 11 月 -->

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