Javascriptの練習

Javascriptでカレンダーを作ってみた。本当は、月初の週に前月をまたぐ場合は、小さい字で入れたかったんだけど、細かくclassを設定するのも嫌になり、該当月のみの表示としました。
今回、はまったのは、変数Bの宣言にすでに宣言されている変数Aを使うと、変数Bの値を入れ替えるたびに変数Aも変わってしまうことに気づかなかったことです。無限ループを作ってしまった。
あと、thimbleで日付を指定すると、GMTで設定して表示はJSTみたいな複雑なことが起こっていて、簡単にできるはずの月初の日付、月末の日付けを得るのがうまく確認できなくて、随分と冗長なコードになってしまいました。やはり、初めからVS Code＋Chrome（FireFoxのdeveloper　edition)でいいかもしれません。

var myTarget = document.querySelector('.target');
var cmdSetCal1 = document.querySelector('.setcal1');
var myYear = document.getElementById('year1');
var myMonth = document.getElementById('month1');
var myTable = document.getElementById('table');

function setCal1(){
  var numYear = myYear.value;
  var numMonth = myMonth.value;
  myTarget.textContent = numYear + "年" + numMonth + "月";
  var dayStart = new Date();
  dayStart.setFullYear(numYear);
  dayStart.setMonth(numMonth-1);
  dayStart.setDate(1);
  dayStart.setHours(12);
  console.log('dayStart:' + dayStart);
  var dayEnd = new Date();
  dayEnd.setFullYear(numYear);
  dayEnd.setMonth(numMonth);
  dayEnd.setDate(0);
  dayEnd.setMinutes(12);
  console.log('dayEnd:' + dayEnd);
  var day1 = new Date();
  day1.setFullYear(numYear);
  day1.setMonth(numMonth-1);
  day1.setDate(1);
  day1.setHours(12);
  day1.setDate(dayStart.getDate() - dayStart.getDay());
  console.log('day1:' + day1);
  console.log('dayStart:' + dayStart);
  var booLoop = true;
  myTable.innerHTML = '';
  var row = myTable.insertRow(-1);
  var myHTML = '<th class="sun">日</th><th class="week">月</th><th class="week">火</th><th class="week">水</th><th class="week">木</th><th class="week">金</th><th class="sat">土</th>';
  row.innerHTML = myHTML;
  do {
    row = myTable.insertRow(-1);
    if (day1<dayStart){
      myHTML = '<td></td>';
    } else {
      myHTML = '<td class="sun">' + day1.getDate() + '</td>';
    }
    day1.setDate(day1.getDate() + 1);
    for (var i=1; i<7; i++) {
      if (day1>dayEnd || day1<dayStart){
        myHTML += '<td></td>';
      } else {
        if (i<6) {
          myHTML += '<td class="week">' + day1.getDate() + '</td>';
        } else {
          myHTML += '<td class="sat">' + day1.getDate() + '</td>';
        }
      }
      day1.setDate(day1.getDate() + 1);
    }
    row.innerHTML = myHTML;
    if (day1 > dayEnd) {
      booLoop = false;
    }
    console.log(day1);
  } while(booLoop);
}

function setFormatDate(inDate) {
  return inDate.getFullYear() + "/" + (inDate.getMonth() + 1) + "/" + inDate.getDate();
}

cmdSetCal1.addEventListener('click', setCal1);