D51_W6 直播檢討、W7 開始

W6 直播檢討

• 想請老師舉具體的例子，關於 這篇文章 中提到的前端 controller 和 model 是哪些東西

• 可以直播講解捕獲與冒泡的部分嗎 >< 謝謝老師

  • 有些第七週的問題聽不懂

Chrome 除錯大解密

• 22: DOM breakpoints 偵測 DOM 結構狀態
  • 利用 break on 斷點去看在 html 動畫的效果
• 23: JS 任務流進階控制事項（上）
  • 行內段點可以看到函式內執行前後的效果
• 24: JS 任務流進階控制事項（下）
  • 利用 source 裡面的 上下箭頭（step into next function call）, (step out of current function) 進入函式執行流程
• 25: 從 Call Stack 追蹤函數程式
• 26: ajax XHR 斷點偵測
• 這些都一知半解，可能要等到學到後面再看一次

FE102

• DOM 是什麼？

  • Document Ojbect Model 把一個檔案轉換成物件，JS 跟 html 之間的橋樑

• 如何選到想要的元素：getElement

  • getElementsByTagName
  • getElementsByClassName
  • getElementsById
  • querySelector
  • querySelectorAll

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

  • innerText, innerHTML 比較常用
    • innerText: 印出標籤裡面的文字
    • innerHTML: 把標籤中的東西全部拿出來
  • outerText, outerHTML 比較少用
• 插入與刪除元素：appendChild 與 removeChild
  • 應該可以用在作業 todo 刪除跟新增清單

JavaScript 網頁事件處理

• eventListener 與 callback function

  • eventListener 事件監聽：當...就...
    • 有很多事件：scroll, keydown...等等

• 詳細講解 callback function 回呼函式

  • 一種等餐呼叫器的概念

• event(e) 是什麼碗糕？

  • e, evt = event 簡寫

• 表單事件處理 onSubmit

  • 用在表單驗證上面

• 欸等等幫我拿餐點：event delegation

  • 事件代理人