JavaScript 網頁前端程式教學入門課程

老師會因應職場的需求變化，做課程內容和範例的即時調整與修改，確保本課程的實用性和即時性。

【教學主題一：JavaScript 前端入門 】

• 建立 function 函式
• var 宣告變數
• Number 變數、String 變數
• window 物件 - 彈出式視窗
• 動態控制 HTML 內容
• this 的應用

• alert() 與 console.log()
• if else 邏輯條件式
• document 物件方法
• 互動顯示隱藏網頁區塊
• 動態控制 CSS 樣式
• substring() 截取字串應用

【 教學主題二：基本資料類型 & 複雜資料類型 】

• 數字類型 Number
• 文字類型 String
• 布林變數 Boolean
• 字串的相加串接

• 陣列類型 Array
• 影像類別 Image
• 變數的作用域範圍
• 輪播式動態廣告BANNER設計

【 教學主題三：JavaScript 與 DOM 】

• DOM Tree 是什麼？
• 透過 id 來取得 HTML 元素
• textContent() 與 innerHTML() 應用
• 數學運算
• 亂數應用

• querySelector() 更好用的選取器
• 存取/修改 HTML 元素的屬性
• 互動式網頁相薄
• 如何優化 JavaScript 程式
• 亂數 Banner 效果

【教學主題四：JavaScript 與 CSS 】

• 使用 style 控制 CSS
• 控制內部樣式與外部樣式
• TAB 頁籤選單
• 存取/修改元素的 CSS 樣式
• 手風琴開合效果
• 關於 CSS 的權重

• 舊式 addClass() removeClass() 方法
• 新式 classList 方法
• add()、remove()、toggle() 整合外部 CSS
• 網頁元素的顯示/隱藏
• 下拉選單的設計
• 關於 CSS 的權重

【教學主題五：事件處理】

• 舊式 onclick,onmouseover,onmouseout... 事件
• 滑鼠事件 與 function(){}
• 關於 window 事件

• 事件偵聽 addEventListener()
• 新式click,mouseover,mouseout... 事件
• 互動式電子相簿

【教學主題六：迴圈 & 計時器】

• for 迴圈的基本結構
• for 迴圈入門技巧
• for 迴圈多物件控制
• for 迴圈程式優化

• 計時器 setTimeout(), setInterval()
• 廣告、照片自動輪播
• 無間斷圖片自動輪播
• 可暫停的計時器 - 製作廣告輪播

【教學主題七：關於 Array 陣列】

• 建立陣列的三種方法
• 陣列儲存資料的格式
• 如何取用陣列資料
• 陣列的基本使用方法

• for 迴圈與陣列的整合
• 亂數取得陣列資料
• 使用陣列製作電子相薄
• 使用陣列製作亂數廣告