• [教學] JavaScript 中的 Hoisting 是什麼意思?let const var 的差異居然是這個?

    JavaScript 在 ES6 let 和 const 問世之前,都是用 var 來定義變數,但是 var 有許多迥異於其他程式語言的特性,像是使用函式作用域 (function-level scope),以及具有變數 hoisting 的規則,對於初學者而言非常容易搞錯。這篇文章要告訴你 hoisting 是什麼意思,以及 let const var 的差異,以及區塊作用域 (block-level scope) 和函式作用域 (function-level scope) 的差異。

    (閱讀全文...)

  • [教學] JavaScript 中的 this 是什麼?

    在 JavaScript 中,「this 是什麼」絕對是讓人頭痛難題前三名。This 和物件方法息息相關,因此這篇文章會先介紹在物件方法、物件方法中的 this 是如何被決定的,把握一個簡單原則就可以知道 this 到底是誰。另外,arrow function 的 this 也很常令人搞混,這篇文章也會一併介紹 arrow function 中的 this。

    (閱讀全文...)

  • [教學] CORS 是什麼? 如何設定 CORS?

    當我們在 JavaScript 中透過 fetch 或 XMLHttpRequest 存取資源時,需要遵守 CORS (Cross-Origin Resource Sharing,跨來源資源共用)。瀏覽器在發送請求之前會先發送 preflight request (預檢請求),確認伺服器端設定正確的 Access-Control-Allow-MethodsAccess-Control-Allow-HeadersAccess-Control-Allow-Origin 等 header,才會實際發送請求。使用 cookie 的情況下還需額外設定 Access-Control-Allow-Credentials header。

    (閱讀全文...)

  • [教學] Cookie 與 document.cookie

    Cookie 是儲存在瀏覽器的一小段文字資料,通常由伺服器透過 Set-Cookie header 傳遞給瀏覽器。瀏覽器收到後會將 cookie 儲存起來,並在之後的請求回傳 cookie 至同樣的伺服器。Cookie 最常見的用途之一是認證身份,例如登入狀態、購物車等,也被應用於追蹤使用者及廣告上。這篇文章會介紹用 JavaScript 讀取及設定 cookie 的方法,以及 Path、Domain、Max-Age、Expires、Secure、HttpOnly、SameSite 等參數的意義,以及關於 cookie 的安全性議題。

    (閱讀全文...)

  • [教學] @babel/preset-env 設定

    這篇文章要介紹如何設定 @babel/preset-env@babel/preset-env 是 babel 7 架構下的一組 preset,能讓你用最新的 JavaScript 語法寫程式,並且智慧地根據瀏覽器的環境引入需要的 polyfill,節省手動管理 syntax transform 的時間,還能夠減少 bundle 檔案大小,是現代前端開發不可或缺的利器,快跟我一起來看看設定上有哪些要注意的地方吧!

    (閱讀全文...)

  • [教學] JavaScript Prototype (原型) 是什麼?

    在 JavaScript 中,每個物件都有一個 prototype (原型),物件可以從原型上繼承屬性和方法,達到復用程式碼的效果,這就是所謂的 prototypal inheritance (原型繼承)。除此之外,原型也能繼承其他物件,因此物件可以繼承一層又一層的屬性和方法,這形成了所謂的 prototype chain (原型鏈)。本篇文章將介紹 prototype、prototype chain,以及 prototypal inheritance 與 class inheritance (類別繼承) 的差異。

    (閱讀全文...)

  • [教學] Web Share API - Navigator.share() 介紹

    Web Share API 是現代瀏覽器提供的最新功能之一,它讓網頁的使用者能夠體驗到和原生 app 完全相同的分享體驗。這篇文章將會教你 navigator.share() 的使用方法。

    (閱讀全文...)

  • [教學] 如何設定 Webpack HMR + React Hot Loader (2020更新)

    Hot Module Replacement (HMR) 是 Webpack 提供方便開發過程的功能,讓你修改原始碼時不需要重新載入頁面,這篇文章將會教你如何設定 Webpack Config 使你的專案支援 HMR,增加團隊的開發效率。

    (閱讀全文...)

  • [教學] 如何用 Intersection Observer API 實作 Infinite Scroll/Lazy Loading

    現代瀏覽器提供的 Intersection Observer API 非常適合用來實現 Infinite Scroll 和 Lazy Loading 等前端常見的需求。這篇文章將會教你 Intersection Observer API 的用法,不僅程式碼更簡潔,而且效能比起監聽 scroll event 更好,此外瀏覽器支援度也不錯,就讓我們一起來看看吧!

    (閱讀全文...)

  • getBoundingClientRect() 教學

    這篇文章將會講解 getBoundingClientRect() 的屬性,包含 left、top、right、bottom、width、height 等,並整理如何用這些屬性取得元素的大小相對位置,以及如何搭配 window.pageXOffset 和 window.pageYOffset 轉換成絕對位置。

    (閱讀全文...)