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

0 Like 0 留言 345 瀏覽

鐵人賽 Modern Web DAY 5

JS30 x 鐵人30 x MDN doc 系列第 5 篇

技術 [Day5] - Flex Panel Gallery(JS30 x 鐵人 30 x MDN)

實做一個圖片畫廊，當使用者點擊圖片時畫面會聚焦那張圖片(圖片佔比增加)，再次點擊會恢復 CSS 彈性盒子排版：CSS flexible box layout...

yang817 ‧ 2023-09-20 ‧團隊好想工作室 v7.0

0 Like 2 留言 324 瀏覽

鐵人賽 Modern Web DAY 1

JS30 x 鐵人30 x MDN doc 系列第 1 篇

技術 [Day1] - Drum Kit(JS30 x 鐵人 30 x MDN)

今天我們來做一個可以演湊鼓聲的網頁新增事件監聽：EventTarget: addEventListener() method 節點選取：Document:...

yang817 ‧ 2023-09-16 ‧團隊好想工作室 v7.0

0 Like 0 留言 308 瀏覽

鐵人賽 Modern Web DAY 20

JS30 x 鐵人30 x MDN doc 系列第 20 篇

技術 [Day20] - Speech Detection(JS30 x 鐵人 30 x MDN)

做一個網頁語音輸入功能，可將語音輸入的英文自動變成文字語音識別 API：SpeechRecognition - Web APIs 語音識別事件(返回結果)...

yang817 ‧ 2023-10-05 ‧團隊好想工作室 v7.0

0 Like 0 留言 307 瀏覽

鐵人賽 Modern Web DAY 19

JS30 x 鐵人30 x MDN doc 系列第 19 篇

技術 [Day19] - Webcam Fun(JS30 x 鐵人 30 x MDN)

做一個網頁攝像機，可套用濾鏡調整濾鏡色彩並提供下載功能 Web 導航器 API：Navigator - Web APIs | MDN 訪問媒體裝置：Navi...

yang817 ‧ 2023-10-04 ‧團隊好想工作室 v7.0

0 Like 0 留言 297 瀏覽

鐵人賽 Modern Web DAY 25

JS30 x 鐵人30 x MDN doc 系列第 25 篇

技術 [Day25] - Event Capture, Propagation, Bubbling and Once(JS30 x 鐵人 30 x MDN)

認識事件捕獲、冒泡、傳播、單次事件事件介紹：Introduction to events 事件監聽器：EventTarget: addEventListe...

yang817 ‧ 2023-10-10 ‧團隊好想工作室 v7.0

0 Like 0 留言 296 瀏覽

鐵人賽 Modern Web DAY 29

JS30 x 鐵人30 x MDN doc 系列第 29 篇

技術 [Day29] - Countdown Timer(JS30 x 鐵人 30 x MDN)

做一個網頁倒數裝置，設有 5 種常用快速選項，也可以讓使用者自行輸入，並會將倒數時間顯示於畫面及分頁標籤上日期物件：Date - JavaScript 週...

yang817 ‧ 2023-10-14 ‧團隊好想工作室 v7.0

0 Like 0 留言 258 瀏覽

鐵人賽 Modern Web DAY 23

JS30 x 鐵人30 x MDN doc 系列第 23 篇

技術 [Day23] - Speech Synthesis(JS30 x 鐵人 30 x MDN)

做一個語音閱讀器，可播放使用者輸入的訊息語音合成 API：SpeechSynthesis - Web APIs 語音改變事件：SpeechSynthesi...

yang817 ‧ 2023-10-08 ‧團隊好想工作室 v7.0

0 Like 0 留言 250 瀏覽

鐵人賽 Modern Web DAY 2

JS30 x 鐵人30 x MDN doc 系列第 2 篇

技術 [Day2] - JS and CSS Clock(JS30 x 鐵人 30 x MDN)

今天我們來做一個網頁時鐘節點選取：Document: querySelector() method 重複執行：setInterval() global f...

yang817 ‧ 2023-09-17 ‧團隊好想工作室 v7.0

0 Like 0 留言 236 瀏覽

鐵人賽 Modern Web DAY 14

JS30 x 鐵人30 x MDN doc 系列第 14 篇

技術 [Day14] - JavaScript References VS Copying(JS30 x 鐵人 30 x MDN)

了解 javascript 傳值(拷貝)、傳址(參照)、淺拷貝、深拷貝物件參照：Object reference 淺拷貝:Shallow copy 深拷...

yang817 ‧ 2023-09-29 ‧團隊好想工作室 v7.0

0 Like 0 留言 235 瀏覽

鐵人賽 Modern Web DAY 17

JS30 x 鐵人30 x MDN doc 系列第 17 篇

技術 [Day17] - Sort Without Articles(JS30 x 鐵人 30 x MDN)

將資料去掉 The/A/An 冠詞開頭後進行排序，再將原資料照排序結果渲染至畫面上陣列排序：Array.prototype.sort() 正規表達式：Re...

yang817 ‧ 2023-10-02 ‧團隊好想工作室 v7.0

0 Like 0 留言 234 瀏覽

鐵人賽 Modern Web DAY 7

JS30 x 鐵人30 x MDN doc 系列第 7 篇

技術 [Day7] - Array Cardio part2(JS30 x 鐵人 30 x MDN)

今天來玩玩 Array method，並印出結果吧-趴兔陣列判斷(其中之一元素符合)：Array.prototype.some() 陣列判斷(每個元素...

yang817 ‧ 2023-09-22 ‧團隊好想工作室 v7.0

0 Like 1 留言 230 瀏覽

鐵人賽 Modern Web DAY 30

JS30 x 鐵人30 x MDN doc 系列第 30 篇

技術 [Day30] - Whack A Mole(JS30 x 鐵人 30 x MDN)

做一個打地鼠遊戲網站，按下開始後可以開啟遊戲(約 10 秒)、有計分功能、地鼠會隨機出現，腳本作弊點擊不計分週期執行：setInterval() globa...

yang817 ‧ 2023-10-15 ‧團隊好想工作室 v7.0

0 Like 0 留言 217 瀏覽

鐵人賽 Modern Web DAY 8

JS30 x 鐵人30 x MDN doc 系列第 8 篇

技術 [Day8] - Fun with HTML5 Canvas(JS30 x 鐵人 30 x MDN)

實做一個 Canvas 畫布，會隨著使用者滑鼠軌跡自動變換畫筆顏色及粗度網頁畫布 API:Canvas API 網頁畫布 2D 渲染接口：CanvasRe...

yang817 ‧ 2023-09-23 ‧團隊好想工作室 v7.0

0 Like 0 留言 216 瀏覽

鐵人賽 Modern Web DAY 22

JS30 x 鐵人30 x MDN doc 系列第 22 篇

技術 [Day22] - Follow Along Link Highlighter(JS30 x 鐵人 30 x MDN)

為網頁所有連結做一個會偵測使用者鼠標位置並移動的 highlight 滑鼠事件：Element: mouseenter event 元素上邊緣的偏移量：HT...

yang817 ‧ 2023-10-07 ‧團隊好想工作室 v7.0

0 Like 0 留言 215 瀏覽

鐵人賽 Modern Web DAY 26

JS30 x 鐵人30 x MDN doc 系列第 26 篇

技術 [Day26] - Stripe Follow Along Nav(JS30 x 鐵人 30 x MDN)

做一個 nav-bar 當使用者 hover 時會展開下拉式清單，搭配動畫緩進緩出 ClassList 新增指定項：DOMTokenList: add()...

yang817 ‧ 2023-10-11 ‧團隊好想工作室 v7.0

0 Like 0 留言 209 瀏覽

鐵人賽 Modern Web DAY 13

JS30 x 鐵人30 x MDN doc 系列第 13 篇

技術 [Day13] - Slide in on Scroll(JS30 x 鐵人 30 x MDN)

實作頁面滾動式視差設計滾動事件：Document: scroll event 視窗可視高度Window: innerHeight property 垂直...

yang817 ‧ 2023-09-28 ‧團隊好想工作室 v7.0

0 Like 0 留言 209 瀏覽

鐵人賽 Modern Web DAY 6

JS30 x 鐵人30 x MDN doc 系列第 6 篇

技術 [Day6] - Type Ahead(JS30 x 鐵人 30 x MDN)

實作一個網頁可以搜尋美國的城市/州，並將搜尋結果渲染出來並標示匹配字樣請求資料：Fetch API 請求的回覆：Response 數字格式：In...

yang817 ‧ 2023-09-21 ‧團隊好想工作室 v7.0

0 Like 0 留言 208 瀏覽

鐵人賽 Modern Web DAY 11

JS30 x 鐵人30 x MDN doc 系列第 11 篇

技術 [Day11] - Custom Video Player(JS30 x 鐵人 30 x MDN)

來自定義一個影片播放器吧！影片嵌入元素：Video Embed element 媒體元素：HTMLMediaElement 影片時間更新事件：HTML...

yang817 ‧ 2023-09-26 ‧團隊好想工作室 v7.0

0 Like 0 留言 204 瀏覽

鐵人賽 Modern Web DAY 27

JS30 x 鐵人30 x MDN doc 系列第 27 篇

技術 [Day27] - Click and Drag(JS30 x 鐵人 30 x MDN)

做一個區塊可以讓使用者左右拖曳顯示的項目新增事件監聽：EventTarget: addEventListener() method 移除事件監聽器：rem...

yang817 ‧ 2023-10-12 ‧團隊好想工作室 v7.0

0 Like 0 留言 200 瀏覽

鐵人賽 Modern Web DAY 10

JS30 x 鐵人30 x MDN doc 系列第 10 篇

技術 [Day10] - Hold Shift and Check Checkboxes(JS30 x 鐵人 30 x MDN)

實做一個表單，按著 shift 點擊可區間全選/取消功能滑鼠事件-shift 鍵與否屬性：MouseEvent: shiftKey property 輸入...

yang817 ‧ 2023-09-25 ‧團隊好想工作室 v7.0

0 Like 0 留言 197 瀏覽

鐵人賽 Modern Web DAY 21

JS30 x 鐵人30 x MDN doc 系列第 21 篇

技術 [Day21] - Geolocation(JS30 x 鐵人 30 x MDN)

做一個網頁羅盤，監聽使用者位置資訊（使用方位及時速改變羅盤） Web 導航器 API：Navigator - Web APIs | MDN 取得地理定位：N...

yang817 ‧ 2023-10-06 ‧團隊好想工作室 v7.0

0 Like 0 留言 192 瀏覽

鐵人賽 Modern Web DAY 18

JS30 x 鐵人30 x MDN doc 系列第 18 篇

技術 [Day18] - Adding Up Times with Reduce(JS30 x 鐵人 30 x MDN)

透過 Array.reduce()算出影片總時間並印在 console 中字串分割：String.prototype.split() 陣列映射：Array...

yang817 ‧ 2023-10-03 ‧團隊好想工作室 v7.0

2 Like 0 留言 192 瀏覽

鐵人賽佛心分享-IT 人自學之術 DAY 1

菜雞學習JavaScript的30日讀書分享系列第 1 篇

技術菜雞學習JavaScript的30日讀書分享【Day 1】簡史

前言 ====================本系列文章沒有什麼高深的理論========================================純粹...

rdnnn ‧ 2024-08-01

0 Like 0 留言 188 瀏覽

鐵人賽 Modern Web DAY 24

JS30 x 鐵人30 x MDN doc 系列第 24 篇

技術 [Day24] - Sticky Nav(JS30 x 鐵人 30 x MDN)

將 nav-bar 固定於網頁上方黏貼定位：position:sticky 固定定位：position:fixed 要 nav-bar 在視窗滑動超...

yang817 ‧ 2023-10-09 ‧團隊好想工作室 v7.0

0 Like 0 留言 183 瀏覽

鐵人賽 Modern Web DAY 16

JS30 x 鐵人30 x MDN doc 系列第 16 篇

技術 [Day16] - Mouse Move Shadow(JS30 x 鐵人 30 x MDN)

透過 JS 將文字做出 4 層陰影，並隨著鼠標位置移動文字陰影：text-shadow - CSS 元素內容可編輯：contenteditable...

yang817 ‧ 2023-10-01 ‧團隊好想工作室 v7.0

0 Like 0 留言 178 瀏覽

鐵人賽 Modern Web DAY 3

JS30 x 鐵人30 x MDN doc 系列第 3 篇

技術 [Day3] - CSS Variables(JS30 x 鐵人 30 x MDN)

實做一個網頁讓使用者能調整照片像框的粗度、顏色、模糊度節點選取：Document: querySelector()、Document: querySelec...

yang817 ‧ 2023-09-18 ‧團隊好想工作室 v7.0

0 Like 0 留言 171 瀏覽

鐵人賽 Modern Web DAY 4

JS30 x 鐵人30 x MDN doc 系列第 4 篇

技術 [Day4] - Array Cardio part1(JS30 x 鐵人 30 x MDN)

今天來玩玩 Array method，並印出結果吧-趴萬陣列篩選：Array.prototype.filter() 陣列排序：Array.prototyp...

yang817 ‧ 2023-09-19 ‧團隊好想工作室 v7.0

0 Like 0 留言 164 瀏覽

鐵人賽 Modern Web DAY 28

JS30 x 鐵人30 x MDN doc 系列第 28 篇

技術 [Day28] - Video Speed Controller(JS30 x 鐵人 30 x MDN)

自定義一個影片播放速率控制器事件（滑鼠移動）：Element: mousemove event 影片元素速率：HTMLMediaElement: play...

yang817 ‧ 2023-10-13 ‧團隊好想工作室 v7.0

0 Like 0 留言 144 瀏覽

鐵人賽 Modern Web DAY 15

JS30 x 鐵人30 x MDN doc 系列第 15 篇

技術 [Day15] - LocalStorage(JS30 x 鐵人 30 x MDN)

透過 Localstorage 儲存項目，新增、狀態切換、刪除(不在原題內) 本地儲存(讀取)：Storage: getItem() method 本地儲存...

yang817 ‧ 2023-09-30 ‧團隊好想工作室 v7.0

0 Like 0 留言 142 瀏覽

鐵人賽 Modern Web DAY 12

JS30 x 鐵人30 x MDN doc 系列第 12 篇

技術 [Day12] - Key Sequence Detection(JS30 x 鐵人 30 x MDN)

按鍵佇列檢測，當輸入通關密語螢幕上則會出現獨角獸鍵盤事件-按鍵彈起：Element: keyup event 陣列拼接：Array.prototype.s...

yang817 ‧ 2023-09-27 ‧團隊好想工作室 v7.0