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

0 Like 0 留言 521 瀏覽

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

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

naiomidaphne ‧ 2023-09-19

0 Like 0 留言 457 瀏覽

鐵人賽 JavaScript DAY 1

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

技術【Day01】- 前言

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

Hazel ‧ 2024-08-01

0 Like 0 留言 366 瀏覽

技術 JS 變數與值

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

naiomidaphne ‧ 2023-09-18

0 Like 0 留言 321 瀏覽

鐵人賽 JavaScript DAY 2

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

技術【Day02】01 - JavaScript Drum Kit

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

Hazel ‧ 2024-08-02

0 Like 0 留言 318 瀏覽

鐵人賽 JavaScript DAY 3

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

技術【Day03】02 - JS and CSS Clock

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

Hazel ‧ 2024-08-03

0 Like 0 留言 289 瀏覽

鐵人賽 JavaScript DAY 7

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

技術【Day07】06 - Type Ahead

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

Hazel ‧ 2024-08-07

0 Like 0 留言 283 瀏覽

技術變數宣告練習

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

naiomidaphne ‧ 2023-09-19

0 Like 0 留言 274 瀏覽

鐵人賽 JavaScript DAY 4

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

技術【Day04】03 - CSS Variables

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

Hazel ‧ 2024-08-04

0 Like 0 留言 268 瀏覽

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

鐵人賽 JavaScript DAY 14

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

技術【Day14】13 - Slide in on Scroll

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

Hazel ‧ 2024-08-14

0 Like 0 留言 238 瀏覽

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

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

鐵人賽 JavaScript DAY 6

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

技術【Day06】05 - Flex Panel Gallery

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

Hazel ‧ 2024-08-06

0 Like 0 留言 227 瀏覽

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

鐵人賽 JavaScript DAY 30

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

技術【Day30】29 - Countdown Timer

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

Hazel ‧ 2024-08-30

0 Like 0 留言 219 瀏覽

鐵人賽 JavaScript DAY 17

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

技術【Day17】16 - Mouse Move Shadow

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

Hazel ‧ 2024-08-17

0 Like 0 留言 202 瀏覽

鐵人賽 JavaScript DAY 13

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

技術【Day13】12 - Key Sequence Detection

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

Hazel ‧ 2024-08-13

0 Like 0 留言 197 瀏覽

鐵人賽 JavaScript DAY 15

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

技術【Day15】14 - JavaScript References VS Copying

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

Hazel ‧ 2024-08-15

0 Like 0 留言 187 瀏覽

鐵人賽 JavaScript DAY 10

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

技術【Day10】09 - Dev Tools Domination

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

Hazel ‧ 2024-08-10

0 Like 0 留言 184 瀏覽

鐵人賽 JavaScript DAY 12

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

技術【Day12】11 - Custom Video Player

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

Hazel ‧ 2024-08-12

0 Like 0 留言 181 瀏覽

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

鐵人賽 JavaScript DAY 16

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

技術【Day16】15 - LocalStorage

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

Hazel ‧ 2024-08-16

0 Like 0 留言 176 瀏覽

鐵人賽 JavaScript DAY 22

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

技術 Day22】21 - Geolocation

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

Hazel ‧ 2024-08-22

0 Like 0 留言 170 瀏覽

鐵人賽 JavaScript

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

技術【Day31】30 - Whack A Mole

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

Hazel ‧ 2024-08-31

0 Like 0 留言 169 瀏覽

鐵人賽 JavaScript DAY 20

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

技術【Day20】19 - Webcam Fun

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

Hazel ‧ 2024-08-20

0 Like 0 留言 169 瀏覽

鐵人賽 JavaScript DAY 25

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

技術【Day25】24 - Sticky Nav

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

Hazel ‧ 2024-08-25

0 Like 0 留言 163 瀏覽

鐵人賽 JavaScript DAY 21

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

技術【Day21】20 - Speech Detection

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

Hazel ‧ 2024-08-21

0 Like 0 留言 161 瀏覽

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

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

鐵人賽 JavaScript DAY 24

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

技術【Day24】23 - Speech Synthesis

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

Hazel ‧ 2024-08-24

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

技術 【Day01】- 前言

技術 JS 變數與值

技術 【Day02】01 - JavaScript Drum Kit

技術 【Day03】02 - JS and CSS Clock

技術 【Day07】06 - Type Ahead

技術 變數宣告練習

技術 【Day04】03 - CSS Variables

技術 【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

技術 【Day06】05 - Flex Panel Gallery

技術 【Day05】04 - Array Cardio Day 1

技術 【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