タイマーによる処理

マンガで分かる JavaScriptプログラミング講座

マンガで分かる JavaScriptプログラミング講座 第2版



第3部 Webページのプログラミング
第19話:タイマーによる処理

目次



マンガ












マンガ台詞

【1Page】
先生:さて 前回は イベントを学び
    インタラクティブな ページを作れる ようになったが
先生:だが イベントでは ユーザーが 何かアクションを しなければ 何も起きない
遊:ちょっと 寂しいわね
先生:そこで登場するのが 『タイマー』だ
遊:タイマー?
【2Page】
先生:そう この『タイマー』は 時限爆弾のようなものだ
遊:ひいい〜〜
先生:それじゃあ 実際に 『タイマー』を使った プログラムを 書いてみよう
        <html>
            <head>
                <script type="text/javascript">
                <!--
                function tokei() {
                    // 『target』要素を選択
                    var ele = document.getElementById("target");
                    // 文字列部分に、今の日時を表示
                    ele.innerHTML = Date().toLocaleString();
                    // 『tokei』関数をタイマー処理で実行
                    window.setTimeout("tokei()", 1000);
                }
                // -->
                </script>
            </head>
            <body onLoad="tokei();">
                <div id="target">目標の文字列</div>
            </body>
        </html>
    『2010年10月16日 13:46:20
    2010年10月16日 13:46:21
    2010年10月16日 13:46:22
    :』と表示
遊:うーん どういう意味かしら
【3Page】
先生:この『setTimeout』が ポイントになる
        setTimeout("tokei()", 1000)
    2つめの引数の ミリ秒後 つまり1秒後に
    2つめの引数が 1000なので 1000ミリ秒後… つまり1秒後に
        1000ミリ秒 = 1秒
    1つめの引数『"tokei()"』が プログラムと解釈されて
    『function tokei()』と書いた『tokei』関数が実行される
遊:これで なぜ時計が 動き続けるの?
先生:まずは『<body>』の『onLoad』で 『tokei』が呼び出される
        <body onLoad="tokei();">
【4Page】
先生:『tokei』関数が 最後の行に来たら
    『setTimeout』に『toke』がセットされる
        setTimeout(a, b)    『b』の時間後に 『a』の処理を実行する
    その1秒後に 『tokei』が 再び実行される…
守:さらに『tokei』 が実行されて 延々と実行され 続けるわけですね
先生:そういうことだ
    それじゃあ タイマーを利用した プログラムを 各自書いてみろ
遊:できたわ!
先生:おっ早いな
【5Page】
        <html>
            <head>
                <script type="text/javascript">
                <!--
                function tokei() {
                    var ele = document.getElementById("target");
                    // 『ほ』という文字を、『target』IDの内部HTMLに加える
                    ele.innerHTML += "ほ";
                    window.setTimeout("tokei()", 50);
                }
                // -->
                </script>
            </head>
            <body onLoad="tokei();">
                麗の真似〜!
                <div id="target">お</div>
            </body>
        </html>
    『麗の真似〜!
    おほほほほほほ…』と表示
麗:(拳骨)ゲシッ
    変なものを 作るんじゃないわよ
遊:うぐ〜〜
    会心の作だったのに〜



説明

この章では、『タイマーによる処理』について学びます。

前回の章では、イベントによる処理を学びました。WebページのJavaScriptでは、ページの読み込みタイミングや、ユーザーの操作によって処理を実行する方法以外にも、『特定のタイミングで処理を実行する方法』があります。

本章では、そういった方法として、『タイマー』を学びます。この方法では、時限爆弾のように時計をセットして、一定時間が経過するとプログラムを実行させます。

それでは、『タイマー』について説明していきます。

『タイマー』

『タイマー』は、一定時間経過したあとに、プログラムを実行させる方法です。

たとえば、1秒ごとに画面を書き換える時計のプログラムを書きたい時に使用します。また、数秒ごとに、自動でスライドショーを行いたい時にも、『タイマー』を利用します。

この『タイマー』の処理は、『window』オブジェクトの『setTimeout』メソッドを利用して行います。この『setTimeout』の第1引数に、実行したいプログラムを文字列で書き込み、第2引数に、現在からどれぐらいの時間が経過したあとに処理を実行させるかを、ミリ秒単位の数字で書き込みます。

ミリ秒は、1秒の1/1000の長さです。そのため、1000ミリ秒が1秒になります。

以下、画面に日時を表示して、1秒ごとに更新していくプログラムの例を示します。

<html>
    <head>
        <script type="text/javascript">
        <!--
        function tokei() {
            var ele = document.getElementById("target");
            ele.innerHTML = Date().toLocaleString();
            window.setTimeout("tokei()", 1000);
        }
        // -->
        </script>
    </head>
    <body onLoad="tokei();">
        <div id="target">目標の文字列</div>
    </body>
</html>

まず、『<body>』タグの『onLoad』属性で、『tokei』関数を呼んでいます。そのため、Webページの表示の直後に、最初の『tokei』関数が実行されます。

『tokei』関数では、『id』属性が『target』の要素を取得して、内部HTMLを書き換えています。そのため、最初に『目標の文字列』と書いてあった場所に、日時を表す文字列が書き込まれます。

そして最後に『window.setTimeout("tokei()", 1000);』とタイマー処理が実行されます。ここでは、第2引数が『1000』なので、1000ミリ秒後(1秒後)に、第1引数である『tokei()』という文字列がプログラムと解釈されて実行されます。

そして、1秒後に『tokei』関数が実行されて、再び日時を表す文字列が書き換えられて、再度1秒後に『tokei』関数が実行される……というように、処理が繰り返されます。



『タイマー』についての補足 他

マンガ中、タイマーの引数は『"tokei()"』と文字列で書きました。

function tokei() {
    var ele = document.getElementById("target");
    ele.innerHTML = Date().toLocaleString();
    window.setTimeout("tokei()", 1000);
}

この部分には、関数を指定することもできます。

function tokei() {
    var ele = document.getElementById("target");
    ele.innerHTML = Date().toLocaleString();
    window.setTimeout(tokei, 1000);
}

また、特殊な書き方として、呼び出し元の関数オブジェクトを指定する方法もあります。

以下は、少し高度な話になるので、読み飛ばしても構わないです。

function tokei() {
    var ele = document.getElementById("target");
    ele.innerHTML = Date().toLocaleString();
    window.setTimeout(arguments.callee, 1000);
}

『arguments』は、関数のプロパティの1つで、引数を表しています。『arguments[0]』『arguments[1]』……とすることで、『1番目の引数』『2番目の引数』……を取り出すことができます。

この『arguments』には、『callee』という、『呼び出し元』を示す特殊なプロパティがあります。

上記の例では、呼び出し元が『tokei』という関数になっているので、『arguments.callee』は『tokei』を指します。

この呼び出し元が『無名関数』だった場合は、『arguments.callee』はその『無名関数』を指します。

それほど多用する書き方ではないでしょうが、覚えておくと便利な時があります。



サンプルの入手

以下は、今回出てきたサンプルです。

ZIPでまとめてダウンロード (右クリックから保存してください)

sample1.html』(『タイマー』の例)を表示

sample1b.html』(『タイマー』の例 関数版)を表示

sample1c.html』(『タイマー』の例 callee版)を表示

sample2.html』(おほほほほ)を表示

プログラムの中身を見たい場合は、それぞれのHTMLファイルをブラウザで開いたあと、右クリックをして『ソースの表示』を選択してください。

メモ帳で、ファイルの中身を見ることができます。

≫ 「マンガで分かる JavaScriptプログラミング講座」トップに戻る


『柳井政和』 の初心者向け講座

『柳井政和』 のサイト

マンガで分かる Java入門講座
Javaのオブジェクト指向を解説するサイトです。
Webページ100ページ以上、マンガ800ページ以上で
解説を行っています。


PuzzleAndGame.com
JavaScriptで作ったゲームが中心のサイト。
タワーディフェンス、リバーシ、パズルゲームなどを公開。
Webブラウザ、PCアプリ、Androidアプリとして動作。


クロクロ・ツールズ
全てJavaScriptで作られた、ブラウザから利用できる各種アプリケーションです。
HTML5に対応しているモダンブラウザから使えます。
ブックマークに入れるなどして、ご利用ください。


『柳井政和』 執筆の本

「顔貌売人 ハッカー探偵 鹿敷堂桂馬」
文藝春秋より発売(2017年8月7日、予約可能)。
プログラマーが探偵役のエンタメ・ミステリー第2弾。
最先端の情報犯罪に安藤と鹿敷堂が挑みます。


「裏切りのプログラム ハッカー探偵 鹿敷堂桂馬」
文藝春秋より発売(2016年8月27日発売、予約注文可能です)。
2016年の松本清張賞で、最終候補に残った小説です。
プログラマー鹿敷堂桂馬が、女性社長の安藤裕美とともに、
IT業界で起きた事件の解決に挑みます。
プログラマーが探偵役のエンタメ・ミステリーです。


「マンガでわかるJavaScript」
本講座が書籍になりました。 本用に、より分かりやすく、読みやすく、再構成して書き直しました。
よければ、手にとっていただけると嬉しいです。
秀和システムより発売。


「プログラマのためのコードパズル〜JavaScriptで挑むコードゴルフとアルゴリズム」
コードゴルフやアルゴリズム問題、その解説、関連知識の紹介を行った本です。
プログラマーなら、楽しめる内容になっています。
技術評論社より発売。


「JavaScript 仕事の現場でサッと使える! デザイン教科書」
プログラミング初心者向けに、様々な利用例を元に、プログラムとJavaScriptを解説する本。
プログラム自体が初めての方にも、なるべく分かりやすいように書いています。
技術評論社より発売。


『柳井政和』 開発のWebアプリやソフトなど

PuzzleAndGame.com
全自動4コマ
全自動百科事典(オートペディア)
全自動似顔絵
新刊・新作カレンダー
EX リバーシ
全自動迷路
めもりーくりーなー
ラジオ・ブラウザ
PCソフト
マンガで分かる JavaScriptプログラミング講座
スクリーンセーバー「なう」
開発元:クロノス・クラウン




Cronus Crown(クロノス・クラウン)のトップページに戻る
(c)2002-2017 Cronus Crown (c)1997-2017 Masakazu Yanai
このWebPageに関するご意見・お問い合わせは
サイト情報 - 弊社への連絡 -
までお願いします。