###### tags: `影片索引`
# Week7 影片內容目錄
## 程式導師實驗計畫第二期：Week4-2 - JavaScript
[程式導師實驗計畫第二期：Week4-2 - JavaScript](https://www.youtube.com/watch?v=5iaNYpVedIU)
06:00 Hoisting
17:35-20:20 temporal dead zone
23:10 call-back function 概念介紹
28:20 call-back function code 示範
37:15 GET v.s POST
41:00 瀏覽器文章導讀
43:20 CPU & GPU
49:00 program 中的 process 和 thread （程序和執行緒）（或翻進程和線程）
55:00 Browser 的架構

- 同步 v.s. 阻塞？

[FE102] 前端必備：JavaScript
## JavaScript 與瀏覽器的溝通
### 執行 JavaScript 的一百種方式
00:55 在 HTML 中，用 <script> 標籤直接寫
01:50 在 HTML 中，用 <script> 標籤 src 引入一個 .js 檔
03:05 在 Node.js 和瀏覽器上執行 JavaSript 的差別

### DOM 是什麼？
00:25 MDN——DOM 是什麼？
01:50 用 JavaScript 改動 DOM

- 把一個 document 轉換成 object

### 如何選到想要的元素：getElements
00:10 getElementsByTagName
01:30 <script> 標籤位置對執行結果的影響
04:00 getElementsByClassName
05:20 getElementById
06:10 querySelector("CSS選擇器")
07:30 querySelectorAll

- 會把 <script>標籤放在</body>的上面
- querySelector() 只會回傳它找到的第一個
- querySelectorAll 會回傳所有

### 改變元素的 CSS
00:10 `.style.'CSSProperty' = value`code 示範
01:15 遇到 `-` 的時候——解法一：用 bracket notation
01:35 遇到 `-` 的時候——解法二：用 camel case 寫 CSSproperty
:bangbang: 02:50 實作上的做法

### 改變元素的 Class
:bangbang: 00:50 用 <script> 新增 class `'element'.classList.add('className')`
01:15 嘗試新增多個 class
:bangbang: 01:30 用 JavaScript 移除 class：`element.classList.remove('className')`
:bangbang: 02:20 .classList.toggle('className')
- 開的就會關起來，關的就會打開

### 改變內容：inner、outer 的 HTML 與 text
00:20 innerText
02:00 innerHTML
:bangbang: 02:55 outerHTML

### 插入與刪除元素：appendChild 與 removeChild
00:15 removeChild
01:45 appendChild

- 需要找到他的上一層

## JavaScript 網頁事件處理
### eventListener 與 callback function
00:15 code
01:20 eventListener
01:50 callback function
02:10 匿名函式
:bangbang: 03:10 各種事件：scroll, keyDown

### callback function

00:30 為什麼會有 callback function：因為不要被卡在那裡

### event(e) 是什麼？
00:05 click event
02:20 window 事件
04:10 keydown
04:50 切換背景色功能

### 表單事件處理 onSubmit
00:20 code
02:10 preventDefault

### 阻止預設行為：preventDefault
00:00 e.preventDefult 阻止各種預設事件
00:20 阻止超連結
01:10 阻止 key

### 瀏覽器的事件傳遞機制
00:35 做一個 addEvent function 幫我們在想要的 element 上 addEventListener，在點擊時會 log className 在 console 上
01:55 事件傳遞機制

### 事件傳遞機制詳解：捕獲與冒泡
01:10 怎麼把 eventListener 掛在不同階段？
03:30 知道捕獲和冒泡之後可以怎麼用？
- 可以把 eventListener 掛在父元件上，進行「事件代理」

### stopPropagation
00:30 code
01:45 很有趣的事情——讓你所有的 eventListener 都不會觸發
02:30 在同一個 node 同時是可以有複數個eventListener 的
03:30 stopImmediatePropagation 當前立刻阻止所有事件傳遞。

### 新手都會錯（待補）
### 欸等等幫我拿餐點：event delegation
01:10 事件代理 event delegation 說明
01:50 event delegation 實作

### 綜合示範：簡易密碼產生器
:bangbang: 00:20 刻介面 `<label for>`
03:30 程式邏輯怎麼實作
11:25 優化——做成 function
13:00 第二種優化法

### 綜合示範：動態表單通訊錄

## 如何在瀏覽器上儲存資料？
### 網頁的資料都存在哪裡？為什麼換台電腦購物車就清空了？
00:00 簡介網頁的資料儲存——瀏覽器、後端、JavaScript
### :bangbang: 最古老的方式：Cookie
00:00 簡述：會自動被帶到 sever 端的小型文字檔，sever 也可以把資料庫寫到 cookie 裡
00:30 資料庫寫到 cookie 裡的方式
01:30 cookie 被用在身份驗證上的方式
03:20 維基百科：小型的存在用戶端的資料

### 最推薦的儲存方式：local storage
00:30 code 示範
01:10 拿到 input 內容
01:35 儲存的做法：window.localStorage.setItem('key', value)
03:05 確認有沒有存到:devtool->application->storage->local storage
03:15 拿出值 window.localstorage.getItem('key')
04:15 確認是否有 localStorage

### :bangbang: 一閃即逝：session storage
-00:35 session 說明：以時間分區，區內為同一session
00:35 code :window.sessionStorage.setItem('key', value)
00:50 sessionStorage v.s. localStorage
00

## 中場總結
### 學了這些之後，可以幹嘛？
### 遺漏的最後一塊拼圖：資料的交換
00:10 client 和 sever 溝通圖
00:20 如果 response 是一個 .html 檔案
01:20 如果 response 是一個 JSON 檔案

### 用 node.js 呼叫 API 與在網頁上呼叫的根本差異是什麼？
00:20 用 node.js 發 request 的場合
01:10 用 browser 發 request 的場合：透過瀏覽器
02:00 差別在：有沒有人（瀏覽器）限制你，或者給你其他資訊

### 傳送資料的第一種方式：表單 form
00:10 刻介面：表單
01:35 說明用表單傳一個帶有內容的 GET request
02:50 改用 POST 的狀況
03:30 總結：這種方法和 JS 一點關係都沒有，就是發一個頁面到新頁面去，然後渲染收到的資料。

###