ゼロから始めるJavaScript講座Vol20 DOM操作〜繰り返し実行~


ゼロから始めるJavaScript講座Vol20 DOM操作〜繰り返し実行~
目次
  1. ゼロから始めるJavaScript講座 DOM操作〜繰り返し実行〜
  2. 一定間隔で繰り返し実行
  3. 課題

ゼロから始めるJavaScript講座 DOM操作〜繰り返し実行〜

一定間隔で繰り返し実行

繰り返しで処理を実行することで、便利な機能やリッチな見た目を実装することができます。まずはお手本通りプログラムを作成してみましょう。

ファイル名: setInterval.html

[code title="setInterval.html"]
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>一定間隔で繰り返し実行</title>
    <script>
        function count_time() {
            var timer = document.getElementById('timer');
            var date = new Date();
            timer.innerHTML = date.toLocaleString();
        }

        window.onload = function() {
            // 1秒(1000ミリ秒)ごとにcount_time関数を実行
            setInterval(count_time, 1000);
        }
    </script>
</head>
<body>
    <div id="timer"></div>
</body>
</html>

setInterval-1-639

div要素に現在時刻を常に表示する、時計のようなものができます。

setInterval-2-639

setIntervalメソッドを利用すると、一定の間隔を置いて関数を繰り返し実行することができます。

setInterval-3-639

今回の例では現在時刻を取得してdiv要素の内容を入れ替えるcount_time関数を1秒(1000ミリ秒)ごとに実行しています。これにより、時計のような振る舞いとなります。
setIntervalメソッドによる繰り返し実行は、停止することも可能です。お手本通りプログラムを作成してみましょう。
ファイル名: clearInterval.html

[code title="clearInterval.html"]
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>要素の作成・追加</title>
    <script>
        // 変数を定義
        var interval_id;

        function start_flash_text() {
            // 1秒ごとにflash_textを実行
            interval_id = setInterval(flash_text, 1000);
        }

        function flash_text() {
            var flash = document.getElementById('flash');

            // p要素の文字色を赤か青に変更
            if (flash.style.color === 'red') {
                flash.style.color = 'blue';
            } else {
                flash.style.color = 'red';
            }
        }

        function stop_flash_text() {
            // setIntervalによる繰り返し動作を停止
            clearInterval(interval_id);
        }

        window.onload = function() {
            var start = document.getElementById('start');
            start.addEventListener('click', start_flash_text, false);

            var stop = document.getElementById('stop');
            stop.addEventListener('click', stop_flash_text, false);
        }
    </script>
</head>
<body>
    <p id="flash">flash text</p>
    <button id="start">start</button>
    <button id="stop">stop</button>
</body>
</html>

setInterval-4-639

setInterval-5-639

startボタンを押すと文字色が 青と赤 交互に切り替わり、stopボタンを押すと文字色が切り替わる動作が停止します。

setInterval-6-639

setIntervalメソッドによる繰り返し実行は、 clearIntervalメソッドにより停止可能です。

setIntervalメソッドは返り値として固有のID(interval_id)があり、これをclearIntervalメソッドの引数に指定することで、繰り返し動作を停止することができます。

課題

テキストボックスに「リンク名」と「URL」を入力しボタンをクリックすると、入力されたリンク名とリンク先URLが設定されたa要素を追加するプログラムを作成してください。
ファイル名: challenge_element.htm

setInterval-7-639

NEXT LESSON ☛ jQueryの基礎と使い方

PREV LESSON ☛ DOM操作〜要素の作成・追加〜


CodeCampus編集部
この記事を書いた人
CodeCampus編集部
まずは7日間お試し!人気プログラミング講座を無料公開中
オンライン・プログラミングレッスンNo.1のCodeCamp