ゼロから始める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操作〜要素の作成・追加〜

未経験でも、現役エンジニアの手厚い指導が受けられるCodeCampのレッスン【無料体験】とは?

CodeCamp紹介動画

【CodeCampの無料体験】で知ることができる内容

  • 自分にあったプログラミング言語とは?
  • 初心者のための挫折しない学習の進め方

  • 独学よりも速く、確実にプログラミングを習得する方法

  • 満足度94.2%、現役エンジニアのマンツーマンレッスンとは?

  • CodeCampがプログラミング初心者から選ばれる理由

  • 未経験からエンジニア転職・フリーランスとして活躍するステップ

開催時間:毎日9時〜22時迄(所要時間40分)

PCとインターネットがあれば、日本全国どこからでも受講できます

CodeCampで学習できる言語・技術

HTML5, CSS3, JavaScript, JQuery, Photoshop, Illustrator, Bootstrap, PHP, MySQL, Ruby, Ruby on Rails, Swift, Android, Python, WordPress, Unity

HTML5, CSS3, JavaScript, JQuery, Photoshop, Illustrator, Bootstrap, PHP, MySQL, Ruby, Ruby on Rails, Swift, Android, Python, WordPress, Unity

CodeCampを無料で体験してみる

関連記事

CodeCampus編集部
この記事を書いた人
CodeCampus編集部
\無料体験開催中!/自分のペースで確実に習得!
オンライン・プログラミングレッスンNo.1のCodeCamp