JavaScript入門講座|デジタル文字時計を作ってみよう

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>

日付を取得する

うさタブ
うさタブ

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

うさタブ
うさタブ

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

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

ユウキ
ユウキ

.getMonth+1

なんだな~

うさタブ
うさタブ

そのとおりッピ!

なぜか月だけが-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>

時刻を取得する

うさタブ
うさタブ

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

うさタブ
うさタブ

<script></script>のあいだに


  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関数??

うさタブ
うさタブ

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

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

ことができるッピよ~

うさタブ
うさタブ

<script></script>のあいだの最後に

setInterval('Time()',1000);

と入力してみるッピ♪

うさタブ
うさタブ

これは

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

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

ユウキ
ユウキ

できた~!

全体のコードの確認

<!-- 見えない部分 -->
<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>
学習のまとめ
  • new Date();で日付の取得する
  • .getFullYear()で年を取得する
  • .getMonth()+1で月を取得する
  • .getDate()で日付を取得
  • .getHours()で時刻を取得
  • .getMinutes()で分数を取得
  • .getSeconds()で秒数を取得

うさタブ
うさタブ

上手くできたッピか?

これからも色んなゲーム作りやプログラムの解説をしていくッピ!

次回も楽しみにしているッピよ~~!

スポンサーリンク
スポンサーリンク
スポンサーリンク

どうしてもわからない、そんなときは?

ユウキ
ユウキ

うーん・・・

やっぱり、どうしてこーなるか良くワカンナイな~

説明を聞いたすぐはわかったつもりなんだけどさ

アイカ
アイカ

そうね・・・わたしも

すぐに復習できる環境じゃないから

宿題とか困っちゃうわ・・・

ユウキ
ユウキ

他に気軽に教えてくれる先生とかいるといいんだけどな~

うさタブ
うさタブ

フムフム!

そんなときは、プログラミング講座がオススメッピね~

アイカ
アイカ

そんなのあるのか?

ていうかドコいけばいいんだよ

うさタブ
うさタブ

それなら、やっぱり一番安心自宅でできる動画教材がよいッピ!

うさタブ
うさタブ
テレビCMでも話題の有名教材
Udemyとかどうッピか?

 

うさタブ
うさタブ
Udemyは、HTMLからJavaScript
人気の機械学習からUnityゲーム講座まで選び放題ッピ!

うさタブ
うさタブ

買い切り講座だから
いつでも勉強し放題、動画制作や難しいマーケティングなんかも勉強できるッピ~!

ユウキ
ユウキ

へえ~、こんなのがあるのか

うさタブ
うさタブ

ちびっこのみんなは、キュレオプログラミング教室がオススメッピ!

実際の教室で自分以外の同い年と一緒に勉強することで、自分も負けないゾ!と思えておサボりを防ぐことができるッピ!
さらに、クラスのみんなと差をつけてすごいプログラムが作れちゃうッピ

教室名 対象 学習言語 教室場所 無料体験・カウンセリング
Udemy 学生~社会人 Unity
HTML/CSS
JavaScript
MySQL
Python等
オンライン講座
コース買い切り
講座によってサンプル○
Unityゲーム講座アリ
 

「QUREOプログラミング教室」

小学2年生〜中学3年生 Scratch 全国各地
2500教室
無料体験◯
【LITALICOワンダー】 小学1年生〜高校生 Scratch
Unity C#
HTML / CSS
JavaScript
東京都,神奈川,埼玉県,千葉
オンライン
無料体験◯
3Dプリントなどの講座によっては別途料金

ユウキ
ユウキ

よーし、ちょっと体験だけでもやってみるか!

アイカ
アイカ

わたしもさっそくチェックしてみようかな♪

スポンサーリンク

どうしてもわからない、そんなときは?

ユウキ
ユウキ

うーん・・・

やっぱり、どうしてこーなるか良くワカンナイな~

説明を聞いたすぐはわかったつもりなんだけどさ

アイカ
アイカ

そうね・・・わたしも

すぐに復習できる環境じゃないから

宿題とか困っちゃうわ・・・

ユウキ
ユウキ

他に気軽に教えてくれる先生とかいるといいんだけどな~

うさタブ
うさタブ

フムフム!

そんなときは、プログラミング講座がオススメッピね~

アイカ
アイカ

そんなのあるのか?

ていうかドコいけばいいんだよ

うさタブ
うさタブ

それなら、やっぱり一番安心自宅でできる動画教材がよいッピ!

うさタブ
うさタブ
テレビCMでも話題の有名教材
Udemyとかどうッピか?

うさタブ
うさタブ
Udemyは、HTMLからJavaScript
人気の機械学習からUnityゲーム講座まで選び放題ッピ!

うさタブ
うさタブ

買い切り講座だから
いつでも勉強し放題、動画制作や難しいマーケティングなんかも勉強できるッピ~!

ユウキ
ユウキ

へえ~、こんなのがあるのか

うさタブ
うさタブ

ちびっこのみんな、キュレオプログラミング教室を受けて
自分以外の同い年と一緒に勉強することで、自分も負けないゾ!と思えて
おサボりを防ぐことができるッピ!
さらに、クラスのみんなと差をつけてすごいプログラムが作れちゃうッピ

先生やパパママにほめられて、学習効率が最高にグングン↑↑ッピよ~~♪

うさタブ
うさタブ

未来都市キュレオを舞台に、魅力的なキャラクターがたくさん登場する・ゲーム感覚で楽しく学べるプログラミング教室ッピ!

困ったことも先生に直接聞けるのが最高ッピ~!

うさタブ
うさタブ

全国2500教室もあるから、

きっとみんなの近くにも教室があるッピ。

公式サイト近くに教室があるかチェックしてみるとよいッピ!

ユウキ
ユウキ

なんだこれ! スゲーなっ

ゲームみたいにやってるうちに、自然と勉強できてるみたいな感じ?

アイカ
アイカ

そんなものがあるのねっ!

うさタブ
うさタブ

ロボットをプログラミングしてみるなら

LITALICOワンダーがオススメッピ!

JavaScriptも勉強できるッピよ~!

教室名 対象 学習言語 無料体験/教室場所
Udemy 学生~社会人 Unity
HTML/CSS
JavaScript
MySQL
Python等
オンライン講座
講座によってサンプル○
「QUREOプログラミング教室」
小学2年生〜中学3年生 Scratch 教室によって無料体験◯
全国各地の教室
【LITALICOワンダー】 小学1年生〜高校生 Scratch
Unity C#
HTML / CSS
JavaScript
無料体験◯
3Dプリントなどの講座によっては別途料金
東京周辺
オンライン

ユウキ
ユウキ

よーし、ちょっと体験だけでもやってみるか!

アイカ
アイカ

わたしもさっそくチェックしてみようかな♪

JavaScriptJSゲームJSゲームテクニックプログラミング
学んで遊んでジャンケンポン!
タイトルとURLをコピーしました