自動播放
自動完成
上一堂課程
完成並繼續課程
2164187
JavaScript 工程師養成直播班 - 2023 秋季班
課程公告
影音授權時間
開學典禮
開學典禮影片 (155:19)
2020 VS Code 網頁編輯器、HTML 基礎教學
安裝 Chrome 瀏覽器 (2:15)
安裝 VS Code 編輯器 (3:36)
安裝 VS Code 套件 - 讓介面變成中文化 (4:17)
開始撰寫 HTML (6:28)
撰寫 h1 標籤、 p 段落 (8:11)
CodePen 教學 - 將你的程式碼分享給別人 (4:20)
建立 HTML 環境 (7:40)
HTML 環境語法
Emmet 載入環境語法 (6:29)
插入圖片，了解圖片路徑規則 (8:48)
載入外部圖片方式 (4:30)
在網頁上加上 a 連結標籤 (6:18)
段落 p 與連結 a 的混合應用 (3:08)
認識 ul li 列表標籤 (8:26)
HTML 標籤教學 - 小節作業 (3:55)
2020 CSS 常用語法
HTML 與 CSS 的差異 (3:37)
插入 CSS 檔案，先寫一個 h1 讓文字變色 (5:48)
CSS 寫法詳解介紹 (4:38)
新手常見 CSS 錯誤解析 (9:30)
HTML 標籤選擇器 (5:44)
擬態選擇器 :hover (6:07)
類別選擇器 (13:06)
使用 CSS 優化文字排版 (10:16)
在 HTML 標籤上加入線條 (8:10)
2020 CSS 樣式小節作業
2020 使用 CSS 變更 HTML 標籤特性
網頁容器介紹 (6:50)
CSS Reset - 清空瀏覽器預設樣式 (11:42)
display: block 區塊元素介紹 (12:39)
display: inline 行內元素介紹 (12:15)
display 容器特性 - 區塊跟行內 (5:49)
div 與後代選擇器運用 (14:44)
margin 產生外邊界距離 (11:52)
padding 產生留白距離 (6:17)
margin、padding 投影片介紹 (2:04)
Box Model（盒模型）詳細介紹 (10:54)
margin 0 auto 區塊水平置中 (10:15)
text-align 文字水平調整 (5:16)
2020 優化 CSS 作業小節作業
2020補充教材：不想算盒模型的推擠？試試 CSS3 box-sizing 吧！ (5:18)
課前最終作業一
課前最終作業一提交
JavaScript 課前知識與環境介紹
安裝 Chrome 網頁瀏覽器 (3:02)
安裝 VSCode 程式編輯器 (6:55)
變數與資料型別
變數大綱簡介 (6:40)
透過 Chrome 開發人員工具來寫 JavaScript (4:57)
如何宣告變數 (6:06)
設定變數，如同在 excel 設定欄位般容易！ (6:06)
number 型別 - 讓您擁有簡易計算機功能 (5:43)
number 型別 - 各種數字的支援程度大解密 (2:20)
number 型別 - 變數如何帶變數 (6:27)
課前最終作業二提交 (8:12)
let、const、var 介紹
let 變數詳細介紹 (3:56)
const 詳細介紹 (6:56)
var 歷史的眼淚詳細介紹 (3:04)
宣告變數一次讓你知！ (6:24)
網頁與 Code 環境建立流程教學
VSCode 撰寫 JS 環境建立 (8:23)
console.log 印出你想顯示的資訊！ (3:47)
如何撰寫優雅的註解 (5:22)
Codepen - 透過它來提交您的程式碼 (6:24)
數字型別與賦值運算子
賦值運算子+=、-= (5:56)
a++、a-- 一次搞懂！ (3:45)
課前最終作業三提交 (5:56)
課前最終作業四提交 (6:36)
字串型別
宣告字串流程 (3:42)
一次搞懂字串相加 (5:34)
透過 typeof 瞭解當前變數型別 (2:39)
數字與字串相加 (5:21)
NaN 產生時機 (5:20)
字串處理實用方法 (5:04)
變數記憶體指向講解 (7:26)
樣版字面值教學 (4:54)
變數：布林、undefined、null
布林介紹 (5:01)
undefined 介紹 (3:54)
null 介紹 (5:10)
字串轉數字方法 (5:34)
數字轉字串方法 (3:57)
2022 - 第一週主線任務錄影檔
開業式 - 提供 JS 學習地圖，選擇你要投入的 LV 等級 (48:38)
第一堂直播錄影 - 上半部 (42:31)
第一堂直播錄影 - 下半部 (62:26)
第一週核心篇 - 上 (81:09)
第一週核心篇 - 下 (40:31)
2023 第一週直播錄影
穎旻 - 第一週：重新認識 JavaScript 之術 (109:19)
比較與邏輯運算子
比較與邏輯運算子簡介 (2:31)
比較運算子： >、=、<= (5:45)
比較運算子搭配變數方法 (5:54)
=、== 差異講解 (2:46)
==、=== 差異講解 (4:23)
邏輯運算子介紹 (5:11)
邏輯運算子增加多條件作法 (2:53)
邏輯運算子範例情境 (5:01)
流程判斷 - if、else if、else
為什麼要理解流程判斷？ (7:53)
if、else、else if 講解 (7:12)
if 詳細講解 (一) (5:56)
if 詳細講解 (二) (10:29)
if 流程圖規劃流程
if 圖表介紹 (4:43)
圖表服務註冊流程 (2:08)
流程圖符號簡介 (1:48)
流程圖 let code 講解 (12:44)
流程圖 if code 講解 (15:26)
if 中階運用
if 包 if 腰圍判斷流程圖設計 (10:10)
if 包 if 腰圍判斷 Code 設計 (13:24)
看圖說故事 - if 練習一 (4:34)
看圖說故事 - if、else if 練習二 (1:51)
看圖說故事 - if、else if 練習三 (9:59)
2022 - 第二週主線任務錄影檔
第二堂直播錄影檔 - 上半部 (69:01)
第二堂直播錄影檔 - 下半部 (75:07)
第二週核心篇 - 上 (73:13)
第二週核心篇 - 下 (34:47)
2023 第二週直播錄影
第二堂：邏輯判斷之術(上) (72:39)
第二堂：邏輯判斷之術（下） (77:58)
陣列教學
為什麼要學陣列物件？ (4:04)
筆刷工具介紹 (1:01)
陣列寫法教學 (4:29)
陣列不只能放字串，也能放數字與混合資料 (4:02)
陣列讀取教學 (3:25)
讀取陣列資料，並賦予新變數流程 (4:21)
length 讀取陣列長度流程 (2:13)
陣列預設寫入資料 (5:18)
push 寫入資料流程 (4:18)
unshift 寫入資料流程 (2:10)
pop 與 shift 刪除資料 (3:21)
splice 刪除指定資料 (4:56)
其他陣列總結 (1:08)
物件教學
為什麼要有物件 (1:21)
物件格式教學 (6:58)
如何讀取物件的值 (5:47)
新增物件屬性 (3:14)
修改物件值 (3:36)
刪除物件資料 (2:13)
另一種讀取物件屬性方法 (2:11)
物件讀取資料判斷時間 (2:36)
陣列與物件整合運用
陣列與物件混合應用 (5:57)
一次搞懂陣列與物件混合讀取教學 (6:45)
JSON 格式介紹 (2:29)
安裝 JSON 檢視 Chrome 套件 (2:03)
下載 JSON 格式資料 (7:12)
JSON 讀取方式教學 - 以充電站為例 (5:25)
物件裡面還能包物件 (4:02)
物件包物件讀取流程 - 以活動公告 open data 為例 (10:03)
如何篩選出自己想要的資料格式，並賦予到特定變數上 (3:53)
小魔王題目：複雜 JSON 格式，你/妳撈得到嗎？ (6:29)
物件搭配 if 練習 (4:29)
陣列物件搭配 if 流程判斷練習 (5:02)
小節作業 (1:55)
2022 - 第三堂直播錄影檔-陣列與物件
第三週錄影 - 上半部 (39:58)
第三週錄影 - 下半部 (117:45)
第三週核心篇 (109:37)
2023 第三週直播錄影
第三堂：物件跟陣列資料處理之術（上） (87:01)
第三堂：物件跟陣列資料處理之術（下） (61:29)
函式 function
為什麼需要學函式？ (1:48)
函式寫法教學 (4:32)
註冊多組函式流程 (4:23)
函式裡面仍可以執行函式 (4:47)
函式參數介紹 (5:24)
參數寫法-參數只存活在大括號 (2:31)
參數寫法-兩個數字相加工具 (3:25)
輸入跟輸出的重要性 (3:09)
return 寫法教學 (6:47)
return 宣告 let (2:40)
return 可以有多個 (2:26)
return 可以有多個-範例Code (5:11)
判斷是否為偶數 - 畫流程圖 (6:45)
判斷是否為偶數-寫Code流程(上) (12:19)
let 全域與區域變數邏輯 (4:13)
判斷是否為偶數-寫Code流程(下) (3:59)
Codewar 程式解題邏輯培養
為什麼要學 Codewars？ (2:55)
Codewars 註冊流程 (6:37)
隨機選題模式 (5:59)
自選題目模式 (4:40)
解題介面講解 - 以相乘函式為例 (12:44)
解題 - 奇偶數判斷 (8:59)
如何觀看到自己的經驗值與徽章？ (3:52)
卡關或題目意思看不懂，該如何 Google 找答案？ (4:04)
如何參與 Codewars 六角中文論壇？(投稿、發問、交流) (8:25)
2022 - 第四堂錄影與主線任務範例
第四堂錄影上半部 (75:07)
第四堂錄影下半部 (98:51)
第四關主線任務第一階段講解 (20:41)
第四關主線任務第二階段無聲版純範例 (4:23)
第四關主線任務第二階段有聲版講解 (10:29)
第四關主線任務第三階段無聲版純範例 (10:11)
第四關主線任務第三階段有聲版講解 (16:52)
加碼補充 - 物件取值 - 帶變數 (4:02)
加碼補充 - 物件取值 - 常見觀念 (2:55)
加碼補充 -物件取值 - 究竟要用哪種取值方式？ (3:11)
助教直播 (62:44)
第四週核心 上 (49:23)
第四週核心 下 (81:41)
2023 第四週直播錄影
第四堂：函式設計之術（上） (74:06)
第四堂：函式設計之術（下） (93:42)
DOM - 選取網頁元素
為什麼要瞭解 DOM？ (2:48)
瞭解 document 的重要性 (3:54)
DOM 環境配置 (2:22)
querySelector 選擇器 (6:22)
textContent 寫入文字資料 (5:29)
innerHTML 插入 HTML 標籤 (6:41)
innerHTML 加入變數 (7:09)
textContent 與 innerHTML 運用差異 (4:21)
setAttribute 增加 HTML 標籤屬性 (4:40)
querySelectorAll 可重複選取多個元素 (5:57)
.innerHTML、.textContent、.getAttribute 取值方法 (6:07)
表單元素取值方式 (5:41)
Event 事件 - 讓您的網頁具有互動效果
什麼是 event？ (2:22)
addeventListener 註冊事件監聽教學 (8:25)
如何觀看 DOM 有註冊事件監聽 (2:58)
來寫一個加法器吧！ (6:34)
event 物件 - 告訴你當下元素資訊 (6:43)
DOM 複習 - 透過 nodeName 瞭解目前 DOM 的 HTML 位置 (1:54)
e.target - 了解目前所在元素位置 (4:44)
e.target 搭配 nodeName 節點，抓到你預期要做的事情 (6:48)
preventDefault - 取消預設觸發行為 (4:11)
陣列 forEach 資料處理方法
為什麼要學陣列資料處理？ (3:32)
forEach 寫法介紹 (9:24)
陣列數字累加與變數作用域講解 (8:00)
搭配 if，篩選出陣列裡面有幾個偶數 (6:22)
forEach 讀取資料 (4:35)
男女人數計算機-透過物件整合資料 (5:29)
高雄 OPEN DATA-觀看免費與投幣式充電站有幾處 (7:39)
高雄 OPEN DATA-陣列物件處理 (10:27)
forEach 題型練習
範例功能講解 (1:27)
如何整合 innerHTML 資料 (8:43)
搭配網頁初始化狀態 (1:53)
免費與投幣式事件監聽設計 (5:55)
事件監聽搭配 if 流程判斷 (8:32)
DOM 拉出全域變數進行管理 (2:10)
篩選條件增加流程 (3:46)
新增充電站 UI 介面邏輯新增 (13:29)
2022 - 第五堂錄影檔
第五堂錄影檔-上半部 (34:43)
第五堂錄影檔-下半部 (102:10)
助教直播 (56:20)
第五週核心篇 - 上 (59:49)
第五週核心篇 - 下 (55:23)
2023 第五週直播錄影
第五堂：期中試煉(上) (75:40)
第五堂：期中試煉（下） (85:16)
AJAX - 網路請求
什麼是 AJAX？它如何改善網頁使用體驗？ (5:11)
什麼是網路請求？ (7:04)
從網頁架構瞭解網頁請求-上集 (8:17)
從網頁架構瞭解網頁請求-下集 (3:40)
網頁請求狀態碼 (9:06)
request、response 講解 (6:48)
用 Node.js 開啟伺服器，更加瞭解 request、response 的差異 (11:13)
AJAX - axios 套件教學
各種發出網路請求的 JS 寫法種類介紹 (4:56)
axios 環境安裝 (3:11)
axios-嘗試串接外部資料 (2:53)
axios-response 參數詳細講解 (4:22)
axios-將外部資料寫入到網頁上 (3:50)
axios-非同步觀念 (6:30)
透過函式設計處理非同步 (8:34)
2022 - 第六堂 AJAX 直播錄影檔
第六堂直播錄影 - 上半部 (52:29)
第六堂直播錄影 - 下半部 (87:58)
助教直播 (54:49)
第六週核心篇 - 上半部 (73:13)
第六週核心篇 - 下半部 (67:42)
2023 第六週直播錄影
第六堂：AJAX 操控伺服器之術（上） (63:14)
第六堂：AJAX 操控伺服器之術（下） (91:42)
AJAX POST API 講解
網路請求種類介紹 (2:07)
post 網路請求文件介紹 (7:53)
四種常見的 POST 請求 content-type 介紹 (5:02)
透過 axios 實做註冊 post 網路請求 (8:38)
從 chrome 觀察 post 請求 (7:19)
實做 axios DOM 表單註冊流程 (15:26)
AJAX POST 小節作業 (3:37)
2022 - 第七堂錄影檔
第七週錄影檔 - 上半部 (38:44)
第七週錄影檔 - 下半部 (98:25)
助教直播 (60:21)
第七週核心 - 上 (93:43)
第七週核心 - 下 (29:48)
2023 第七週直播錄影
第七週：第三方 JS 套件整合之術（上） (55:24)
第七週：第三方 JS 套件整合之術（下） (85:25)
todolist 待辦事項
todolist 經典題目介紹 (1:20)
取值複習 getAttribute (4:37)
範圍內容取值 (7:26)
監聽大範圍內容取值 (8:30)
data- 屬性妙用 (4:24)
HTML 結構設計 (3:57)
資料初始化渲染 (6:29)
待辦新增功能 (8:09)
待辦刪除功能-前置解說 (3:14)
待辦刪除功能 (14:20)
補充：NPM 管理
NPM 介紹 (3:48)
Node.js、NPM 環境安裝 (3:25)
VSCode 終端機教學 (7:46)
npm init - 專案環境初始化 (6:23)
npm install - 環境安裝教學 (7:04)
npm 全域安裝 -g (10:53)
--save、--save-dev 指令差異 (7:00)
常見指令補充 (5:12)
2022 - 第八週直播錄影檔
第八週錄影 - 上半部 (59:14)
第八週錄影 - 中半部 (78:39)
第八週錄影 - 下半部 (51:21)
助教直播 (69:33)
第八週 核心篇 - 上 (73:33)
第八週 核心篇 - 下 (42:37)
2023 第八週直播錄影
第八堂：API 開發流程（上） (84:28)
第八堂：API 開發流程（下） (92:41)
2022 - 第九堂最終關卡錄影檔
第九週錄影-上半部 (58:43)
第九週錄影-下半部 (100:49)
2023 第九週直播錄影
第九堂：最終關卡 DOM+API 操控（上） (45:12)
第九堂：最終關卡 DOM+API 操控（下） (117:33)
最終關卡 - 洧杰 Live Demo 馬拉松直播
最終關卡 - 上午場 (78:15)
最終關卡 - 下午場 (221:28)
最終關卡 - 午夜場 (134:56)
箭頭函式
函式陳述式與函式表達式差異 (8:01)
箭頭函式基本寫法 (4:50)
箭頭函式再縮寫 (6:39)
陣列 map 搭配箭頭函式寫法 (6:10)
專題作品班 - 關卡一：發想主題
規劃一個作品的階段里程碑 (4:14)
發想作品方法一：向網站致敬 (6:04)
發想作品方法二：蹭時勢流量 (8:28)
發想作品方法三：思考自己想解決的問題 (6:45)
各專題題目參考 (7:22)
如何限制專題範圍？提供 JS 等級表參考 (10:23)
兩個專題簡報分享 - 感謝火箭隊專題組學員分享 (10:59)
wireframe 簡略介紹 (3:00)
雜談：平面設計可以不轉前端，往網頁設計師發展嗎？ (3:27)
專題該做到什麼程度？
什麼是前台跟後台？ (14:45)
平台角色端介紹(重要) (8:30)
我的專題該做後台跟更多角色端嗎？ (8:49)
【權限設計】我的專題前後台該怎麼區分功能？ (22:37)
【專題資料來源】蒐集種類介紹
種類一：自己做服務平台 (9:06)
種類二：擁有資料授權 (4:09)
種類三：下載第三方 API 資料，並整合到自己的資料表裡 (15:59)
種類四：介接即時 API (3:14)
種類五：虛擬資料設計 (5:49)
【可不看，授權參考討論】學員常見QA (23:59)
專題作品班 - 關卡 2 - 使用者故事 (user story)、網站地圖(Sitemap)
為什麼要學習規劃網站？ (3:42)
user story 介紹 (2:07)
以 IT 邦幫忙為例 (11:53)
以六角學院為例 (4:03)
以 The F2E 黑客松網站為例 (3:26)
以學員題目：攀岩網站為例 (7:50)
以學員題目：車宿地點為例 (11:09)
設計 sitemap 網站地圖 (1:51)
專題作品班 - 關卡 3 - 線稿圖(wireframe)
什麼是 wireframe 線稿圖？ (13:24)
網站色系(主色、輔助色)如何判斷？ (7:27)
whimsical 繪圖軟體教學 & 常見退件原因
使用 whimsical 繪製網站地圖、線稿圖教學 (11:51)
專題作品班 - Git 協作部分
Git 教學資源
Node.js 直播班的 Git 協作流程 - rebase 版本 (130:43)
首頁設計六大功略指南 - 設計面試官也喜歡的網站動線
如何規劃面試官也喜歡的首頁？ (0:24)
指南一：Banner 區 - 用一句話來介紹你的服務 (7:21)
指南二：提出痛點吸引消費者引發共鳴 (8:58)
指南三：介紹產品優勢，讓客戶深入瞭解 (5:30)
隨堂小考 (7:56)
指南四：第三方推薦提升產品信心 (8:50)
指南五、六：引導購買（call to action）：推最後一把刺激顧客買單 (13:59)
六大點總結 ＆ 隨堂測驗二 (10:16)
線稿圖優化技巧一：Banner 與 Call to action 完美結合 (5:46)
線稿圖優化技巧二：該放假字嗎？ (10:10)
常見退件原因
【狀態 3-2】 wireframe 線稿圖常見退稿原因講解 (7:27)
做專題需學的額外 JS 知識點
什麼是 localStorage ？ (6:17)
setItem、getItem 基本操作 (11:00)
透過 JSON.parse、JSON.stringify 來編譯資料 (10:06)
與後端工程師合作的兩種流程(Server Side Render、Client Side Render)
7 分鐘版本 - 前後端工程師協作方案： Server Side Render、Client Side Render (6:00)
90 分鐘版本 - 前後端工程師協作方案： Server Side Render、Client Side Render (81:04)
json-server 環境教學 - 打造自己的作品 API 伺服器
為什麼要安裝 postman？ (2:21)
json-server 火力 Demo 他有多厲害 (6:05)
json-server 環境安裝 (3:17)
json-server 與一般常見伺服器架構差異介紹 (7:53)
新增網頁，來讀取自己打造的 json-server API (10:01)
講解 db.sjon 架構設計 (4:44)
網路請求規則 - 新增、刪除、修改 (8:54)
json-server 篩選功能 (10:48)
todolist restful API練習 (5:56)
還想要學更多！
json-server 資料關聯教學
介紹資料庫設計 (3:19)
為何資料表要拆開，不合併在一起？ (7:49)
透過 _expand 語法來進行資料關聯 (7:51)
如何取得(GET)、新增(POST) 留言資料 (12:31)
如何同時取得貼文與對應留言的資料？ (4:50)
貼文與留言網頁與 API 介接設計 (7:54)
json-server-auth 登入註冊功能套件
json-server-auth 套件介紹 (2:12)
環境安裝 (4:41)
演練大綱講解 (1:52)
註冊功能API (7:59)
登入功能 API (5:16)
更新密碼功能 API(無權限) (5:13)
更新密碼功能 API(有權限) (8:11)
API 權限設計介紹 (7:28)
登入後新增貼文資訊流程 (9:08)
前後台權限手動設計 (3:05)
API 伺服器部署
Render 伺服器部署流程
12/17 成果發表會
12/17 成果發表會 (410:11)
todolist restful API練習
/courses/2164187/lectures/48764790/hotmart_lecture_video_download_link/89551341
2164187
本地端 Codepen 代辦事項練習
Download
APIcode.zip
完成並繼續課程