はじめてのJavaScript（HTMLで現在の時刻を表示する）

はじめに

今回はJavaScriptをHTML内に<script>を用いて記述する方法について学んでいきます。JavaScriptを本格的に学ぶのは大変なので必要最小限で理解できるように心掛けます。

動作環境

Windows10
メモ帳（テキストエディタです）
Google Chrome（ブラウザです）

ただいまの時刻は

上のように現在の時刻を表示します。

<!DOCTYPE html>
<html>
<head>
  <title>時計</title>
  <script>
    window.onload = function() {
      setInterval(function() {
        var dd = new Date();
        document.getElementById("T1").innerHTML = dd.toLocaleString();
      }, 1000);
    }
  </script>
</head>
<body>
  <h2>ただいまの時刻は</h2>
  <div style="font-size:150%;">
    <div id="T1"></div>
  </div>
</body>
</html>

保存したファイルをダブルクリックしてブラウザで表示してみましょう。（右クリックで[プログラムから開く]→[Google Chrome]でもいいです）

解説

<script>

</script>

ちなみにsrc属性でJavaScriptの外部jsファイルを読み込む場合には、<script src="sample.js"></script>のように記述します。

window.onload = function() {

}

「window.onload」はページが表示されてから実行されます。「window.onload」という変数にfunction() { }内にある関数を代入します。つまり、ページが表示されてから実行される処理です。

setInterval(function() {
  var dd = new Date();
  document.getElementById("T1").innerHTML = dd.toLocaleString();
}, 1000);

はい、ここは難しいです。ゆっくり見ていきましょう。

setInterval(関数,処理間隔)

setIntervalは第一引数に与えられた関数を、第二引数に与えられた間隔で実行します。（functionの中を1000ミリ秒毎に実行します）

var 変数名 = 値

変数「dd」に現在の時刻「new Date()」を代入します。varは、変数の使用開始を明示的に宣言します。

document.getElementById("T1")

指定されたIDオブジェクトを返します。（ id「T1」）

.innerHTML

中身を変えるメソッドです。

.toLocaleString()

地域や言語に適した日付や時刻の表記するメソッドです。

まとめると「id[T1]の中身が、現在の時刻を（日本語表記した内容に）１秒（1000ミリ秒）間隔で更新される。」となります。

今は「こんなものなんだ」くらいで大丈夫です。すべて覚える必要はないと思います。

<div style="font-size:150%;">

</div>

フォントサイズを指定します。<div>タグは、囲った部分をブロック要素としてまとめて扱います。（ここではCSSを使っています）

<div id="T1"></div>

<div>タグは、idやclassを付加することもできます。（今は中身が空白の状態です。あとで更新されます）

ちなみにid名はページ内に１度だけ個別に付けることができ、class属性は同じページ内に何度でも使ってグループとして扱うことができます。

まとめ

いかがでしたでしょうか。いきなり難しくなった感じがしますが、JavaScriptを記述する方法として<script>タグを使うことと、CSSを記述する方法として<div style=・・・>を使うことがわかれば大丈夫です。

この調子でJavaScriptの勉強を進めていきたいと思います。

↓よかったらポチッとしていってください。

にほんブログ村

ふたり暮らし

アラフィフ夫婦のフリーランスプラン

はじめてのJavaScript（HTMLで現在の時刻を表示する）

はじめに

動作環境

ただいまの時刻は

解説

まとめ