26 篇有 "javascript" 標籤的文章
什麼是 Event Loop？
Event loop 是一個持續運行的機制，負責監控 Call Stack 是否為空，並依序從 Microtask Queue 和 Task Queue 中選取任務放入 Call Stack 執行。此外，它也協調瀏覽器的渲染操作，確保在必要時刷新畫面。 JavaScript…
Read more →前端開發者不可不知的Debounce與Throttle
在前端開發中，debounce 是一種將多次函式呼叫合併成一次呼叫的技巧，適用於表單驗證以及自動完成等場景。Throttle 是確保函式能夠以固定頻率被執行，適用於無限捲動等場景。這篇文章將會探討 debounce 和 throttle…
Read more →JavaScript 變數 - JavaScript 程式教學 / JS Tutorial
在 JavaScript 的程式中，我們經常需要處理各種資料，例如：購物網站的購物車中的商品，或是社群網站中的聊天訊息和朋友的上線狀態。 變數的功能就是用來儲存資料。 目錄 JavaScript…
Read more →JavaScript 程式結構 - JavaScript 程式教學 / JS Tutorial
這篇文章將會教你 JavaScript 最基礎的程式結構，包含組成程式碼的最小元素：語句、標示語句結束的分號、單行及多行註解。 目錄 語句 (Statement) 分號 (;) 註解 單行註解 (//) 多行註解 (/* */) 總結 語句 (Statement…
Read more →如何挑選 JavaScript 編輯器 - JavaScript 程式教學 / JS Tutorial
這篇文章教你如何挑選一個適合你的程式碼編輯器，以及如何執行 JavaScript。 目錄 程式碼編輯器 (Code Editor) 新手應該用哪種程式碼編輯器？ 線上開發平台 如何執行 JavaScript? HTML script 標籤 引用外部 JavaScript…
Read more →什麼是 JavaScript？ JavaScript 是幹嘛用的？ - JavaScript 程式教學 / JS Tutorial
這篇文章將會告訴你 JavaScript 是什麼，可以做到什麼事情，以及你為什麼應該學 JavaScript。 目錄 JavaScript 是什麼？ JavaScript 能做到什麼？ 為什麼要學 JavaScript？ 總結 JavaScript 是什麼？ JavaScript…
Read more →JavaScript Array 陣列操作方法: map(), forEach(), filter(), find(), every(), some(), reduce()
JavaScript 有7個陣列方法：map(), forEach(), filter(), find(), every(), some() 以及 reduce…
Read more →網頁載入速度效能最佳化加速30%真實案例分享
為什麼你應該最佳化網頁的載入速度？根據 Amazon 內部統計，網頁載入的速度每增加100ms，營收就減少 1%。網站速度越慢，客戶越不願意掏出錢來買你的東西。另外網頁載入速度也會影響 SEO…
Read more →JavaScript Hoisting 是什麼？ let, const, var 的差異是什麼？
JavaScript 在 ES6 let 和 const 問世之前，都是用 var 來定義變數，但是 var 有許多迥異於其他程式語言的特性，像是使用函式作用域 (function-level scope)，以及具有變數 hoisting…
Read more →JavaScript this 的用法
在 JavaScript 中，「this 是什麼」絕對是讓人頭痛難題前三名。This 和物件方法息息相關，因此這篇文章會先介紹在物件方法、物件方法中的 this 是如何被決定的，把握一個簡單原則就可以知道 this 到底是誰。另外，arrow function 的 this…
Read more →深入了解 CORS (跨來源資源共用): 如何正確設定 CORS？
這篇文章將會帶你了解 CORS (Cross-Origin Resource Sharing) 的概念和設定方法，確保您的網站能在遵守同源政策的前提下正確處理跨來源請求。學習如何設定 Access-Control-Allow-Methods、Access-Control…
Read more →Cookie 是什麼：如何使用 JavaScript 操作 document.cookie
了解什麼是 cookie，學習如何使用 JavaScript 讀取和設定 cookie，掌握 Path、Domain、Max-Age、Expires、Secure、HttpOnly、SameSite 等參數的應用，並深入探討 cookie 安全性議題。 目錄 Cookie…
Read more →@babel/preset-env 設定
@babel/preset-env 是 babel 7 架構下的一組 preset，能讓你用最新的 JavaScript 語法寫程式，並且智慧地根據瀏覽器的環境引入需要的 polyfill，節省手動管理 syntax transform 的時間，還能夠減少 bundle…
Read more →JavaScript Prototype (原型) 是什麼？
在 JavaScript 中，每個物件都有一個 prototype (原型)，物件可以從原型上繼承屬性和方法，達到復用程式碼的效果，這就是所謂的 prototypal inheritance…
Read more →Web Share API - Navigator.share() 介紹
Web Share API 是現代瀏覽器提供的最新功能之一，它讓網頁的使用者能夠體驗到和原生 app 完全相同的分享體驗。這篇文章將會教你 navigator.share() 的使用方法。 目錄 Web Share API 是什麼？ Web Share API…
Read more →如何用 Intersection Observer API 實作 Infinite Scroll/Lazy Loading
現代瀏覽器提供的 Intersection Observer API 非常適合用來實現 Infinite Scroll 和 Lazy Loading 等前端常見的需求。這篇文章將會教你 Intersection Observer API…
Read more →深入了解 getBoundingClientRect() 函數，輕鬆獲得元素的大小和位置
本文詳細介紹實用方法 getBoundingClientRect()，以及 left、top、right、bottom、width、height 等相關屬性，並教你如何搭配 window.pageXOffset 和 window.pageYOffset…
Read more →DOM 元素尺寸與位置：clientHeight, clientWidth, offsetHeight, offsetWidth, scrollHeight, scrollWidth, scrollTop, scrollLeft 詳解
本文詳細介紹 JavaScript 中常用的 DOM 元素尺寸和位置屬性，包括 clientHeight, clientWidth, offsetHeight, offsetWidth, scrollHeight, scrollWidth, scrollTop…
Read more →Quick Sort 演算法原理與實作
Quick sort 快速排序演算法是一種 divide and conquer 的陣列排序方法，其過程如下：先從 array 中選出一個元素當基準 (pivot)，然後讓 pivot 左邊的元素都小於等於 pivot，pivot 右邊的元素都大於 pivot…
Read more →[筆記] 如何正確實作 JavaScript Array Random Shuffle 亂數排序演算法
Array random shuffle 是一個很常使用的演算法，但你真的知道如何正確地實作它嗎？這篇文章將會討論各種用 JavaScript 實作 array random shuffle (亂數排序) 的方法，以及他們的優缺點。 目錄 神奇的 JavaScript…
Read more →JavaScript ES6 Class：深入淺出類別概念與應用
深入了解 JavaScript ES6 class 的概念及使用方法，探討 class 與 prototype 的關係，學會利用 extends 實現繼承，掌握 constructor、super 的使用技巧，以及瞭解靜態方法的應用。看完這篇保證讓你對 JavaScript…
Read more →如何使用 JavaScript 的 call 和 apply
這篇教學會介紹 JavaScript 中 apply() 和 call() 的使用方法，以及運用到 apply() 和 call() 的應用，包括 Call Forwarding、Cache 和 Method Borrowing。 目錄 JavaScript apply() JS…
Read more →JavaScript Closure (閉包)
JavaScript 中的閉包 (Closure) 是函式以及其語彙環境 (Lexical Environment) 的組合，所有的函式都能夠記住被創造的當下的環境以及變數。這篇教學將會從 JavaScript…
Read more →瀏覽器事件：Event Bubbling, Event Capturing 及 Event Delegation
這篇教學介紹瀏覽器事件的運作原理，包含event bubbling、event capturing。第二部分介紹event delegation的寫法及應用時機。教學內容主要參考javacript.info 的 Introduction into Events。 目錄 Event…
Read more →JavaScript Promise 的用法
JavaScript 中的 Promise 是專門用來執行非同步操作的資料結構，提供了 then、catch、all、race 等方法，使得複雜的非同步流程變得簡潔好管理。這篇文章將會介紹 promise 的 resolve 和 reject，如何使用 then…
Read more →JavaScript new 運算子及建構函式的用法
JavaScript 中可以使用 JavaScript new 運算子及建構函式建立物件。定義建構函式的必要步驟：1. 宣告建構函式 2. 在建構函式中，將物件屬性定義在 this 上 3. 將物件方法定義在建構式的 prototype 屬性裡 4. 用 new…
Read more →