iT邦幫忙

鐵人檔案

2019 iT 邦幫忙鐵人賽
回列表
Modern Web

一起挑戰 JavaScript 30 吧! 系列

藉由 JS30 了解不熟悉的語法和沒使用過的功能,一起讓 JS 變得更純熟!

鐵人鍊成 | 共 30 篇文章 | 34 人訂閱 訂閱系列文 RSS系列文 團隊好想工作室第二屆鐵人賽
DAY 1

JS30 Day 1 - Drum Kit

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

2018-10-16 ‧ 由 Henry 分享
DAY 2

JS30 Day 2 - JS & CSS Clock

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

2018-10-17 ‧ 由 Henry 分享
DAY 3

JS30 Day 3 - CSS Variables

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

2018-10-18 ‧ 由 Henry 分享
DAY 4

JS30 Day 4 - Array Cardio Day 1

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

2018-10-19 ‧ 由 Henry 分享
DAY 5

JS30 Day 5 - Flex Panel Gallery

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

2018-10-20 ‧ 由 Henry 分享
DAY 6

JS30 Day 6 - Type Ahead

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

2018-10-21 ‧ 由 Henry 分享
DAY 7

JS30 Day 7 - Array Cardio Day 2

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

2018-10-22 ‧ 由 Henry 分享
DAY 8

JS30 Day 8 - Fun with HTML5 Canvas

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

2018-10-23 ‧ 由 Henry 分享
DAY 9

JS30 Day 9 - Dev Tools Domination

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

2018-10-24 ‧ 由 Henry 分享
DAY 10

JS30 Day 10 - Hold Shift and Check Checkboxes

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

2018-10-25 ‧ 由 Henry 分享