系列文章
JS30 Day 1 - Drum Kit
成品連結：Drum Kit 事前準備 成品預期效果 當按下指定按鍵時，播放音效以及渲染畫面(新增／移除 class 'playing') 步驟 監聽畫面按鍵...
JS30 Day 2 - JS & CSS Clock
成品連結：JS & CSS Clock 來到第二天啦！今天要做的是時鐘，話不多說，我們就開始吧～ 事前準備 步驟 設定每秒更新畫面(setInterv...
JS30 Day 3 - CSS Variables
成品連結：CSS Variables 第三天我們要來利用 JS 操作 CSS，同時也會用到 CSS 內建的變數功能 (類似 SASS/SCSS 的變數功能)。...
JS30 Day 4 - Array Cardio Day 1
頁面連結：Array Cardio Day 1 (請開啟 console 看結果) 今天稍微輕鬆一點，不會寫出程式來，而只是複習一下 array 的各種 met...
JS30 Day 5 - Flex Panel Gallery
成品連結：Flex Panel Gallery，HTML & CSS 程式碼 今天的作品其實寫的 JS code 並不多，與前面有許多重複的地方，反而較...
JS30 Day 6 - Type Ahead
完成作品：Type Ahead、程式碼 這天預期的結果是當搜尋時搜尋結果與搜尋框相同的文字會被反白，所以嚴格來說我並沒有達成預期的結果，但還是請大家將就一點看了...
JS30 Day 7 - Array Cardio Day 2
頁面連結(請打開 console 查看) 今天不寫程式，學習 (或是複習) 一些 Array methods 吧！ 先列出本篇所涵蓋的 methods so...
JS30 Day 8 - Fun with HTML5 Canvas
今天要做的是操作 Canvas，並做出類似小畫家的效果，隨意在畫布上作畫。其實在做這一天內容前我沒有接觸過 Canvas，只好臨時抱佛腳趕快學一些基本的東西，還...
JS30 Day 9 - Dev Tools Domination
頁面連結(請打開 console 查看) 今天同樣不會做出東西，而是學習 console 的各種小技巧！大家可以將下面示範的程式碼貼在瀏覽器玩看看 consol...
JS30 Day 10 - Hold Shift and Check Checkboxes
成品連結：Hold Shift and Check Checkboxes、程式碼 今天要做的是選單多重選取！這功能就像是當你在資料夾選取一個項目，然後按著 sh...