JavaScript　６日目、７日目

if else if 文

if文の後に「else ifブロック」が追加されている。
else ifブロックは第１条件式が満たされない（false）時に選択され第２条件式を確認する。
もし第２条件式が満たされた（true）時は直後の「{}中カッコ」内の処理を実行する。
第２条件が満たされない（false）時は直後の「{}中カッコ」内の処理は実行されず、次のelseブロックへ移動する。
もし次のelseブロックがない場合は何も処理を実行せずにif文の次の処理に進む。

if(第１条件式){
  第１条件式true時の処理
}else if(第２条件式){
  第１条件式false時かつ第２条件式true時の処理
}else{
  第１条件式も第２条件式もfalse時の処理
}

var num = 10;

if (num < 20) {
  console.log('20より小さい');
} else if (num < 40) {
  console.log('20以上40より小さい');
} else {
  console.log('40以上');
}

変数numに「10」を代入した時、第１条件式「(num < 20)」は「true」を返す。

第１条件が満たされたときは一番最初のブロック内の処理を実行し、以降のelseブロックは実行されない。

変数numに「30」を代入した時、第１条件式「(num < 20)」は「false」を返すので最初のブロックは実行せずに一番近いelseブロックに移動する。次のelseブロックにはifがついているので第２条件式「num < 40」を確認する。

var num = 30;

if (num < 20) {
  console.log('20より小さい');
}
else if (num < 40) {
  console.log('20以上40より小さい');
} else {
  console.log('40以上');
}

第２条件式が「true」を返すので直後にある２番目ブロック内の処理を実行し、以降のelseブロックは実行されない。

変数num「50」を代入した時、第１条件式「(num < 20)」は「false」を返すので最初のブロックは実行せずに一番近いブロックに移動する。次のelseブロックにはifがついているので第２条件式「num < 40」を確認する。

var num = 50;

if (num < 20) {
  console.log('20より小さい');
}
else if (num < 40) {
  console.log('20以上40より小さい');
} else {
  console.log('40以上');
}

第２条件式も「false」を返すので直後のブロックは実行せず次のelseブロックに移動する。

最後のelseブロックはifがついていないので無条件に実行される。

◆if else if文：問題

（最初のif文）
購入額が20000円以上は「割引額：1000円」
購入額が15000円以上は「割引額：500円」
購入額が10000円以上は「割引額：200円」
購入額が10000円未満は「割引額：0円」
（２番目のif文）
割引額がある場合は「割引額」「購入額」「支払い額」を
表示割引額がない場合は「購入額」「支払額」を表示
「値」「条件」「処理」を明確に！

var purchase = prompt();  //購入額
var discount = 0;  //割引額
var payment;  //支払額

if (purchase >= 20000) {
  discount = 1000;
}
else if (purchase >= 15000) {
  discount = 500;
}
else if (purchase >= 10000) {
  discount = 200
}

if (discount > 0) {
  console.log('割引額 : ' + discount + '円');
}

console.log('購入額 : ' + purchase + '円');
payment = purchase - discount;
console.log('支払額 : ' + payment + '円(税抜)');

if文：よくあるミス

if文に複数の条件を指定する場合、条件式の順番を間違えると意図したとおりに動かないプログラムになる。

var num = 40;

if (num >= 20) {
  console.log('20以上');
} else if (num >= 40) {
  console.log('40以上');
} else {
  console.log('20より小さい');
}

第１条件の範囲外で第２条件を作成しなければいけない。
今回は第１条件の範囲内で第２条件を作成すると
絶対に実行されないブロックになるので注意

複数条件と省略

if文は必要に応じて条件を増やしていくことができる。またサイゴのelseブロックは必要ない場合、省略してもOK。

var age = 20;

if (age < 10) {
  console.log('子ども');
} else if(age < 20) {
  console.log('10代');
} else if(age < 30) {
  console.log('20代');
} else if(age < 40) {
  console.log('30代');
}

if文のネスト（入れ子）

if文のブロック内は様々なプログラムを書くことができる。

例えばif文のブロック内にさらにif文を書くことも可能。このようなプログラムのことを「if文のネスト（入れ子）」と呼ぶ。

if(第１条件式){
  if(第２条件式){
    第１条件式trueかつ
    第２条件式true時の処理
  }
}

var age = 35;

if (age >= 30) {
  if (age < 40) {
    console.log('30代');
  }
}

プログラムは上から順に処理されていくので、まず第１条件式「age >= 30」を確認する。変数ageには「35」が入っているので第１条件式は「true」を返し、条件直後のブロック内に移動する。

第１条件式をクリアした時点で変数ageの値は「30以上」。

第１条件式のブロック内にはさらにif文があり第２条件式「age < 40」を確認する。
変数ageには「35」が入っているので第２条件式も「true」を返し、条件直後のブロック内に移動する。

第２条件式をクリアすると変数age内の値は「40未満」。

第１条件式と第２条件式を両方クリアすると変数age内の値は「30以上40未満」となる。結果、コンソール上に「30代」と表示される。

このように【if文のネスト】を使うと「○○から○○」という範囲指定の処理を記述できる。

複数条件を指定できる「if else if文」と「if文ネスト」の違い

「if else if文」も「if文ネスト」も複数の条件を記述することができる。
どのように使い分ければいいのか？？

if else if文：最初の条件「false」時に次の条件へ移動
if文ネスト：最初の条件「true」時に次の条件へ移動

最初の条件が「true」の時に次の条件を確認するのか・・・
「false」の時に次の条件を確認するのか・・・
この違いで使い分けていく。

※この後出てくる「論理演算子」でも複数条件を記述できる。

多分授業では触れてない↓

NaN（非数値）のチェック

isNaN(調査対象)

数値型に変換できない値を調査する。主に数値のチェックに使われる。
※「usFinite()」や「正規表現」を使った数値チェック法もある

返り値：処置の結果得られるもの

「isNaN()」は「()丸カッコ」内の値や変数が数値型に変換できない場合に「true」、数値型に変換できる場合に「false」を返す。
※空文字やスペースが数値型判定されてしまうので注意

比較演算子を使った条件以外に「isNaN()」のような真偽値「true」「false」を返す処理を条件に指定することもできる。

★ココで、６章に戻ります～～

第６章：制御構文・比較演算子

プログラムの基本処理

プログラム内で実行される処理を簡単に言い表すと以下の３つに分類できる。

1.順次処理：上から順番に処理を実行
2.分岐処理：条件によって処理を選択して実行
3.反復処理：条件が成立する間、繰り返し特定の処理を実行

プログラムはこの３つの処理を組み合わせて記述していく。
ここまでは上から順番に処理を実行する「順次処理」のみで記述してきたが、ここからは「分岐処理」や「反復処理」を学んでいく。

分岐処理

条件によって処理を分岐させる。ユーザが入力した値やクライアントの閲覧環境に応じて処理を分岐させるといったこともできる。

ｉｆ文：条件の成否で２ツの選択肢から１つを選択する
ｓｗｉｔｃｈ文：値を使って複数の選択肢から処理を選択する
三項演算子：条件の成否で２つの処理や値から１つを選択する

反復処理

条件式が成立する間、繰り返し特定の処理を実行し続ける。

ｗｈｉｌｅ文：最初に条件を確認して繰り返し処理を実行する
ｄｏ ｗｈｉｌｅ文：最後に条件を確認して繰り返し処理を実行する
ｆｏｒ：繰り返し回数を決めて処理を実行する

フローチャート

フローチャートはプログラムを書く前にどのような順序でどんな処理をしていけばよいか考えるのに便利。プログラム全体の流れを把握したり処理の書き忘れや１度で済む処理を２度記述している無駄を省くことができる。

フローチャートの書き方

必ず「start」と「end」がある。「start」と「end」は角丸四角で記述する。
基本的に「start」から「end」に向かって１本線が引いてあり上から下へ進む。

比較演算子（関係演算子）

比較演算子は左辺と右辺の関係を調べ真偽値を返す。
関係が成り立っている時はtrue（真）、成り立っていない時はfalse（偽）を返す。
「分岐処理」「反復処理」の条件によく使う。

厳密等価演算子：「===」

左辺と右辺が等しいことを調べる演算子。
値もデータ型も完全に一致している場合に「true」、それ以外の等しくない場合は「false」を返す。

「===」はデータ型まで確認するので「num === ’10’」の結果が「false」になっている。値は同じ「10」でも「数値型の10」と「文字列の’10’」はデータ型違いで「等しくない」という結果になる。

var num = 10;

console.log('１回目の出力');
console.log(num === 10);
console.log(num === '10');
console.log(num === 5);
console.log(num === '東京');

等価演算子：「==」

左辺と右辺が等しいかを調べる演算子。データ型が違う場合は同じデータ型に変換して調べる。データ型を考慮せずに等しいか確認する場合に使用する。値が一致している場合に「true」を、それ以外の等しくない場合は「false」を返す。

「==」はデータ型を考慮しないので「num == ’10’」の結果が「true」。
「===」と結果が異なるので注意。

console.log('２回目の出力');
console.log(num == 10);
console.log(num == '10');
console.log(num == 5);
console.log(num == '東京');

※厳密等価演算子と等価演算子はデータ型を考慮するか否かで使い分ける。HTMLから取得する入力値は一律文字列型なのでHTML入力値チェックには等価演算子を使うことが多い。
ちなみに等価演算子は型変換を伴うため、微量だが処理が遅くなる。

注意しなければいけない厳密等価演算子と等価演算子の結果

真偽値の数値型変換
true → 1
false → 0

console.log('等価演算子に注意');
console.log(true == 1);
console.log(false == 0);
console.log(null == undefined);

// 等価演算子はデータ型を揃えて値を確認する

厳密不等価等価演算子：「!==」

左辺と右辺が等しくないことを調べる演算子。値が等しくない場合に「true」、等しくない場合は「false」を返す。データ型が違う場合も「true」を返す。

console.log('３回目の出力');
console.log(num !== 10);
console.log(num !== '10');
console.log(num !== 5);
console.log(num !== '東京');

「!==」はデータ型も含め完全一致の場合のみ「false」、それ以外はすべて「true」

不等価演算子：「!=」

左辺と右辺が等しくないことを調べる演算子。データ型が違う場合はデータ型を合わせた上で値が等しくない場合に「true」、等しい場合は「false」を返す。

console.log('４回目の出力');
console.log(num != 10);
console.log(num != '10');
console.log(num != 5);
console.log(num != '東京');

「!=」はデータ型の違いを考慮しないので「num != ’10’」が等しいとみなされ「false」になっている。「===」と結果が異なるので注意。