---
tags: JS 直播班 - 2022 秋季班
---
# 第一堂：重新認識 JavaScript 之術
## 開課提醒
1. 錄影
2. 將[書籤](https://rpg.hexschool.com/training/32/show)加入最愛
5. 覆述本課宗旨
6. **[學習進度安排](https://whimsical.com/js-LEKdLKm6ejqhEPwCL6UYPF)**
8. 主線任務獎品(達四關)，每日任務安排
9. 邏輯培養
* 每週一提供六角函式邏輯題
* [下週題目：四則運算](https://hackmd.io/lvFWrEseSuWrWs_tX7RuIg)
* 每日提供 Codewars 一道題目
* [影片教學](https://courses.hexschool.com/courses/202011131/lectures/43033045)
* [Codewars 論壇交流](https://discord.com/channels/801807326054055996/1024162933619572746)
12. 中場休息，訂出小組討論時間

## 宗旨
秉持六角學院熱於分享的精神，秉持熱心、耐心、同理心為根基，不僅帶領學員掌握前端技術，並提供以學員職涯發展為中心的教學環境。

## 願景
**成為全世界最優質的 JS 教學教育單位**

## 義務與責任
1. 六角團隊有責任帶領每位學員，掌握 JavaScript 技能
2. 六角團隊有義務帶領整體班級，凝聚班級向心力，藉由同濟效應提升學習意願
3. 六角團隊必須考量每位學員的背景，由淺入深地規劃課程內容
4. 六角團隊需為學員設計階段性目標，讓學員能一步步完成任務，進以掌握本門課程技能

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

1. 人腦知道如何思考，透過程式讓電腦依照我們想法來運作
2. 學會如何 **[拆解問題](https://whimsical.com/4oYtsHWjADWsieeNrjY1Xa)**：遇到問題習慣先拆解成小任務，再逐一攻略。**第二堂重點**。

> 解決懂很多語法，但不知道如何運用
> 解決知道怎麼參考別人，一直複製貼上

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

## 建立環境
1. 新增 index.html、all.js
2. 輸出語法 `alert("Hello world!!")` 觀看是否有成功

## 宣告變數流程，以 excel 為例

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

> 彩蛋話題1：工程師最長停留的頁面是？
> 彩蛋話題2：不要亂命名，助教會盯

## 原始型別 (Primitive Type)

* *number*
* *string*
* *boolean*
* *undefined*
* null
* symbol

> 學變數，讓電腦幫您記錄資訊
> 可用 let、const、var 來宣告變數
> 除了原始型別 (Primitive 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))

## JS 變數命名觀念
* 使用[駝峰式命名](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`

## 字串與數字型別講解
* 數字：計算機功能、支援格式、變數帶變數
* 字串：字串相加
* 賦值運算子：+=、-=、a++、a--
* 輔助語法：console.log

> 彩蛋話題3：工程師都去哪裡找答案？
## 小組抽考一
* [小組填答區](https://forms.gle/73tGTBC4v6DTt3EK9)
* [1~5題目](https://codepen.io/Bingbingboom/pen/OJgebwx?editors=0010)
* [6-10題目](https://codepen.io/Bingbingboom/pen/VwWJPPz?editors=0010)
* [11~15題目](https://codepen.io/Bingbingboom/pen/LYLKWQX?editors=0010 )

## 常見編譯錯誤，不要害怕錯誤
### 不要害怕程式，只要你相信程式，程式就會幫你/妳
* 單字拼錯，導致語法解析錯誤： `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://cacoo.com/diagrams/1NI6DIM02F0zwNkk/D3C8C)、[影片延伸介紹](https://www.youtube.com/watch?v=QuCu4iDpPTU)
* 查詢記憶體位置：[範例Code](https://codepen.io/hexschool/pen/rNWwOPo?editors=0010)、[觀察記憶體快照](https://developers.google.com/web/tools/chrome-devtools/memory-problems/heap-snapshots?hl=zh-tw)

## 記憶體考題
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;

## 小組抽考二

## 最後分享
1. <a href="https://rpg.hexschool.com/training/32/task?type=detail&id=312" target="_top">第一關主線任務</a>
2. 小組任務設計

## 週末任務：記憶體接龍

請自己畫出以下三題，並在 [discord](https://discord.com/channels/801807326054055996/1010121077323726919/1024894812442333205) 上，同時自己出第四題，並私訊觀看下一位學生是否作對

## 第 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. 可以先做三題後並自訂題目後，先卡位，等前一位出完題，再私訊提供第四張圖

## 週末任務