第十屆

web
一起挑戰 JavaScript 30 吧!
Henry

系列文章

DAY 1

JS30 Day 1 - Drum Kit

成品連結:Drum Kit 事前準備 成品預期效果 當按下指定按鍵時,播放音效以及渲染畫面(新增/移除 class 'playing') 步驟 監聽畫面按鍵...

DAY 2

JS30 Day 2 - JS & CSS Clock

成品連結:JS & CSS Clock 來到第二天啦!今天要做的是時鐘,話不多說,我們就開始吧~ 事前準備 步驟 設定每秒更新畫面(setInterv...

DAY 3

JS30 Day 3 - CSS Variables

成品連結:CSS Variables 第三天我們要來利用 JS 操作 CSS,同時也會用到 CSS 內建的變數功能 (類似 SASS/SCSS 的變數功能)。...

DAY 4

JS30 Day 4 - Array Cardio Day 1

頁面連結:Array Cardio Day 1 (請開啟 console 看結果) 今天稍微輕鬆一點,不會寫出程式來,而只是複習一下 array 的各種 met...

DAY 5

JS30 Day 5 - Flex Panel Gallery

成品連結:Flex Panel Gallery,HTML & CSS 程式碼 今天的作品其實寫的 JS code 並不多,與前面有許多重複的地方,反而較...

DAY 6

JS30 Day 6 - Type Ahead

完成作品:Type Ahead、程式碼 這天預期的結果是當搜尋時搜尋結果與搜尋框相同的文字會被反白,所以嚴格來說我並沒有達成預期的結果,但還是請大家將就一點看了...

DAY 7

JS30 Day 7 - Array Cardio Day 2

頁面連結(請打開 console 查看) 今天不寫程式,學習 (或是複習) 一些 Array methods 吧! 先列出本篇所涵蓋的 methods so...

DAY 8

JS30 Day 8 - Fun with HTML5 Canvas

今天要做的是操作 Canvas,並做出類似小畫家的效果,隨意在畫布上作畫。其實在做這一天內容前我沒有接觸過 Canvas,只好臨時抱佛腳趕快學一些基本的東西,還...

DAY 9

JS30 Day 9 - Dev Tools Domination

頁面連結(請打開 console 查看) 今天同樣不會做出東西,而是學習 console 的各種小技巧!大家可以將下面示範的程式碼貼在瀏覽器玩看看 consol...

DAY 10

JS30 Day 10 - Hold Shift and Check Checkboxes

成品連結:Hold Shift and Check Checkboxes、程式碼 今天要做的是選單多重選取!這功能就像是當你在資料夾選取一個項目,然後按著 sh...