---
tags: JS 直播班 - 2021 春季班
---

# 第一堂：重新認識 JavaScript 之術

## 開課提醒
1. 錄影
2. 點名，[報到](https://rpg.hexschool.com/training/17/calendar) Code：`Gce8lrOV5V4u`
4. 將[書籤](https://rpg.hexschool.com/training/17/show)加入最愛
5. 覆述本課宗旨
6. **學習進度安排**
8. 主線任務獎品(達四關)，每日任務安排
9. [支線任務](https://docs.google.com/spreadsheets/d/12QrToUpHacFsSYkeCqSfOUBbt4G3nW9SPxodI6TITx4/edit#gid=1189541612)
10. 中場休息，訂出小組討論時間

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

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

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

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

1. 人腦知道如何思考，透過程式讓電腦依照我們想法來運作
2. 運算思維流程
a.**[拆解問題](https://whimsical.com/4oYtsHWjADWsieeNrjY1Xa)**：遇到問題習慣先拆解成小任務，再逐一攻略。**第二堂重點**。
b.找出規律性
c.抽象化
d.設計演算法

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

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

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

## 宣告變數流程

> // 宣告一個變數為 a，並賦予值為數字型別 1
> let a = 1
>

## 原始型別 (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`

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

## 布林、undefined、null
* 布林 true、false 使用時機
* undefined、null 使用時機
* 字串轉數字、數字轉字串

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

## 比較運算子、邏輯運算子
* 比較運算子：>=、<=
* =、兩個 = 、===
* &&、||

## 第一關主線任務

* <a href="https://rpg.hexschool.com/training/17/task?type=detail&id=168" target="_top">第一關主線任務</a>