[0]模組：程式碼的導入與導出 | JamesKool

Autoplay
Autocomplete

回到上一集完成並繼續

【從0開始學JavaScript】史上最適合初學者的程式語言課

開始之前

記錄你的學習之旅
記下好的ideas
遇到困難怎麼辦？
學員專屬討論區 (0:37)
課程檔案

模組0：認識JavaScript

JavaScript可以幹嘛 (1:16)
作業
模組測驗

模組1：JavaScript的執行環境

[0]安裝開發工具 (5:49)
[1]如何執行JavaScript程式碼 (5:08)
模組測驗（5題）

模組2：hello world

console.log (1:05)
作業

模組3：變數與運算子

[0]變數與運算子 (4:06)
[1]程式設計師很懶 (2:53)
[2]小測驗
[3]變數命名規則 (2:03)
[4]常數(const) (3:29)
[5]作業：溫度轉換器
[6]可讀性(readability） (1:36)
[6]泛用不一定更好！ (2:28)
[7]變數的型別：數字與字串 (6:57)
[8]字串與變數的差別 (0:55)
[9]作業：一元二次方程式
[10]模組測驗（13題）

模組4：基礎語法概念

[0]運算子的優先序與相依性 (9:36)
[1]template string (2:07)
[2]表達式(expressions)與陳述式(statements) (6:41)
[3]i++_vs_++i (1:25)
[4]模組測驗（17題）

模組5：if else條件式

[0]布林值(boolean) (9:55)
[1]if else條件式 (11:16)
[2]變數的範圍(scope) (4:12)
[3]作業：閏年判斷
[4]作業：成績分級
[5]null與undefined (1:38)
[6]truthy與falsy的值 (2:50)
[7]模組測驗（20題）

模組6：迴圈（loops）

[0]while迴圈 (9:48)
[1]作業：迴文
[2]作業：跳過5
[3]for迴圈 (4:17)
[4]作業：字母計算
[5]作業：字串反轉
[6]模組測驗（18題）

模組7：函式（functions）

[0]functions (1:32)
[1]function的參數 (1:36)
[2]作業：成績分級2
[3]返回（return） (1:23)
[4]應用範例：判斷質數 (6:06)
[5]作業：閏年判斷2
[6]遞迴 (3:41)
[7]作業：計算階乘
[8]作業：計算兩點的距離
[9]把function當作值 (2:51)
[10]箭頭函式 (3:41)
[11]補充：匿名函式
[12]模組測驗（14題）

模組8：物件（objects）

[0]物件基礎 (5:12)
[1]方法（methods） (2:00)
[2]用string存取屬性 (2:38)
[3]作業：建立一個物件
[4]補充：關於型別 (0:55)
[5]作業：地址簿
[6]解構（destructuring） (1:44)
[7]物件的比較 (2:10)
[8]value vs. references (3:59)
[9]模組測驗（13題）

模組9：陣列（Arrays）

[0]陣列（Arrays）基礎 (5:17)
[1]作業：找出質數2
[2]如何迭代Array (3:35)
[3]作業：找到最大數
[4]作業：算出平均分數
[5]常用Array Methods (6:29)
[6]作業：篩選出成人
[7]作業：把資料轉換成特定格式
[8]模組測驗（21題）

模組10：整合練習

模組說明
硬幣組合
number of good pairs
2011. Final Value of Variable After Performing Operations
1480. Running Sum of 1d Array
1450. Number of Students Doing Homework at a Given Time
118. Pascal's Triangle
1436. Destination City

模組11：DOM manipulation

[0]使用JavaScript操作DOM (11:37)
[1]模組測驗（5題）

第一個Project：todo-list

第一部分：用HTML, CSS完成畫面 (17:35)
第二部分：JavaScript讓它動起來 (10:08)
補充概念：localStorage (4:54)
第三部分：用localStorage保存資料 (16:49)

模組12：非同步運算

[0]sync vs. async (6:48)
[1]Promise如何使用 (5:16)
[2]作業：練習使用fetch
[3].then的串連 (4:46)
[4].catch錯誤處理 (6:52)
[5].finally
[6]建立自己的非同步運算 (9:19)
[7]作業：模擬咖啡廳邏輯
[8]作業：Promise.resolve
[9]async關鍵字 (6:41)
[10]await關鍵字 (11:37)
[11]作業：將await轉換成.then
[12]模組測驗（12題）

模組13：Modules（導入導出）

[0]模組：程式碼的導入與導出 (1:50)
[1]CommonJS Modules (3:39)
[2]ECMAScript Modules (8:52)
[3]ES module wildcard（通配符導入）
模組測驗（5題）

第二個Project：Cat Search

[HTML, CSS] 標題與篩選器 (15:28)
[HTML, CSS] 顯示圖片 (8:43)
[HTML, CSS] 加上抽屜 (24:22)
探索API (6:33)
[JS]從API讀取圖片 (13:07)
[JS]加上篩選邏輯 (16:03)
[JS]加上排序功能 (4:09)
[JS]增加load more button功能 (5:44)
[JS]增加抽屜功能 (15:43)
[JS]project架構回顧 (8:06)

模組14：npm套件管理工具

[0]npm基本操作 (11:51)
[1]package-lock.json是幹嘛用的？ (4:36)
[2]版本號補充說明
[3]更新套件：npm update (1:26)
模組測驗（5題）

第三個Project：圈圈叉叉（終端機）

建立npm package (0:55)
補充：jest單元測試介紹 (2:12)
設置jest（單元測試） (3:20)
遊戲核心邏輯解說 (4:17)
遊戲核心邏輯實作 (25:18)
完成2P mode（雙人模式） (14:39)
補充：minimax演算法介紹 (6:23)
完成AI邏輯 (16:19)
挑戰：完成單人模式
完成1P mode（單人模式） (9:26)
project架構回顧 (2:35)

第四個project：圈圈叉叉（網頁版）

補充：為何使用vite？bundler介紹 (5:05)
建立project (1:38)
完成首頁 (5:15)
完成所有頁面（HTML, CSS） (10:47)
完成顯示遊戲畫面的functions (20:44)
完成2p模式 (17:39)
挑戰：完成1p模式
完成1p模式 (10:54)
project架構回顧 (2:40)

第五個project：簡易聊天室

project簡介 (1:06)
設置vite project (1:40)
完成index.html (4:15)
完成room.html (11:42)
設置firebase (9:28)
[js]完成建立房間的邏輯 (9:42)
[js]完成傳送訊息功能 (9:12)
[js]完成顯示訊息功能 (12:34)
[js]完成邀請連結功能 (11:10)
[js]讀取房間名稱 (4:43)
[js]編輯房間名稱 (8:39)
把app部署到netlify！ (6:03)
作業：新增進階功能

模組15：Class與OOP（物件導向）

[0]class基礎概念 (1:56)
作業：理解new語法
[2]建立TodoList class (4:17)
[3]private屬性 (5:02)
[4]static屬性 (11:26)
OOP練習：實作bankAccount
OOP練習：實作購物車
[5]繼承 (1:57)
[6]繼承：實際操作 (6:14)
[7]繼承的問題 (3:00)
[8]如何寫好OOP、參考資源 (8:55)
模組測驗（6題）

模組16：event loop

[0]setTimeout介紹 (3:03)
[1]Event Loop介紹 (6:18)
[2]makeCoffee範例解說 (2:22)
[3]延伸閱讀：microtask與macrotask
setTimeout觀念題
模組測驗（4題）

模組17：錯誤處理

[0] try catch語法 (5:02)
[1] 拋出錯誤 (3:55)
[2] finally (1:01)
[3] 與promise的比較 (3:17)
[4]練習：捕捉語法錯誤
[5]練習：捕捉函式拋出的錯誤
模組測驗（10題）

模組18：補充概念

[0]spread operator (0:50)
[1]展開array (2:55)
[2]展開object (2:48)
[3]展開參數 (1:46)
[4]ternary operator (3:41)
[5] switch statement (4:18)
[6]JavaScript版本概念 (1:57)
[7] argv取得外部參數 (2:29)
[8]什麼是閉包？程式中的隔山打牛
[9]const, let, var的差別
其他補充知識

模組19：內建資料結構或型別

[0] Set（集合） (4:26)
作業：two sum
[1] Map (9:31)
[2] Date (4:23)
[3]資料型別與methods (1:03)

學完JavaScript之後呢？

接下來如何學習？轉職 vs. 不轉職 (3:59)
前端藍圖 (2:47)
後端藍圖 (1:57)

最後

填寫問卷，領取折扣碼

Teach online with

[0]模組：程式碼的導入與導出

Lesson content locked

如果您已經加入，請先登入.

加入課程以解鎖