Chapter06 独自関数とタイマー

概要と目標 一定間隔ごとに一連の処理を、
繰り返せるようになろう。

独自関数と、タイマー処理の基本を学習し、
一定間隔ごとに一連の処理の流れを繰り返すプログラムを作成しよう。

今回のゴール

RERUN

新しいウインドウで表示する

独自関数 何度も使う処理を登録し、
いつでも使えるようにする。

関数は自分で作ることも出来る。何度も使う一連の処理の流れを登録しておくことで、
いつでも呼び出しができるようになる。

独自関数の登録
function 関数名(引数) {
  // ここに関数として登録する処理を記述

  return 戻り値;
      省略可
}

*.引数を複数必要とする場合は、「,（半角カンマ）」で区切って指定する。
独自関数の呼び出し
関数名(引数)

三角形の面積を求める
独自関数を作ってみよう。

  1. 「chapter06」 › 「function」フォルダ内の「app.js」をテキストエディタで開く
  2. 三角形の面積を出力する独自関数を作成
chapter06/function/app.js
// 関数の登録
function areaOfTriangle(base, height) {
  var result = base * height / 2;
  console.log(result);
}
  1. 三角形の面積を出力する独自関数を呼び出す
chapter06/function/app.js
// 関数の登録
function areaOfTriangle(base, height) {
  var result = base * height / 2;
  console.log(result);
}

// 関数の呼び出し
areaOfTriangle(6, 10);
  1. 上書き保存
  2. ブラウザで「chapter06」 › 「function」フォルダ内の「index.html」をブラウザで開く
  3. ブラウザのコンソールを表示し、三角形の面積が求められているかを確認
ブラウザでの表示例

RERUN

新しいウインドウで表示する

戻り値を設定してみる

関数を登録するブロック内で、console.log() をすると必ずコンソールに出力してしまう。
時には、変数に代入したり、if文の条件式に使いたいときもある。
なお、関数のブロック内で宣言した変数は、そのブロック内でしか使えない。
従って、関数の処理の結果を外に出すには、戻り値を設定必要がある。

  1. 「chapter06」 › 「function」フォルダ内の「app.js」をテキストエディタで開く
  2. functionのブロックの中にある、console.log()をコメントにし、戻り値を設定する
chapter06/function/index.php
// 関数の登録
function areaOfTriangle(base, height) {
  var result = base * height / 2;
  // console.log(result);
  return result;
}
  1. areaOfTriangle()の結果を変数に代入し、コンソールに出力したり、 if文の条件式に利用する
chapter06/function/app.js
// 関数の登録
function areaOfTriangle(base, height) {
  var result = base * height / 2;
  // console.log(result);
  return result;
}

// 関数の呼び出し
var result = areaOfTriangle(6, 4);
console.log(result);

if (result > 10) {
  document.write('10cm<sup>2</sup> より大きい三角形です。');
}
  1. 上書き保存
  2. ブラウザで「chapter06」 › 「function」フォルダ内の「index.html」をブラウザで開く
  3. きちんと処理されているかを確認
ブラウザでの表示例

RERUN

新しいウインドウで表示する

一定間隔で処理を行う 一定の間隔で何らかの処理をする。

JavaScriptではスライドショーやゲームの制限時間など、
一定の間隔ごとに何かをするタイマー処理が出来る。

setInterval() ・・・ 一定間隔で処理を繰り返すメソッド
var 変数名 = setInterval(実行する関数, 間隔);
  タイマー識別用変数

間隔: ミリ秒（1秒 = 1000）で指定
clearInterval() ・・・ タイマーを止める為のメソッド
clearInterval(タイマー識別用の変数);

一定間隔で
処理を繰り返してみよう。

  1. 「chapter06」 › 「setinterval」フォルダ内の「app.js」をテキストエディタで開く
  2. 1秒ごとに文字を表示する
chapter06/setinterval/app.js
// カウンターの初期値
var counter = 1;

// タイマー開始
var timer = setInterval(function () {
  document.write('<p>' + counter + '秒経過</p>');
  counter++;
}, 1000);
  1. このままでは、永遠にカウントを続けるので、タイマーを止める処理を追加
chapter06/setinterval/app.js
// カウンターの初期値
var counter = 1;

// タイマー開始
var timer = setInterval(function () {
  document.write('<p>' + counter + '秒経過</p>');

  // カウンターが 10 以上ならタイマーを止める
  if (counter >= 10) {
    clearInterval(timer);
  }

  counter++;
}, 1000);
  1. 上書き保存
  2. ブラウザで「chapter06」 › 「setinterval」フォルダ内の「index.html」をブラウザで開く
  3. 1秒ごとにメッセージを表示し、10秒後に止まるかを確認
ブラウザでの表示例

RERUN

新しいウインドウで表示する

一定時間後に処理を行う 一定の時間後に一度だけ何かする。

一定の時間後に一度だけを処理を行うsetTimeout()というメソッドもある。
このsetTimeout()でも、setInterval()のように、
一定間隔ごとに処理をさせることも出来る。

setTimeout() ・・・ 一定時間後に一度だけ処理を行うメソッド
var 変数名 = setTimeout(実行する関数, 間隔);
  タイマー識別用変数

間隔: ミリ秒（1秒 = 1000）で指定
clearTimeout() ・・・ setTimeout()を止める為のメソッド
clearTimeout(タイマー識別用の変数);

一定時間後にで一度だけ処理を行ってみよう。

  1. 「chapter06」 › 「settimeout」フォルダ内の「app.js」をテキストエディタで開く
  2. 1秒後に1度だけメッセージを表示
chapter06/settimeout/app.js
// カウンターの初期値
var counter = 1;

// 一定時間後に処理する関数
function countUp() {
  document.write('<p>' + counter + '秒たったよ</p>');
}

// タイマー開始
var timer = setTimeout(countUp, 1000);
  1. 上書き保存
  2. ブラウザで「chapter06」 › 「settimeout」フォルダ内の「index.html」をブラウザで開く
  3. 1秒ごとにメッセージを表示されるかを確認
ブラウザでの表示例

RERUN

新しいウインドウで表示する

setTimeout()メソッドで、
一定の間隔ごとに処理してみよう。

  1. 「chapter06」 › 「settimeout」フォルダ内の「app.js」をテキストエディタで開く
  2. countUp()関数の中で、setTimeout()を実行
chapter06/settimeout/app.js
// カウンターの初期値
var counter = 0;

// 一定時間後に処理する関数
function countUp() {
  document.write('<p>' + counter + '秒たったよ</p>');

  counter++;

  // タイマー開始
  var timer = setTimeout(countUp, 1000);
}

// 関数の呼び出し
countUp();
  1. このままでは、永遠にカウントを続けるので、タイマーを止める処理を追加
chapter06/settimeout/app.js
// カウンターの初期値
var counter = 0;

// 一定時間後に処理する関数
function countUp() {
  document.write('<p>' + counter + '秒たったよ</p>');

  counter++;

  // タイマー開始
  var timer = setTimeout(countUp, 1000);

  // カウンターが 10 より大きければタイマーを止める
  if (counter > 10) {
    clearTimeout(timer);
  }
}

// 関数の呼び出し
countUp();
  1. 上書き保存
  2. ブラウザで「chapter06」 › 「settimeout」フォルダ内の「index.html」をブラウザで開く
  3. 1秒ごとにメッセージを表示し、10秒後に止まるかを確認
ブラウザでの表示例

RERUN

新しいウインドウで表示する

練習問題 今回の理解度をチェック。

「chapter06」 › 「training」フォルダ内の「index.html」を開き、
下記の問題を解いて下さい。

ブラウザでの完成例

RERUN

新しいウインドウで表示する

    • ファイル名： app.js
    • カウント：「1」〜「30」
    • カウントのスピード： 1秒ごと
    • 表示する数字が3の倍数のとき： 「（あほ）」
    • 表示する数字が5の倍数のとき： 「（犬）」
    • 30まで数え終わったとき： 警告ダイアログに「オモロー」と表示
解答例
chapter06/training/index.html
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>練習問題6</title>
</head>
<body>
  <script src="app.js"></script>
</body>
</html>
chapter06/training/app.js
// カウンターの初期値
var counter = 1;

// タイマー開始
var timer = setInterval(function () {

  // 文字格納用の変数
  var char = '';

  // 3 の倍数かをチェック
  if (counter % 3 == 0) {
    char = char + '（あほ）';
  }

  // 5 の倍数かをチェック
  if (counter % 5 == 0) {
    char = char + '（犬）';
  }

  // カウンターが 30 以下確認
  if (counter <= 30) {
    // 30 以下なら画面に出力
    document.write(counter + char + '<br>');
  } else {
    // 30より大きければストップ
    clearInterval(timer);
    alert('オモロー');
  }

  counter++;
}, 1000);

解答例は全問題のチェックボックスが on になるとご覧いただけます。

まとめ 何度も使う一連の流れは独自関数で。
それを一定の間隔で実行するならタイマー処理。

独自関数は何度も使う一連の処理をを登録できる。
タイマー処理と組み合わせれば、一定間隔ごとに特定の処理をできる。

  • よく使う一連の処理は独自関数に登録
  • 一定間隔ごとに処理を繰り返す時は、setInterval()
  • 一定時間後に一度だけ処理を行う時は、setTimeout()