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

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

二重ループにも種類がある

先日の記事で、九九の表JavaScriptで書きました。


for文にも種類があって、
というか、
「二重ループ」に種類があるといったほうが正しいかも。
for文で作るか、while文で作るか。
そのちがいは、処理の回数が決まってるか否か。
for文は、処理の回数が決められて
while文は、回数が決まっていない


なので、while文は無限ループになる可能性を持っているので、
途中、break文を入れるのを忘れないようにしたい。

無限ループはほんとうにこわい。
Ctrl + C を押して止められたらいいけど、
無限だから止まらないの。PCがバグったみたいになるから気を付けて。


そしてこちらのことだが、while文はあまり使わない方向性らしいので、
ほとんどfor文のことを書いていくだよ。


で、今日はfor文の二重ループを勉強しようと思って、
チェッカー柄を作ってみようと思います!


チェッカー柄というのは、
f:id:msm20-chocolateee:20180918175529p:plain

こんな感じの模様のことで、(表示デカっ
よく市松模様とか、審判みたいな柄とか。

で、四角いブロックが連なってるから
テーブル構造で表せられるんじゃないかなーと思い、
作ってみた!
f:id:msm20-chocolateee:20180918175706p:plain

でもなんかうまくいかなかった!笑


ちなみに未完成ソースコードはこんな感じ。

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

<head>
  <meta charset="UTF-8">
  <title></title>
  <style>
    table {
      border-collapse: collapse;
    }

    td {
      width: 60px;
      height: 50px;
      border: solid 1px;
      text-align: center;
    }
  </style>
</head>

<body>
  <table id="checker"></table>
  <script>
    var tbl = document.getElementById("checker");
    for (a = 1; a < 6; a++) {
      var yoko = tbl.insertRow(-1);
      if (a % 2 == 1) yoko.style.backgroundColor = "black";
      for (b = 1; b < 6; b++) {
        var tate = yoko.insertCell(-1);
        if (b % 2 !== 1) tate.style.backgroundColor = "red";
      }
    }
  </script>
</body>

</html>

いやあ~、わからんね。
むずかしい。
頭がパンクしそう。笑


わかりやすく赤とか足してみたんだけど、
そっからどうすればいいのかわかんない(笑)

使う色は黒だけなはずなんだけど、
うーーん、なんか飛び飛びで色コントロールできないのかなあ…


とりあえず九九の表を参考にしてできたのはここまでで、
続きはこんど!
正直できるかわからんけど、あきらめん!!笑