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

0 Like 0 留言 743 瀏覽

鐵人賽 JavaScript DAY 1

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

技術【Day01】- 前言

前言為什麼要寫這個？在學習的時候，老師有建議懂一點 JS 的人可以練這個，不要跟其他同學練習簡單的東西。那時候我就把它收藏起來了，想說之後也要練習！之前...

Hazel ‧ 2024-08-01

0 Like 0 留言 615 瀏覽

技術使用Chrome的開發人員工具來練習JS

首先，將Chrome瀏覽器打開，點擊右上角的三個點點 → 更多工具 → 開發人員工具快速鍵滑鼠按右鍵，點擊檢查，又或是 Key-in: 點擊 Cons...

naiomidaphne ‧ 2023-09-19

0 Like 0 留言 611 瀏覽

鐵人賽 JavaScript DAY 3

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

技術【Day03】02 - JS and CSS Clock

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

Hazel ‧ 2024-08-03

0 Like 0 留言 562 瀏覽

技術 JS 變數與值

變數 - Variable 什麼是變數?變數就是所謂給電腦辨識定義資訊的名稱。值 - Valure 什麼是值?值就是所謂給電腦辨識該變數所賦予出的值，也就是所...

naiomidaphne ‧ 2023-09-18

0 Like 0 留言 536 瀏覽

鐵人賽 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 留言 531 瀏覽

鐵人賽 JavaScript DAY 13

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

技術【Day13】12 - Key Sequence Detection

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

Hazel ‧ 2024-08-13

0 Like 0 留言 501 瀏覽

鐵人賽 JavaScript DAY 30

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

技術【Day30】29 - Countdown Timer

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

Hazel ‧ 2024-08-30

0 Like 0 留言 477 瀏覽

鐵人賽 JavaScript DAY 28

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

技術【Day28】27 - Click and Drag

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

Hazel ‧ 2024-08-28

0 Like 0 留言 474 瀏覽

鐵人賽 JavaScript DAY 12

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

技術【Day12】11 - Custom Video Player

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

Hazel ‧ 2024-08-12

0 Like 0 留言 473 瀏覽

鐵人賽 JavaScript DAY 7

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

技術【Day07】06 - Type Ahead

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

Hazel ‧ 2024-08-07

0 Like 0 留言 460 瀏覽

鐵人賽 JavaScript

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

技術【Day31】30 - Whack A Mole

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

Hazel ‧ 2024-08-31

0 Like 0 留言 445 瀏覽

鐵人賽 JavaScript DAY 29

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

技術【Day29】28 - Video Speed Controller

主題實作一個影片播放器的調整播放速度 bar。成果完整程式碼Demo效果實作重點 Javascript 取得元素：速度條外框、速度條內框、音樂...

Hazel ‧ 2024-08-29

0 Like 0 留言 434 瀏覽

鐵人賽 JavaScript DAY 22

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

技術 Day22】21 - Geolocation

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

Hazel ‧ 2024-08-22

0 Like 0 留言 429 瀏覽

鐵人賽 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 留言 428 瀏覽

鐵人賽 JavaScript DAY 6

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

技術【Day06】05 - Flex Panel Gallery

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

Hazel ‧ 2024-08-06

0 Like 0 留言 428 瀏覽

鐵人賽 JavaScript DAY 4

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

技術【Day04】03 - CSS Variables

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

Hazel ‧ 2024-08-04

0 Like 0 留言 428 瀏覽

鐵人賽 JavaScript DAY 2

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

技術【Day02】01 - JavaScript Drum Kit

主題利用鍵盤按鍵去觸發畫面上的呈現與音效。成果完整程式碼Demo效果實作重點 Javascript 鍵盤事件keyboardEvent ：使用 k...

Hazel ‧ 2024-08-02

0 Like 0 留言 421 瀏覽

鐵人賽 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 留言 416 瀏覽

鐵人賽 JavaScript DAY 15

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

技術【Day15】14 - JavaScript References VS Copying

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

Hazel ‧ 2024-08-15

0 Like 0 留言 415 瀏覽

技術變數宣告練習

題目: 活動主題：2023 中秋節晚會抽獎活動活動進度：0主辦人：王大明活動內容：中秋節社區晚上吃辦桌，摸彩活動抽大獎獎品：Iphone 14 pro max...

naiomidaphne ‧ 2023-09-19

0 Like 0 留言 400 瀏覽

鐵人賽 JavaScript DAY 14

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

技術【Day14】13 - Slide in on Scroll

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

Hazel ‧ 2024-08-14

0 Like 0 留言 391 瀏覽

鐵人賽 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 留言 378 瀏覽

鐵人賽 JavaScript DAY 10

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

技術【Day10】09 - Dev Tools Domination

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

Hazel ‧ 2024-08-10

0 Like 0 留言 377 瀏覽

鐵人賽 JavaScript DAY 21

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

技術【Day21】20 - Speech Detection

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

Hazel ‧ 2024-08-21

0 Like 0 留言 360 瀏覽

鐵人賽 JavaScript DAY 27

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

技術【Day27】26 - Stripe Follow Along

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

Hazel ‧ 2024-08-27

0 Like 0 留言 352 瀏覽

鐵人賽 JavaScript DAY 17

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

技術【Day17】16 - Mouse Move Shadow

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

Hazel ‧ 2024-08-17

0 Like 0 留言 352 瀏覽

鐵人賽 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 留言 347 瀏覽

鐵人賽 JavaScript DAY 20

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

技術【Day20】19 - Webcam Fun

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

Hazel ‧ 2024-08-20

0 Like 0 留言 343 瀏覽

鐵人賽 JavaScript DAY 24

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

技術【Day24】23 - Speech Synthesis

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

Hazel ‧ 2024-08-24

0 Like 0 留言 323 瀏覽

鐵人賽 JavaScript DAY 16

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

技術【Day16】15 - LocalStorage

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

Hazel ‧ 2024-08-16

技術 【Day01】- 前言

技術 使用Chrome的開發人員工具來練習JS

技術 【Day03】02 - JS and CSS Clock

技術 JS 變數與值

技術 【Day08】07 - Array Cardio Day 2

技術 【Day13】12 - Key Sequence Detection

技術 【Day30】29 - Countdown Timer

技術 【Day28】27 - Click and Drag

技術 【Day12】11 - Custom Video Player

技術 【Day07】06 - Type Ahead

技術 【Day31】30 - Whack A Mole

技術 【Day29】28 - Video Speed Controller

技術 Day22】21 - Geolocation

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

技術 【Day06】05 - Flex Panel Gallery

技術 【Day04】03 - CSS Variables

技術 【Day02】01 - JavaScript Drum Kit

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

技術 【Day15】14 - JavaScript References VS Copying

技術 變數宣告練習

技術 【Day14】13 - Slide in on Scroll

技術 【Day09】08 - Fun with HTML5 Canvas

技術 【Day10】09 - Dev Tools Domination

技術 【Day21】20 - Speech Detection

技術 【Day27】26 - Stripe Follow Along

技術 【Day17】16 - Mouse Move Shadow

技術 【Day05】04 - Array Cardio Day 1

技術 【Day20】19 - Webcam Fun

技術 【Day24】23 - Speech Synthesis

技術 【Day16】15 - LocalStorage

標記使用者

技術【Day01】- 前言

技術使用Chrome的開發人員工具來練習JS

技術【Day03】02 - JS and CSS Clock

技術【Day08】07 - Array Cardio Day 2

技術【Day13】12 - Key Sequence Detection

技術【Day30】29 - Countdown Timer

技術【Day28】27 - Click and Drag

技術【Day12】11 - Custom Video Player

技術【Day07】06 - Type Ahead

技術【Day31】30 - Whack A Mole

技術【Day29】28 - Video Speed Controller

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

技術【Day06】05 - Flex Panel Gallery

技術【Day04】03 - CSS Variables

技術【Day02】01 - JavaScript Drum Kit

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

技術【Day15】14 - JavaScript References VS Copying

技術變數宣告練習

技術【Day14】13 - Slide in on Scroll

技術【Day09】08 - Fun with HTML5 Canvas

技術【Day10】09 - Dev Tools Domination

技術【Day21】20 - Speech Detection

技術【Day27】26 - Stripe Follow Along

技術【Day17】16 - Mouse Move Shadow

技術【Day05】04 - Array Cardio Day 1

技術【Day20】19 - Webcam Fun

技術【Day24】23 - Speech Synthesis

技術【Day16】15 - LocalStorage