iT邦幫忙

javascript 30相關文章
共有 40 則文章
2 Like 0 留言 73 瀏覽
鐵人賽 佛心分享-IT 人自學之術 DAY 6
菜雞學習JavaScript的30日讀書分享 系列 第 6 篇

技術 菜雞學習JavaScript的30日讀書分享【Day 6】陣列

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

rdnnn ‧ 2024-08-06
0 Like 0 留言 69 瀏覽
鐵人賽 JavaScript DAY 6
AI 時代，基礎要有：JavaScript30 打下紮實基礎 系列 第 6 篇

技術 【Day06】05 - Flex Panel Gallery

主題 實作一個圖片展開的動畫 成果 完整程式碼Demo效果 實作重點 CSS 先用把畫面調整出來 調整圖片：flex 、flex 佔比為 1 文字置中：...

Hazel ‧ 2024-08-06
2 Like 0 留言 74 瀏覽
鐵人賽 佛心分享-IT 人自學之術 DAY 5
菜雞學習JavaScript的30日讀書分享 系列 第 5 篇

技術 菜雞學習JavaScript的30日讀書分享【Day 5】物件

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

rdnnn ‧ 2024-08-05
2 Like 0 留言 100 瀏覽
鐵人賽 佛心分享-IT 人自學之術 DAY 4
菜雞學習JavaScript的30日讀書分享 系列 第 4 篇

技術 菜雞學習JavaScript的30日讀書分享【Day 4】資料型別

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

rdnnn ‧ 2024-08-04
0 Like 0 留言 72 瀏覽
鐵人賽 JavaScript DAY 5
AI 時代，基礎要有：JavaScript30 打下紮實基礎 系列 第 5 篇

技術 【Day05】04 - Array Cardio Day 1

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

Hazel ‧ 2024-08-05
0 Like 0 留言 94 瀏覽
鐵人賽 JavaScript DAY 4
AI 時代，基礎要有：JavaScript30 打下紮實基礎 系列 第 4 篇

技術 【Day04】03 - CSS Variables

主題 利用 JS 去改變 CSS 變數的值 成果 完整程式碼Demo效果 實作重點 CSS 偽類：:root 表示 <html> (MDN)元素，...

Hazel ‧ 2024-08-04
0 Like 0 留言 108 瀏覽
鐵人賽 JavaScript DAY 3
AI 時代，基礎要有：JavaScript30 打下紮實基礎 系列 第 3 篇

技術 【Day03】02 - JS and CSS Clock

主題 實作一個小時鐘。 成果 完整程式碼Demo效果 實作重點 CSS 指針樣式先做完 調整時間起始位置在 0 的位置( 後面比較好算數學 ) 調整每個針...

Hazel ‧ 2024-08-03
2 Like 0 留言 112 瀏覽
鐵人賽 佛心分享-IT 人自學之術 DAY 3
菜雞學習JavaScript的30日讀書分享 系列 第 3 篇

技術 菜雞學習JavaScript的30日讀書分享 【Day 3】變數

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

rdnnn ‧ 2024-08-03
1 Like 0 留言 115 瀏覽
鐵人賽 佛心分享-IT 人自學之術 DAY 2
菜雞學習JavaScript的30日讀書分享 系列 第 2 篇

技術 菜雞學習JavaScript的30日讀書分享 【Day 2】規範

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

rdnnn ‧ 2024-08-02
2 Like 0 留言 192 瀏覽
鐵人賽 佛心分享-IT 人自學之術 DAY 1
菜雞學習JavaScript的30日讀書分享 系列 第 1 篇

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

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

rdnnn ‧ 2024-08-01
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 留言 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 留言 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 留言 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 留言 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 留言 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 留言 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 留言 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 留言 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 留言 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 留言 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 留言 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
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 留言 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 留言 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 留言 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 留言 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 留言 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
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
iThome鐵人賽

參賽組數
189 組
團體組數
4 組
累計文章數
367 篇
最後報名日
9/15
iT+看影片追技術 看影片追技術 看更多
熱門tag 看更多
15th鐵人賽 13th鐵人賽 14th鐵人賽 12th鐵人賽 11th鐵人賽 鐵人賽 2019鐵人賽 2018鐵人賽 javascript 2017鐵人賽 python windows php c# windows server linux css react 程式設計 vue.js
熱門問題
熱門回答
熱門文章
IT邦幫忙