JavaScript入門講座|10カウントダウンタイマーをつくろう

JavaScript
うさタブ
うさタブ

今回は10カウントダウンタイマーをつくるッピ!

ユウキ
ユウキ

10カウントダウンタイマー??

うさタブ
うさタブ

10から0までカウントするプログラムだっぴ!

カンタンにつくれるから、一緒に勉強してみるッピよ~

この記事で学べること
  • カウントダウンの作り方
  • 時間によって操作するプログラム
  • プログラムのセットの呼び出し

全体のコードとサンプルゲーム

サンプルゲーム

<!-- 見えない部分 -->
<html>
<head></head>
<!-- ↓ここから見える部分↓ -->
<body>

<!-- ↓この下にプログラムを入力してね!↓ -->
<script>
let i = 10;
function timer() {
	if (i >= 0){
	document.getElementById("count").innerHTML = i;
	i--;	
	setTimeout("timer()",1000);}
}
</script>

<!-- ↓この下にボタンをつくろう!↓ -->
<button onclick="timer();">スタート!</button>
<p id="count"></p>
<!-- ここまで! -->

</body>
</html>

10カウントダウンタイマーをつくろう

必要なもの

うさタブ
うさタブ
メモ帳
  • メモ帳
  • ブラウザ

が必要ッピ!

元になるコード

<!-- 見えない部分 -->
<html>
<head></head>
<!-- ↓ここから見える部分↓ -->
<body>

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






</script>
<!-- ↓この下にボタンをつくろう!↓ -->


<!-- ここまで! -->

</body>
</html>

プログラムを呼び出すボタンをつくろう

うさタブ
うさタブ

まずはプログラムを呼び出す【ボタン】をつくるッピ!

うさタブ
うさタブ

<body></body>の間に

<button onclick="timer();">スタート!</button>
<p id="count"></p>

と入力するッピ!

うさタブ
うさタブ

これは

<buttonボタンをつくります onclick クリックしたら=”timer();このプログラムを動かして“>スタート!</buttonボタンを終わります>

<p段落をつくります id= id(住所)はcount countです“></p段落を終わります>

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

ユウキ
ユウキ

できた~!

ユウキ
ユウキ

でもこれ押してもなにも反応しないな・・・

うさタブ
うさタブ

それは、まだプログラムをしこんでいないからッピ!

これからこのボタンを押したあとに動作するプログラムをつくるッピよ~

ここまでのコード
<!-- 見えない部分 -->
<html>
<head></head>
<!-- ↓ここから見える部分↓ -->
<body>

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






</script>
<!-- ↓この下にボタンをつくろう!↓ -->

<button onclick="timer();">スタート!</button>
<p id="count"></p>
<!-- ここまで! -->

</body>
</html>

カウントダウンプログラムをつくる

変数をつくる

うさタブ
うさタブ

次はカウントダウンのための変数をつくるッピ!

うさタブ
うさタブ

<script></script>の間に

let i = 10;

と入力するッピ!

うさタブ
うさタブ

これは、

let変数をつくります i 名前は = 10中身は10です;

という意味になるっぴよ~

ユウキ
ユウキ

この【 i 】は別になんでもいいんだっけ?

うさタブ
うさタブ

そうっぴ!

でもプログラミングの世界では i ・j ・kが数字が変化するプログラムによく使われることが多いッピ!

今回もそれに習って【 i 】をつかっていくっぴよ~

Function関数でプログラムセットをつくる

うさタブ
うさタブ

次はプログラムセット関数をつくっていくっぴ!

うさタブ
うさタブ

プログラムセット関数は

function 関数名() {
命令文
 }

でつくることができるッピよ~

うさタブ
うさタブ

今回はこの関数名(プログラムセット)を

timer()

とするッピ!

うさタブ
うさタブ

それでは、さっそくプログラムセットをつくってみるッピ!

変数 i の下に

function timer() {

}

と入力するッピ!

ここまでのコード
<!-- 見えない部分 -->
<html>
<head></head>
<!-- ↓ここから見える部分↓ -->
<body>

<!-- ↓この下にプログラムを入力してね!↓ -->
<script>
let i = 10;
function timer() {
	//ここに命令文を入れる
}
</script>

<!-- ↓この下にボタンをつくろう!↓ -->
<button onclick="timer();">スタート!</button>
<p id="count"></p>
<!-- ここまで! -->

</body>
</html>
プログラムを呼び出してテストしよう
うさタブ
うさタブ

今まで組んだプログラムがきちんと動作するかテストしてみるっぴ!

ユウキ
ユウキ

テスト~?

うさタブ
うさタブ

そうっピ!

Function関数の命令文を入れる部分に

document.getElementById("conut").innerHTML = i;

と入力して、プログラムが呼び出せるかチェックしてみるっピ!

ユウキ
ユウキ

お! 10って出てきた!

うさタブ
うさタブ

これは

documentホームページのなかの.getElement この場所を変化させて ByIdid(住所)(“countcountの部分“).innerHTML情報を書き換えて = iカウントダウンの数字;

という意味ッピ!

うさタブ
うさタブ

まだカウントダウンが始まるプログラムまで書いていないから、

これはただi 】の中身を書き出すプログラムッピよ~

ここまでのコード
<!-- 見えない部分 -->
<html>
<head></head>
<!-- ↓ここから見える部分↓ -->
<body>

<!-- ↓この下にプログラムを入力してね!↓ -->
<script>
let i = 10;
function timer() {
	document.getElementById("count").innerHTML = i;
}
</script>

<!-- ↓この下にボタンをつくろう!↓ -->
<button onclick="timer();">スタート!</button>
<p id="count"></p>
<!-- ここまで! -->

</body>
</html>

変数 i を減らしてみる

うさタブ
うさタブ

次はこの「10」の数字を変化させてみるッピ!

i--;	

function timer()のなかに入れてみるッピ!

ユウキ
ユウキ

なんもかわらないけど・・・

うさタブ
うさタブ

むふふ! もう一回ボタンを押してみるッピよ~

ユウキ
ユウキ

すげえええ! 数が減ってる!

うさタブ
うさタブ

ムフフ! これがプログラミングの力ッピ!

ユウキ
ユウキ

だけどさ、うさタブ

これ自分でポチポチやったら意味ないんじゃね?

ユウキ
ユウキ

自動でカウントダウンできないのか??

うさタブ
うさタブ

もちろんできるッピ!

うさタブ
うさタブ

timer()のなかに


setTimeout("timer()",1000);

と入力するッピ!

うさタブ
うさタブ

このsetTimeout文は、時間を操るプログラムで、

setTimeout設定した時間後に(“timerこのプログラムを実行して()”,10001秒後に);

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

ユウキ
ユウキ

すげええええ!

勝手にうごいた~!

ユウキ
ユウキ

・・・ってアレ?

アイカ
アイカ

0を通り過ぎてマイナスになってる・・・

うさタブ
うさタブ

むむ! これはマズイッピね・・・

次は0になったらカウントダウンを止めるif文をつくるッピよ~

ここまでのコード
<!-- 見えない部分 -->
<html>
<head></head>
<!-- ↓ここから見える部分↓ -->
<body>

<!-- ↓この下にプログラムを入力してね!↓ -->
<script>
let i = 10;
function timer() {
	document.getElementById("count").innerHTML = i;
	i--;
	setTimeout("timer()",1000);
}
</script>

<!-- ↓この下にボタンをつくろう!↓ -->
<button onclick="timer();">スタート!</button>
<p id="count"></p>
<!-- ここまで! -->

</body>
</html>

カウントダウンを止める

うさタブ
うさタブ

カウントダウンを止めるには

if文という命令文をつかうっぴ!

うさタブ
うさタブ

まずはtimer() の中に

if (i >= 0){ 今までの書いた命令文 }

と入力し、if文でプログラムをかこってみるッピ!

うさタブ
うさタブ
<script>
let i = 10;
function timer() {
  if (i >= 0){
	document.getElementById("count").innerHTML = i;
	i--;
	setTimeout("timer()",1000);
 }
}
</script>

のような感じっピ!

ユウキ
ユウキ

できた~~!

if (i >= 0)で0になったらプログラムが動かなくなるようにする
うさタブ
うさタブ

最後にif文の解説をするッピ!

うさタブ
うさタブ

if文は、

もし◯◯が△△だった~このプログラムを動かして

といった風に、条件によってプログラムを動かす命令文ッピ!

うさタブ
うさタブ

今回は

ifもし (i >=0iが0以上なら){ ◯◯◯◯この命令令文を実行してください }

といった風に設定したッピ!

ユウキ
ユウキ

なるほどね~

全体のコードの確認

<!-- 見えない部分 -->
<html>
<head></head>
<!-- ↓ここから見える部分↓ -->
<body>

<!-- ↓この下にプログラムを入力してね!↓ -->
<script>
let i = 10;
function timer() {
	if (i >= 0){
	document.getElementById("count").innerHTML = i;
	i--;	
	setTimeout("timer()",1000);}
}
</script>

<!-- ↓この下にボタンをつくろう!↓ -->
<button onclick="timer();">スタート!</button>
<p id="count"></p>
<!-- ここまで! -->

</body>
</html>
学習のまとめ
  • カウントダウン用の変数をつくる
  • <button>タグでカウントダウンボタンをつくる
  • function関数によってプログラムセットをつくる
  • if関数をつかってカウントダウンプログラムをつくる
  • document.getElementByIdによって、IDの部分を変化させる
  • setTimeoutでプログラムを呼び出す

うさタブ
うさタブ

上手くできたッピか?

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

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

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

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

ユウキ
ユウキ

うーん・・・

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

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

アイカ
アイカ

そうね・・・わたしも

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

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

ユウキ
ユウキ

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

うさタブ
うさタブ

フムフム!

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

アイカ
アイカ

そんなのあるのか?

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

うさタブ
うさタブ

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

うさタブ
うさタブ
テレビ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ゲームテクニックプログラミング
学んで遊んでジャンケンポン!
タイトルとURLをコピーしました