iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天

0 Like 0 留言 298 瀏覽

鐵人賽 JavaScript DAY 7

AI 時代，基礎要有：JavaScript30 打下紮實基礎系列第 7 篇

技術【Day07】06 - Type Ahead

主題利用 Fetch API、非同步載入的方式，並配合正規表達式處理字串，實現使用者輸入的城市名稱時動態地查找相對應的資料。成果完整程式碼Demo效果...

Hazel ‧ 2024-08-07

0 Like 0 留言 271 瀏覽

鐵人賽 JavaScript DAY 9

AI 時代，基礎要有：JavaScript30 打下紮實基礎系列第 9 篇

技術【Day09】08 - Fun with HTML5 Canvas

主題利用 HTML 的canvas 標籤搭配 JS 做出畫布的效果。實現畫筆顏色(hsl)和粗細變化。成果完整程式碼Demo效果實作重點 Javasc...

Hazel ‧ 2024-08-09

0 Like 0 留言 252 瀏覽

鐵人賽 JavaScript DAY 14

AI 時代，基礎要有：JavaScript30 打下紮實基礎系列第 14 篇

技術【Day14】13 - Slide in on Scroll

主題實作一個當畫面滾動到圖片區域時圖片以動畫方式跑出成果完整程式碼Demo效果實作重點學習 window 事件 Javascript 先了解 w...

Hazel ‧ 2024-08-14

0 Like 0 留言 245 瀏覽

鐵人賽 JavaScript DAY 8

AI 時代，基礎要有：JavaScript30 打下紮實基礎系列第 8 篇

技術【Day08】07 - Array Cardio Day 2

主題練習 JavaScript Array 的方法，可以對照 MDN 文件：Array.prototype.some() 、 Array.prototype...

Hazel ‧ 2024-08-08

0 Like 0 留言 239 瀏覽

鐵人賽 JavaScript DAY 11

AI 時代，基礎要有：JavaScript30 打下紮實基礎系列第 11 篇

技術【Day11】10 - Hold Shift and Check Checkboxes

主題實作出按住 Shift 點擊 check list ，達到連續選取的效果成果完整程式碼Demo效果實作重點 Javascript 類陣列轉陣列...

Hazel ‧ 2024-08-11

0 Like 0 留言 225 瀏覽

鐵人賽 JavaScript DAY 30

AI 時代，基礎要有：JavaScript30 打下紮實基礎系列第 30 篇

技術【Day30】29 - Countdown Timer

主題實作一個倒數計時器。成果完整程式碼Demo效果實作重點 Javascript 取得元素倒數計時器的數字顯示預計結束時間的顯示所有的按鈕...

Hazel ‧ 2024-08-30

0 Like 0 留言 223 瀏覽

鐵人賽 JavaScript DAY 17

AI 時代，基礎要有：JavaScript30 打下紮實基礎系列第 17 篇

技術【Day17】16 - Mouse Move Shadow

主題實作一個滑鼠移動時，產生不同陰影的效果成果完整程式碼Demo效果實作重點 Javascript 先了解基本概念 offsetX , of...

Hazel ‧ 2024-08-17

0 Like 0 留言 207 瀏覽

鐵人賽 JavaScript DAY 13

AI 時代，基礎要有：JavaScript30 打下紮實基礎系列第 13 篇

技術【Day13】12 - Key Sequence Detection

主題使用 Cornify.js 製作簡單的彩蛋效果。成果完整程式碼Demo效果實作重點 Javascript 會使用 cornify.js ，放到...

Hazel ‧ 2024-08-13

0 Like 0 留言 200 瀏覽

鐵人賽 JavaScript DAY 15

AI 時代，基礎要有：JavaScript30 打下紮實基礎系列第 15 篇

技術【Day15】14 - JavaScript References VS Copying

主題介紹 JS 賦值時，reference(參考、傳址) 與 copying(拷貝、傳值)。成果完整程式碼Demo效果實作重點 Javascript 可...

Hazel ‧ 2024-08-15

0 Like 0 留言 190 瀏覽

鐵人賽 JavaScript DAY 10

AI 時代，基礎要有：JavaScript30 打下紮實基礎系列第 10 篇

技術【Day10】09 - Dev Tools Domination

主題介紹 dev tool，了解 javascript 裡 console 的實用功能。成果完整程式碼Demo效果實作重點 Javascript...

Hazel ‧ 2024-08-10

0 Like 0 留言 187 瀏覽

鐵人賽 JavaScript DAY 12

AI 時代，基礎要有：JavaScript30 打下紮實基礎系列第 12 篇

技術【Day12】11 - Custom Video Player

主題利用 <video> 標籤，實作影片播放器的基礎功能成果完整程式碼Demo效果實作重點 <video> (MDN) 對照文...

Hazel ‧ 2024-08-12

0 Like 1 留言 184 瀏覽

鐵人賽 JavaScript

React30——用 React 探索 JavaScript30 的魅力系列第 30 篇

技術 [Day30]_Whack-A-Mole

Day30 要來寫個打地鼠的小遊戲資料 const MOLE_IMAGE_URL = "https://raw.githubuserconten...

ayao ‧ 2024-10-19

0 Like 0 留言 183 瀏覽

鐵人賽 JavaScript DAY 22

AI 時代，基礎要有：JavaScript30 打下紮實基礎系列第 22 篇

技術 Day22】21 - Geolocation

主題實作一個顯示當前方位與速度的工具。成果完整程式碼Demo效果實作重點 Javascript 可以搭配文件 (MDN)這個題目在手機上比較好看到...

Hazel ‧ 2024-08-22

0 Like 0 留言 183 瀏覽

鐵人賽 JavaScript DAY 18

AI 時代，基礎要有：JavaScript30 打下紮實基礎系列第 18 篇

技術【Day18】17 - Sort Without Articles

主題利用編排文章排序來複習陣列方法sort, map, join, replace, trim 搭配正則的使用。成果完整程式碼Demo效果實作重點 J...

Hazel ‧ 2024-08-18

0 Like 0 留言 182 瀏覽

鐵人賽 JavaScript DAY 16

AI 時代，基礎要有：JavaScript30 打下紮實基礎系列第 16 篇

技術【Day16】15 - LocalStorage

主題實作一個 LocalStorage 的紀錄菜單功能成果完整程式碼Demo效果實作重點 Javascript 先了解 LocalStorage(...

Hazel ‧ 2024-08-16

0 Like 0 留言 182 瀏覽

鐵人賽 JavaScript DAY 3

React30——用 React 探索 JavaScript30 的魅力系列第 3 篇

技術 [Day03]_CSS-Variables

Day03 是用 CSS 變數來更改圖片的樣式，可以做出簡單的圖片編輯器，但我剛開始的寫法似乎沒有符合原作的精神（？後來問了 AI 後，發現還是可以從 CSS...

ayao ‧ 2024-09-17

0 Like 0 留言 178 瀏覽

鐵人賽 JavaScript DAY 6

React30——用 React 探索 JavaScript30 的魅力系列第 17 篇

技術 [Day17]_Sort-Without-Articles

Day17 要做的是幫列表排序，但要忽略開頭的定冠詞資料 const bands: string[] = [ "The Plot in You&...

ayao ‧ 2024-10-01

0 Like 0 留言 177 瀏覽

鐵人賽 JavaScript

AI 時代，基礎要有：JavaScript30 打下紮實基礎系列第 31 篇

技術【Day31】30 - Whack A Mole

主題實作一個打地鼠的遊戲，有計分/計時功能。成果完整程式碼Demo效果實作重點 Javascript 取得元素設定隨機時間(第28天的範圍公...

Hazel ‧ 2024-08-31

0 Like 0 留言 172 瀏覽

鐵人賽 JavaScript DAY 25

AI 時代，基礎要有：JavaScript30 打下紮實基礎系列第 25 篇

技術【Day25】24 - Sticky Nav

主題實作一個置頂的 Navbar。成果完整程式碼Demo效果實作重點 CSS 利用 fixed 製作一個會黏在頂部的 nav .fixed-nav...

Hazel ‧ 2024-08-25

0 Like 0 留言 171 瀏覽

鐵人賽 JavaScript DAY 20

AI 時代，基礎要有：JavaScript30 打下紮實基礎系列第 20 篇

技術【Day20】19 - Webcam Fun

主題實作一個 Webcam ，有拍照、下載、濾鏡的效果成果完整程式碼Demo效果實作重點 Javascript 在驅動 webcam 前需要有一個...

Hazel ‧ 2024-08-20

0 Like 0 留言 166 瀏覽

鐵人賽 JavaScript DAY 21

AI 時代，基礎要有：JavaScript30 打下紮實基礎系列第 21 篇

技術【Day21】20 - Speech Detection

主題實作一個語音輸入文字輸出的工具。成果完整程式碼Demo效果實作重點 Javascript 可以搭配MDN 安裝/啟動利用npm來安裝：np...

Hazel ‧ 2024-08-21

0 Like 0 留言 165 瀏覽

鐵人賽 JavaScript DAY 6

React30——用 React 探索 JavaScript30 的魅力系列第 27 篇

技術 [Day27]_Click-and-Drag

Day27 要來做個可以左右拖曳的目錄資料 const items: number[] = Array.from({ length: 25 }, (_, i)...

ayao ‧ 2024-10-12

0 Like 0 留言 164 瀏覽

鐵人賽 JavaScript DAY 26

AI 時代，基礎要有：JavaScript30 打下紮實基礎系列第 26 篇

技術【Day26】25 - Event Capture, Propagation, Bubbling and Once

主題了解 addEventListener 中的第三個參數 Event Bubbling(冒泡事件), Event Capture(捕捉事件), Propa...

Hazel ‧ 2024-08-26

0 Like 0 留言 158 瀏覽

鐵人賽 JavaScript DAY 6

React30——用 React 探索 JavaScript30 的魅力系列第 19 篇

技術 [Day19]_Webcam-Fun

Day19 是要操作照相機來拍照，甚至可以加上濾鏡資料 const videoRef = useRef<HTMLVideoElement>(n...

ayao ‧ 2024-10-04

0 Like 0 留言 155 瀏覽

鐵人賽 JavaScript DAY 19

AI 時代，基礎要有：JavaScript30 打下紮實基礎系列第 19 篇

技術【Day19】18 - Adding Up Times with Reduce

主題利用取得播放清單總秒數來複習陣列方法 reduce, map 的使用。成果完整程式碼Demo效果實作重點 Javascript 取得所有的 l...

Hazel ‧ 2024-08-19

0 Like 0 留言 154 瀏覽

鐵人賽 JavaScript DAY 24

AI 時代，基礎要有：JavaScript30 打下紮實基礎系列第 24 篇

技術【Day24】23 - Speech Synthesis

主題實作一個文字輸入語音輸出的工具，有播放、暫停、語速、音量調整功能。成果完整程式碼Demo效果實作重點 Javascript 可以搭配文件 Sp...

Hazel ‧ 2024-08-24

0 Like 0 留言 153 瀏覽

鐵人賽 JavaScript DAY 28

AI 時代，基礎要有：JavaScript30 打下紮實基礎系列第 28 篇

技術【Day28】27 - Click and Drag

主題實作一個隨著滑鼠點擊左右移動內容的效果。成果完整程式碼Demo效果實作重點 CSS 可以把 overflow 改成 hidden 才不會漏出卷軸...

Hazel ‧ 2024-08-28

0 Like 0 留言 144 瀏覽

鐵人賽 JavaScript DAY 27

AI 時代，基礎要有：JavaScript30 打下紮實基礎系列第 27 篇

技術【Day27】26 - Stripe Follow Along

主題實作一個隨著滑鼠停留後會下拉的選單列效果。成果完整程式碼Demo效果實作重點可以思考一下，動畫出現的時機。 CSS 先製作出樣式滑鼠停留後會...

Hazel ‧ 2024-08-27

0 Like 1 留言 142 瀏覽

鐵人賽 JavaScript DAY 1

React30——用 React 探索 JavaScript30 的魅力系列第 1 篇

技術 [Day01]_Drum-Kit

Day01 是實作用鍵盤模擬打鼓的題目，當使用者按下對應的按鍵，就會播放對應的鼓聲，以下就讓我們來製作 React 的版本ㄅ（之後每天的示範樣式都會使用 Ta...

ayao ‧ 2024-09-15

0 Like 0 留言 139 瀏覽

鐵人賽 JavaScript DAY 6

React30——用 React 探索 JavaScript30 的魅力系列第 18 篇

技術 [Day18]_Adding-Up-Times-with-Reduce

Day18 主要是要練習用 Array 的 reduce 方法來做加總的計算資料 const videosData = [ { id: 1, title:...

ayao ‧ 2024-10-04

技術 【Day07】06 - Type Ahead

技術 【Day09】08 - Fun with HTML5 Canvas

技術 【Day14】13 - Slide in on Scroll

技術 【Day08】07 - Array Cardio Day 2

技術 【Day11】10 - Hold Shift and Check Checkboxes

技術 【Day30】29 - Countdown Timer

技術 【Day17】16 - Mouse Move Shadow

技術 【Day13】12 - Key Sequence Detection

技術 【Day15】14 - JavaScript References VS Copying

技術 【Day10】09 - Dev Tools Domination

技術 【Day12】11 - Custom Video Player

技術 [Day30]_Whack-A-Mole

技術 Day22】21 - Geolocation

技術 【Day18】17 - Sort Without Articles

技術 【Day16】15 - LocalStorage

技術 [Day03]_CSS-Variables

技術 [Day17]_Sort-Without-Articles

技術 【Day31】30 - Whack A Mole

技術 【Day25】24 - Sticky Nav

技術 【Day20】19 - Webcam Fun

技術 【Day21】20 - Speech Detection

技術 [Day27]_Click-and-Drag

技術 【Day26】25 - Event Capture, Propagation, Bubbling and Once

技術 [Day19]_Webcam-Fun

技術 【Day19】18 - Adding Up Times with Reduce

技術 【Day24】23 - Speech Synthesis

技術 【Day28】27 - Click and Drag

技術 【Day27】26 - Stripe Follow Along

技術 [Day01]_Drum-Kit

技術 [Day18]_Adding-Up-Times-with-Reduce

標記使用者

技術【Day07】06 - Type Ahead

技術【Day09】08 - Fun with HTML5 Canvas

技術【Day14】13 - Slide in on Scroll

技術【Day08】07 - Array Cardio Day 2

技術【Day11】10 - Hold Shift and Check Checkboxes

技術【Day30】29 - Countdown Timer

技術【Day17】16 - Mouse Move Shadow

技術【Day13】12 - Key Sequence Detection

技術【Day15】14 - JavaScript References VS Copying

技術【Day10】09 - Dev Tools Domination

技術【Day12】11 - Custom Video Player

技術【Day18】17 - Sort Without Articles

技術【Day16】15 - LocalStorage

技術【Day31】30 - Whack A Mole

技術【Day25】24 - Sticky Nav

技術【Day20】19 - Webcam Fun

技術【Day21】20 - Speech Detection

技術【Day26】25 - Event Capture, Propagation, Bubbling and Once

技術【Day19】18 - Adding Up Times with Reduce

技術【Day24】23 - Speech Synthesis

技術【Day28】27 - Click and Drag

技術【Day27】26 - Stripe Follow Along