在練習 JS30 Day4 的這段時間，剛好看到六角學院卡斯柏的 JS 陣列處理技巧直播，這篇會將影片內容記錄下來，也加深自己的印象。 在開始之前，先提及一張圖搞懂 JS array 函式，這張圖是一位波蘭工程師分享在 Twitter 上的，非常厲害。

在某次的面試中，被問到 meta 相關問題，卻回答不出來，才發覺有些HTML的觀念非常的重要。切版看似簡單，但要在短時間內切出1px不差，且不會破版的版，是需要經過大量練習的。 所以才有此系列的誕生，會記錄過往學習切版時，被自己忽略的重點。 HTML 簡介

學習到的知識點 filter() 篩選資料 map() 與 forEach() 的差異 sort() 的穩定排序 reduce() 的用法 querSelectorAll() 篩選資料 sort() 與 spilt() 組合技

介紹CSS Diner 是一個輸入選擇器來破關的小遊戲，前一陣子再學習其他技術，一段時間沒使用 css 語法後，就忘記了許多，推薦大家可以來這邊練習。 這邊會記錄我觀念不熟，或是不知道該如何解決關卡! CSS Diner - Where we feast on CSS Selectors!

學習到的知識點 querySelector 與純陣列的差異 dataset 的使用方法 document.documentElement 為網頁的根元素 事件監聽 change 與 mousemove CSS 變數，( 宣告：--名稱：值 )

學習到的知識點 透過 CSS 選擇元素 (querySelector) Date 時間物件 取得日期物件的本地時間 (getHours，getSeconds，getMinutes) 透過 JS 控制 CSS (style.transform) JS 計時器 (setInterval，setTimeout，requestAnimationFrame)

學習到的知識點 事件監聽 (addEventListener(event,function)) 按鍵事件 (keydown，keyup，keypress) 透過 CSS 選擇元素 (querySelector，querySelectorAll) 音效控制（element.play( )，element.currentTime)

鍵盤的操作網頁中鍵盤的操作分為三種，keydown，keypress，keyup。 可以在此網站查詢鍵值。

data-* attribute 這個東西很常出現，但卻常常搞不清楚他到底是什麼？ 解釋屬性

什麼是 Hoisting?Hoisting 就是「提升」的意思。