# 第一堂：重新認識 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：不要亂命名，助教會盯
## 變數做運算
- **算數運算子**
加、減、乘、除、等於、餘數
- **賦值運算子**
後綴

    let x = 3;
    let y = x++;

前綴

    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 一到五