Chapter03 条件分岐

概要と目標 条件によって、
処理を分けれるようになろう。

条件によって処理を分けるif文の使い方を学習しましょう。

今回のゴール

RERUN

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

分岐（if文）とは 特定の条件によって、
処理の流れを変える。

条件式が true か false によって処理の流れを変える制御構文。

if文は、条件がtrueがまたは、falseによって処理を分ける制御構文
if構文
if (条件式) {
  // 条件式が true の時の処理

} else {
  // 条件式が false の時の処理

}

else { } は省略可能。

if文を使ってみよう。

  1. 「chapter03」 › 「if」フォルダ内の「app.js」をテキストエディタで開く
  2. 年齢が「20」以上の時にメッセージを表示
chapter03/if/app.js
//　年齢の取得
var age = prompt('年齢を入力して下さい');

if (age >= 20) {
  // age が 20 以上の時
  document.write('利用可能');
}
  1. 上書き保存
  2. ブラウザで「chapter03」 › 「if」フォルダ内の「index.html」をブラウザで表示
  3. 「20」以上の数字を入力し、「利用可能」と表示されるかを確認
ブラウザでの表示例

RERUN

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

条件に一致しなかった時の
処理を記述しよう。

  1. 「chapter03」 › 「if」フォルダ内の「app.js」をテキストエディタで開く
  2. 年齢が「20」より小さい時の処理を記述
chapter03/if/app.js
//　年齢の取得
var age = prompt('年齢を入力して下さい');

if (age >= 20) {
  // age が 20 以上の時
  document.write('利用可能');
} else {
  // age が 20 未満の時
  alert('利用不可');
}
  1. 上書き保存
  2. ブラウザで「chapter03」 › 「if」フォルダ内の「index.html」をブラウザで表示
  3. 「20」より小さい数字を入力し、「利用不可」と表示されるかを確認
ブラウザでの表示例

RERUN

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

比較演算子 2つの値を比較する。

２つの値を比較する時は、比較演算子を用いる。

主な比較演算子
演算子 説明
A > B A が B より大きい時 true
A < B A が B より小さい時 true
A >= B A が B 以上の時 true
A <= B A が B 以下の時 true
A == B A が B と等しい時 true
A != B A が B と異なる時 true
A === B A が B とデータ型も含めて等しい時 true
A !== B A が B とデータ型も含めて異なる時 true

論理演算子 条件式を組み合わせる。

複数の条件式が全て true 時だけ処理を実行し実行したり、
どちらかの条件式だけが true 時だけ処理を実行したりすることが出来る。
このように条件式を組み合わせるための演算子を論理演算子と呼ぶ。

主な論理演算子
演算子 説明
Aの式 && Bの式 A、B どちらの式も true の時に true
Aの式 || Bの式 A、B どちらかの式が true の時に true

論理演算子を使ってみよう。

  1. 「chapter03」 › 「if」フォルダ内の「app.js」をテキストエディタで開く
  2. 条件の式を年齢が「20」以上 でかつ 60未満に変更
chapter03/if/app.js
//　年齢の取得
var age = prompt('年齢を入力して下さい');

if (age >= 20 && age < 60) {
  // age が 20 以上でかつ 60 未満の時
  document.write('利用可能');
} else {
  // age が 20 未満か 60以上の時
  alert('利用不可');
}
  1. 上書き保存
  2. ブラウザで「chapter03」 › 「if」フォルダ内の「index.html」をブラウザで表示
  3. 条件があっているかを確認
ブラウザでの表示例

RERUN

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

確認ダイアログで分岐 confirmを使っても分岐できる。

confirm()は、「OK」ボタンが押されれば、true
「キャンセル」ボタンが押されれば、false になる。

確認ダイアログで処理を分岐してみる。

  1. 「chapter03」 › 「confirm」フォルダ内の「app.js」をテキストエディタで開く
  2. 条件式に確認ダイアログを使って、処理を分ける
chapter03/confirm/app.js
if (confirm('お腹空いてますか？')) {
  alert('ピザを注文しました。');
}
  1. 上書き保存
  2. ブラウザで「chapter03」 › 「confirm」フォルダ内の「index.html」をブラウザで表示
  3. 確認ダイアログで条件を確認
ブラウザでの表示例

RERUN

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

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

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

ブラウザでの完成例

RERUN

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

    • ファイル名： app.js
    • 入力ダイアログのメッセージ： 「お振込金額を入力して下さい。」
    • 画面に表示するメッセージ： 「○○円 お振込されました。」
解答例
chapter03/training/index.html
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>練習問題3</title>
</head>
<body>
  <script src="app.js"></script>
</body>
</html>
chapter03/training/app.js
if (confirm('お振込みしますか？')) {
  // OK が押された時

  // 入力ダイアログで金額を取得
  var price = prompt('お振込金額を入力して下さい。');

  // 取得した金額を画面に表示
  document.write(price + '円 お振込されました。');
} else {
  // キャンセル が押された時
  alert('キャンセルされました。');
}

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

まとめ 入力チェックは、if文で出来る。

if文は条件式に応じて処理を分ける制御構文です。
入力チェックなどでよく使うので覚えておきましょう。

  • if文は、条件によって処理を分ける制御構文。
  • 2つの値を比較するときは比較演算子を使う。
  • 条件式を組み合わせるときは論理演算子を使う。