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

# JavaScript 基礎課程 (3)

## 上週課程提要
* Boolean
* Comparison operator (`===`, `!==`, `>`, `>=`, `<`, `<=`)
* Flow control (`if`, `else`, `else if`)
* Logical operator (`&&`, `||`)

### 流程控制事前規劃

#### 寫虛擬程式碼

狀況：身上有一些錢，時間只夠去一個地方

$ = 400
牛肉麵 = 180
雞腿便當 = 80
白吐司 = 40

if 錢夠買牛肉麵
  then 買牛肉麵吃
else if 錢夠買雞腿便當
  then 買雞腿便當吃
else if 錢夠買白吐司
  then 買白吐司
else
  不吃東西

#### 畫流程圖
https://whimsical.com/Rfqojb1i7bUE5HUwhvH9fx

### Operator 混用

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

if (courseCredit === 3 && courseDifficulty === 3 && courseFunLevel === 3) {
  console.log('我要修這堂課');
}

if (courseDifficulty === 1 || (courseFunLevel === 5 && courseTime > 12)) {
  console.log('我要修這堂課');
}

## 同學提問

### 空白和空行會不會影響 JavaScript 執行？
沒有遇到保留字的時候，大多數情況空白都不會影響。目前可以先這樣記：
> 多打空白或多換行不會影響程式碼執行
> 保留字（例如 let）後面至少要放一個空白

所以下面這些寫法，雖然對人來說很難閱讀，但其實在語法上都沒有錯：

let isFiveGreaterThanOne=5>1;if(isFiveGreaterThanOne){console.log('五大於一');}
let            longMessage        =       'Hello'      +         'oooooooooo';

### 有沒有叫出 Console 上一次指令的方法？
方向鍵 ⬆ 可以快速叫出先前輸入過的指令。
<img src="https://www.seekpng.com/png/detail/327-3271600_arrow-keys-up-down-arrow-keys-cartoon.png" style="max-width: 400px;" />

## 今天預計教的內容
* 複習 flow control（流程控制）
* Scope（作用域）
* 使用 ESLint 檢查程式碼錯誤，統一寫作風格

## Scope（作用域）
* 變數可以被存取的有效範圍
* 每個變數都有它作用的範圍。在某處宣告的變數，未必能在其他地方存取
* 常見的兩種作用域：
* Global scope（全域作用域）：所有 code block 之外的範圍
* Local scope（區域作用域）：code block 之內的範圍

### 規則
* 在一個作用域中，我們只能存取該作用域裡面的變數，以及它之外的作用域的變數
* 存取變數時，JavaScript 會從目前的作用域開始，逐層往上找，直到抵達全域作用域為止
* 不能重複宣告變數 → 不能**在同一個作用域**重複宣告變數

### 範例

let firstVariable = 1;

if (true) {
  console.log(firstVariable);

  let secondVariable = 2;
}

console.log(secondVariable);

let myVariable = 6

if (true) {
  let myVariable = 7;

  if (true) {
    let myVariable = 8;

    if (true) {
      let myVariable = 9;
      console.log(myVariable);
    }
  }
}

## 程式碼檢查工具：ESLint
1. 下載壓縮檔並解壓縮 shorturl.at/oEPR9
2. 在 Visual Studio Code 打開 `javascript-basics` 資料夾
3. 在 Visual Studio Code 打開 Terminal，輸入 `npm install` 後按 Enter
4. 點選 Visual Studio Code 畫面左邊  圖示後，到上方文字輸入框分別輸入以下套件名稱，接著在搜尋結果第一筆點 `Install`）：
* ESLint
* Live Server
* Bracket Pair Colorizer 2（非必要）
* Trailing Spaces（非必要）
5. 在 Visual Studio Code 視窗右下角點選 `Go Live` 按鈕，會自動打開瀏覽器
6. 在打開的視窗中點選 `src` 資料夾
7. 打開 Console，確認有顯示：`Hello World`

## 課程回顧
* Scope 是變數可以被存取的有效範圍
* 常見的兩種 scope：global & local
* 只能存取 scope 當中以及之外的變數
* 存取變數時，會從目前的 scope 一路往上找到 global scope

## 作業
:::danger
繳交期限：**3/28（週日）23:59**
:::

### 在 Slack 問問題
可問上課的內容、跟 JavaScript 有關的問題、寫作業遇到的困難⋯⋯等

---

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