ＪａｖａＳｃｒｉｐｔ講座
（メールマガジン編）
９/１６日発行 ヨッシーの”ホームページを作ろう！（JavaScript編）”★Vol.12★
| 時間に関するプログラム |
今回からは時間に関するプログラムをやっていこう。
時間を使った命令と言うのは結構大切なものなので、ぜひ知っておきたいね。
たとえば、今日の日付や、今の時間、そういうものもできるよね。
今回はまず、タイマーを使ったプログラムをしてみよう。
| ★ タイマー ★ |
ある一定時間を過ぎた後にプログラムを実行するための命令は、
setTimeout('実行する命令',時間) |
| 一定時間後命令を実行する |
と書くんだ。
"時間"に入る数字は1000分の1秒。
つまり、1000と入れると１秒ということになるね。
例）
5000 → 5秒
300 → 0.3秒
10000 → 10秒
--タイマーを使ったプログラム--
<HTML>
<HEAD>
<SCRIPT language="JavaScript">
<!--
function hello(){
alert("5秒経過しました。");
}
//-->
</SCRIPT>
</HEAD>
<BODY onLoad="setTimeout('hello()',5000)">
</BODY>
</HTML>
--解説--
<HTML>
<HEAD>
<SCRIPT language="JavaScript">
<!--
function hello(){
alert("5秒経過しました。");
}
//-->
</SCRIPT>
</HEAD>
<BODY onLoad="setTimeout('hello()',5000)">
↑①onLoadでページがロードされたときにこのプログラムを実行する。
</BODY>
</HTML>
①：ここでの説明は１つだけ。
onLoad="setTimeout('hello()',5000)"の所だね。
まず、vol.8でやったイベントというもの。
onLoadについては詳しくはやらなかったけど最後に載せておいたよね。
これはページがロードされたとき(ページに入ったとき)にプログラムを実行する命令なんだ。
つまり、ページがロードされたときに"setTimeout('hello()',5000)"の命令をするんだ。
じゃあ、次に"setTimeout('hello()',5000)"を見てみると、hello()という関数がある。
hello()の関数の中身はわかるよね。
これを、5000たった後つまり５秒後に実行するんだ。
だから、
"ページがロードされて５秒後にhello()の命令を実行"
という意味になるね。
さっきはある一定時間後にプログラムを実行する命令だったけど、
次に一定時間ごとにプログラムを実行する命令についてやってみよう。
[命令名 =] setInterval('実行する命令',時間) |
| 一定時間ごとに命令を実行する |
でも、この命令だけじゃいつまでたっても一定時間ごとに命令が実行されてしまうんだ。
いつかは終わって欲しい場合もあるので、そんなときにはこの命令を解除しないといけないね。
そこで、このsetIntervalの命令を解除する方法は、
clearInterval(命令名) |
| setIntervalを解除する |
というのを書いてやればいい。
けれど、今回のclearIntervalの使い方はちょっとややこしいんだ。
clearInterval(命令名)の命令名というところなんだけど、
まず、上の
命令名 =
setInterval('実行する命令',時間)
の部分で連続して実行するプログラムに名前をつけているんだ。
（厳密には違うと思うけど、イメージとしてこの方がわかりやすい。）
そして、そのあと
clearInterval(命令名)
でその命令を終わらせているんだ。
だから、この二つはセットで覚えよう。
--ちょっと解説--
命令① = setInterval('実行する命令',時間)
命令② = setInterval('実行する命令',時間)
clearInterval(命令②)
このような場合まずはじめ命令の名前を命令①、次の命令の名前を命令②としているんだ。
そして、最後のclearInterval(命令②)では命令②を解除している。
つまり、最終的には命令①はずっと実行されていることになるね。
これを使えば、一定時間ごとに画像を変えてアニメーションのようにしたりすることも可能だよ。