回上頁 - 網頁JavaScript語法

007、for 迴圈

1、for迴圈

 

寫法：

<script>
$(document).ready(function(){

    for(宣告初始變數; 比較判斷式; 權值){
        //程式碼...
    }
});
</script>

2、範例：

<script>
$(document).ready(function(){
    //
    //從 n=0開始 ; 判斷是否 n<10 ; 結束一次for迴圈程式後，執行n++
    //
    for(let n=0; n<10; n++){
        document.write(n);
        //document.write(n+"<br>");
    }
});
</script>
結果：0123456789


<script>
$(document).ready(function(){

    for(let n=0; n<=10; n++){
        document.write(n);
    }
});
</script>
結果：012345678910


<script>
$(document).ready(function(){

    for(let n=1; n<10; n++){
        document.write(n);
    }
});
</script>
結果：123456789


<script>
$(document).ready(function(){

    for(let n=1; n<=10; n++){
        document.write(n);
    }
});
</script>
結果：12345678910


<script>
$(document).ready(function(){

    var n=3;
    for(n; n<10; n++){
        document.write(n);
    }
});
</script>
結果：3456789


<script>
$(document).ready(function(){
    //
    // 起始值 n=2; 判斷 n<=12; 權值設定為 n=n+2
    //
    for(let n=2; n<=12; n=n+2){
        document.write(n);
    }
});
</script>
結果：24681012


<script>
$(document).ready(function(){
    //
    // 起始值 n=1; 判斷 n<=11; 權值設定為 n=n+2
    //
    for(let n=1; n<=11; n=n+2){
        document.write(n);
    }
});
</script>
結果：1357911

3、計算 1~10 的總和

<script>
$(document).ready(function(){

    //宣告變數 sum 為總和
    var sum = 0;

    for(let n=1; n<=10; n++){

        //會執行10次，sum會由 1累計到 10
        sum = sum + n;
    }
    document.write(sum);

});
</script>
結果：55

4、輸出句子的每一個字

範例：指定變數 a 當做成績，判斷是否及格

<script>
$(document).ready(function(){

    //變數 str儲存了一個字串
    var str = "我在學程式語言";

    //字串或陣列都有個屬性 length，可以回傳元素數量
    document.write("句子總共：" + str.length + "個字。<br>");

    for(let n=0; n<str.length; n++){
        document.write(str[n]+"<br>");
    }

});
</script>
結果：
句子總共：7個字。
我
在
學
程
式
語
言

5、取出陣列每一個元素值

範例：指定變數 a 當做成績，判斷是否及格

<script>
$(document).ready(function(){

    //宣告一個陣列變數 arr
    var arr = ["dog","cat","bird","fish","monkey"];

    for(let n=0; n<arr.length; n++){
        document.write(arr[n]+"<br>");
    }

});
</script>
結果：
dog
cat
bird
fish
monkey

6、練習

範例：

<script>
$(document).ready(function(){

    
});
</script>
shape
shape