JavaScript Loops

明天要考loop,趕快複習...

有4種loop kinds:

1. for loop
2. for/in loop (用於loop through 物件的屬性)
3. while loop
4. do/while loop (while loop的變型;差別是先做程式區塊的運行,再看看是否符合條件)


為何要用loop?

  <p id="demo"></p>

  var cars = ["BMW", "Volvo", "Saab", "Ford", "Fiat", "Audi"];
var text = "";
text += cars[0] + "<br>";
text += cars[1] + "<br>";
text += cars[2] + "<br>";
text += cars[3] + "<br>";
text += cars[4] + "<br>";
text += cars[5] + "<br>";
document.getElementById("demo").innerHTML = text;


將上面用for loop做:

var cars = ["BMW", "Volvo", "Saab", "Ford", "Fiat", "Audi"];
var text = "";
var i;
for (i = 0; i < cars.length; i++) {
text += cars[i] + "<br>";
}
document.getElementById("demo").innerHTML = text;



另外, 舉個while loop 和 do/while loop例子:


<p id="demo"></p>

while loop:

  var text = "";
var i = 0;
while (i < 7) {
text += "<br>The number is " + i;
i++;
}
document.getElementById("demo").innerHTML = text;


do/while loop:

var text = "";
var i = 0;

do {
text += "<br>The number is " + i;
i++;
}
while (i < 7);

document.getElementById("demo").innerHTML = text;


另外, 舉個for/in loop:

  <p id="demo"></p>

  var txt = "";
var person = {
fname: "John",
lname: "Doe",
age: 25
};
var x;
for (x in person) {
txt += person[x] + " ";
}

document.getElementById("demo").innerHTML = txt;



應用: 1+ 2 + ... + 100=?

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

<script>

function run() {

var c = document.getElementById("content");
var n = document.createElement("p");
var sum = 0;
var i;

for (i = 1; i <= 100; i++) {
sum += i;
}

var message = "1 + 2 + .... + 99 + 100= " + sum;
n.appendChild(document.createTextNode(message));
c.appendChild(n);

}

</script>

//1 + 2 + .... + 99 + 100= 5050



應用: 巢狀迴圈或又稱雙重迴圈 -- 九九乘法表:

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

<script>

    function run() {

    var c = document.getElementById("content");
    var n = document.createElement("p");
    var i, j;
    var message;

    for (i = 1; i <= 9; i++) {
    for (j = 1; j <= 9; j++) {
    n.appendChild(document.createTextNode(i * j + " "));
    c.appendChild(n);
    }
    n.appendChild(document.createElement("br"));
    c.appendChild(n);
    }
    }

</script>


如果想看九九乘法表可以如何變化:

http://pydoing.blogspot.tw/2010/12/javascript-for.html