くろひょうのwebデザインのお勉強帳

フェリカテクニカルアカデミー web制作科の受講生です。授業の要点、復習でつまづいた点などを記録し、レベルアップに励みます。

クリエイターになるための、お勉強の記録帳

[JavaScript]for文

指定した回数処理を繰り返す(while文との違い)

 

== 公式 ====================

for(変数の初期値;繰り返し条件;変数の増減){

  実行される処理

===========================

カウンタ変数名はi,j,k・・・ とするのが慣例

変数宣言はfor{}の中でも最初でもよい

 

【例題1】

<script>
  for ( i =1 ; i <= 5 ; I++ ) {
    console.log ( i + '回目' );
}
</script>

変数の初期値:1、
繰り返し条件:iが5になるまで繰り返し
変数の増減:1ずつ増える

iが5以下かどうか確認(true)→ コンソールに「i回目と」表示 
→ iが1増える iが5以下かどうか確認(true) → コンソールに「i回目と」表示 → iが6以上になる(false) → 終了

 

【例題2 和暦と西暦 対応表】 ※tableの中にJavascriptを組み込む

    <table>
        <tr><th>和暦(平成)</th><th>西暦</th></tr>
        <script>
            var i;
            for ( i = 1; i <= 30 ; i++ ) {   // 平成元年が「i」30年まで処理を繰り返す
                document.write ( '<tr><td>' + i + '</td>' ) ;
                document.write ( '<td>' + ( i + 1988 )+ '</td></tr>') ;
            }
        </script>
    </table>

  • tableタグがscriptタグを囲む

 

<表示結果>

f:id:pleasure10501:20150331210217p:plain


 【例題2 0~100までの偶数の合計】

<script>
var ans = 0 ;
function total() {
    for ( i = 2 ; i <= 100 ; i+=2 ) {
    ans += i ;
        console.log(ans);
        
    }
alert ('100までの偶数の合計は' + ans +'です');
}
</script>