這是由 JavaScript30 所提供的 30 個 JavaScript 主題的練習挑戰。
此專案包含了我自己的心得和練習紀錄，每個挑戰都很可以學到不少東西呢！
| No | 主題 | 學習重點 | 筆記 | DEMO |
|---|---|---|---|---|
| 01 | JavaScript Drum Kit | ▸ keydown event & keyCode ▸ playing audio ▸ listening for transition end event ▸ dealing with animation event |
筆記 | DEMO |
| 02 | JS and CSS Clock | ▸ CSS transition-timing-function ▸ turn the dateTime into the degrees ▸ 設置 HTML 元素到指定的位置與特定的大小 |
筆記 | DEMO |
| 03 | Playing with CSS Variables and JS | ▸ how to get/set CSS Variable in JS ▸ 綁定操作 HTML 滑動條 & 色彩選擇器 ▸ 取得 HTML 元素上的 data-*="" 的內容值 |
筆記 | DEMO |
| 04 | Array Cardio Day 1 | ▸ Array prototype method : - sort, map, filter, reduce ▸ 可以把資料做過濾或加工處理 ▸ 取得/設置 HTML 元素內文 el.textContent |
筆記 | DEMO |
| 05 | Flex Panels Image Gallery | ▸ CSS flexbox : - 三層巢狀 flex、垂直置中、平均分配空間 ▸ CSS transition，動畫移動過程的變化感 ▸ element.classList 的方法 : - add, remove, toggle, contains |
筆記 | DEMO |
| 06 | Ajax Type Ahead | ▸ use fetch() get the data from ajax ▸ use RegExp() ▸使用正規表示式去尋找文字 & 替換文字 - String.match() & String.replace() ▸ 輸入搜尋文字，顯示列表清單 (資料流畫面) |
筆記 | DEMO |
| 07 | Array Cardio Day 2 | ▸ Array prototype method : - some, every, find, findIndex - splice, slice |
筆記 | DEMO |
| 08 | Fun with HTML5 Canvas | ▸ 待完成 | - - - | - - - - |
| 09 | 14 Must Know Dev Tools Tricks | ▸ 使用 Chrome 開發者工具展示 中斷偵錯 ▸ 全域變數 console 方法的各種用法 |
筆記 | DEMO |
| 10 | Hold Shift and Check Checkboxes | ▸ 使用純 CSS 觸發清單項目的改變 - input:checked + 樣式或選擇器 ▸ 深入研究 HTML DOM checkbox ▸ 監聽事件 click + 鍵盤按鍵，做出更多功能 |
筆記 | DEMO |
| 11 | Custom Video Player | ▸ 待完成 | - - - | - - - - |
| 12 | Key Sequence Detection | ▸ 使用Array.splice()做序列修改與限制字數 ▸ 使用 ES6 Spread 讓字串分解為單一字元 |
筆記 | DEMO |
| 13 | Slide In on Scroll | ▸ 監聽事件 scroll 的使用 ▸ debounce 函數，防止觸發過多的監聽事件 ▸ 視窗位於頁面中的絕對位置 & 長寬大小 - scrollY、scrollX - innerHeight、innerWidth ▸ HTML DOM 元素的絕對位置 & 長寬大小 - offsetTop、offsetLeft - offsetHeight、offsetWidth |
筆記 | DEMO |
| 14 | Object and Arrays - Reference VS Copy | ▸ Object & Array 的傳值參考與複製 ▸ JS 的淺拷貝和深拷貝 (Deep clone) |
筆記 | DEMO |
| 15 | Slide In on Scroll | ▸ 使用 LocalStorage 暫存資料 ▸ Event Delegation 事件委託 ▸ 使 form submit 事件不再刷新頁面 - event.preventDefault() 防止預設動作 ▸ 使用 CSS 自訂 checkbox ▸ 使用原生 JS 做頁面 DOM 元素新增功能 - element.appendChild() 內層加入子元素 |
筆記 | DEMO |
| 16 | ... | ▸ 待完成 |