猫と遊ぶ 見習いプログラマーの備忘録

日々の学んだ事を随時更新。主にプログラム。その他いろいろ

JavaScriptでfor文を書いてみた

JavaScriptのfor文のテンプレはこう。

<script>
  for (変数の初期値; 条件式; 増減) {
    ループ内の処理;
  }
</script>

この紫色の文字のところを、好きなように変えればよい。


そもそもfor文とは?

PHPでもその他でもそうみたいだけど、
繰り返し(ループ)の処理をするプログラムである。


ムムム。なんかPHPのfor文の書き方に似てるぞ。
みてみよう。

<?php
for (変数の初期値; 条件式; 増減)
{
  ループ内の処理
}
?>

Hmm, ほぼほぼ一緒ですな。
双子で言えばうり二つだけど、ホクロがあるかないかみたいな感じかな。


で、JSのfor文でよく見る書き方が

<script>
  for (var i = 1; i < 10; i++) {
    処理;
  }
</script>

この処理は変数が1で、
10になるまで1ずつ足していく処理なのだが、

ここで登場する変数 i について
別に i でなくても好きな変数でいいんだって!
でもよく繰り返しの処理に i 出てくるからみんなわかり易くなるよね。


そして、ループの練習のために参考にさせていただいたサイトがありますので、貼り付けておきます。
とても参考になりました。ありがとうございました。m(__)m
webstudyroom.hatenablog.jp


その中から西暦に関するループが興味深かったので試してみました!

お題。
もしも、東京オリンピックまでの年号が平成だったら

<!DOCTYPE html>
<html lang="ja">

<head>
  <meta charset="UTF-8">
  <title>ループ練習</title>
</head>

</html>

<body>
  <table>
    <tr>
      <th colspan="2">もしも東京オリンピックまで平成だったら</th>
    </tr>
    <tr>
      <th>平成</th>
      <th>西暦</th>
    </tr>
    <script>
      // もし東京オリンピックまでの年号が平成だったら
      for (var i = 1; i <= 32; i = i + 1) {
        document.write('<tr><td>' + i + '</td>' + '<td>' + (i + 1988) + '</th></td>');
      }
    </script>
  </table>
</body>


ブラウザにちゃんと表示されましたよ~ 👇

f:id:msm20-chocolateee:20180828160244p:plain

ほえ~ ってかあと2年か!
早し!


ブログランキング・にほんブログ村へ
にほんブログ村

にほんブログ村 IT技術ブログ プログラム・プログラマーへ
にほんブログ村

にほんブログ村 IT技術ブログへ
にほんブログ村