第4回 javascriptでカウントダウンプログラムの作成

前回は色を付ける程度のプログラムだったが、今回からは少し難しくなる。

ちょっと長くなるかもしれない。

カウントダウンプログラム

今回はa.htmlとa.jsの二つのファイルを作成する。例によって名前は自由に決めてもらって構わない。

a.html


<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>coutdown</title>
</head>
<body>

<h1>カウントダウン</h1>
<div id="sec"></div>

<script type="text/javascript" src="./a.js"></script>
</body>
</html>

a.js


var p = 10;	//何秒のカウントダウンにするか
setInterval("re()",1000); //1000ミリ秒ごとに関数reを呼び出す

function re()
{
	document.getElementById("sec").innerHTML=p;
	p--;
}

これらのソースコードをコピペでもしてもらうと、10秒からマイナスされていくカウントダウンを作成できる。

解説

HTMLの部分で重要となるのは、


<h1>カウントダウン</h1>
<div id="sec"></div>

という部分だろう。ここ以外の部分で分からないところがあれば、第2回を参照してほしい。

h1タグはそのまま見出しを意味している。

divの方はsecという名のid属性を指定している。これが、javascriptから要素を受け取る部分である。

javascript側はすべて重要だ。一つ一つ解説していこう。


var p = 10;	//何秒のカウントダウンにするか

この部分の意味を日本語にすると、pという名前の箱に10をいれなさい、という感じだ。プログラミングでよく使われる変数という概念だ。

varは初期化を意味する。varをつけなくてもプログラムは動作するが、基本的にjavascriptではvarをつけて変数を宣言したほうがいい。後々、グローバル関数とか出て来た時にvarをつける癖がないと、ミスにつながってしまう可能性があるからだ。


setInterval("re()",1000); //1000ミリ秒ごとに関数reを呼び出す

setInterval(“呼び出す関数”,ミリ秒)という書き方をすることで、何秒毎に変数を呼びだすかを指定することができる。

このような書き方だと、永遠にre()関数を呼び出すことになるので、普通はclearInterval()というのを利用して止める動作が必要となる。

今回は1秒ごとであるから1000ミリ秒と指定している。


function re()
{
	document.getElementById("sec").innerHTML=p;
	p--;
}

ここが今回のプログラムのメインとなるところだろう。

まずはfuncton 関数名(){}と書くことで、関数を作成できる。()の中には引数などを記述するのだが、今はまだ何も書かなくてよい。

{}のなかには、関数の中身を記述する。
とくによく注目してほしいのは、document.getElementById(“sec”).innerHTML=p;だ。

意味は、「読み込まれているファイル内のsecというIDを取得し、その部分をpに置き換えなさい。」ということだ。

innerHTMLはよく使われるので覚えておいた方がよい。

ここでpというのは変数であるから、表示されるのは10である。もしpという英字を出力したいのならば、”p”とかけば、そのまま出力される。

次の行のp- -;というのは「p=p-1;」と同じ意味である。このように省略して書くことができる。最初のうちはp=p-1と書いたほうが分かりやすいかもしれない。

この関数が意味するのは、secをpの中身に置き換えなさい。というのと、pの値を1引きなさいという二つだ。これが一秒おきに繰り返すされるので、1秒毎に減っていくカウントダウンのように見える。

おまけ

しかし、実行してみるとわかると思うが、0を過ぎるとマイナスの値をとってしまうのである。これを回避するために少しコードを継ぎ足す。


var p = 10;	//何秒のカウントダウンにするか
setInterval("re()",1000); //1000ミリ秒ごとに関数reを呼び出す

function re()
{
	document.getElementById("sec").innerHTML=p;
	if(p>0)
	{
		p--;
	}
}

これで0以下にはならない。

新たに継ぎ足したのは


if(p>0)
{
	p--;
}

という部分だが、意味は「もしpの値が0を含めない0より(すなわち1より)大きかったら、{}の中を実行しろ」だ。

pの値が10とか9の時は1より大きいためp–が実行されるが、0になってしまうと1より小さいため実行されない。ということはいつまでたっても0のままであるということだ。

まとめ

カウントダウンを作ると聞くと、何やら難しそうな気がするが、仕組み自体は簡単なものだ。これに、stopボタンを押すと止まるという機能や、再開ボタンを設置したりするとさらに複雑なプログラムとなっていく。

とりあえず基本を押さえておくと、上記のような応用が簡単に行うことができる。