JavaScript 複習02

比較與邏輯運算子

比較與邏輯運算子簡介

流程判斷

1. 步驟一: 任務拆解
2. 步驟二: 流程設計

產生程式邏輯思維、運算思維。

比較運算子: >、=、<=

// all.js
// 比較運算子
// > < >= <= == !=

console.log(3 > 2);  // true
console.log(4 < 1);  // false
console.log(36.3 >= 37.5);  // false
console.log(37.5 >= 37.5);  // true
console.log(1 == 1);  // true
console.log("hi" == "hi");  // true
console.log(true == true);  // true
console.log(1 != 1);  // false

比較運算子搭配變數方法

// all.js
// 比較運算子，利用變數來比較
let a = 2;
let b = 3;
console.log(a > b);  // false
console.log((a + b) > 1);  // true

let c = 4;
let d = 3;
console.log(c == d);  // false

let e = 8;
let f = 5;
console.log(f >= e);  // false
console.log(f != e);  // true

let k = 2 > 1;
console.log(k);  // true

let isWakeUp = false;
console.log(isWakeUp);  // false

=、== 差異講解

// all.js
// 一個 = 賦予值的意思
let a = 1;
console.log(a);


// 兩個 == 比較運算子
let b = 2;
console.log(a == b);
console.log(a != b);

==、=== 差異講解

// all.js
// 常考題目
let a = 1;
let b = "1";

// 兩個等於，協助轉型
console.log(a == b);  // true
console.log(a != b);  // false

// === 嚴謹模式
// 三個等於，會比較也會看型別
console.log(a === b);  // false
console.log(a !== b);  // true

邏輯運算子介紹

// all.js
// 邏輯運算子
// && 同時滿足條件
// || 滿足其中一個條件

let a = 1;
let b = 2;
console.log(a == 1 && b == 2);  // true
console.log(a == 2 && b == 2);  // false

let c = 3;
let d = 4;
console.log(c == 4 || d == 4); // true
console.log(c == 5 || d == 8); // false

邏輯運算子範例情境

// all.js
// && 練習
// 符合贈禮條件
// 必須同時符合以下兩個條件才贈禮
// 消費滿 500(含)
// 是 VIP 條件

let customerA = 600;
let isVip = true;

console.log(customerA >= 500 && isVip == true);  // true

// || 練習
// 小孩吃東西
// 只要冰箱有米飯或蘋果任一個，小朋友就願意進食

let haveRice = false;
let haveApple = true;

console.log(haveRice == true || haveApple == true);  // true

邏輯運算子增加多條件作法

// all.js
// && 練習
// 符合贈禮條件
// 必須同時符合以下多個條件才贈禮
// 消費滿 500(含)
// 是 VIP 條件
// 買到蛋糕(指定商品)

let customerA = 600;
let isVip = true;
let buyCake = false;

console.log(customerA >= 500 && isVip == true && buyCake == true);  // false

// || 練習
// 小孩吃東西
// 只要冰箱有米飯或蘋果或牛奶任一個，小朋友就願意進食

let haveRice = false;
let haveApple = false;
let haveMilk = false

console.log(haveRice == true || haveApple == true || haveMilk == true);  // false

流程判斷 – if、else if、else

為什麼要理解流程判斷?

// all.js
// 小美在氣溫 15 度以下時一定會穿上她心愛的棉外套
// 今天氣溫是 14 度，請試著用 if 來寫小美會如何行動

// console.log("小美穿著外套出門了");

let todayDegrees = 14;

let isWearJacket = 15 >= todayDegrees;

    // 條件式是 true 就會執行
if (15 >= todayDegrees) {
  console.log("小美穿著外套");
  console.log("她準備出門了");
}

if (true) {
  console.log("小美穿著外套");
  console.log("她準備出門了");
}

// 使用變數名稱，語意化可讀性比較高
if (isWearJacket) {
  console.log("小美穿著外套");
  console.log("她準備出門了");
}

if (15 > 14) {
  console.log("小美穿著外套");
  console.log("她準備出門了");
}

if、else、else if 講解

// all.js - 1
// 小美在氣溫 15 度以下時一定會穿上她心愛的棉外套
// 今天氣溫是 14 度，請試著用 if 來寫小美會如何行動

// console.log("小美穿著外套出門了");

let todayDegrees = 20;

let isWearJacket = 15 >= todayDegrees;

    // 條件式是 true 才會執行
if (isWearJacket) {
  console.log("小美穿著外套");
  console.log("她準備出門了");
} else {
  console.log("小美因為太熱，所以不穿外套了");
}

// all.js - 2
// 模擬情境
// 小明想要去外面吃飯，他很想吃牛麵，價格為110
// 但他不確定錢包剩下多少錢
// 於是他打開錢包前決定，錢不夠就回家吃飯

// 流程判斷
// 但他不確定錢包剩下多少錢
// true 小明想要去外面吃飯，他很想吃牛肉麵，價格為110
// false 於是他打開錢包前決定，錢不夠就回家吃飯

// let wallet = 130;  // 情況一
// let wallet = 90;  // 情況二
let wallet = 110;  // 情況三
// console.log(wallet >= 110);

if(wallet >= 110) {
    console.log("小明跑去吃牛肉麵");
} else {
    console.log("小明錢不夠，跑回家吃飯了");
}

if 詳細講解 (一)

if、else 只能一組
else if 可以多組。

// all.js
// 流程判斷
// 但他不確定錢包剩下多少錢
// true 小明想要去外面吃飯，他很想吃牛麵，價格為110
// 有 80 元，他就吃夜市牛排
// 有 35 元，他就會跑去吃薯條
// false 於是他打開錢包前決定，錢不夠就回家吃飯

// let wallet = 80;  // 情況一
let wallet = 79;  // 情況二

if(wallet >= 110) {
    console.log("小明跑去吃牛肉麵");
} else if(wallet >= 80) {
    console.log("小明跑去吃夜市牛排");
} else if (wallet >= 35) {
    console.log("小明跑去吃薯條了!");
} else {
    console.log("小明錢不夠，跑回家吃飯了");
}

if 詳細講解 (二)

// all.js
// 小華他的習慣是
// 1. 如果沒有下雨，就不會帶雨具
// 2. 但如果下毛毛雨，他會帶輕便雨衣
// 3. 假如下普通的雨，他會帶折傘
// 4. 如果颱風天豪雨，他會帶長傘

// 今天的天氣是毛毛雨，那小華會帶什麼雨具?

// let todayWeather = "沒有下雨"  // 情況一
let todayWeather = "毛毛雨";  // 情況二

// console.log(todayWeather == "沒有下雨");  // false
// console.log(todayWeather == "毛毛雨");  // true

if (todayWeather == "沒有下雨") {
  console.log("小華不帶雨具");
} else if (todayWeather == "毛毛雨") {
  console.log("帶了輕便雨衣");
} else if (todayWeather == "普通的雨") {
  console.log("帶了折傘");
} else if (todayWeather == "颱風豪雨") {
  console.log("帶長傘");
} else {
  console.log("小華遇到異常狀態");
}

console.log("小華出門了");

/* if、else、else if 觀念複習
  if else 只能有一個
  else if 可以多個
  if 也可不寫 else
*/

if 流程圖規劃流程

if 圖表介紹

// all.js
// 流程判斷，流程圖
// 學了很多語法，自己做作業、比較大的作品時，腦袋一片空白，不知從何開始下手

// 情境、解決的事情
// 步驟一: 任務拆解
// 步驟二: 流程設計

// 推薦工具
// 1. Whimsical
// 2. PowerPoint

// 運算思維、程式邏輯培養

圖表服務註冊流程

• 繪製流程圖官網 – whimsical

操作流程

• PRIVATE 區塊點擊 +
• 選擇 Flowchart 建立新的檔案
• 命名檔案名稱: 流程圖

流程圖符號簡介

維基百科 – 流程圖

常用符號

1. 流程符號
2. 起止符號
3. 程式
4. 決策判斷

流程圖 let code 講解

• 流程圖 – let、if code

// all.js
// 流程判斷
// 步驟一: 任務拆解
// 步驟二: 流程設計

// 想查詢自己的錢包有多少錢

// 小華他想出門，但他不確定自己的錢包有多少錢
// 於是他想打開錢包看看還有多少錢
// 打開後，他發現有 150 元，於是他就記錄在腦袋裡，他擁有 150 元

let wallet = 0;

wallet += 150;

console.log(`小華錢包有${wallet}元`);

流程圖 if code 講解

// all.js
// 流程判斷
// 步驟一: 任務拆解
// 步驟二: 流程設計

// 想查詢自己的錢包剩下多少錢

// 小華他想出門，但他不確定自己的錢包有多少錢
// 於是他想打開錢包看看還有多少錢
// 如果小華發現自己有 100 元，他就吃 80 元牛肉麵
// 如果沒有 100 元，就不吃任何東西，也不出門
// 最後小華還想計算自己最後剩下多少元

let wallet = 0;
wallet += 150;
if (wallet >= 100) {
  wallet -= 80;
} else {
  wallet -= 0;
}

console.log(`小華錢包還有${wallet}元`);  // 小華錢包還有70元

if 中階運用

if 包 if 腰圍判斷流程圖設計

• 流程圖 – 流程判斷圖表連結

// all.js
// 腰圍指數測量
// 男生腰圍大於 90 為過胖
// 女生腰圍大於 80 為過胖

// 1.判斷是男生還是女生
// 2.如果是男生，還得判斷他的腰圍，90為過胖
// 3.如果是女生，還得判斷她的腰圍，80為過胖

if 包 if 腰圍判斷 Code 設計

// all.js
// 驗證測試資料是否正確

let sex = "female";
let cm = 70;

if(sex == "male") {

  if(cm >= 90) {
    console.log("男生體型過胖");
  } else {
    console.log("男生體型正常");
  }

} else if(sex == "female") {

  if(cm >= 80) {
    console.log("女生體型過胖");
  } else {
    console.log("女生體型正常");
  }

} else {
  console.log("您的資料錯誤");
}

console.log("計算結束");

看圖說故事 – if 練習一

// all.js
// if 練習
// 觀察客戶體溫

let customerDegree = 38;
console.log(customerDegree >= 37.5);  // true

if(customerDegree >= 37.5) {
  console.log("您不得進入");
}

console.log("計算結束");

看圖說故事 – if、else if 練習二

// all.js
// if else 練習
// 計算成績是否及格

let studentScore = 60;

if(studentScore >= 60) {
  console.log("您的成績及格");
} else {
  console.log("您的成績不及格");
}

console.log("計算結束");

看圖說故事 – if、else if 練習三

// all.js
// 計算成績評等
// 80分以上優秀、60-79分普通、59分以下不及格

let studentScore = 49;
// studentScore >= 60
// 79 >= studentScore
// console.log(studentScore >= 60 && 79 >= studentScore);

// 如果 我的成績大於等於80
if (studentScore >= 80) {
  console.log("您的成績是優秀");
} else if (studentScore >= 60 && 79 >= studentScore) {
  console.log("您的成績是普通");
} else if (studentScore <= 59) {
  console.log("您的成績是不及格");
}

console.log("計算結束");