tags: `影片索引`

Week7 影片內容目錄

程式導師實驗計畫第二期：Week4-2 - JavaScript

程式導師實驗計畫第二期：Week4-2 - JavaScript
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' = valuecode 示範
01:15 遇到 - 的時候——解法一：用 bracket notation
01:35 遇到 - 的時候——解法二：用 camel case 寫 CSSproperty
02:50 實作上的做法

改變元素的 Class

00:50 用 <script> 新增 class 'element'.classList.add('className')
01:15 嘗試新增多個 class
01:30 用 JavaScript 移除 class：element.classList.remove('className')
02:20 .classList.toggle('className')

開的就會關起來，關的就會打開

改變內容：inner、outer 的 HTML 與 text

00:20 innerText
02:00 innerHTML
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 匿名函式
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 實作

綜合示範：簡易密碼產生器

00:20 刻介面 <label for>
03:30 程式邏輯怎麼實作
11:25 優化——做成 function
13:00 第二種優化法

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

如何在瀏覽器上儲存資料？

網頁的資料都存在哪裡？為什麼換台電腦購物車就清空了？

00:00 簡介網頁的資料儲存——瀏覽器、後端、JavaScript

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

一閃即逝：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 一點關係都沒有，就是發一個頁面到新頁面去，然後渲染收到的資料。

tags: 影片索引