No7.for文を使ってみる

for文とは?

for文は処理をループするための制御構文です。
下記のような形で記述します。

for(初期値; ループ条件; 増減値) { 繰り返し処理; }

基本的には初期値はループをカウントするための値を書いて、増減値の箇所にその値の増減を書きます。
初期値と増減値は省略して書くこともできます。
ループ条件はループ処理が続く条件を書きます。条件から外れた場合はループを抜けます。

使ってみよう

下記ソースをfortest.htmlなどの名前で保存しブラウザで開いてみましょう。

<html>
  <head>
    <meta charset="UTF-8" />
    <script>
      function main(){
        let mainbox = document.getElementById("mainbox");
        for (let i = 0; i < 10; i++) {
          mainbox.innerHTML = mainbox.innerHTML + "hello!!" + "<br />";
        }
      }
    </script>
  </head>
  <body onload="main();">
    <div id="mainbox">
      こんにちはテスト。<br />
    </div>
  </body>
</html>

結果は下記のように、”hello!!”が10回出力されます。

内容としてはbodyのonloadでmain()関数が動きます。
最初にid=”mainbox”の要素内容を取ってきます。 その次の行でforが出てきています。

変数iを0からiが10以下の間、iの値を1ずつプラスしながら回るように定義しています。
iが1プラスされるタイミングはforの中の処理が終わった時にプラス1されます。

ループ処理の中にはmainbox.innerHTML + “hello!!”結合したものをmainboxに戻しているので、
10個の値が出力されています。

document.getElementByIdは引数に渡したidが同じタグを取得する決まり文句です。
jqueryを使うともっと簡単に行うことができます。こう書くのか~程度に覚えておきましょう。