# 第一堂：重新認識 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. （額外）嘗試回覆作業討論區問題
> 以下內容請看開學典禮錄影
- 更大方向的學習進度安排：該如何開始準備？(學習地圖)
Sign in with Wallet
Connect another wallet