---
# System prepended metadata

title: 第一堂：Node.js 環境建立與 JS 變數設計
tags: [2025 Node.js 後端工程師培訓營]

---

## 第一堂：Node.js 環境建立與 JS 變數設計


## 開課提醒
1. 錄影
2. 已將服務時程都整理至程式勇者村「[行事曆](https://rpg.hexschool.com/#/training/12062543649527256883/board/content/12062543649527256895_12062543649527256899)」
3. 問題請放在「問與答」，若在聊天室詢問很容易被刷掉
4. 中場休息
    * 小組名單出爐
    * 推派出組長並到「[分組名單](https://rpg.hexschool.com/#/training/12062543649527256883/board/content/12062543649527256885_12062543649527256904)」打勾
    * 訂出小組討論時間

## 今日上課知識點
1. JS 環境與除錯
2. 變數：命名規則、運算、型別
3. 變數：物件、陣列、傳值與傳址


---
## 為什麼要學程式邏輯與運算思維 (Computational Thinking)？

1. 人腦知道如何思考，透過程式讓電腦依照我們想法來運作
2. 學會如何拆解問題：遇到問題習慣先拆解成小任務，再逐一攻略。**第二堂重點**。
   
> 解決懂很多語法，但不知道如何運用
> 解決知道怎麼參考別人，一直複製貼上

## 簡介 JavaScript
前端三大語言：HTML, CSS, JavaScript
JS 可以在哪裡運行：瀏覽器、Node.js

## 建立環境
前往線上練習服務來練習([Codepen](https://codepen.io/liao/pen/RNbLJLV?editors=0012))

或者在 VSCode
1. 新增 index.html、all.js ([範例](https://drive.google.com/drive/folders/1F9gQ1sjGS5BxBjIb-mnYENnOnQD6HMVu?usp=sharing))
2. 輸出語法 `console.log("Hello world!!")` 看是否有成功
```
<script src="all.js"></script>
```

> 可嘗試觀看此章節「[V8、Node.js介紹](https://courses.hexschool.com/courses/2025-node-js/lectures/58664136)」，了解如何透過 Node.js 來運作 JS 語言
> 安裝 [Node.js](https://nodejs.org/en)

## 變數 Variable
變數可以用來儲存資料和進行運算

宣告變數流程，以 excel 為例
1. 宣告一個變數為 a
2. 並賦予值為數字型別 1 
>  `let a = 1`

## 變數型別
變數的「值」有分型別，非變數本身

### 原始型別 (Primitive Type)
* Number
* String
* Boolean
* Undefined
* Null
* Symbol
* BigInt

### 物件型別（Object Type）
* 物件：Object
* 陣列Array


## 變數命名觀念
* 注意語意：
    * ❌ u：???
    * ❌ usr
    * ⭕️ userName：使用者名稱
* [小駝峰](https://zh.wikipedia.org/wiki/%E9%A7%9D%E5%B3%B0%E5%BC%8F%E5%A4%A7%E5%B0%8F%E5%AF%AB)命名，例如 `isClose`、`fatherName`
* 大部分使用名詞、布林可用 is, has 開頭
    * ❌ count：不清楚要算什麼
    * ⭕️ userNum：使用者人數
* 額外注意事項：有區分大小寫、不可數字開頭、不可部分符號開頭、不可使用 [JS 保留字](https://www.w3schools.com/js/js_reserved.asp)


> 彩蛋話題1：工程師停留時間最長的頁面是？
> 彩蛋話題2：不要亂命名，助教會盯
## 變數做運算
- **算數運算子**
    加(+)、減(-)、乘(*)、除(/)、等於(=)、餘數(%)
- **賦值運算子**

```jsx
// 1. 基本賦值
let number = 10; 
console.log("初始值：", number); // 10

// 2. 加法賦值 (+=)
number += 5;    
console.log("加法賦值 += ：", number); // 15

// 3. 減法賦值 (-=)
number -= 3;    
console.log("減法賦值 -= ：", number); // 12

// 4. 乘法賦值 (*=)
number *= 2;    
console.log("乘法賦值 *= ：", number); // 24

// 5. 除法賦值 (/=)
number /= 4;    
console.log("除法賦值 /= ：", number); // 6

// 6. 取餘數賦值 (%=)
number %= 3;    
console.log("取餘數賦值 %= ：", number); // 0
```

> 小題目
```
let a = 1;
a+1;
a+=1;
console.log(a);
```
- **遞增運算子**
```
let a = 5;

// 後綴
a++; 
console.log(a);   // 6

// 前綴
++a
console.log(a);   // 7
```
## 字串型別講解
* 數字：計算機功能、支援格式、變數帶變數
* 字串：字串相加
* 賦值運算子：+=、-=、a++、a--
* 輔助語法：console.log

> 小題目： "9"+9 =?

### 不要害怕程式，只要你相信程式，程式就會幫你/妳
* 不能重複宣告：`let a = 1; let a = 2;`
* 單字拼錯，導致語法解析錯誤： `lat a= 1` 
* 呼叫錯誤：`let b = 1;console.log(c)`
* 撞到[關鍵字](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Reserved_words)：`let if = 3`

> [卡斯伯文章：常見 JS 錯誤](https://wcc723.github.io/development/2020/09/16/chrome-js-alert/)
> [MDN：常見錯誤](https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Reference/Errors)

## 抽考一

 * [題目](https://codepen.io/liao/pen/PwYJaQE?editors=0010)
<!-- 解答：2 5 2 2 -->


## 重點複習
1. 變數宣告
2. 變數命名的規範
3. 變數的值可以是任何型別
4. 變數可以用來存資料和做一些運算


## 中場休息
1. 可以在 ZOOM 問答區發問
2. 小組可以討論大家的時間





## 陣列 Array
```jsx
const colors = ['red', 'yellow', 'black'];
console.log(colors);
```

陣列新增值：push() 
```jsx
colors.push('blue');
console.log(colors);
```

## 物件 Object
```jsx
const colors = {
    red: '#FF0000',
    yellow: '#FFFF00', 
    black: '#00000' 
};
```
物件新增/修改：
```jsx
const person = {};
person.age = 18;
console.log(person);
```
## 原始型別傳值 vs 物件型別傳址
- 原始型別傳值：將原始值複製一份，放到新的記憶體上給新變數用
```jsx
let a = 1;
let b = a;

b = 2;

console.log(a, b); // ❓
```
- 物件型別傳址：將原變數參考的記憶體位置給到新變數
```jsx
let arr = [1,3,5];

let arr2 = arr;

arr.push(100);

console.log(arr, arr2); // ❓
```

```jsx
let person = { name: "Alice", age: 25 };
let anotherPerson = person;

// 在另一個變數上做修改
anotherPerson.age = 30;

console.log(person);        // { name: "Alice", age: 30 }
console.log(anotherPerson); // { name: "Alice", age: 30 }
```

## 傳值與傳址考題

### 題目一
```jsx
let a = 10;
let b = a;

b = 20;

console.log(a, b);
```
### 題目二
```jsx
let a = 'hello';
let b = a;

b = a+1;

console.log(a, b);
```

### 題目三
```jsx
let obj1 = { color: 'red' };

obj2 = obj1;
obj2.color = 'blue';

console.log(obj1, obj2);
```

### 題目四
```jsx
let arr1 = [1, 2, 3];
let arr2 = arr1;

arr2.push(4);

console.log(arr1, arr2);
```
### 題目五
```jsx
let str = 'cat';
let obj = { animal: 'dog' };

let anotherStr = str;
let anotherObj = obj;

anotherStr = 'lion';
anotherObj.animal = 'elephant';

console.log(str, obj.animal);
```




---

## 本週任務
1. 主線任務（[程式勇者村](https://rpg.hexschool.com/#/training/12062543649527256883/board/content/12062543649527256884_12062543649527256902)）：註冊 [GitHub 服務](https://courses.hexschool.com/courses/2025-node-js/lectures/59258527)或 [Codepen](https://courses.hexschool.com/courses/2025-node-js/lectures/58663856) 擇一，開始挑戰第一個任務
3. 小組任務（[連結](https://hackmd.io/8p2s-EJkS_eIpIPkTPQKPQ)）
    * 下週開始會有 Git 題目，可先開始預習[教學資源](https://w3c.hexschool.com/git/cfdbd310)
4. 加碼：週末任務 - 傳值與傳址接龍 (Discord)
    在 [Discord](https://discord.com/channels/801807326054055996/1310781203233898597/1324225927588089887) 討論串中，回答以下三題題目，tag 前一位同學觀看這三題是否做對。並請自己出一題題目，由下一個練習的同學完成自己的題目。
    第 1 題
    ```jsx
    let price = 99;
    let discountPrice = price;

    discountPrice = 79;

    console.log(price, discountPrice);
    ```
    第 2 題
    ```jsx
    let fruits = ['apple', 'banana'];
    let moreFruits = fruits;

    fruits = ['cherry', 'mango'];

    console.log(fruits, moreFruits); 
    ```
    第 3 題
    ```jsx
    let car = { brand: 'Toyota', year: 2020 };
    let anotherCar = car;

    anotherCar.year = 2022;

    console.log(car.year);
    ```
    第四題，請嘗試依照上面格式自己命題，讓其他同學做您的自訂題目

    **範例回覆**

    1. 做三題提供解答與過程註解，請前一位出題者幫忙看對不對
    2. 自訂一個題目，讓下一位同學來做
    3. 可以先做三題，並自訂題目後，先卡位，等前一位出完題，再 tag 提供第四題



## 本週學習安排
JS 新手：
1. 嘗試做週末任務、主線任務
2. 可提前預習
    * [比較與邏輯運算子](https://courses.hexschool.com/courses/2025-node-js/lectures/58663955)
    * 流程判斷 - if、else if、else
    * if 流程圖規劃流程
    * if 中階運用
3. 想了解 Node.js 運算邏輯，可以觀看 [V8、Node.js 介紹](https://courses.hexschool.com/courses/2025-node-js/lectures/58664132)

JS 二刷學長姐 or 有經驗者：
1. 觀看 [PostgreSQL 關聯資料庫教學](https://courses.hexschool.com/courses/2025-node-js/lectures/58664069)，一直觀看到 子查詢 (Subquery)


之後會用到的技術：
1. Docker
2. GitHub Actions CI / CD 
