0から始めるJavaScriptの学習記録　その４　【時計の表示】

こんにちは朱夏です。

今回は、時計を表示させてみようと思います。
思った以上に苦戦したので躓きポイントも書いていきます。

コード

コードはこちらになります。

<!DOCTYPE html>
<html lang="ja">
   <head>
      <meta charset="UTF-8"> 
      <title>時刻表示</title>
      <script>
         function clock() {

            var now = new Date();
            var year = now.getFullYear();
            var month = now.getMonth() + 1;
            var day = now.getDate();
            var hour = now.getHours();
            var minute = now.getMinutes();
            var second = now.getSeconds();

            document.getElementById( "day" ).textContent = year + "/" + month + "/" + day;
            document.getElementById( "time" ).textContent = hour + ":" + minute + ":" + second;

         };

         function start() {
            setInterval("clock();", 1000);
            clock();
         }
         
      </script>
   </head>
   <body onload="start();">
      <!----- ヘッダー ----->
      <header>
         <h1>時計</h1>
      </header>
      <!----- ヘッダー END ----->
      <!----- メインコンテンツ ----->
      <div id="day"></div>
      <div id="time"></div>
      <!----- メインコンテンツ END ----->
      <!----- フッター ----->
      <footer>
         <p class="">(c)test.com</p>
      </footer>
      <!----- フッター END ----->
   </body>
</html>

<!DOCTYPE html>

<head>

function clock() {

var now = new Date();

var year = now.getFullYear();

var month = now.getMonth() + 1;

var day = now.getDate();

var hour = now.getHours();

var minute = now.getMinutes();

var second = now.getSeconds();

document.getElementById( "day" ).textContent = year + "/" + month + "/" + day;

document.getElementById( "time" ).textContent = hour + ":" + minute + ":" + second;

};

function start() {

setInterval("clock();", 1000);

clock();

}

</script>

</head>

</header>

</footer>

</body>

</html>

時間を取得　＞　年、月、日、時、分、秒を別々の変数に格納　＞　HTMLでそれを表示させる　といったことを1000ms(1秒)ごとに繰り返すだけの単純な仕組みでした。

何故これほど躓いてしまったのか、順番に見ていきたいと思います。

解説

順番に見ていきます。
JavaScriptで初めに行っているのはfunction clock(){～処理内容～}ですね。
処理内容で行っているのは以下の3つです。

1. 現在時刻の取得
2. 現在時刻を分割して変数に代入
3. 日時を表示

ここまでは問題なく進む事が出来ました。

この後、リアルタイムで時刻を変化させようとしたところでうまく動かなくなったのです。

ググっていくつかのサイトを調べて、setIntervalかsetTimeoutを使うと、1秒ごとに処理を繰り返すプログラムが書けることが解ったので早速試してみたのですが、どちらも正常に動作しませんでした。

最終的にたどり着いた答えは、「JavaScriptをheadタグ内に直接書く」事でした。
呼び出していた.jsファイルの内容を、HTML側に直接コピペして実行したら正常に動いたのです。

JavaScript側の処理が正常に動けば、あとはHTML側の表示を日付、時間で表示させるだけです。
divタグに付与したidに紐づけてテキストとして書き出しています。

あとがき

今回は躓いた分、学べたことが多かったのではないかと思います。
後日改めて別の方法、.jsファイルを使って実装してみるのも勉強になりそうです。

今思えば、bodyタグに付与したonloadで呼び出している処理はファイル間でやり取りできないのかもしれません。

実際に解説しているサイトの中には.jsファイルを使って時計を実装しているところもありましたが、そこはonloadを付けていませんでした。

とはいえ、今回は問題の答えの一つにたどり着けたので良しとします。
きっと書き方はいくつもあり、JavaScriptの呼び出しタイミングやsetIntervalかsetTimeoutどちらを使うかなどによっても答えが変わってくるのだと思います。
onloadを使わずに実装していたサイトもありました。

今回はここまでにします。
次回もよろしくお願いします。