JavaScript 新手村
一種進階、直譯的程式語言，支援物件導向、指令式，以及函式語言的程式設計。本門課程著重在 DOM、事件的處理，並深入淺出的介紹變數觀念及其應用的方式。
範例數21
事件
相簿展示
點選左側縮圖，即顯示對應的大圖。
事件
相簿展示
點選左側按鈕，即顯示對應的特色影像。
事件
相簿展示
滑入右側按鈕，即顯示對應的特色影像。
DOM
相簿展示
游標滑入 icon 後，即顯示對應的局部圖片。
DOM
自製燈箱效果
點選縮圖後，即出現蓋版且顯示對應的圖片，點選蓋版區或 ESC 鍵，即關閉蓋版。
DOM
互動式字級調整
畫面上，有標示的巨、大、中、小按鈕，點選後，可為內容區的文字進行級數轉換。
DOM
顯示效果
點選課程名稱，即顯示詳細內容。
DOM
互動式版型切換
點選 Icon，可切換三種不同版型。
DOM
互動式頁籤切換
滑入目標的頁籤，即顯示對應目標的內容。
DOM
互動式頁籤切換
滑入目標的頁籤，即顯示對應目標的內容。
變數
隨機影像展示
載入畫面後，影像隨機產生。
變數
相簿展示
點選縮圖，利用流程控制顯示對應的影像。
變數
循環相簿展示
點選影像即顯示下一張影像，利用流程控制達成循環效果。
變數
數量控制
利用變數及流程控制來設定限制數量。
變數
不重複地數字顯示
使用亂數與變數來限制一定範圍內的數字，加上流程控制可達成不重複的數字。
變數
互動式相簿展示
一般網站上常見的廣告效果。點選下方的數字按鈕，上方的廣告影像即滑動到對應的位置。
變數
互動式相簿展示
連續點擊下方的方向鈕，以完成接續影像。
複合變數
隨機影像展示
產生介於 0 ~ 4 之間的隨機數字，並指定於陣列的索引元素，再渲染影像內容。
複合變數
循環相簿展示
點擊的循環影像及互動導覽。
複合變數
循環相簿展示
點擊的循環影像及互動導覽。
事件物件
汽車巡禮
互動式 360 度巡禮。
JS Core 迴圈陣列班
本門課程將會介紹定時器來製作業界常見的廣告效果。用流程控制以進行狀況的判斷及重複的執行。活用陣列方法來達成資料的合併、刪除及篩選。了解目前業界常用的瀏覽器儲存及交換格式。還有前端工程師必備的 API 處理技能及非同步的資料處理。
範例數36
定時函數
輪播相簿展示
定時 2 秒置換影像並保持循環。
定時函數
輪播相簿展示
可控制播放、停止的定時函數。
定時函數
輪播相簿展示
可控制播放、停止的定時函數。
定時函數
輪播相簿展示
定時自動移到目標位置，且在滑入、滑出的事件狀態控制暫停與播放。
定時函數
輪播相簿展示
定時自動移到目標位置，且在滑入、滑出的事件狀態控制暫停與播放，且增加導覽以控制可視位置。
定時函數
輪播相簿展示
水平、垂直、旋轉輪播。
定時函數
時間展示
取得 Client 時間並進行畫面的更新。
BOM
時間控制畫面
以網址參數來控制畫面。
定時函數
互動式倒數展示
取得活動期間內的時間與定時函數進行倒數。
定時函數
翻牌的時間展示
定時套用與移除 CSS 類別。
流程控制
鍵盤控制
鍵盤事件與 switch 判斷。
流程控制
控制多個網頁元素
迴圈與選取器進行多個元素的選取並加入事件監聽。
流程控制
調換影像
迴圈與選取器進行多個元素的選取並加入事件監聽。
流程控制
彈出式子選單
迴圈與選取器進行多個元素的選取並加入事件監聽，並判斷條件成立，進行顯示；不成立，則隱藏。
流程控制
頁籤展示
迴圈與選取器進行多個元素的選取並加入事件監聽，取得新、舊值進行網頁渲染。
陣列與物件
疊(迭)代渲染
迴圈進行字串組合並渲染到畫面上。
陣列與物件
疊(迭)代渲染
迴圈進行字串組合並渲染到畫面上。
陣列與物件
相簿展示
迴圈進行字串組合並渲染到畫面上，並採用 Event Object 來增進程式的效率。
陣列與物件
相簿展示
迴圈進行字串組合並渲染到畫面上，並採用 Event Object 來增進程式的效率。自製燈箱效果，可用鍵盤方向左、右、Esc 鍵，以進行燈箱的控制。
瀏覽器資料存取
待辦事項
新增、讀取、移除 localStorage 中的使用者資料。
瀏覽器資料存取
待辦事項
新增、讀取、移除 localStorage 中的使用者資料並篩選。
非同步操作
訂單流程展示
在非同步的狀態中，確保指定順序的執行。
非同步操作
會員資料管理
使用 RESTful API 與後端進行資料溝通，以進行資料的新增與移除。
非同步操作
會員資料管理
使用 RESTful API 與後端進行資料溝通，以進行資料的新增、讀取、移除。
非同步操作
會員資料管理
使用 RESTful API 與後端進行資料溝通，以進行資料的新增、更新、讀取、移除。
進階資料處理
相簿展示
依資料的特性進行分組排序與互動處理。
進階資料處理
分頁製作
非同步處理、資料分割與互動處理。
進階資料處理
資料篩選
非同步處理、資料篩選與互動處理。
事件
捲入動畫
事件與樣式的組合技。
函式
線上點餐
進階狀態管理。
事件
相簿效果
事件、狀態、計數器的組合技。
事件
相簿效果
事件、狀態、計數器的組合技。
非同步操作
動態載入
動態載入與資料的渲染。
非同步操作
動態載入
動態載入與資料的渲染。
瀏覽器資料存取
廣告控制
控制期間廣告。
瀏覽器資料存取
推薦廣告
控制期間與類型廣告。
Vue 程式設計
用於建立使用者介面的開源 JavaScript 框架，也是一個建立單頁應用的 Web 應用框架。
範例數11
v-for
列表渲染
動態載入與渲染。
v-for
列表渲染
動態載入與渲染。
元件
基本元件
動態載入與基本的元件使用。
元件
元件的資料傳遞
Props 傳入元件。
元件
元件的資料傳遞
進階 Props 傳入元件與資料的型別驗證。
元件
元件包裝
元件的複用。
元件
元件包裝
元件複用與資料的內、外傳遞。
路由
基本路由管理
非同步操作
資料篩選
使用 Open Data 取得資料並進行資料篩選與互動處理。
非同步操作
列表渲染
非同步處理取得 Open Data 並進行資料整理、畫面渲染與動畫安排。
非同步操作
動態路由
非同步處理取得 Open Data 並進行資料整理結合動態路由的組合技。