mikiokataoka blog

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

『確かな力が身につくJavaScript「超」入門』を読みおわりました

『確かな力が身につくJavaScript「超」入門』狩野祐東[著]を読み終わりました。JavaScriptを勉強するときの最初の一冊目として良い本だと思います。さっそく、読み終わった感想を書きます。

読み終わった感想

この本の対象読者

  • HTMLとCSSの知識を一通り持っている人。
  • プログラムをこれまで書いたことのない人。または、プログラムをほんの少し書いた経験がある人。

なお、オブジェクト指向プログラミング言語を使った経験のある人にはやさしすぎるかもしれません。

この本の感想

  • JavaScriptの基本的な機能を取り扱っています。オブジェクト指向関連の説明はほとんどありません。主に、ブラウザの種類に依存しない根幹部分を説明しています。
  • 本のデザインが優しい感じで、とても読みやすいと思います。
  • 第6章の3番目のサンプルと第7章のサンプルを勉強するには、Webサーバがあったほうが便利です。
  • 第7章の2番目のサンプルを実行するには、Webサーバが必須です。私は、Lolipopレンタルサーバを借りて実行しました。

学習を続けやすい本だと思います。JavaScriptは一応再学習ですが、とても勉強になりました。

おわりに

次は、『作りながら学ぶjQueryデザインの教科書』狩野祐東[著]を読む予定です。

『確かな力が身につく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「超」入門』を読み終わりたいと思います。

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

はじめに

『確かな力が身につくJavaScript「超」入門』狩野 祐東 著 を199ページまで読みました。今回勉強のために、166ページの「12時間時計にしてみよう」を自分なりに書いてみました。

「12時間時計にしてみよう」を書いた結果

『確かな力が身につくJavaScript「超」入門』166ページより

JavaScript のコード

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>12 hours</title>
</head>
<body>
  <p>最終アクセス日時：<span id="time"></span></p>
  <script>
    // 午前または午後を判定する関数
    var getAmOrPm = function (_now) {
      if (_now.getHours() < 12) {
        return 'a.m.';
      } else {
        return 'p.m.';
      }
    }

    var now = new Date();

    var year    = now.getFullYear();
    var month   = now.getMonth() + 1;
    var date    = now.getDate();
    var hours12 = now.getHours() % 12; // 12時間表記の時刻。
    var minutes = now.getMinutes();
    var amOrPm  = getAmOrPm(now);

    var output = year    + '/'
               + month   + '/'
               + date    + ' '
               + hours12 + ':'
               + minutes + ' '
               + amOrPm;

    document.getElementById('time').textContent = output;
  </script>
</body>
</html>

おわりに

求職活動中ですが、JavaScript の勉強をもう少し続けるつもりです。

JavaScript を勉強するために Brackets を使ってみました

プログラミング

「確かな力が身につくJavaScript「超」入門」狩野 祐東 著 を143ページまで読みました。
ところで、この本では JavaScript を勉強するためのテキストエディタも紹介されています。そのひとつの Brackets に興味があったので、使ってみました。

Brackets とは

Brackets は、複数の OS に対応しているオープンソースのテキストエディタです。
アドビシステムズが開発しています。多くのオープンソーステキストエディタと同じく、無料で利用ができます。

brackets.io

Brackets を使った感想

  • 最初から、ほぼ日本語化されています。
  • 動作が安定しています。
  • 操作方法がシンプルでわかりやすいです。
  • HTMLを書くとき、入力補完機能がとてもかしこいです。

Webプログラミングには、とても良いテキストエディタだと思います。

Brackets の初期設定を変更

Brackets の初期状態だと、インデントは 4 です。しかし、「確かな力が身につくJavaScript「超」入門」はインデント 2 です。そこで、インデント設定を変更しました。また、インデントはスペースのみにしました。
設定ファイルは以下のようになります。

// brackets.json
{
    "fonts.fontSize": "15px",
    "fonts.fontFamily": "'SourceCodePro-Medium', ＭＳ ゴシック, 'MS Gothic', monospace",
    "useTabChar": false,
    "softTabs": true,
    "spaceUnits": 2
}