卡斯伯提供的教學資源：
JavaScript 開發中常見錯誤解決辦法
身為一個開發者，當然都會了解經驗越多，除錯上會更為容易，這種事情你我都清楚。但對於一個新手來就是缺少錯誤上的經驗，所以當遇到紅字時會不知如何著手。 這一系列的文章是專門給剛入門新手的前端開發者觀看的，盡可能用白話的方式，並且提供簡單的範例程式碼以供驗證。 Chrome 開發者工具的常見錯誤排解Chr...
完全解析 JavaScript import、export
import、export 是 JavaScript 模組管理的方法，可以將每個檔案視為一個獨立的模組匯出，並在另一個檔案匯入使用。透過此方式每個檔案更能專注在特定的功能上，且能避免單一檔案過度龐大。 相容性介紹此方法前，還是要了解一下相容性，目前來說許多主流瀏覽器都是可以運行的，但是寫法需要稍做調...
JavaScript Promise 全介紹
最近直播介紹如何串接開源資料，也剛好許多朋友詢問到 Ajax、Promise 相關的問題，因此重新撰寫一篇文來介紹 Promise，這篇文章也與過去形勢不太一樣，試著先將常見的問題放在前頭，接下來才開始介紹 Promise。 另外本文的內容較多，Promise 想看簡易版可參考：/javascrip...
JavaScript This 系列文：this 為什麼指向 window
本篇是接續先前的：鐵人賽：JavaScript 的 this 到底是誰？，會更深入的探討 JavaScript This 的運作及觀念，這一系列的文章順序上不會從基礎開始介紹，會建議先從先前文章開始閱讀。 純粹的調用 (Simple call)直接呼叫函式的情況下，this 會指向全域，在以下範例中...
JavaScript This 系列文：this 與物件的關係
本篇是接續先前的：鐵人賽：JavaScript 的 this 到底是誰？，會更深入的探討 JavaScript This 的運作及觀念，這一系列的文章順序上不會從基礎開始介紹，會建議先從先前文章開始閱讀。 物件的方法調用 (As an object method)「物件的方法調用」是最常見改變 th...
鐵人賽：邁向 JavaScript 的勇者
這次是第四次參加鐵人賽，先前參加的主題分別為兩次 CSS 及一次 JavaScript (D3.js)。 因為原本是視覺設計師，在過去曾經打算專精於 CSS 就好，所以不斷專精 CSS 的表現模式以及他的開發模式，我還曾經開發過幾次的 CSS Framework (有實際運用過)，不過隨著時間發展這...
鐵人賽：透過 ESLint 學習 JavaScript ES6
至於 ES6 該怎麼學比較好!?很建議安裝 ESLint 來邊學邊修正觀念。ESLint 是一個團隊統一程式碼結構的工具，如果程式碼不符合規範，則會出現相對應的提示，而其中有三大主流規範是許多開發者愛用的： Google Airbnb JavaScript Standard Style 三個都有...
鐵人賽：ES6 建構式語法糖
這一段與先前介紹的建構式概念接近連結，單篇觀看可能無法理解為何 JavaScript 要加入 Class 的概念，而 Class 在 JavaScript 只是個語法糖，讓建構式及原型更容易被表現而已。 ES6 建構式這裡我們先將先前章節的程式碼整理過來，除了順序有些調換外，觀念上是沒有差異的，最後...
鐵人賽：JavaScript Await 與 Async
不知道上一篇大家對於 Promise 概念如何，本篇介紹的內容與 Promise 依然有相關性，因為這兩者就是建構於 Promise 之上的，如果直接從原始碼看可能不是很好瞭解這語法怎麼使用，不過可以先直接用 Google 翻譯了解大概意思： await: 等待 async: 非同步 Await...
鐵人賽：使用 Promise 處理非同步
JavaScript 中有很多非同步的事件，而這些事件我們很常使用 callback，在一層包一層後就會出現知名的 callback 地獄，而 Promise 就是為了解決此問題而生的，因此每次介紹到 Promise 都會先下以下這張圖鎮鎮樓。 上一篇所介紹到的 Fetch() 就是使用 Prom...