JavaScript 程式語言網頁設計入門
從零開始學習 JavaScript，網頁設計入門課程。包含 60 堂詳細教學。
JavaScript 程式語言網頁設計入門
這是一門適合初學者的 JavaScript 完整課程。本課程將帶你從基礎語法開始，一路學習到 DOM 操作、事件處理、AJAX 等進階技巧。
課程大綱
本課程包含以下章節，請點擊左側目錄或下方連結開始學習：
(課程列表將自動顯示於左側)
📋 本章節課程
開始上課
Lesson: 開始上課
1-2 Console 指令是什麼？
Lesson: 1-2 Console 指令是什麼？
1-3 Chrome Network 認識網路面版工具
Lesson: 1-3 Chrome Network 認識網路面版工具
2-1~2-2 Dom 是什麼？動態新增頁面內容 createElement setAttribute hasAttribute
Lesson: 2-1~2-2 Dom 是什麼？動態新增頁面內容 createElement setAttribute hasAttribute
2-3 getElementById, codepen full 的 console 方法
Lesson: 2-3 getElementById, codepen full 的 console 方法
3-1 var、let、const 的用法與差異
Lesson: 3-1 var、let、const 的用法與差異
3-2~3-3 變數識別字規則 var let 的差異
Lesson: 3-2~3-3 變數識別字規則 var let 的差異
4-1 Number、Boolean 和 String 基本類型
Lesson: 4-1 Number、Boolean 和 String 基本類型
4-2 parseInt、parseFloat 轉換為 Number
Lesson: 4-2 parseInt、parseFloat 轉換為 Number
4-3 toString 轉換為 String 字串連接
Lesson: 4-3 toString 轉換為 String 字串連接
5-1 算術運算子
Lesson: 5-1 算術運算子
5-2 比較運算子 關係運算子 Comparison, Relation operators
Lesson: 5-2 比較運算子 關係運算子 Comparison, Relation operators
5-3 邏輯運算子 位元運算子
Lesson: 5-3 邏輯運算子 位元運算子
6-1 字串的標示方式
Lesson: 6-1 字串的標示方式
6-2 字串的跳脫表示法
Lesson: 6-2 字串的跳脫表示法
6-3 字串的常用方法 length indexOf slice substr replace
Lesson: 6-3 字串的常用方法 length indexOf slice substr replace
7-1 getElement Id Tagname ClassName
Lesson: 7-1 getElement Id Tagname ClassName
7-2 querySelector 與 CSS 選擇器
Lesson: 7-2 querySelector 與 CSS 選擇器
197-3 querySelectorAll getElement的比較
Lesson: 197-3 querySelectorAll getElement的比較
8-1 If…Else, Switch 條件陳述式與 Block 區塊概念
Lesson: 8-1 If…Else, Switch 條件陳述式與 Block 區塊概念
8-2 Lab02 如何用 JS 寫一個九九乘法表| 間隔如何用 tab 實作 | 如何 console.log 不換行 |
Lesson: 8-2 Lab02 如何用 JS 寫一個九九乘法表| 間隔如何用 tab 實作 | 如何 console.log 不換行 |
8-2 迴圈 For, do... while, while 陳述式是什麼？
Lesson: 8-2 迴圈 For, do... while, while 陳述式是什麼？
8-3 Label | Break | Continue 陳述式與迴圈控制
Lesson: 8-3 Label | Break | Continue 陳述式與迴圈控制
9-1 Object 類型的特點，OOP 物件導向
Lesson: 9-1 Object 類型的特點，OOP 物件導向
9-2 Object 物件表達式、取用方法、使用實例
Lesson: 9-2 Object 物件表達式、取用方法、使用實例
9-3 如何使用 For/in 迴圈與 For/of 的差別
Lesson: 9-3 如何使用 For/in 迴圈與 For/of 的差別
9-3 補充2 按下按鈕到 Yahoo 奇摩 - VS Code Go to URL
Lesson: 9-3 補充2 按下按鈕到 Yahoo 奇摩 - VS Code Go to URL
9-3 補充 Alert, prompt, confirm
Lesson: 9-3 補充 Alert, prompt, confirm
10-1 Array 陣列特點 變數儲存資料
Lesson: 10-1 Array 陣列特點 變數儲存資料
10-2 Array Length, [index], For 迴圈掃描
Lesson: 10-2 Array Length, [index], For 迴圈掃描
10-3 Array 的方法 indexOf, push, pop, shift, splice, join, slice
Lesson: 10-3 Array 的方法 indexOf, push, pop, shift, splice, join, slice
10-3 Lab03 02 撲克牌發牌-長度修正-發牌順序選人亂序
Lesson: 10-3 Lab03 02 撲克牌發牌-長度修正-發牌順序選人亂序
10-3 Lab03 03 撲克牌發牌-隨意發牌-直到發完
Lesson: 10-3 Lab03 03 撲克牌發牌-隨意發牌-直到發完
10-3 Lab03 撲克牌發牌-發牌順序選人亂序
Lesson: 10-3 Lab03 撲克牌發牌-發牌順序選人亂序
11-1 JSON 是什麼？為什麼比 XML 好？
Lesson: 11-1 JSON 是什麼？為什麼比 XML 好？
11-2 Object, Array 淺複製與深複製
Lesson: 11-2 Object, Array 淺複製與深複製
11-3 JSON.parse() JSON.stringify()
Lesson: 11-3 JSON.parse() JSON.stringify()
12-1 Function 函式，函式宣告，呼叫函式 call function
Lesson: 12-1 Function 函式，函式宣告，呼叫函式 call function
12-2 匿名函式 Anonymous 表達式 Expressions 陳述式 Statements, Function Expressions
Lesson: 12-2 匿名函式 Anonymous 表達式 Expressions 陳述式 Statements, Function Expressions
12-3 箭頭函式 Arrow function ES6, rest parameter
Lesson: 12-3 箭頭函式 Arrow function ES6, rest parameter
13-1 什麼是變數領域 Scope ? 靜態 vs 動態作用域 全域區域變數
Lesson: 13-1 什麼是變數領域 Scope ? 靜態 vs 動態作用域 全域區域變數
13-2 區域變數 Function Scope, Block Scope 的差異 | 區域全域變數的差異
Lesson: 13-2 區域變數 Function Scope, Block Scope 的差異 | 區域全域變數的差異
13-3 Closure 閉包
Lesson: 13-3 Closure 閉包
14-1 Date 時間
Lesson: 14-1 Date 時間
14-2 setTimeout, clearTimeout 延時執行程式
Lesson: 14-2 setTimeout, clearTimeout 延時執行程式
14-3 setInterval 的用法 clearInterval
Lesson: 14-3 setInterval 的用法 clearInterval
15-1 Math in JS 數學物件, random 亂數與 floor 無條件捨去
Lesson: 15-1 Math in JS 數學物件, random 亂數與 floor 無條件捨去
15-2 三角函數: 使用 Math 來處理 sin, cos, tan 與 Pi
Lesson: 15-2 三角函數: 使用 Math 來處理 sin, cos, tan 與 Pi
15-3 環狀排列物件 建立佇列 Cirular Queue
Lesson: 15-3 環狀排列物件 建立佇列 Cirular Queue
16-1 Window 物件 - alert, confirm, prompt, open, close
Lesson: 16-1 Window 物件 - alert, confirm, prompt, open, close
16-2 Window 子物件 - 環境物件 - location, screen, history, 全域
Lesson: 16-2 Window 子物件 - 環境物件 - location, screen, history, 全域
16-3 Document 常用的方法
Lesson: 16-3 Document 常用的方法
17-1 Event: onclick(), Event flow
Lesson: 17-1 Event: onclick(), Event flow
17-2 addEventListener
Lesson: 17-2 addEventListener
17-2 範例 addEventListener: Bubbling, Capturing
Lesson: 17-2 範例 addEventListener: Bubbling, Capturing
18-1 Ajax 介紹與運作流程
Lesson: 18-1 Ajax 介紹與運作流程
18-2 Ajax Demo 範例程式: XMLHttpRequest
Lesson: 18-2 Ajax Demo 範例程式: XMLHttpRequest
18-2 Ajax : XMLHttpRequest and Response
Lesson: 18-2 Ajax : XMLHttpRequest and Response
18-3 Ajax Fetch Demo 範例程式: .then .catch
Lesson: 18-3 Ajax Fetch Demo 範例程式: .then .catch
18-3 Ajax : Fetch 的屬性與方法
Lesson: 18-3 Ajax : Fetch 的屬性與方法