JS 系列 0_JavaScript 新手入門教學：從基礎語法到 React 應用

終於要來到 JavaScript 的單元了， 因為學習的資料量太多，我將未來會寫的主題列出來（督促自己寫）回頭會再補上連結。

每周會帶到的重點：我會將相關主題的名詞放在同一類，難度逐步提升。

1. Week 1：JS 基礎
2. • 認識 JS 和 ES6 基本資料型別與物件 JS 地雷：typeof null 和 Coercion let、const、var 和作用域 變數提升（Hoisting）
2. Week 2：函式與執行邏輯
3. • 函式宣告、表達式、匿名函式、回呼函式 執行環境與作用域鏈 閉包與 IIFE
3. Week 3：網頁操作
4. • 認識 DOM 選擇器（getElementById、querySelector） 事件處理（addEventListener、事件冒泡、委託）
4. Week 4：非同步程式設計
5. • 事件循環與 setTimeout Promise 與 async/await
5. Week 5：現代 JS 與應用
6. • 陣列方法（map、forEach、reduce） 物件解構 原型鏈與 class React 基礎（函數組件、useState） JS 引擎簡介

模組 1：JS 入門：語法與基礎

1. ECMA 標準（ES6）
2. • 這裡是學什麼：認識 JavaScript 的「遊戲規則」。ECMAScript 就像 JS 的說明書，告訴你這語言怎麼寫。ES6 是 2015 年出的新版規則，加入了很多好用的寫法（像 let 和箭頭函式），學 JS 就從這裡開始！
   • 白話解釋：想像 JS 是個廚房，ES6 教你怎麼用新款烤箱和刀具，做出更好吃的菜。
2. 七種基本資料型別 vs. 物件（Primitive Data Type & Object, call by value, call by reference）
3. • 這裡是學什麼：學 JS 裡的「東西」分兩種：基本資料（像數字、字串）和物件（像陣列）特別注意在JS 沒有像python有字典的功能。還要知道它們怎麼被「複製」（基本資料是影印，物件是共用）。 這個概念有點複雜，我會另外寫文章解釋。
   • 白話解釋：基本資料型別（像 number、string、null）是獨立的便條紙，寫了就不能改；物件（像 {} 或 []）是共享的筆記本，改了大家都能看到。call by value 像影印便條紙，call by reference 像給筆記本的連結。
3. typeof(null) is object 等 JS 的 bug
4. • 這裡是學什麼：認識 JS 的「怪脾氣」。比如 typeof null 說它是 object，這是 JS 早年的錯誤，留到現在。還有其他容易搞亂的坑。
   • 白話解釋：JS 就是個怪語言，有時候沒邏輯，有時會出莫名其妙的問題（像 null 被當成物件）。學會這些坑，就能繞過去！
4. Coercion（為何 string 是 primitive 卻有 .toUpperCase() 方法）
5. • 這裡是學什麼：學 JS 怎麼「自動幫你轉東西」，還有為什麼簡單的字串（string）也能用 .toUpperCase() 這種招數。
   • 白話解釋：Coercion 是 JS 擅自把東西換成另一種格式（像把數字變字串），有時幫你，有時害你。
   • • Coercion 是 JS 自動把東西換成另一種形式，像是把文字 "5" 當數字用（"5" - 1 變 4）。這有點像自動翻譯，但有時翻錯！還有，文字（string）是簡單東西，但 JS 會偷偷把它包裝成「臨時文件夾」，所以你能用 .toUpperCase() 這種高級指令把 "hello" 變 "HELLO"。
5. let, const, var 比較與不要用 var 的原因
6. • 這裡是學什麼：學怎麼「命名和儲存東西」。「let」和「const」是新方法，var 是老方法，容易亂，別用！
   • 白話解釋：想像你把東西放進盒子，let 是可以換內容的盒子，const 是鎖死的盒子，var 是破洞的盒子，東西會漏出去。用 let 和 const 比較安全！
6. global scope, local scope, block scope
7. • 這裡是學什麼：學東西在程式裡的「活動範圍」，像是家裡還是房間。
   • 白話解釋：Scope 是東西能被看到的範圍。全域（global scope）像放在客廳的東西，全家都能用；區域（local scope）像放房間的東西，只有房間裡能用；區塊（block scope）像抽屜裡的東西，只有特定小地方能用。學這個就像知道東西放哪才安全！
7. hoisting
8. • 這裡是學什麼：學 JS 怎麼「偷跑」。它會把你的 var 或函式提到程式前面，但有時會讓你抓狂。 白話解釋：hoisting 像 JS 在開工前把你的工具（var ）先擺好，但沒放東西進去，所以你可能用到空的工具，程式就出錯。

模組 2：函式與作用域

這裡是學怎麼寫「小幫手」（函式），還有它們怎麼跟盒子（作用域）互動！

1. function declaration & function expression
2. • 這裡是學什麼：學兩種寫「小幫手」的方法：一個是大聲宣告（declaration），一個是安靜定義（expression）。
   • 白話解釋：function declaration 是直接喊「這是我的幫手！」（像 function sayHi() {}）；function expression 是把幫手塞進盒子（像 const sayHi = function() {}）。兩者用法稍有不同，取決於程式設計者的習慣。
2. anonymous function
3. • 這裡是學什麼：學怎麼寫「沒名字的幫手」，通常用在臨時任務。
   • 白話解釋：anonymous function 像臨時工，沒取名字（像 function() {}），直接丟去用，比如按鈕點擊時跑一下。
3. callback function
4. • 這裡是學什麼：學怎麼讓一個幫手「等指令」再做事。
   • 白話解釋：callback function 是你告訴另一個幫手「等我喊你，你再動！」（像按鈕點擊後才跑的函式）。
4. 全域 & 函式執行環境（creation phase, execution phase）
5. • 這裡是學什麼：學 JS 怎麼「準備和執行」程式，分成兩步：先準備工具和區域（creation phase），再做事（execution phase）。
   • 白話解釋：JS 像個廚師，先把食材和刀具準備好（creation phase），然後開始炒菜（execution phase）。每個函式都有自己的小廚房。
5. scope chain
6. • 這裡是學什麼：學 JS 怎麼「找東西」，從小房間到大廳一層層找。
   • 白話解釋：scope chain 像你找鑰匙，先看桌上（當前房間），沒找到就去客廳（外層），最後去大門口（全域）。
6. closure 閉包（var 跑 console.log 那一個）
7. • 這裡是學什麼：學幫手怎麼「記住」外面的東西，即使外面的房間關了。
   • 白話解釋：closure 像幫手帶著小抄，記住外面的區域裡有什麼。經典例子是用 var 在迴圈裡跑 console.log，結果全印錯，因為 var 不會鎖住值。
7. IIFE（Immediately Invoked Function Expression）
8. • 這裡是學什麼：學怎麼寫一個「馬上做事就消失的幫手」。
   • 白話解釋：IIFE 像一個臨時幫手，進來做事（像 (function() { ... })()），做完就走，不留痕跡，常用來避免亂放東西到大廳。

模組 3：操作網頁：DOM 與事件

這裡是學怎麼讓網頁聽你的話，點擊、改變文字什麼的！

1. Document Object Model (DOM)
2. • 這裡是學什麼：學網頁的「地圖」，讓你找到並改網頁上的東西。
   • 白話解釋：DOM 是網頁的藍圖，把每個按鈕、文字都變成你可以操控的東西，像玩樂高一樣。
2. getElementById, getElementsByClassName（HTML Collection）, querySelector, querySelectorAll（NodeList）
3. • 這裡是學什麼：學怎麼「抓網頁上的東西」，像用身分證（getElementById）或標籤（querySelector）找人。
   • 白話解釋：getElementById 是用獨一無二的名字抓東西；getElementsByClassName 是抓一群有同樣標籤的東西（給你 HTML Collection）；querySelector 像萬能搜尋，什麼都能找，還給你 NodeList。
3. addEventListener
4. • 這裡是學什麼：學怎麼讓網頁「聽指令」，像點擊按鈕就做事。
   • 白話解釋：addEventListener 像給按鈕裝個耳朵，告訴它「有人點你才跑！」。
4. event bubbling, event delegation, stopPropagation
5. • 這裡是學什麼：學網頁的「點擊傳遞規則」，怎麼讓點擊更聰明或停下來。
   • 白話解釋：event bubbling 像點擊按鈕後，訊息會一層層往上傳（從按鈕到整個網頁）；event delegation 是只給大盒子裝耳朵，小按鈕共用，省力；stopPropagation 是說「別傳了，停！」。

模組 4：非同步程式設計

這裡是學怎麼讓 JS 等一下再做事，比如等資料來了再顯示！

1. JS event loop 流程, call stack
2. • 這裡是學什麼：學 JS 怎麼「排隊做事」，一次只做一件事。
   • 白話解釋：event loop 像個秘書，把任務排好隊；call stack 是秘書的桌子，只能放一個任務，做完再換下一個。忙不過來就丟到隊伍裡等。
2. callback, setTimeout
3. • 這裡是學什麼：學怎麼讓 JS 「過一會兒再做事」。 白話解釋：callback 是說「做完這個再做那個」；setTimeout 像定時器，說「等幾秒再跑這個幫手」。
3. sync & async, Promise/then/catch, async/await/try/catch
4. • 這裡是學什麼：學怎麼處理「要等的任務」（像抓資料）。
   • 白話解釋：sync 是按順序做事，async 是可以先做別的，等資料來了再處理。Promise 像張便條，說「資料來了就做這個，沒來就報錯」（用 then/catch 處理）；async/await 是更簡單的寫法，像說「等資料來再繼續」（用 try/catch 抓錯）。

模組 5：現代 JS 與 React

這裡是學怎麼用新招數寫 JS，還能用 React 做酷炫網頁！哀 但React 蠻難的

1. JS array prototype method（map, forEach, reduce, push, pop, shift, unshift 等）
2. • 這裡是學什麼：學怎麼快速處理「清單」（像陣列）。
   • 白話解釋：陣列像一籃水果，map 是把每個水果包裝一下，forEach 是逐個檢查，reduce 是把水果榨成汁，push/pop 是加減水果，shift/unshift 是從頭加減。
2. 解構物件（destructuring）
3. • 這裡是學什麼：學怎麼快速拆開「包裹」（物件或陣列），拿裡面的東西。
   • 白話解釋：destructuring 像把一個大禮盒（物件）拆開，直接拿裡面的東西（像 let {name} = person），寫程式更乾淨。
3. prototype chain（原始寫法 & 語法糖 class）
4. • 這裡是學什麼：學 JS 怎麼「繼承東西」，讓物件有新功能。
   • 白話解釋：prototype chain 的核心是一層一層問上去。JavaScript 裡的物件會透過「原型鏈」來找屬性和方法，譬如你想知道這個物件有沒有某個方法？JS 會說：「等我找一下... 我自己沒有，但我爸（prototype）可能有，我問問看。」
   • 之後也會介紹最原始的寫法跟套裝版語法糖寫法。
4. React functional component, React hooks（useState）
5. • 這裡是學什麼：學怎麼用 React 做「會動的網頁小零件」。
   • 白話解釋：functional component 是網頁的一小塊（像按鈕或表單）；useState 是讓這塊記住東西（像點擊次數），讓網頁活起來。
5. 瀏覽器 JS 引擎（just-in-time compilation）
6. • 這裡是學什麼：學 JS 怎麼在瀏覽器裡「跑得快」。
   • 白話解釋：JS 引擎 像瀏覽器的馬達，把你的程式轉成電腦懂的語言。just-in-time compilation 是馬達的渦輪增壓，讓程式跑得更快。

白話解釋的設計原則

其實我一直不想面對JS 哈哈，不過還是跟大家分享我寫的理念，我會盡量用生活化比喻讓我自己理解，之後的每個主題也會搭配程式碼，如果心有餘力再畫畫。

看到這裡的你已經很棒了，我們下個主題見！