• 自動播放
  • 自動完成

1463822

  上一堂課程 完成並繼續課程  

JavaScript 必修篇 - 前端修練全攻略

  介紹
  •  
    目前課程更新進度
  •  
    六角學院 線上社團
  •  
    Apple M1 觀看公告
  •  
    課程最終任務說明
  JavaScript 課前知識與環境介紹
  •  
    安裝 Chrome 網頁瀏覽器 (3:01)
  •  
    安裝 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)
  •  
    let、const、var 介紹小節測驗
  網頁與 Code 環境建立流程教學
  •  
    VSCode 撰寫 JS 環境建立 (8:23)
  •  
    console.log 印出你想顯示的資訊！ (3:47)
  •  
    如何撰寫優雅的註解 (5:22)
  •  
    Codepen - 透過它來提交您的程式碼 (6:24)
  •  
    網頁與 Code 環境建立流程教學小節測驗
  數字型別與賦值運算子
  •  
    賦值運算子+=、-= (5:56)
  •  
    a++、a-- 一次搞懂！ (3:45)
  •  
    數字型別與賦值運算子小節測驗
  字串型別
  •  
    宣告字串流程 (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)
  •  
    變數：布林、undefined、null 小節測驗
  •  
    第一週總複習
  比較與邏輯運算子
  •  
    比較與邏輯運算子簡介 (2:31)
  •  
    比較運算子： >、=、<= (5:45)
  •  
    比較運算子搭配變數方法 (5:54)
  •  
    =、== 差異講解 (2:46)
  •  
    ==、=== 差異講解 (4:23)
  •  
    邏輯運算子介紹 (5:11)
  •  
    邏輯運算子範例情境 (5:01)
  •  
    邏輯運算子增加多條件作法 (2:53)
  •  
    比較與邏輯運算子小節測驗
  流程判斷 - if、else if、else
  •  
    為什麼要理解流程判斷？ (7:53)
  •  
    if、else、else if 講解 (7:12)
  •  
    if 詳細講解 (一) (5:56)
  •  
    if 詳細講解 (二) (10:29)
  •  
    流程判斷 - if、else if、else 小節測驗
  if 流程圖規劃流程
  •  
    if 圖表介紹 (4:43)
  •  
    圖表服務註冊流程 (2:08)
  •  
    流程圖符號簡介 (1:48)
  •  
    流程圖 let code 講解 (12:44)
  •  
    流程圖 if code 講解 (15:26)
  •  
    if 流程圖規劃流程小節測驗
  if 中階運用
  •  
    if 包 if 腰圍判斷流程圖設計 (10:10)
  •  
    if 包 if 腰圍判斷 Code 設計 (13:24)
  •  
    看圖說故事 - if 練習一 (4:34)
  •  
    看圖說故事 - if、else if 練習二 (1:51)
  •  
    看圖說故事 - if、else if 練習三 (9:59)
  •  
    if 中階運用小節測驗
  陣列教學
  •  
    為什麼要學陣列物件？ (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)
  •  
    陣列與物件整合運用小節測驗
  函式 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)
  •  
    函式 function 小節測驗
  •  
    第三週總複習
  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)
  •  
    DOM - 選取網頁元素小節測驗
  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:47)
  •  
    preventDefault - 取消預設觸發行為 (4:11)
  •  
    Event 事件 - 讓您的網頁具有互動效果小節測驗
  •  
    第四週總複習
  陣列 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 資料處理方法小節測驗
  forEach 題型練習
  •  
    範例功能講解 (1:27)
  •  
    如何整合 innerHTML 資料 (8:43)
  •  
    搭配網頁初始化狀態 (1:53)
  •  
    免費與投幣式事件監聽設計 (5:55)
  •  
    事件監聽搭配 if 流程判斷 (8:32)
  •  
    DOM 拉出全域變數進行管理 (2:10)
  •  
    篩選條件增加流程 (3:46)
  •  
    新增充電站 UI 介面邏輯新增 (13:28)
  •  
    forEach 題型練習小節測驗
  AJAX - 網路請求
  •  
    什麼是 AJAX？它如何改善網頁使用體驗？ (5:11)
  •  
    什麼是網路請求？ (7:04)
  •  
    從網頁架構瞭解網頁請求-上集 (8:17)
  •  
    從網頁架構瞭解網頁請求-下集 (3:40)
  •  
    網頁請求狀態碼 (9:06)
  •  
    request、response 講解 (6:48)
  •  
    用 Node.js 開啟伺服器，更加瞭解 request、response 的差異 (11:13)
  •  
    AJAX - 網路請求小節測驗
  AJAX - axios 套件教學
  •  
    各種發出網路請求的 JS 寫法種類介紹 (4:56)
  •  
    axios 環境安裝 (3:11)
  •  
    axios-嘗試串接外部資料 (2:53)
  •  
    axios-response 參數詳細講解 (4:22)
  •  
    axios-將外部資料寫入到網頁上 (3:50)
  •  
    axios-非同步觀念 (6:30)
  •  
    透過函式設計處理非同步 (8:34)
  •  
    AJAX - axios 套件教學小節測驗
  •  
    第五週總複習
  網路請求補充知識
  •  
    章節說明
  •  
    從 Wireshark、Fiddler 深入了解網路請求 (136:22)
  •  
    計算機網路總結 (116:14)
  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)
  •  
    AJAX POST API 講解小節測驗
  todolist 待辦事項
  •  
    todolist 經典題目介紹 (1:20)
  •  
    取值複習 getAttribute (4:37)
  •  
    範圍內容取值 (7:26)
  •  
    監聽大範圍內容取值 (8:30)
  •  
    data- 屬性妙用 (4:24)
  •  
    HTML 結構設計 (3:57)
  •  
    資料初始化渲染 (6:29)
  •  
    待辦新增功能 (8:08)
  •  
    待辦刪除功能-前置解說 (3:14)
  •  
    待辦刪除功能 (14:20)
  •  
    todolist 待辦事項小節測驗
  陣列資料操作
  •  
    陣列操作 - map (8:20)
  •  
    陣列操作 - map 補充 (6:05)
  •  
    陣列操作 - filter 資料篩選 (7:24)
  •  
    陣列操作 - find 尋找頭一筆資料 (4:27)
  •  
    陣列操作 - findIndex 尋找資料索引 (6:44)
  •  
    陣列資料操作小節測驗
  箭頭函式
  •  
    函式陳述式與函式表達式差異 (8:01)
  •  
    箭頭函式基本寫法 (4:50)
  •  
    箭頭函式再縮寫 (6:39)
  •  
    陣列 map 搭配箭頭函式寫法 (6:10)
  •  
    箭頭函式小節測驗
  •  
    第六週總複習
  最終關卡 - todolist 待辦事項
  •  
    最終作業任務
  JS - 彩蛋課程 - 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 指令差異 (6:59)
  •  
    常見指令補充 (5:12)
  webpack 壓縮打包工具管理
  •  
    為什麼要學 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 總複習題
  •  
    第七週總複習
  •  
    JS 百題斬
  JavaScript 加碼直播
  •  
    想要動態效果？來點 PixiJS 吧 (100:04)
  •  
    JavaScript 在 LINE developer 生態系 (LINE Bot ...)的開發應用導覽 (68:17)
  •  
    React Native 微入門 (120:06)
  •  
    Vtuber x Coding 蹦出新滋味 ⚙️ (89:55)
  2022 JS 全修練新增課鋼 - JS 非同步技巧 - Promise、Async、Await
  •  
    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 設計
  •  
    sweet alert 環境安裝 (1:49)
  •  
    sweet alert 參數介紹 (7:10)
  •  
    sweet alert 之 promise 設計 (3:41)
  2022 JS 全修練新增課鋼 - todolist API - 環境安裝
  •  
    為什麼會有 todolist API 作業？ (2:00)
  •  
    API介紹 (4:40)
  •  
    POSTMAN 安裝教學 (8:55)
  2022 JS 全修練新增課鋼 - todolist API 規則講解
  •  
    透過註冊 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 開發方向
  •  
    設計稿介紹 (1:05)
  •  
    是否會提供官方範例程式？ (2:14)
  •  
    頁面切換作法 (5:06)
  •  
    登入跟註冊作法 (8:31)
  •  
    顯示與新增待辦資料 (8:14)
  •  
    刪除與編輯待辦資料 (4:41)
  •  
    刪除全部作法 (3:23)