JavaScript 綜合學習計劃（規則）

本學習計畫著重掌握20%的核心概念，從而勝任80%的實際項目。先掌握這些基礎知識，再透過專案進行拓展。

核心學習階段 (兩週)

每日學習安排:

• 上午: 學習概念 (1-2小時)。
• 下午: 練習 (1-2小時)。
• 晚上: 回顧、調試和複習 (30分鐘)。

第一週：基礎知識

第一天：基礎概念

• 主題: 變數 (let, const), 資料型態 (字串, 數字, 布林值), 運算子 ( , ===, !)。
• 學習資源: MDN JavaScript 基礎教學, freeCodeCamp 的 JS 文法課程。
• 練習: 寫程式計算 BMI 或攝氏度轉換為華氏度。

第二天：控制流

• 主題: 條件語句 (if/else, switch), 迴圈 (for, while)。
• 學習資源: JavaScript.info 條件語句與迴圈。
• 練習: 解 FizzBu​​zz 問題, 列印素數。

第三天：函數

• 主題: 函數宣告, 參數, 傳回值, 箭頭函數, 作用域。
• 學習資源: MDN 函數指南。
• 練習: 建立一個函數來反轉字串或計算階乘。

第四天：DOM 操作

• 主題: 選擇元素 (querySelector), 修改內容 (textContent, innerHTML), 樣式 (classList)。
• 學習資源: freeCodeCamp DOM 操作教學。
• 練習: 建立一個按鈕，改變頁面背景顏色。

第五天：事件

• 主題: 事件監聽器 (click, submit), 事件物件, preventDefault()。
• 學習資源: JavaScript.info 事件入門。
• 練習: 建立一個用於切換深色/淺色模式的按鈕。

第六天：陣列

• 主題: 陣列方法 (push, pop, map, filter, forEach)。
• 學習資源: MDN 陣列指南。
• 練習: 從陣列中過濾偶數或按字母順序排序名稱。

第七天：複習與小型專案

• 複習: 不參考程式碼重新寫之前的練習。
• 小型專案: 簡單的計數器應用程式 (遞增/遞減按鈕)。

第二週：進階概念

第八天：對象

• 主題: 對象字面量, 方法, this 關鍵字, 解構賦值。
• 學習資源: JavaScript.info 對象基礎。
• 練習: 創建一個用戶對象，包含更新個人資料數據的方法。

第九天：異步 JavaScript

• 主題: 回調函數, Promise, async/await, fetch()。
• 學習資源: MDN 異步 JavaScript。
• 練習: 從 JSONPlaceholder API 獲取數據並顯示標題。

第十天：錯誤處理

• 主題: try/catch, 拋出錯誤, 使用控制台進行調試。
• 學習資源: JavaScript.info 錯誤處理。
• 練習: 為你的 API 獲取代碼添加錯誤處理。

第十一天：ES6 特性

• 主題: 模板字面量, 展開/剩餘運算符, 模塊 (import/export)。
• 學習資源: ES6 for Everyone (免費課程)。
• 練習: 使用 ES6 語法重構舊代碼。

第十二天：本地存儲

• 主題: localStorage, JSON.stringify(), JSON.parse()。
• 學習資源: MDN Web 存儲 API。
• 練習: 保存和檢索用戶偏好設置 (例如，深色模式)。

第十三天：閉包與回調函數

• 主題: 詞法作用域, 閉包示例, 高階函數。
• 學習資源: MDN 閉包。
• 練習: 創建函數工廠 (例如，乘法函數)。

第十四天：最終複習與項目準備

• 複習: 構建一個結合 DOM、事件和 localStorage 的小型應用程序。
• 準備: 設置一個包含 HTML/CSS/JS 文件的項目文件夾。

五個項目鞏固和拓展知識

按順序構建這些項目，難度逐漸增加，獨立性也逐漸增強。使用文檔和 Google 解決遇到的問題。

1. 待辦事項清單 (初級)

• 描述: 添加、刪除和標記任務為已完成。
• 核心概念:
  • DOM 操作 (動態渲染任務)。
  • 事件處理 (表單提交, 點擊事件)。
  • 數組方法 (過濾刪除任務)。
  • 本地存儲 (在重新加載時持久化任務)。

2. 天氣應用程序 (中級)

• 描述: 從 API (例如，OpenWeatherMap) 獲取實時天氣數據。
• 核心概念:
  • fetch() 和 async/await。
  • 使用 JSON 數據。
  • API 失敗的錯誤處理。
  • 基於用戶輸入 (城市搜索) 動態更新 DOM。

3. 測驗遊戲 (中高級)

• 描述: 定時測驗，包含多項選擇題和記分板。
• 核心概念:
  • 面向對象設計 (測驗和問題類)。
  • setInterval 用於計時器。
  • 狀態管理 (跟踪當前問題, 分數)。
  • 事件委託用於答案按鈕。

4. 預算跟踪器 (高級)

• 描述: 使用圖表 (使用 Chart.js) 跟踪收入/支出。
• 核心概念:
  • 複雜狀態 (交易, 餘額, 類別)。
  • 與第三方庫集成 (Chart.js)。
  • 表單驗證和錯誤反饋。
  • 本地存儲用於數據持久化。

5. 全棧書店 (高級 )

• 描述: 使用 Node.js/Express 後端和原生 JS 前端的 CRUD 應用程序。
• 核心概念:
  • REST API 設計 (GET, POST, DELETE)。
  • 高級異步操作 (前端-後端通信)。
  • 模塊化代碼 (單獨的 API 服務模塊)。
  • 部署基礎知識 (DigitalOcean, Netlify)。

成功秘訣

1. 每天編碼: 即使只有 30 分鐘也能強化肌肉記憶。
2. 分解問題: 使用偽代碼逐步規劃項目。
3. 擁抱調試: 學習使用 console.log() 和 Chrome DevTools。
4. 大膽重構: 在代碼運行後改進代碼的可讀性和效率。

本計劃平衡了結構化學習和創造性問題解決。從小處著手，經常迭代，並慶祝進步！ ?

以上是JavaScript 綜合學習計劃（規則）的詳細內容。更多資訊請關注PHP中文網其他相關文章！