終於要認真把JS30看一遍、做一遍了，這個系列文我會把成果放在GitHub上，基本上不會完全照著影片做，會略作修改，有興趣可以去下載看看，文章只會紀錄我目前不熟的部分，非常推薦大家這個免費的線上課程，下方附上連結。 Javascript30

Day 1

  • element.addEventListener(event, function, useCapture) event放事件字串 function放偵聽到事件發生時要做的事 useCapture放boolean值，預設是false，事件會從內到外觸發(event bubbling)，設定為true則是從外到內(event capturing)。 冒泡、捕獲範例 範例也是用addEventListener做的

  • element.classList 新增、刪除節點的class add(class1, class2, …) remove(class1, class2, …) 還有偵測是否存在這個class，存在則刪除、不存在則新增 toggle(class)

在Day1的實作裡是偵聽keydown事件，但是壓著按鍵就會多次觸發，我自己則是用keyup，在離開按鍵的時候才觸發的感覺有點像音樂遊戲的延遲。

Day 2

  • setInterval(function, milliseconds) 每隔一段第二個參數設定的時間就會自動執行第一個參數傳入的方法，時間單位是毫秒(千分之一秒)。

CSS

  • transform-origin 通常在HTML裡的方向設定都是以左上角為基準點，這個CSS語法是配合transform使用，用來移動X、Y、Z軸的基準點，這個範例裡只設定一個100%讓X軸基準點移到最右邊。
  • transition-timing-function: cubic-bezier() 設定transition以貝茲曲線的方式轉場，可以在chrome的開發者工具直接拉線調整。

Day 3

  • dataset 讀取tag裡的data-*屬性

  • style.setProperty(propertyName, value, priority)

style.setProperty('color', 'red');
// 等於 
style.padding = 'red';