---
# System prepended metadata

title: 第一堂：重新認識 JavaScript 之術
tags: [JS 直播班 - 2024 秋季班]

---

# 第一堂：重新認識 JavaScript 之術
## 開課提醒
1. 錄影
2. 已將服務時限都整理至程式勇者村「行事曆與報到」
3. 問題請放在「問與答」，若在聊天室詢問很容易被刷掉
4. 中場休息
    * 小組名單出爐
    * 推派組長到「分組表」打勾
    * 訂出小組討論時間



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


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

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

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

## 建立環境
1. 新增 index.html、all.js
2. 輸出語法 `console.log("Hello world!!")` 看是否有成功
```
<script src="all.js"></script>
```

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

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


## 變數命名觀念
* 注意語意：
    * ❌ 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
    let x = 3;
    let y = x++;
    ```
    前綴
    ```jsx
    let a = 2;
    let b = ++a;
    ```

## 變數型別
變數的「值」有分型別，非變數本身
原始型別 (Primitive Type)
* Number
* String
* Boolean
* Undefined
* Null
* Symbol
* BigInt


> 除了原始型別 (Primitive Type)外，還有物件型別([Object Type](https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Guide/Grammar_and_types#%E8%B3%87%E6%96%99%E5%9E%8B%E5%88%A5_data_types))

## 抽考一
* [1~5題目](https://chalk-freedom-ec6.notion.site/1-5-c001e340c50b446bb5407d181365a711?pvs=4)
<!-- 解答： 3 -2 4 2 1 -->
 * [6-10題目](https://chalk-freedom-ec6.notion.site/Part-1-6-10-1c4ca14fa2ef45149eb948fffed3a529?pvs=4)
<!-- 解答：2 5 2 2 1 -->


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


> 常見編譯錯誤，不要害怕錯誤
不要害怕程式，只要你相信程式，程式就會幫你/妳
> * 單字拼錯，導致語法解析錯誤： `lat a = 1` 
> * 呼叫錯誤：`let b = 1; console.log(c)`



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


## 陣列 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 = 'a';
let b = a;

b = 'b';

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

let arr2 = arr;

arr.push(100);

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

## 傳值與傳址考題

### 題目一
```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);
```


## 抽考二
* [11~15題目](https://chalk-freedom-ec6.notion.site/Part-2-11-15-7094287e1e6e41c08bd1f62253f08d05?pvs=4)
<!-- 解答：2 3 2 3 2 -->


---

## 本週任務
1. 主線任務(程式勇者村)
1. 小組任務(程式勇者村)
    * 下週開始會有 Git 題目，可先開始預習[教學資源](https://w3c.hexschool.com/git/cfdbd310)
3. 加碼：週末任務 - 傳值與傳址接龍(Discord)
    在 [Discord](https://discord.com/channels/801807326054055996/1289071040202412074/1289071041796116480) 討論串中，回答以下三題題目，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. 跟著課程進度看預習影片
    * 了解 var, let, const 差異
3. 重看今天上課錄影做筆記（理解聽不懂的地方）
4. 做主線任務
5. 以上完成可以再選擇做每日任務 or 小組任務 or 週末任務
6. （額外）學習 Git

JS 二刷學長姐 or 有經驗者：
1. 做主線任務
2. 小組任務（可以多帶領新手）、週末任務、每週刷題、CodeWars 刷題
3. 核心篇影音
4. （額外）嘗試回覆作業討論區問題


> 以下內容請看開學典禮錄影
    - 更大方向的學習進度安排：該如何開始準備？(學習地圖)

