Coding 練習

JavaScript 網頁全端開發

教材 Ⅰ

\ 9月課程內容 /

23.09.15 JS簡介、 Lexical Structure
23.09.18 變數與賦值、數字運算
23.09.19 String基本介紹 、Number Methods、String Attributes and Methods
23.09.20 Boolean, Undefined, Null 、logical, comparison operator、if statement
進階課程Bitwise Operators、公式轉換解釋
23.09.21 Truthy and Falsy Values、Logical Operator與其他資料類型處理、Coding Convention and Restrictions、第五章節測驗
23.09.22 認識函式、return關鍵字
23.09.25 Array陣列、Reference Data Type 比較、Array Methods、Quick Fix
23.09.26 Function的時間複雜度、Object語法
進階課程Formal Definition of Big O Notation
23.09.27 For loop, while loop、Nested Loop, break, continue
23.09.28 For loop跑Array、Math Object、終極密碼、小試身手練習題(反轉陣列、找出最大值、數值加總)、小試身手解答、第六章節測驗
23.09.29 練習題介紹、簡單練習題第一部分1-10


\ 10月課程內容 /

23.10.02 簡單練習題第二部分 1-4
23.10.03 簡單練習題第二部分 5-7
23.10.04 DOM與window object
23.10.05 get element by id or class
23.10.06 querySelector
23.10.09 Note、差別比較、Function Expression
23.10.10 Arrow Function Expression、forEach method
23.10.11 forEach in NodeList、Element Objects 1
23.10.12 Element Objects 2、Inheritance
23.10.13 JS事件、Event Bubbling

Code Love

教材 Ⅱ

\ 課程內容 /

JavaScript (1) 幫衣服工廠做個好用表單
  • 第1課 ── 前言、基本的函數操作、onclick 事件
  • 第2課 ── 基本的變數操作、從 html 取得內容
  • 第3課 ── 修改 html 的內容
  • 第4課 ── 基本的陣列操作
  • 第5課 ── 基本的 if/else 條件流程控制
  • 第6課 ── 認識資料型態與轉換
  • 第7課 ── 認識巢狀結構、結語
JavaScript (2) 親手做個待辦事項小工具
  • 第1課 ── 前言、認識 DOM 樹、新增元素
  • 第2課 ── 從 DOM 樹移除元素、動態加上 onclick 事件
  • 第3課 ── 認識 for 迴圈
  • 第4課 ── 讀取與修改 DOM 元素的 class
  • 第5課 ── 認識 onchange 事件
  • 第6課 ── 讀取與修改 DOM 元素的 style
  • 第7課 ── 用 Selector API 選取元素、結語
JavaScript (3) 自己做看看實務常用 UI 元件
  • 練習1 ── alert 示警元件、前言
  • 練習2 ── toast 吐司元件
  • 練習3 ── modal 互動視窗元件
  • 練習4 ── 表單驗證
  • 練習5 ── collapse 折疊效果
  • 練習6 ── dropdown 下拉式選單
  • 練習7 ── carousel 輪播元件
JavaScript (4) 學會第三方套件的使用方法
  • 第1課 ── autosize 套件、前言
  • 第2課 ── vanilla-lazyload 套件
  • 第3課 ── Chart.js 套件
  • 第4課 ── jQuery 套件
  • 第5課 ── xdan/datetimepicker 套件
  • 第6課 ── kenwheeler/slick 套件
  • 第7課 ── TinyMCE 套件
JavaScript (5) 打造功能豐富的前端應用程式
  • 第1課 ── 學會 Cookie 相關功能、前言
  • 第2課 ── 學會 Local Storage 相關功能
  • 第3課 ── 變數作用域、箭頭函式、ES6 語法
  • 第4課 ── 學會 AJAX 基本原理
  • 第5課 ── 學會 AJAX 錯誤處理
  • 第6課 ── 學會 AJAX 與各種 HTTP 請求方法
  • 第7課 ── 學會 AJAX 與 data attribute 的結合
JavaScript (6) 從前端設計心態到前端工程心態
  • 第1課 ── 認識 data model 與 render function、前言
  • 第2課 ── 認識陣列操作
  • 第3課 ── 認識匿名函式
  • 第4課 ── 熟悉 render function
  • 第5課 ── 熟悉匿名函式
  • 第6課 ── 認識 data model 的優點
  • 第7課 ── 資料序列化、結語
JavaScript (7) 不想教你 Vue，只想教你怎麼學框架
  • 第1課 ── 認識 Vue 基本環境與 render state
  • 第2課 ── 體驗一下 Reactivity 的效果與便利
  • 第3課 ── 學習 Vue 條件判斷式的寫法
  • 第4課 ── 學習 Vue 迴圈的寫法
  • 第5課 ── 學習 Vue 事件處理的寫法
  • 第6課 ── 認識 Lifecycle Hooks 與 Watchers
  • 第7課 ── 認識 Template Refs