mikiokataoka blog

コンピュータ関連の勉強記録

『確かな力が身につくJavaScript「超」入門』を読んでいます 2

はじめに

『確かな力が身につくJavaScript「超」入門』を281ページまで読みました。それで復習のために、元号を表示する JavaScript を書きました。

元号を表示する JavaScript

前回のコードを使いながら、JavaScript を書きました。ただ、コードが大きくなって、読みやすいコードにできませんでした。もしかしたら、バグがあるかもしれません。

JavaScript コード

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>元号で日時を表示する</title>
</head>
<body>
<p><span id="mytime"></span></p>
<script>
// 元号と年の文字列を生成する関数
var getImperialEra = function (_theDate) {
  var imperialEras = [
    {eraName: '平成', date: new Date(1989,  1 - 1,  8)},
    {eraName: '昭和', date: new Date(1926, 11 - 1, 25)},
    {eraName: '大正', date: new Date(1912,  7 - 1, 30)},
    {eraName: '明治', date: new Date(1868,  1 - 1, 25)}
  ];
  for (var i = 0; i < imperialEras.length; i++) {
    if (_theDate.getTime() >= imperialEras[i].date.getTime()) {
      // 元号の期間
      var year = _theDate.getFullYear()
               - imperialEras[i].date.getFullYear()
               + 1;
       return imperialEras[i].eraName + year;
    }
  }
  // 元号以外の期間
  return '西暦' + _theDate.getFullYear();
};

// 午前または午後を判定する関数
var getGOZENOrGOGO = function (_theDate) {
  if (_theDate.getHours() < 12) {
    return '午前';
  } else {
    return '午後';
  }
}

// 元号の日時の文字列を返す関数
var getImperialDate = function (_theDate) {
  var year    = getImperialEra(_theDate);
  var month   = _theDate.getMonth() + 1;
  var amOrPm  = getGOZENOrGOGO(_theDate);
  var date    = _theDate.getDate();
  var hours12 = _theDate.getHours() % 12; // 12時間表記の時刻。
  var minutes = _theDate.getMinutes();

  return (year + '年 ' + month   + '月'
                       + date    + '日 '
                       + amOrPm  + ' '
                       + hours12 + '時'
                       + minutes + '分');
}

// 時間を表示する関数
var putTime = function () {
  var now = new Date();
  document.getElementById('mytime').textContent = getImperialDate(now);
  refresh();
}

var refresh = function () {
  setTimeout(putTime, 30000);
}

putTime();
</script>
</body>
</html>

おわりに

とにかく『確かな力が身につくJavaScript「超」入門』を読み終わりたいと思います。