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()で秒数を取得

うさタブ
うさタブ

上手くできたッピか?

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

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

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

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

ユウキ
ユウキ

うーん・・・

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

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

アイカ
アイカ

そうね・・・わたしも

先生やうさタブさんにすぐに聞ける環境じゃないから

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

ユウキ
ユウキ

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

うさタブ
うさタブ

フムフム!

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

アイカ
アイカ

そんなのあるのか?

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

うさタブ
うさタブ

それなら、やっぱり一番安心自宅近所の教室がよいッピ!

うさタブ
うさタブ
テレビや雑誌に紹介された超有名教室
QUREOプログラミング教室とかどうッピか?

うさタブ
うさタブ

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

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

うさタブ
うさタブ

全国2500教室もあるから、

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

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

ユウキ
ユウキ

なんだこれ! スゲーなっ

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

アイカ
アイカ

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

うさタブ
うさタブ
キュレオプログラミング教室は、
アメーバブログやアベマTV・バンドリをプロディースしている
サイバーエージェント」のグループ会社で、確かな実績があるッピ!

うさタブ
うさタブ

オンラインで授業を受けるなら

Tech Kids Online Coachingがオススメッピ!

こっちもサイバーエージェントのグループ会社が運営してるッピ!

教室名 対象 学習言語 教室場所 無料体験・カウンセリング
 

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

小学2年生〜中学3年生 Scratch
HTML/CSS
JavaScript
全国各地
教室
無料体験◯
 

Tech Kids Online Coaching

小学1年生〜中学3年生 Scratch
C++
Unity
渋谷
またはオンライン
無料体験◯
 

Udemy

社会人 HTML/CSS
JavaScript
Python
講座購入
ブラウザ
アプリ
サンプル等◯
うさタブ
うさタブ

パパやママ、お兄ちゃんお姉ちゃん
就活や転職で役立つプログラミング知識を身につけたいなら
Udemy】で講座のコースを買ってみるのもオススメッピ!

動画付きの魅力的な教材が格安で、好きな時間に学べるッピ~

うさタブ
うさタブ

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

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

ユウキ
ユウキ

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

アイカ
アイカ

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

スポンサーリンク

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

ユウキ
ユウキ

うーん・・・

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

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

アイカ
アイカ

そうね・・・わたしも

先生やうさタブさんにすぐに聞ける環境じゃないから

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

ユウキ
ユウキ

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

うさタブ
うさタブ

フムフム!

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

アイカ
アイカ

プログラミング教室??

アイカ
アイカ

そんなのあるのか?

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

うさタブ
うさタブ

プログラミング教室は、やっぱり安心の近所の教室ッピ!

うさタブ
うさタブ

テレビや雑誌に紹介された超有名教室

プログラミング教室数国内No.1!「QUREOプログラミング教室」
とかどうッピか?

うさタブ
うさタブ

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

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

うさタブ
うさタブ

全国2500教室もあるから、

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

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

ユウキ
ユウキ

なんだこれ! スゲーなっ

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

アイカ
アイカ

そんなものがあるのね

うさタブ
うさタブ
「QUREOプログラミング教室」は、
アメーバブログやアベマTV・バンドリをプロディースしている
サイバーエージェント」のグループ会社で、実績があるッピ!

うさタブ
うさタブ

オンラインで授業を受けるなら

Tech Kids Online Coachingがオススメッピ!

こっちもサイバーエージェントのグループ会社が運営してるッピ!

教室名 対象 学習言語 無料体験・カウンセリング
 

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

小学2年生〜中学3年生
教室で授業を受けたい方
Scratch
C++
JavaScript
無料体験◯
 

Tech Kids Online Coaching

小学生~中学生
オンライン授業を受けたい方
Unity
C++
Scratch
無料体験◯
Udemy
社会人
講座コースで勉強したい人向け
HTML/CSS
JavaScript
Python
サンプル等◯

うさタブ
うさタブ

パパやママ、お兄ちゃんお姉ちゃん
就活や転職で役立つプログラミング知識を身につけたいなら
Udemy】で講座のコースを買ってみるのもオススメッピ!

動画付きの魅力的な教材が格安で、好きな時間に学べるッピ~

うさタブ
うさタブ

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

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

ユウキ
ユウキ

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

アイカ
アイカ

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

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