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
[8]作業:Promise.resolve
Lesson content locked
如果您已經加入,
請先登入
.
加入課程以解鎖