---
robots: noindex, nofollow
tags: JavaScript
---

# JavaScript 基礎課程 (2)

## 上週課程提要
* 用 `let` 宣告變數
* 用 `=` 把值指派給變數（賦值）
* 資料型別：字串 `'String'`、數字 `123`
* 註解 `//`、`/* ... */`
* 內建函式：`alert`、`console.log`

## 同學提問
### 在自己電腦的 Chrome Console 可以用 `let` 重複宣告變數

let myName = 'Arthur';
let myName = 'Ben';

// 沒出現 SyntaxError: Identifier "myName" has already been declared

#### 原因
Chrome 為了讓開發者方便除錯，讓第 80 版新之後的 Console 可以用 `let` 重複宣告變數。
https://developers.google.com/web/updates/2019/12/devtools#redeclarations

## 今天預計教的內容
* 資料型別：Boolean（布林）
* Comparison Operators（比較運算子）
* Flow Control（流程控制）
* Logical Operators（邏輯運算子）

## 資料型別：Boolean（布林）

只包含 `true` 或 `false` 的資料型別。

let isLightOn = true;
isLightOn = false;

let isHomeworkFinished = false;
isHomeworkFinished = true;

let isSingle = true;
isSingle = false;

## Comparison Operators（比較運算子）
| 運算子 | 說明 |
|:------:| ------------------------------- |
| === | 檢查左邊的值是否 **等於** 右邊 |
| !== | 檢查左邊的值是否 **不等於** 右邊 |
| > | 檢查左邊的值是否 **大於** 右邊 |
| >= | 檢查左邊的值是否 **大於或等於** 右邊 |
| < | 檢查左邊的值是否 **小於** 右邊 |
| <= | 檢查左邊的值是否 **小於或等於** 右邊 |

比較完左右的值後，回傳 boolean（`true` 或 `false`）。

let nameOfFirstTeacher = 'Ben';
let nameOfSecondTeacher = 'Arthur';
console.log(nameOfFirstTeacher === nameOfSecondTeacher); // false
console.log(nameOfFirstTeacher !== nameOfSecondTeacher); // true

let passingScore = 60;
let myScore = 80;
console.log(myScore > passingScore); // true
console.log(myScore >= passingScore); // true

let myAge = 27;
let yourAge = 22;
console.log(yourAge < myAge); // true
console.log(yourAge <= myAge); // true

### 跟 boolean 搭配運用

let temperature = 10;

let isCold = temperature < 15;
console.log(isCold); // true

## Flow Control（流程控制）

### 如果⋯⋯，就⋯⋯

#### 語法

if (condition) {
  console.log('這句話只有當小括號裡的值是 true 時才會出現');
  console.log('這句話也是！');
}

#### 範例

let customerAge = 16;
if (customerAge < 18) {
  console.log('不能提供酒品給未成年者');
}

let temperature = 10;
if (temperature < 15) {
  console.log('外面很冷');
}
if (temperature > 25) {
  console.log('外面很熱');
}

### 如果⋯⋯，就⋯⋯，不然就⋯⋯

#### 語法

if (condition) {
  // Do this thing
} else {
  // Do that thing
}

#### 範例

let isLotteryWinner = false;
if (isLotteryWinner) {
  console.log('不用工作');
} else {
  console.log('乖乖工作');
}

let isLoggedIn = true;
if (isLoggedIn === true) {
  console.log('顯示主頁面');
} else {
  console.log('顯示登入畫面');
}

### 串連 `if` 跟 `else`

#### 語法

if (firstCondition) {
  // Do this thing
} else {
  if (secondCondition) {
    // Do that thing
  } else {
    // Do the other thing
  }
}

// if-else 在複雜的情況下會變成很多層，稱作「巢狀 if-else」
if (firstCondition) {
  // Do thing A
} else {
  if (secondCondition) {
    // Do thing B
  } else {
    if (thirdCondition) {
      // Do thing C
    } else {
      if (fourthCondition) {
        // Do thing D
      } else {
        if (fifthCondition) {
          // Do thing E
        } else {
          // Do thing F
        }
      }
    }
  }
}

// else 後面可以直接接 if，讓程式碼不要那麼「巢」
if (firstCondition) {
  // Do thing A
} else if (secondCondition) {
  // Do thing B
} else if (thirdCondition) {
  // Do thing C
} else if (fourthCondition) {
  // Do thing D
} else if (fifthCondition) {
  // Do thing E
} else {
  // Do thing F
}

### 課堂練習（5 分鐘）
將下列情境轉換為程式碼：

我肚子餓了想吃東西，身上有 400 元可以用。
目前有這幾種選項：
- 去附近的牛排店，點一客 180 元的牛排
- 吃附近的便當店，點 80 元的雞腿便當
- 吃附近的麵包店，買 40 元的白吐司
- 不吃飯

將身上的錢分別改成 200、100、50、25 元，確保每個條件都會觸發到。

P.S. 各個情境裏用 `console.log` 輸出不同訊息即可

// 提示
let myMoney = 400;

if () {
  console.log('我決定吃牛排');
} else if () {
  // ...
}

## Logical Operators（邏輯運算子）

### `&&` (AND)
這個符號左右兩邊都是 `true` 時才會回傳 `true`，否則回傳 `false`。

if (firstCondition && secondCondition) {
  console.log('兩種情況都是 true，才會顯示這個句子');
}

### `||` (OR)
這個符號左右兩邊任一情況是 `true` 時，就會回傳 `true`，否則回傳 `false`。

if (firstCondition || secondCondition) {
  console.log('任一個情況是 true，就會顯示這個句子');
}

### 範例

let courseCredit = 3; // 學分數
let courseFunLevel = 2; // 課程有趣程度（1 ~ 5 分）
let courseDifficulty = 5; // 課程難度（1 ~ 5 分），難度愈低給的分數愈甜
let courseTime = 8; // 課程時間（24 小時制，假設每堂課是整點上課）

// 優先選學分數高、營養的課的同學
if (courseCredit > 2 && courseDifficulty <= 2) {
  console.log('我要修這堂課');
}

// 喜歡有趣或有挑戰的課的同學
if (courseFunLevel > 3 || courseDifficulty === 5) {
  console.log('我要修這堂課');
}

// 無法接受早上上課，或課很硬的同學
if (courseTime > 12 && courseDifficulty < 3) {
  console.log('我要修這堂課');
}

### 回家作業（在 monday.com 繳交 Codepen 網址）

仿照上方範例，寫出你自己的選課條件（不必符合真實情況）

需要符合以下幾種條件：
* let 宣告變數
* comparison operator
* logical operator
* if / else / else-if
* `console.log`

* 繳交期限：**3/21（週日）23:59**
* 繳交網址：https://gsstw.monday.com/boards/1074623203


## 課程回顧
* Boolean：只包含 `true` 跟 `false` 的資料型態
* 用 comparison operator 比較左右兩邊的值
* 用 if、else、else-if 控制程式流程
* 用 logical operator 串連不同的情況

---

<div style="display: flex; justify-content: space-between;">
<a href="https://hackmd.io/@gsscsid/javascript-basics-1">⬅️&nbsp;JavaScript 基礎入門課程 (1)</a>
<a href="https://hackmd.io/@gsscsid/javascript-basics-3">JavaScript 基礎入門課程 (3)&nbsp;➡️</a>
</div>