---
title: 'JS 直播班 Week 1 - 變數設計'
tags: JS 直播班 ,JS , JavaScript
description: 2021/02/19
---

JS 直播班 -- Week 1 - 變數設計
===

## JavaScript 全貌
如何透過介面操控資料狀態 (先把資料有條理的整合好，才能做後續的處理)
* JSON 陣列物件資料集 : 複雜的資料集
* DOM 操控 HTML 標籤 : 例如點擊按鈕就會觸發 JavaScript 來更改畫面上的行為
* 套件
* AJAX : 向後端要資料，獲得新狀態後同步更新在網頁或套件上
* 框架 : 因為會向很多服務要資料，必須等資料回傳並整理好後再寫到網頁上，所以要使用框架有條理整合各種服務

## 宣告變數流程

若在「開發人員工具」"console" 裡輸入以下程式碼，試問當**網頁重新整理**後，變數 orange 是否還存在 ?

let orange = 99;   // 在「開發人員工具」"console" 裡輸入

在「Chrome 開發除錯工具」上宣告變數的話，資料狀態會先動態的新增並**暫存**起來。
Chrome 在紀錄 JS 資料狀態時，可以依照開發者的想法即時去新增很多資料上去，只是透過「Chrome 開發除錯工具」即時的寫一個內容上去。

### 當網頁重新整理時，JS 的資料狀態變化過程 : (上半部錄影 43:20)
1. 當網頁重新整理時，會重新執行 all.js (本來紀錄的變數與值會先清空)。
2. index.html 也會從上到下執行，直到執行 <script src="all.js"></script> 這行時，又把原本寫在 all.js 的資料狀態一一寫入。
3. orange 變數就不見了，因為 orange 是使用「開發人員工具」"console" 除錯工具修改資料狀態才動態加入的。

## 變數資料存放記憶體觀念

> 每個網頁**分頁**都有自己存放的記憶體空間

### 記憶體到底紀錄存放在哪裡 ?

1. 把以下程式碼貼到 VSCode。(字串前後要使用「雙引號 " "」包起來)

let abkk = "城邑左營慈濟宮，簡稱城邑慈濟宮、左營慈濟宮，當地人俗稱老祖廟"

2. 在「開發人員工具」"console" 裡輸入變數名稱，看看是否有值
3. 打開「開發人員工具」"Memory" : 查看記憶體裡面到底有甚麼資訊
4. 使用「開發人員工具」"Memory" 裡的「Heap snapshot 快照」功能把當下的變數照起來

> Heap snapshot 快照功能 : 資料變動很快，把"當下"的資訊照起來 (把當下的資料格式記錄起來)
>

### :pencil2: 練習一

Q : 請問以下有幾個變數、幾個型別、幾個記憶體空間 ？
A : 1 個變數、2 個型別、4 個記憶體空間

let a = 1;
a = 2;         // 賦予新值將會寫入新的記憶體空間
a = 3;
a = 'hello';   // 最後指向的記憶體空間是 'hello'

(1-3行) 的值沒有用到，會被記憶體釋放掉，但是什麼時候才釋放，不知道!

### :pencil2: 練習二

Q : 請問以下有幾個變數、幾個型別、幾個記憶體空間 ？
A : 2 個變數、2 個型別、3 個記憶體空間

let a = 1;
let b = 3;
b = 'qq';

### :pencil2: 練習三

Q : 請問以下有幾個變數、幾個型別、幾個記憶體空間 ？
A : 1 個變數、2 個型別、4 個記憶體空間

當出現兩個 'hi' 值，才能做加總

let a = 1;
a = 'hi';
a = a + 'hi';   // 記憶體空間新出現 'hi' 值，就會把他記起來

### :pencil2: 練習四

Q : 請問以下有幾個變數、幾個型別、幾個記憶體空間 ？
A : 1 個變數、1 個型別、3 個記憶體空間

let a = 2; // a 賦予值為 2 
a * 3;     // 只是運算，並未賦予任何值

### :pencil2: 練習五

Q : 請問以下有幾個變數、幾個型別、幾個記憶體空間 ？
A : 2 個變數、1 個型別、4 個記憶體空間

let a = 2;
let b = 3;
a += 3;   // a = a + 3  (這個 3 並未被任何變數指向，記憶體空間會多 3 的位置)
// 有記憶體空間才能去做運算


## 原始型別
### null (空值)

可以設定 null，把資料清空 :
裡面本來有值，但希望要清空成空值，變成沒有資料

let abkk = "城邑左營慈濟宮，簡稱城邑慈濟宮、左營慈濟宮，當地人俗稱老祖廟";
abkk = null;  // 讀取 abkk 的值，並把裡面的資料清空

## JS 變數命名

### 使用小駝峰命名

let bananaPrice = 30;
let fatherName = 'Tom';

## :gear: carbon : 將 Code 轉成圖片的軟體工具

### [carbon 連結](https://carbon.now.sh/)

> 可以匯出 png 的圖片

---

## :memo: 學習回顧
### 了解下方程式碼執行的過程

let a = 1;  // 宣告變數 a 並賦予值為數字型別 1 
let b = 0;  // 宣告變數 b 並賦予值為數字型別 0
a = 3;      // 讀取變數 a 並賦予新值為 3 
a = b + 2;  // 讀取變數 a 並賦予新值為 b + 2 (即 2) 
a - b;      // 只是運算，並未賦予任何變數
b += 1;     // 即 b = b + 1，讀取變數 b 並賦予新值為 b + 1 (即 1) 

## :+1: 相關參考文件
:::info
[week 1 老師筆記連結](https://hackmd.io/WMFbNTkLT660D_cG1RZSag)
[JavaScript 開發中常見錯誤解決辦法](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)
:::

<style>
.red {
color: red;
}
.green {
color: green;
}
</style>