## 第一堂：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
Sign in with Wallet
Connect another wallet