JSで時間割表を作ってみる - 猫と遊ぶ　見習いプログラマーの備忘録

あまり融通が利かない時間割表だけど、
っていうのはつまり、ベタ書きってことです。笑

ベタ書きで時間割を書いてみた。

ベタ書きの意味があとでソースコードを見たらわかります。

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

こんなのありそうだよね。
今まで過ごした学生生活で、こんな時間割ぜったいあった気がする…。

総合２ｈとかww

ほんとにあった時間割、どんなか忘れちゃったんで、
昼休みの時間、合ってるかわからん。笑

4時間目のあとだった気もするし…

今はお腹空いちゃって間食してるけど、
学生の時は、しなかったな～
というよりできなかったな～たしか。

記憶があいまい(笑)

さあ、思い出話は置いておいて、ソースコード！！

<!DOCTYPE html>
<html lang="UTF-8">

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

    td {
      widows: 100px;
      height: 20px;
      border: solid 1px;
      text-align: center;
    }
  </style>
  <title>hairetsu</title>
</head>

<body>
  <!--テーブルIDを設定-->
  <table id="timewari">
    <caption>時間割表</caption>
  </table>
</body>
<script>
  //固定の時間割を決める
  var jikanwari = ["1時間目", "2時間目", "3時間目", "お昼休み", "4時間目", "5時間目"]
  var kyouka = ["総合", "総合", "国語", "給食＋休み時間", "数学", "体育"]
  //getElementByIdでテーブル要素を取得
  //jikanTableがテーブル要素の参照になる
  var jikanTable = document.getElementById("timewari");
  //insertRowで行を追加していく
  var row = jikanTable.insertRow(-1);
  //初期値は０。iが６より小さければ１ずつ増える
  for (var i = 0; i < 6; i++) {
    var cell = row.insertCell(-1);
    //CSS登場。背景はオレンジ色に決めたッ
    cell.style.backgroundColor = "orange";
    //textContentで値を表示
    //ここではiが増えていってるので、そのたびに値が変わる
    cell.textContent = jikanwari[i];
  }
  var row = jikanTable.insertRow(-1);
  for (var i = 0; i < 6; i++) {
    //insertCellでセルを追加していく
    var cell = row.insertCell(-1);
    cell.textContent = kyouka[i];
  }
</script>

</html>

なんか色んな関数が出てきたからメモ的に書いてみたら、
めっちゃ見にくい(笑)

でも関数があることによって、長かったプログラムも短くなってるのよね。

で、これはもう時間割が固定になってて変更できないプログラムだけど、
曜日によって変わる時間割表ができたら実用的よね💡