JavaScript 前端修練全攻略
課程大綱
介紹
Available in
days
days
after you enroll
JavaScript 課前知識與環境介紹
Available in
days
days
after you enroll
變數與資料型別
Available in
days
days
after you enroll
let、const、var 介紹
Available in
days
days
after you enroll
網頁與 Code 環境建立流程教學
Available in
days
days
after you enroll
數字型別與賦值運算子
Available in
days
days
after you enroll
字串型別
Available in
days
days
after you enroll
變數：布林、undefined、null
Available in
days
days
after you enroll
比較與邏輯運算子
Available in
days
days
after you enroll
流程判斷 - if、else if、else
Available in
days
days
after you enroll
if 流程圖規劃流程
Available in
days
days
after you enroll
if 中階運用
Available in
days
days
after you enroll
陣列教學
Available in
days
days
after you enroll
物件教學
Available in
days
days
after you enroll
陣列與物件整合運用
Available in
days
days
after you enroll
- 陣列與物件混合應用 (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)
- 陣列與物件整合運用小節測驗
函式 function
Available in
days
days
after you enroll
- 為什麼需要學函式？ (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)
- 函式 function 小節測驗
- 第三週總複習
DOM - 選取網頁元素
Available in
days
days
after you enroll
- 為什麼要瞭解 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)
- DOM - 選取網頁元素小節測驗
Event 事件 - 讓您的網頁具有互動效果
Available in
days
days
after you enroll
- 什麼是 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:47)
- preventDefault - 取消預設觸發行為 (4:11)
- Event 事件 - 讓您的網頁具有互動效果小節測驗
- 第四週總複習
陣列 forEach 資料處理方法
Available in
days
days
after you enroll
forEach 題型練習
Available in
days
days
after you enroll
AJAX - 網路請求
Available in
days
days
after you enroll
AJAX - axios 套件教學
Available in
days
days
after you enroll
網路請求補充知識
Available in
days
days
after you enroll
AJAX POST API 講解
Available in
days
days
after you enroll
todolist 待辦事項
Available in
days
days
after you enroll
陣列資料操作
Available in
days
days
after you enroll
箭頭函式
Available in
days
days
after you enroll
最終關卡 - todolist 待辦事項
Available in
days
days
after you enroll
JS - 彩蛋課程 - NPM 管理
Available in
days
days
after you enroll
webpack 壓縮打包工具管理
Available in
days
days
after you enroll
- 為什麼要學 webpack？ (2:32)
- webpack 環境建立 (4:43)
- 進入點(entry)、輸出點(output) 觀念建立 (8:57)
- webpack.config.js 環境建立 (8:29)
- NPM script 講解 (4:02)
- 開發、上線模式 mode 切換 (6:38)
- export、import 語法教學 (19:50)
- webpack import 載入流程 (3:20)
- 加入 index.html 顯示 bundle.js 結果 (2:30)
- 載入 CSS-loader 流程 (8:35)
- 載入 Sass-loader 流程 (5:24)
- 載入 webpack 測試伺服器 (6:15)
- 載入第三方套件 axios - 以 import 為例 (4:18)
JavaScript 總複習題
Available in
days
days
after you enroll
JavaScript 加碼直播
Available in
days
days
after you enroll
2022 JS 全修練新增課鋼 - JS 非同步技巧 - Promise、Async、Await
Available in
days
days
after you enroll
- setTimeout 語法介紹 (5:32)
- 建構第一個 promise (8:35)
- promise 帶參數寫法 (3:07)
- 重構流程大綱講解 (1:12)
- 撰寫批改作業邏輯 (4:53)
- 撰寫 catch 流程 (2:37)
- promise chain 寫法 (9:45)
- promise catch 多條件設計 (5:07)
- async、await 再升級 (6:51)
- promise.all 語法教學 (4:58)
- fetch 與 promise 的關係 (5:46)
- 將 XMLHttpRequest 改寫為 promise 格式 (4:56)
- 嘗試寫 axios.get 套件功能 (3:17)
2022 JS 全修練新增課鋼 - sweet alert 套件教學，並整合 promise 設計
Available in
days
days
after you enroll
2022 JS 全修練新增課鋼 - todolist API - 環境安裝
Available in
days
days
after you enroll
2022 JS 全修練新增課鋼 - todolist API 規則講解
Available in
days
days
after you enroll
- 透過註冊 API 瞭解 Swagger 文件操作 (6:13)
- 透過 axios 搭配 API 設計註冊功能 (11:10)
- 抽出網址變數 (2:26)
- 透過 postman 設計網址請求 (8:06)
- 何謂網址請求，並觀察 request、response 的 headers、body 資料 (12:58)
- 觀察 API 是否支援瀏覽器 CORS 跨網域 (8:44)
- 介接 login 登入 API (8:12)
- 從 headers 取出 token 資訊 (5:20)
- 透過 postman、swagger 去戳 get todo api (4:53)
- 透過 axios 夾帶 token 觸發 get todo api (5:20)
- client 瀏覽器端關掉，token 保持效用的方式 (6:04)
- 透過 postman、swagger 新增待辦作法 (6:13)
- 透過 axios 新增待辦作法 (4:47)
- 編輯 todo API 設計 (8:25)
- 刪除 todo API 設計 (5:31)
- 更新 todo 待辦狀態 API 設計 (8:19)
- 優化 axios headers 設計 (5:07)
2022 JS 全修練新增課鋼 - todolist API 開發方向
Available in
days
days
after you enroll
此為境外交易會產生額外交易手續費用（詳細規定請洽發卡公司），如需使用台幣付款可以透過此 連結購買。