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でプログラムを呼び出す

うさタブ
うさタブ

上手くできたッピか?

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

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

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

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

ユウキ
ユウキ

うーん・・・

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

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

アイカ
アイカ

そうね・・・わたしも

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

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

ユウキ
ユウキ

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

うさタブ
うさタブ

フムフム!

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

アイカ
アイカ

そんなのあるのか?

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

うさタブ
うさタブ

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

うさタブ
うさタブ
テレビや雑誌に紹介された超有名教室
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ゲームテクニックプログラミング
学んで遊んでジャンケンポン!
タイトルとURLをコピーしました