---
# System prepended metadata

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

---

# 第一堂：重新認識 JavaScript 之術
## 開課提醒
1. 錄影
2. 加入書籤
3. 中場休息
    * 小組名單出爐
    * 推派組長到 Excel 打勾
    * 組長福利
    * 訂出小組討論時間



## 今日上課知識點
1. JS 環境與除錯
2. 變數：命名規則、型別、資料處理
3. 變數：記憶體存放


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

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

## 簡介 JS
前端三大語言：HTML, CSS, JS
JS 如何運行：瀏覽器、Node.js

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

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

宣告變數流程，以 excel 為例
1. 宣告一個變數為 a，並賦予值為數字型別 1`let a = 1`
2. 可先命名中文名稱，再來簡寫為英文


## 變數命名觀念
* 注意語意：
    * ❌ u：???
    * ⭕️ 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：不要亂命名，助教會盯
## 變數做運算
- **算數運算子**
    加、減、乘、除、等於、餘數
- **賦值運算子**
    後綴
    ```javascript
    let x = 3;
    let y = x++;
    ```
    前綴
    ```javascript
    let a = 2;
    let b = ++a;
    ```

## 變數型別
變數的「值」有分型別，非變數本身
原始型別 (Primitive Type)
* *number*
* *string*
* *boolean*
* *undefined*
* null
* symbol

> 除了原始型別 (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://codepen.io/Bingbingboom/pen/OJgebwx?editors=0010)
<!-- 解答： 3 -2 4 2 1 -->
* [6-10題目](https://codepen.io/Bingbingboom/pen/VwWJPPz?editors=0010)
<!-- 解答：2 5 2 2 1 -->


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


常見編譯錯誤，不要害怕錯誤
不要害怕程式，只要你相信程式，程式就會幫你/妳
* 單字拼錯，導致語法解析錯誤： `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)

## 變數資料存放記憶體觀念 *
* 變數重要三劍客：記憶體位置、變數、型別
* 記憶體位置介紹：[記憶體圖](https://cacoo.com/diagrams/1NI6DIM02F0zwNkk/D3C8C)、[影片延伸介紹](https://www.youtube.com/watch?v=QuCu4iDpPTU)


## 記憶體考題
1. 有幾個變數、幾個型別、幾個記憶體空間
### 題目一
```
let a = 1;
let b = 1;
```
### 題目二
```
let a = 1;
a = 2;
a = 3;
a='hello';
```

### 題目三
```
let a = 1;
a = 4;
a = a + 8;
```

### 題目四
```
let a = 2;
a*3;
```
### 題目五
```
let a = 2;
let b = 3;
a+=3;
```


## 小組抽考二
* [11~15題目](https://codepen.io/Bingbingboom/pen/LYLKWQX?editors=0010)
<!-- 解答：2 3 2 3 5 -->


---

## 本週任務
1. 主線任務
1. 小組任務（下週開始會有 Git 題目，[教學資源](https://w3c.hexschool.com/git/cfdbd310)）
1. 週末任務：記憶體接龍
    請自己畫出以下三題，並在 [discord](https://discord.com/channels/801807326054055996/1141911278978342993/1159800703657713696) 上，同時自己出第四題，並私訊觀看下一位學生是否作對
    第 1 題
    ```
    // 1. console.log 的值為？
    // 2.出現幾個變數、型別、記憶體空間?
    let a ;
    a = 1;
    a = "hello";
    console.log(a)
    ```
    第 2 題
    ```
    // 1. console.log 值為？
    // 2.出現幾個變數、型別、記憶體空間?
    let b = 3 ;
    b=5;
    let c = 4;
    b=8;
    c=c+b;
    let d = b+c;
    console.log(e)
    ```
    第 3 題
    ```
    // 1. console.log 值為？
    // 2. 出現幾個變數、型別、記憶體空間?
    let e=0;
    e = 5;
    e = "hello";
    e = true;
    e = 3;
    e+=1;
    console.log(e)
    ```
    第四題，請嘗試依照上面格式自己命題，讓其他學生做您的自訂題目

    **範例回覆**

    1. 做四題後截圖，請前一位出題者幫忙看對不對
    2. 自訂一個 code 題目，讓下一位學生來做
    3. 可以先做三題後並自訂題目後，先卡位，等前一位出完題，再私訊提供第四張圖



## 學習方向
JS 新手：
1. 每週跟著課程進度看影音預習、上課、重看錄影做筆記、做主線任務
1. 建議做每日任務、小組任務、週末任務
1. （額外）更多時間者可挑戰專題、觀看專題影音 => 做作品 
or （額外）跟卡斯伯老師的課、寫筆記文章 => 繼續往上學習銜接 Vue 的知識點
4. （額外）學習 Git

JS 二刷學長姐 or 有經驗者：
1. 上課、做主線任務
1. 小組任務、週末任務、每週刷題、CodeWars 刷題
1. 挑戰專題＋學習 Git、觀看專題影音
1. （額外）嘗試回覆作業討論區問題
1. （額外）跟卡斯伯老師的課、寫筆記文章


> 以下詳細內容請看開學典禮錄影
    - 更詳盡的學習進度安排
    - 專題執行方式

## 任務時間
主線任務：10/6-12/1 每週一個，共九個
小組任務：10/6-12/1 每週一個，共九個
每日任務：10/9 - 12/8 一到五
每週刷題：10/9 - 12/4 每週一
CodeWars 刷題：10/9 - 12/8 一到五
