JavaScript入門講座｜デジタル文字時計をつくってみよう

うさタブ

今回はプログラミングで文字時計をつくってみるッピ！

ユウキ

時計？？

そんなことできるのかよ

うさタブ

もちろんッピ！

JavaScriptを使えばそんなことお茶の子さいさいッピ！

さっそく勉強してみるッピよ～

この記事で学べること

日付の取得
時刻の表示
リアルタイム時計の作り方
関数でのプログラムセットの作り方

見本のプログラム

只今の時間:

見本のコード

<!-- 見えない部分 -->
<html>
<head></head>
<!-- ↓この下にプログラムを入力してね！↓ -->
<script>
  function Day() {
    let Now = new Date();
    let Year = Now.getFullYear();
    let Month = Now.getMonth()+1;
    let Day = Now.getDate();
    document.getElementById("Day").innerHTML =Year+"年"+Month+"月"+Day+"日";
   }

  function Time() {
    let Now = new Date();
    let Hour = Now.getHours();
    let Min = Now.getMinutes();
    let Sec = Now.getSeconds();
    let Clock = Hour + ":" + Min + ":" + Sec;

    document.getElementById("Time").innerHTML =Clock;
   }

setInterval('Time()',1000);
</script>
<!-- ここからHTMLのタグを入れよう！ -->

<body onload="Day();Time();">
只今の時間:
   <span id="Day"></span><span id="Time"></span>
<!-- ここまで！ -->
</body>
</html>

うさタブ

今回はこのコードを詳しく解説していくッピよ～

見本のプログラム
見本のコード

デジタル文字時計を作ってみよう

デジタル文字時計を作ってみよう

必要なもの

うさタブ

メモ帳
ブラウザ

が必要ッピ！

元になるコード

<!-- 見えない部分 -->
<html>
<head></head>
<!-- ↓この下にプログラムを入力してね！↓ -->
<script>



</script>
<!-- ここからHTMLのタグを入れよう！ -->
<body onload="">



<!-- ここまで！ -->
</body>
</html>

うさタブ

↑のコードをコピーして勉強していくッピよ～

うさタブ

まずは、時計を表示する場所をHTMLでつくるッピ！

<body onload="Day();Time();">
只今の時間:
   <span id="Day"></span><span id="Time"></span>

とHTMLの部分に入力するッピよ～

うさタブ

これは

<bodyHTMLが onload表示されたら=”Day()このプログラムを;Time()実行してください;”>
只今の時刻：
<span文字グループ作成 id　住所(id)は=”DayDayです“></span文字グループを終わります>
<span id住所（id）は=”TimeTimeです“></span>

という意味ッピ！

ユウキ

お　こんな感じかな？

ユウキ

<span>タグは表示されないんだな！

うさタブ

そうッピね！

あとからこの<span>タグに、
プログラムで日にちや時刻が追加していくッピ！

今はまだ何も表示できないんダッピよ～

ここまでのコード

<html>
<head></head>
<!-- ↓この下にプログラムを入力してね！↓ -->
<script>

</script>
<!-- ここからHTMLのタグを入れよう！ -->

<body onload="Day();Time();">
只今の時間:
   <span id="Day"></span><span id="Time"></span>
<!-- ここまで！ -->
</body>
</html>

日付を取得する

うさタブ

つぎは日付を取得するッピ！

うさタブ

  function Day() {
    let Now = new Date();
    let Year = Now.getFullYear();
    let Month = Now.getMonth()+1;
    let Day = Now.getDate();
    document.getElementById("Day").innerHTML =Year+"年"+Month+"月"+Day+"日";
   }

と入力するッピ！

うさタブ

これは

functionプログラムセット Day 名前はDay() {です
let変数 NowNowです =　中身に　 new Date今の日付と時間を();　取得します
let Year = Now.getFullYear今年の西暦の年を();　取得します
let Month = Now.getMonth今月が何月か()取得します+1; // 0はじまりなのでプラス１
let Day = Now.getDate今日の日付を();　取得します
documentページの中にある.getElement指定したByIdid(住所)(“Day”(id=”Day”)).innerHTML を書き換えてください=Year何年+”年”+Month何月+”月”+Day何日+”日”;
}

という意味になるッピよ～

ユウキ

【.getMonth】 +1

なんだな～

うさタブ

そのとおりッピ！

なぜか月だけが－１表示だっッピ・・・

これがうさタブもわからないッピネ！

ユウキ

お！　日付が表示されたぞ

ここまでのコード

<!-- 見えない部分 -->
<html>
<head></head>
<!-- ↓この下にプログラムを入力してね！↓ -->
<script>
  function Day() {
    let Now = new Date();
    let Year = Now.getFullYear();
    let Month = Now.getMonth()+1;
    let Day = Now.getDate();
    document.getElementById("Day").innerHTML =Year+"年"+Month+"月"+Day+"日";
   }
</script>
<!-- ここからHTMLのタグを入れよう！ -->

<body onload="Day();Time();">
只今の時間:
   <span id="Day"></span><span id="Time"></span>
<!-- ここまで！ -->
</body>
</html>

時刻を取得する

うさタブ

次は時間を取得してみるッピ！

うさタブ


  function Time() {
    let Now = new Date();
    let Hour = Now.getHours();
    let Min = Now.getMinutes();
    let Sec = Now.getSeconds();
    let Clock = Hour + ":" + Min + ":" + Sec;

    document.getElementById("Time").innerHTML =Clock;
   }

と入力してみるッピ！

うさタブ

これは

functionプログラムセット Time() timeです{
let変数 Nownow を作成 =　中身に　 new Date今日の日付を();　取得します
let Hour = Now.getHours今の時刻を();　取得します
let Min = Now.getMinutes今の分数を　();取得します
let Sec = Now.getSeconds今の秒数を　();　取得します
let Clock = Hour時刻 + “:” + Min分数 + “:” + Sec秒数;
document.getElement指定した場所ByIdid=住所(“Time”).innerHTML書き換えてください =Clock現在の時刻へ;
}

という意味ッピよ～

ユウキ

おおおお！　時間が出てきた！！

うさタブ

ムフフ！

これがプログラミングのちからッピ！

ここまでのコード

<!-- 見えない部分 -->
<html>
<head></head>
<!-- ↓この下にプログラムを入力してね！↓ -->
<script>
  function Day() {
    let Now = new Date();
    let Year = Now.getFullYear();
    let Month = Now.getMonth()+1;
    let Day = Now.getDate();
    document.getElementById("Day").innerHTML =Year+"年"+Month+"月"+Day+"日";
   }

  function Time() {
    let Now = new Date();
    let Hour = Now.getHours();
    let Min = Now.getMinutes();
    let Sec = Now.getSeconds();
    let Clock = Hour + ":" + Min + ":" + Sec;

    document.getElementById("Time").innerHTML =Clock;
   }


</script>
<!-- ここからHTMLのタグを入れよう！ -->

<body onload="Day();Time();">
只今の時間:
   <span id="Day"></span><span id="Time"></span>
<!-- ここまで！ -->
</body>
</html>

時計をリアルタイムに設定する

ユウキ

なあうさタブ

時計をずっと更新し続けるにはどうすればいいんだ？？

ユウキ

さっきのプログラムだと時計が止まったままでさ～

こんなんじゃ、ゼンゼン時計にならないよ・・・

うさタブ

それなら

setInterval();

関数を使うッピ！

ユウキ

setInterval関数？？

うさタブ

この関数をセッティングすることで、

決まった秒数後にプログラムを読み出す

ことができるッピよ～

うさタブ

setInterval('Time()',1000);

と入力してみるッピ♪

うさタブ

これは

setIntervalプログラムを呼び出して(‘Time()このプログラムを‘,1000１秒数に);

という意味になるッピネ！

ユウキ

できた～！

全体のコードの確認

<!-- 見えない部分 -->
<html>
<head></head>
<!-- ↓この下にプログラムを入力してね！↓ -->
<script>
  function Day() {
    let Now = new Date();
    let Year = Now.getFullYear();
    let Month = Now.getMonth()+1;
    let Day = Now.getDate();
    document.getElementById("Day").innerHTML =Year+"年"+Month+"月"+Day+"日";
   }

  function Time() {
    let Now = new Date();
    let Hour = Now.getHours();
    let Min = Now.getMinutes();
    let Sec = Now.getSeconds();
    let Clock = Hour + ":" + Min + ":" + Sec;

    document.getElementById("Time").innerHTML =Clock;
   }

setInterval('Time()',1000);
</script>
<!-- ここからHTMLのタグを入れよう！ -->

<body onload="Day();Time();">
只今の時間:
   <span id="Day"></span><span id="Time"></span>
<!-- ここまで！ -->
</body>
</html>

学習のまとめ