>> JavaScript入門トップに戻る
今回はタイマーの設定について説明します。
JavaScriptはユーザの動作に応じて処理をする以外に、
一定時間ごとに処理を自動的に流すことも可能です。
下記のコードを見てください。
HTMLコード
JavaScriptのコード
時間が表示されます。
↑この時計自動で動いてますよね？
コードの解説をしましょう。
まずfontタグにIDを指定しています。
このIDを後から取得して、内部のhtmlコードを書き換えて時刻を表示させます。
次にjavascriptのコードを見てください。
まず、
new Date();
と書いて、日付オブジェクトというものを取得しています。
newというのはオブジェクトを生成するための演算子です。
Dateオブジェクトというのは最初から存在しているオブジェクトで、
引数に日付を指定すると、指定した時刻をオブジェクトとして取得します。
何も指定しない場合は、現在の時刻が返ります。
そこから、色々と取得したデータを整形しています。
正規表現というものを使って、整形しているのですが、この辺は別の講座で説明するのでスルーします。
データ整形後に、getElementById関数を使って、先程のfontタグのオブジェクトを取得しています。
その後、innerHTMLで先程整形したデータを挿入してます。
ここまでの時点で、fontタグ内のHTMLは書き換わりますが、
時計なので一秒おきに再実行してやらねばなりません。
そのために、自動で一秒後に実行する必要があります。
そんなときに使うのが、
setTimeout関数です。
第一引数には、関数の名前、第二引数には何ミリ秒後に実行するかを指定します。
今回は、同じ関数をもう一度実行するので、自分自身のWatch関数を第一引数に、
第二引数に、一秒後に実行したいので、1000ミリ秒後(1秒)と設定しています。
これで、一秒後に呼ばれた関数は、また自分自身を一秒後に呼ぶことになるので、
永遠と処理させつづけることが出来るわけです。
ですが、一番最初の起動だけは、どこかで設定してやらねばなりません、
そこで、bodyタグで、onloadイベントを設定してこのWatch関数を呼び出しています。
これで最初に起動されたwatch関数は永遠と動いてくれるわけです。
補足として、このsetTimeout関数はタイマーIDというものを戻り値として返しています。
このIDを、clearTimeout関数に渡してやると、
現在のタイマーをストップさせることができます。
もし、タイマー稼働中に処理を止めたいときは、あらかじめsetTimeoutの戻り値を取得しといて、
clearTimeout関数で処理を止めてください。
今回の説明は以上です。
次回はクラスについて説明します。
>> 【クラスについて】に進む
>> JavaScript入門トップに戻る
タイマーの設定
JavaScriptはユーザの動作に応じて処理をする以外に、
一定時間ごとに処理を自動的に流すことも可能です。
下記のコードを見てください。
HTMLコード
<font style="background:#530000;" color="yellow" id="watch1">時間が表示されます。</font>
JavaScriptのコード
function Watch()
{
//日付オブジェクトを生成
var time= new Date();
//データを整形
var month=(String(time.getMonth()+1)).replace(/(^[1-9]$)/,"0$1");
var day=(String(time.getDate())).replace(/(^[1-9]$)/,"0$1");
var hour=(String(time.getHours())).replace(/(^[1-9]$)/,"0$1");
var minute=(String(time.getMinutes())).replace(/(^[1-9]$)/,"0$1");
var second=(String(time.getSeconds())).replace(/(^[1-9]$)/,"0$1");
//全部文字としてくっ付ける
var string=month+"/"+day+" "+hour+":"+minute+":"+second;
var object=document.getElementById("watch1");
object.innerHTML=string;
//1秒おきに実行
setTimeout("Watch()","1000");
}
時間が表示されます。
↑この時計自動で動いてますよね？
コードの解説をしましょう。
まずfontタグにIDを指定しています。
このIDを後から取得して、内部のhtmlコードを書き換えて時刻を表示させます。
次にjavascriptのコードを見てください。
まず、
new Date();
と書いて、日付オブジェクトというものを取得しています。
newというのはオブジェクトを生成するための演算子です。
Dateオブジェクトというのは最初から存在しているオブジェクトで、
引数に日付を指定すると、指定した時刻をオブジェクトとして取得します。
何も指定しない場合は、現在の時刻が返ります。
そこから、色々と取得したデータを整形しています。
正規表現というものを使って、整形しているのですが、この辺は別の講座で説明するのでスルーします。
データ整形後に、getElementById関数を使って、先程のfontタグのオブジェクトを取得しています。
その後、innerHTMLで先程整形したデータを挿入してます。
ここまでの時点で、fontタグ内のHTMLは書き換わりますが、
時計なので一秒おきに再実行してやらねばなりません。
そのために、自動で一秒後に実行する必要があります。
そんなときに使うのが、
setTimeout関数です。
第一引数には、関数の名前、第二引数には何ミリ秒後に実行するかを指定します。
今回は、同じ関数をもう一度実行するので、自分自身のWatch関数を第一引数に、
第二引数に、一秒後に実行したいので、1000ミリ秒後(1秒)と設定しています。
これで、一秒後に呼ばれた関数は、また自分自身を一秒後に呼ぶことになるので、
永遠と処理させつづけることが出来るわけです。
ですが、一番最初の起動だけは、どこかで設定してやらねばなりません、
そこで、bodyタグで、onloadイベントを設定してこのWatch関数を呼び出しています。
これで最初に起動されたwatch関数は永遠と動いてくれるわけです。
補足として、このsetTimeout関数はタイマーIDというものを戻り値として返しています。
このIDを、clearTimeout関数に渡してやると、
現在のタイマーをストップさせることができます。
もし、タイマー稼働中に処理を止めたいときは、あらかじめsetTimeoutの戻り値を取得しといて、
clearTimeout関数で処理を止めてください。
今回の説明は以上です。
次回はクラスについて説明します。
>> 【クラスについて】に進む
>> JavaScript入門トップに戻る
