iT邦幫忙

鐵人檔案

第 12 屆 iThome 鐵人賽
回列表
Modern Web

森林系工程師之開始工作才學JS?! 系列

以JavaScript 30挑戰為主軸,可能會補充其他的東西。

DAY 1

Day00 -- Intro

嗨~閱讀這篇文章的人,你好我是Luke,這是我第二次挑戰鐵人賽,上次因為出了一些小意外,所以我在第27天斷賽了?!今年我打算以JavaScript30為題目,記...

2020-09-14 ‧ 由 lukechu 分享
DAY 1

Day01 -- JavaScript Drum Kit

目標 第一天的目標是以JavaScript製作Drum Kit,如下圖所示,當指定鍵盤被按下時,要播放相應音效 repo Step1 window.addEve...

2020-09-14 ‧ 由 lukechu 分享
DAY 2

Day02 -- CSS + JS Clock

repo DEMO 目標 今天要做的是以JS + CSS 製作一個實時的時鐘 Step1 CSS .hand { transform-origin: 100...

2020-09-15 ‧ 由 lukechu 分享
DAY 3

Day03 -- CSS Variables

目標 今天要來學習的是CSS變數,透過JS變更CSS變數,改變圖片的paddind(元素內距), background color(元素背景色), blur(圖...

2020-09-16 ‧ 由 lukechu 分享
DAY 4

Day04 -- Array Cardio Day 1

repo 目標 今天要來學習的是陣列操作,包含filter(), map(), sort(), reduce() 範例資料 const inventors =...

2020-09-17 ‧ 由 lukechu 分享
DAY 5

Day05 -- Flex Panels Image Gallery

repo 目標 今天要來做的是使用Flex進行圖片展示,然後再加上一些點擊特效 Step1 首先,要先來調整CSS,圖片一開始會以下圖的方式排列 我們要將圖片...

2020-09-18 ‧ 由 lukechu 分享
DAY 6

Day06 -- Ajax Type Ahead

目標 今天要做的是動態顯示查詢結果,如下圖所示,當輸入查詢字串時,顯示符合條件的字串並highlight Step1 透過fetch()取得資料 const e...

2020-09-19 ‧ 由 lukechu 分享
DAY 7

Day07 -- Array Cardio Day 2

目標 今天要來學習的是陣列操作,包含some(), every(), find(), findIndex(), splice() 範例資料 const peop...

2020-09-20 ‧ 由 lukechu 分享
DAY 8

Day08 -- HTML5 Canvas

目標 今天要來學習HTML5 Canvas(畫布),並且加上一些酷東西 canvas <canvas> 是一個 HTML 元素,我們可以利用程式腳本...

2020-09-21 ‧ 由 lukechu 分享
DAY 9

Day09 -- Console Tricks

目標 今天要來學習一些控制台(console)小技巧 console.log() console.log('hello') 向Web控制台輸出一條訊息 插入字...

2020-09-22 ‧ 由 lukechu 分享