クロピグログ

職業訓練で学んだことまとめ

【JavaScript授業五日目】制御構文・比較演算子、if文・論理演算子

制御構文・比較演算子

手順を組み立てていくことが大事

どういう順番で伝えるかを意識する

 

●if文

フローチャート書くとわかりやすい

f:id:chromiumpig:20200727104049p:plain

var money = 5000;
if (money >= 10000) {
  console.log('使いすぎ');
 console.log('使いすぎ');
 ブロック内には必要であれば複数の処理を記述できる
}

・条件:変数moneyが10000以上

・条件が満たされる場合に直後のブロックを実行

   ↓ 正確には

・条件がtrueの場合に直後のブロックを実行

・条件がfalseの場合は直後のブロックをスキップ

 

●波括弧(中括弧)の終わりにセミコロン(;)はつけない。

if (money >= 10000) {
console.log("使いすぎ");
}

 

一つの処理として扱っているのでつけなくていい。

→イメージ※10+(5+3) これの最後にセミコロンつけないのと一緒

 

●比較演算子は条件の結果で「true」「false」を返す

console.log(money >= 10000);

true:条件が満たされた時の値

false:条件が満たされないときの値

「true(真)」「false(偽)」を真偽値

データ型:真偽値(bookean型)

 

f:id:chromiumpig:20200727114330p:plain

●↑false時の処理も指定する場合

var money = 10000;
if (money >= 10000) {
  console.log('使いすぎ'); 条件式true時の処理
else {
  console.log("支払可能"); 条件式false時の処理
}

 

●else使わないパターン例

var shipping_message = "送料500円";
var shipping_fee = 500;
条件によってイレギュラーな値が入る
if (money >= 5000) {
  shipping_message = "送料無料";
  shipping_fee = 0;
}
必ず実行する処理を分岐処理の後に記述
console.log(shipping_message);
console.log("支払金額" + money + "円");
console.log("合計金額" + (money + shipping_fee) + "円");

 

●else if

f:id:chromiumpig:20200727140738p:plain

var num = 10;

if (num < 20) {
第1条件がtrue時の処理
  console.log('20より小さい');
else if (num < 40) {
 第2条件がtrue時の処理
  console.log('20以上40より小さい');
else {
第1・2条件がfalse時の処理
  console.log('40以上');
}

 

●else使わないパターン

var money = 3000;
var shipping_fee = 500;
var message = "送料500円";

if (money >= 5000) {
  shipping_fee = 0;
  message = "送料無料";
else if (money >= 3000) {
  shipping_fee = 200;
  message = "送料200円";
}

console.log(`購入金額:${money}円`);←文字連結この方法もある
console.log(message);
console.log("総支払額:" + (money + shipping_fee) + "円");

 

●よくあるミス

var num = 40;

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

・これだと、第二条件の「40以上」は表示されない

・第一条件に第二条件が飲まれてしまっている

・第一条件と第二条件を入れ替えると、正しく実行できる