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

0 Like 0 留言 946 瀏覽

鐵人賽自我挑戰組 DAY 11

JavaScript 是什麼？可以吃嗎？系列第 11 篇

技術 Day11- 使用SetProperty 自定義你的 CSS 變數

幫我優化語句嗨大家好，我是Eric！今天我們來談談如何在HTML、CSS和JavaScript中使用自定義CSS屬性（CSS Variables）。這是一個實用...

Eric ‧ 2023-09-11

0 Like 0 留言 1088 瀏覽

鐵人賽自我挑戰組 DAY 10

JavaScript 是什麼？可以吃嗎？系列第 10 篇

技術 Day10 - ES6 Set 實作聯集、交集和差集

嗨大家好，我是Eric ~今天我們來談談一個非常實用的主題：如何用 JavaScript 實作集合的基本操作。集合是數學中的一個基本概念，也在程式設計中扮演著重...

Eric ‧ 2023-09-10

0 Like 0 留言 635 瀏覽

鐵人賽自我挑戰組 DAY 9

JavaScript 是什麼？可以吃嗎？系列第 9 篇

技術 Day9 - 陣列分組

嗨大家好，我是Eric ~ 在程式開發過程中，陣列分組是一個常見但容易被忽視的需求，不論是依照單一屬性，還是更複雜的條件進行分組，一個具有靈活性和可用性的分組函...

Eric ‧ 2023-09-09

0 Like 0 留言 716 瀏覽

鐵人賽自我挑戰組 DAY 8

JavaScript 是什麼？可以吃嗎？系列第 8 篇

技術 Day8 - 移動端頁面寬高自適應

嗨大家好，我是Eric！今天我們要來聊聊CSS中的Viewport，這是一個經常在製作自適應網頁時會遇到的概念。許多人喜歡使用100vh和100vw來設置元素的...

Eric ‧ 2023-09-08

0 Like 0 留言 478 瀏覽

鐵人賽自我挑戰組 DAY 7

JavaScript 是什麼？可以吃嗎？系列第 7 篇

技術 Day7 - 物件陣列去重

嗨大家好，我是Eric ~ 在前端開發中，我們經常會遇到需要去重（去除重複元素）的場景，特別是當我們處理復雜的數據結構，例如物件陣列時。接下來就來分享如何使用...

Eric ‧ 2023-09-07

0 Like 0 留言 1376 瀏覽

鐵人賽自我挑戰組 DAY 6

JavaScript 是什麼？可以吃嗎？系列第 6 篇

技術 Day6 - 進度監聽器 XHR

嗨大家好，我是Eric。當談到API請求，我們通常會使用fetch、axios等現代的方法，但有一個我們可能忽略的功能，是由傳統的XHR（XMLHttpRequ...

Eric ‧ 2023-09-06

0 Like 0 留言 633 瀏覽

鐵人賽自我挑戰組 DAY 5

JavaScript 是什麼？可以吃嗎？系列第 5 篇

技術 Day5 - 函數應用- 併發任務

嗨大家好，我是Eric，假設當我們有大量異步函數（api請求）要同時執行，我們不可能一次請求（網站可能會崩潰XD），所以我們可以限制一次請求的數量（比如10個）...

Eric ‧ 2023-09-05

0 Like 0 留言 1662 瀏覽

鐵人賽 Modern Web DAY 5

用不到 30 天學會基本 TypeScript 系列第 5 篇

技術基本數據型別 (number、string、boolean) + 聯合類型、交叉類型

TypeScript 的型別大致分為下圖幾項，威爾豬會在之後章節陸續講，今天我們先談談最基本的三種數據型別。在 TypeScript 中，基本型別註解都是以...

威爾豬 ‧ 2023-09-05

0 Like 0 留言 613 瀏覽

鐵人賽自我挑戰組 DAY 4

JavaScript 是什麼？可以吃嗎？系列第 4 篇

技術 Day4 - 瀏覽器渲染原理解析

嗨大家好，我是Eric。在之前的「事件迴圈」文章中，我多次提到了一個至關重要的概念，那就是「渲染線程」。這個線程在前端開發中扮演著關鍵角色，特別是在實現與使用者...

Eric ‧ 2023-09-04

0 Like 0 留言 610 瀏覽

鐵人賽自我挑戰組 DAY 3

JavaScript 是什麼？可以吃嗎？系列第 3 篇

技術事件迴圈（Event Loop）- 下集

嗨大家好，我是Eric，在上集中，我們講了瀏覽器有多個進程和線程，以及渲染主線程（Main Thread in Renderer Process）有多麼的忙碌。...

Eric ‧ 2023-09-03

0 Like 0 留言 532 瀏覽

鐵人賽自我挑戰組 DAY 2

JavaScript 是什麼？可以吃嗎？系列第 2 篇

技術事件迴圈（Event Loop）- 上集

嗨大家好，我是Eric，今天我想跟大家聊聊在學習 JavaScript 前必須要了解一個水很深的原理，就是 "Event Loop"（事件迴...

Eric ‧ 2023-09-02

0 Like 0 留言 340 瀏覽

鐵人賽自我挑戰組 DAY 1

JavaScript 是什麼？可以吃嗎？系列第 1 篇

技術 Day1 - 前言

我對於能再次參加鐵人賽的個人挑戰組感到非常高興。上一次，我差一點就完成了30天的挑戰，深感遺憾 ~ 但今年，我相信一定能順利完成整個30天的賽程。轉職到新領域...

Eric ‧ 2023-09-01

0 Like 1 留言 1232 瀏覽

技術 [快速入門前端 66] JavaScript：事件 (2) Event 和事件解綁

event 是什麼在這邊這個 event 指的不是事件本身，而是 event listener 的一個「Event Object」，裡面會有所有關於這個事件的...

Doris ‧ 2023-08-22

0 Like 0 留言 1054 瀏覽

技術 [快速入門前端 67] JavaScript：事件 (3) 事件傳遞的階段

事件傳遞當我們同時為父元素和子元素綁定相同事件時可能會發現子元素事件被觸發時，父元素同時也會被觸發。如下範例，div 和 button 都綁定了 click...

Doris ‧ 2024-02-22

0 Like 0 留言 2464 瀏覽

技術 [快速入門前端 65] JavaScript：事件 (1) 事件和綁定方法

事件 Event 事件(event) 是指在網頁上的動作或者發生的事情，可以是瀏覽器的行爲，例如頁面加載完成，也可以是用戶的行為，例如點選按鈕、頁籤等動作。當網...

Doris ‧ 2023-08-20

0 Like 0 留言 870 瀏覽

技術 [快速入門前端 64] JavaScript：DOM (5) 節點的 CRUD - 修改、刪除

修改(替換)節點 replaceChild replaceChild() 可以將指定元素的某個子節點換成新的節點，語法為指定元素.replaceChild(新...

Doris ‧ 2023-08-18

0 Like 0 留言 1898 瀏覽

技術 [快速入門前端 63] JavaScript：DOM (5) 節點的 CRUD - 新增節點

範例 - 如何新增節點在前幾篇文章中我們都在介紹屬性的新增修改，但若我們想使用 JavaScript 動態新增元素到頁面上某處的話，除了使用 innerHTM...

Doris ‧ 2023-08-17

0 Like 0 留言 2341 瀏覽

技術 [快速入門前端 62] JavaScript：DOM (4) 修改元素的屬性值

修改元素屬性值既然在上一篇中我們已經可以拿到元素的屬性值了，那下一步就是如何修改它！讓我們能夠使用 JavaScript 動態的修改元素的 checked、d...

Doris ‧ 2023-08-16

0 Like 0 留言 3515 瀏覽

技術 [快速入門前端 61] JavaScript：DOM (3) 取得元素的屬性值

取得元素屬性值在前篇文章中我們提到了如何抓取 HTML 的 element node，既然我們都可以抓到元素了，下一步就是取得更詳細的資料，也就是該元素的屬性...

Doris ‧ 2023-08-15

0 Like 0 留言 865 瀏覽

技術 [快速入門前端 60] JavaScript：DOM (2) 如何獲取元素節點

元素節點在前篇中我們說明了節點的種類和屬性，而本篇會介紹如何利用 JavaScipt「獲取節點」，其實這跟 CSS 選擇器的概念有點相似，當我們需要動態改變頁...

Doris ‧ 2023-08-14

1 Like 0 留言 1432 瀏覽

技術 [快速入門前端 59] JavaScript：DOM (1) Document Object Model 簡介

DOM 是什麼？到目前為止我們大約花了二十多個篇幅來介紹 JavaScript 的基本用法，可能有人會想說講了這麼多，JavaScript 跟畫面到底有什麼關...

Doris ‧ 2023-08-13

0 Like 0 留言 1368 瀏覽

技術 [快速入門前端 58] JavaScript：常見的內建函式 (2) Number 和 String 相關

Number 相關在 JavaScript 的構造函數 Number 中包括許多處理和判斷數值的方法，有些我們之前有提過，例如 isNaN()、isInteg...

Doris ‧ 2023-08-10

0 Like 0 留言 1752 瀏覽

技術 [快速入門前端 57] JavaScript：常見的內建函式 (1) Math

Math 相關 Math 是一個 JavaScript 內建的物件，可以讓我們進行數學運算，在 console 輸入 Math 這個 object 包含的內容和...

Doris ‧ 2023-08-08

1 Like 0 留言 1203 瀏覽

技術 [快速入門前端 56] JavaScript：Array 陣列 (3) 常見陣列操作方法

常見操作方法在上篇陣列相關文章中我們已經大致了解簡單的操作方法，但其實在 JavaScript 陣列中還有更多元的方法可以使用，不過有些牽涉到 Funct...

Doris ‧ 2023-08-07

0 Like 0 留言 1618 瀏覽

技術 [快速入門前端 55] JavaScript：Global Scope 全域和 Local Scope 區域

Scope 作用域 Scope 是指在 JavaScript 程式中，一個變數可用 (或有效) 的範圍，而在這個有效範圍之外，變數是無法被使用的。舉個常見的例子...

Doris ‧ 2023-07-31

0 Like 0 留言 2599 瀏覽

技術 [快速入門前端 54] JavaScript：Function 函式 (2) 參數和回傳

參數在上一篇文章中我們有提到在定義函式時，小括號 () 中放的資料是參數 (parameters)，在 JavsScript 中，() 中的參數就像是 Fun...

Doris ‧ 2023-07-27

0 Like 0 留言 1798 瀏覽

技術 [快速入門前端 53] JavaScript：Function 函式 (1) 函式的種類

Function 函式 function 是指一段經過包裝的 JavaScript 程式，主要用於程式碼的重複使用，變數等資料的隱藏。而將程式寫成 functi...

Doris ‧ 2023-07-26

0 Like 0 留言 2174 瀏覽

技術 [快速入門前端 52] JavaScript：Object 物件

Object 物件陣列通常放的是較有相關性的資料，而物件則由多組 key (屬性): value (屬性名) 的格式組成，所以通常會包含各種類型的資料，其中...

Doris ‧ 2023-07-25

0 Like 2 留言 3006 瀏覽

技術 [快速入門前端 51] JavaScript：Array 陣列 (2) 陣列值的新增、刪除、修改和判斷

陣列在上一篇文章中我們提到如何宣告值和取得陣列值，但其實在 JavaScript 中還有很多對陣列的操作方法，例如新增、刪除、修改、或過濾陣列值等等，接下來就...

Doris ‧ 2023-07-24

0 Like 0 留言 3146 瀏覽

技術 [快速入門前端 50] JavaScript：Array 陣列 (1) 陣列宣告和取值

Array 陣列在前面介紹變數型態時我們有提到陣列，陣列是一個有順序性的序列，可以儲存多個值，格式為 [值1, 值2, 值3]，每個值照順序都會有對應的索引，...

Doris ‧ 2023-07-21