JavaScript 快速入門與開發實戰

第1章 JavaScript入門 001
1.1 初識JavaScript 001
1.1.1 JavaScript的發展歷史 001
1.1.2 JavaScript的特點 002
1.1.3 JavaScript的應用場景 002
1.1.4 JavaScript的開發工具 002
1.2 JavaScript的組成 003
小結 004

第2章 在網頁中使用JavaScript 005
2.1 行內方式 005
2.1.1 透過「JavaScript:」呼叫函數 005
2.1.2 在事件屬性中呼叫函數 005
2.2 內嵌方式 006
2.3 連結外部JavaScript檔案方式 006
小結 006

第3章 JavaScript基本語法 007
3.1 變數 007
3.1.1 概述 007
3.1.2 變數的使用 007
3.1.3 變數的重新賦值 008
3.1.4 變數使用注意事項 008
3.1.5 變數命名規範 009
3.1.6 案例：兩個變數的交換 009
3.2 資料型態 010
3.2.1 概述 010
3.2.2 資料型態的分類 010
3.2.3 數字類型 010
3.2.4 字串類型 011
3.2.5 布林類型 012
3.2.6 Null類型 012
3.2.7 Undefined類型 013
3.2.8 typeof關鍵字 013
3.3 資料型別轉換 014
3.3.1 概述 014
3.3.2 明確型別轉換 014
3.3.3 隱式型別轉換 015
3.4 運算子 016
3.4.1 概述 016
3.4.2 算術運算子 016
3.4.3 關係運算子 017
3.4.4 邏輯運算子 018
3.4.5 賦值運算子 019
3.4.6 三目運算子 020
3.4.7 運算子的優先權 020
3.5 註 021
3.5.1 概述 021
3.5.2 單行註 021
3.5.3 多行註 021
3.6 輸入輸出語句 021
3.6.1 說明 021
3.6.2 輸入 021
3.6.3 輸出 022
3.7 任務練習 022
小結 023

第4章 程序結構 024
4.1 順序結構 024
4.2 選擇結構 024
4.2.1 if結構 025
4.2.2 if...else...結構 026
4.2.3 if...else if...else結構 027
4.2.4 switch結構 029
4.2.5 條件嵌套 031
4.2.6 多分支選擇結構與switch對比 032
4.3 循環結構 032
4.3.1 for迴圈 032
4.3.2 while循環 033
4.3.3 do...while循環 034
4.3.4 for和while的比較 035
4.3.5 while和do...while的比較 035
4.3.6 循環嵌套 036
4.4 跳轉語句 037
4.4.1 break語句 037
4.4.2 continue語句 038
4.5 任務練習 038
小結 039

第5章 數組 040
5.1 概述 040
5.2 定義數組 041
5.2.1 構造數組 041
5.2.2 數組字面量 041
5.3 訪問數組 041
5.3.1 數組下標 041
5.3.2 數組長度 042
5.4 數組遍歷 043
5.4.1 for循環索引方式 043
5.4.2 for...in方式 043
5.4.3 for...of方式 044
5.5 數組的常見操作 044
5.5.1 求數組 值 044
5.5.2 兩個數字組合併 045
5.5.3 數組篩選 045
5.5.4 數組翻轉 046
5.5.5 對陣列元素去重 047
小結 047

第6章 程式偵錯及常見錯誤 048
6.1 為什麼要進行程式調試 048
6.2 常見的程式調試方式 048
6.2.1 使用alert方法調試 048
6.2.2 使用log方法調試 049
6.3 Sources斷點調試 051
6.3.1 斷點調試概述 051
6.3.2 常用的調試按鈕 052
6.3.3 Watch監視器的使用 052
6.4 程序常見錯誤 053
6.4.1 錯誤類型 053
6.4.2 錯誤解決 053
6.5 任務練習 054
小結 054

第7章 函數 055
7.1 概述 055
7.2 函數使用入門 055
7.2.1 定義函數 055
7.2.2 呼叫函數 056
7.3 深入理解函數作用 056
7.3.1 封裝重複性代碼 056
7.3.2 實現某種功能 057
7.4 函數參數 058
7.4.1 參數的作用 058
7.4.2 形參 058
7.4.3 實參 059
7.5 帶參數的函數呼叫的說明 059
7.5.1 形參和實參數一樣 059
7.5.2 實參數多於形參數 060
7.5.3 實參個數少於形參數 060
7.5.4 arguments物件 060
7.5.5 length屬性 061
7.5.6 arguments和length對比 061
7.6 函數的回傳值 061
7.7 作用域 062
7.7.1 概述 062
7.7.2 全域作用域 062
7.7.3 局部作用域 062
7.7.4 全域變數 063
7.7.5 局部變數 063
7.7.6 作用域鏈 064
7.8 提昇機制 065
7.8.1 函數表達式 065
7.8.2 問題引入及提昇機制概述 066
7.8.3 變數提升 067
7.8.4 函數提升 067
7.9 高階函數 068
7.9.1 概述 068
7.9.2 函數作為參數 068
7.9.3 函數作為返回值 068
7.10 立即執行函數 069
7.11 任務練習 069
小結 069

第8章 物件導向 071
8.1 概述 071
8.2 創建物件的方式 072
8.2.1 new Object方式 072
8.2.2 字面量方式 073
8.2.3 工廠函數方式 073
8.2.4 建構函數方式 074
8.3 原型prototype 076
8.3.1 建構子建立物件問題引入 076
8.3.2 原型的使用 077
8.4 原型繼承 078
8.4.1 概述 078
8.4.2 透徹理解原型繼承 079
8.5 原型鏈 080
8.5.1 問題引入 080
8.5.2 原型物件中的__proto__ 081
8.5.3 Object原型物件的作用 081
8.5.4 Object原型物件中的__proto__ 082
8.6 this關鍵字理解 083
8.6.1 全域性普通函數中的this 083
8.6.2 建構函數中的this 083
8.6.3 物件方法中的this 083
8.6.4 原型物件方法中的this 084
8.7 繼承 084
8.7.1 對象冒充 085
8.7.2 callapply方式 086
8.7.3 擴充Object類別 087
8.7.4 原型方式 089
8.8 常用的內建物件 090
8.8.1 Math對象 090
8.8.2 字串物件 091
8.8.3 日期對象 092
8.8.4 數組物件 093
8.8.5 布爾對象 097
8.8.6 數字對象 097
8.9 正規表示式 098
8.9.1 說明 098
8.9.2 概述 098
8.9.3 使用正規表示式 099
8.9.4 邊界符 099
8.9.5 範圍 100
8.9.6 量詞 100
8.9.7 括號的使用 101
8.9.8 元字元 102
8.9.9 修飾符 102
8.9.10 字串在正規表示式中的使用 102
8.10 經典案例 103
8.10.1 統計每個字元的個數 103
8.10.2 隨機點名 103
8.10.3 104
8.10.4 取得檔案副檔名 104
8.10.5 物件轉換為請求參數格式字串 105
8.10.6 擴充Array物件 105
8.10.7 擴充String物件 106
8.10.8 計算長方形面積 106
8.10.9 遍歷對象 107
小結 107

第9章 DOM操作 108
9.1 概述 108
9.2 DOM節點 109
9.2.1 節點屬性 109
9.2.2 文檔節點 110
9.2.3 元素節點 110
9.2.4 屬性節點 110
9.2.5 文本節點 110
9.3 取得元素及內容操作 110
9.3.1 根據id取得元素 111
9.3.2 根據標籤名稱取得元素 111
9.3.3 根據name取得元素 111
9.3.4 根據類別名稱取得元素 112
9.3.5 根據選擇器取得元素 112
9.3.6 取得和設定元素內容操作 113
9.4 屬性操作 114
9.4.1 事件屬性 114
9.4.2 取得內建屬性 114
9.4.3 設定內建屬性 115
9.4.4 取得自訂屬性 115
9.4.5 設定自訂屬性 116
9.4.6 H5自訂屬性的規範 116
9.4.7 移除屬性 117
9.4.8 表單屬性 118
9.5 樣式操作 118
9.5.1 行內樣式操作 118
9.5.2 類別名稱樣式操作 119
9.6 節點操作 120
9.6.1 取得父節點 121
9.6.2 取得子節點 121
9.6.3 取得兄弟節點 122
9.6.4 建立及新增節點 123
9.6.5 刪除節點 123
9.6.6 複製節點 124
9.6.7 建立及設定屬性節點 125
9.7 DOM事件 125
9.7.1 概述 125
9.7.2 註冊事件 126
9.7.3 刪除事件 127
9.7.4 事件流 128
9.7.5 事件對象 131
9.7.6 阻止事件冒泡 132
9.7.7 阻止事件預設行為 132
9.7.8 事件委派 134
9.7.9 視窗事件 135
9.7.10 滑鼠事件 136
9.7.11 鍵盤事件 138
9.7.12 表單事件 139
9.8 經典案例 140
9.8.1 簡易版新聞評論 140
9.8.2 簡易版新聞評論升級版 140
9.8.3 全選案例 142
9.8.4 隔行變色效果 143
小結 144

第10章 BOM操作 145
10.1 概述 145
10.2 window對象 145
10.2.1 概述 145
10.2.2 警告框 146
10.2.3 確認框 146
10.2.4 提示框 147
10.2.5 開啟視窗 147
10.2.6 關閉視窗 148
10.3 location物件 148
10.3.1 概述 48
10.3.2 重新載入頁 148
10.3.3 跳轉其他頁面 149
10.3.4 新頁面取代目前頁面 149
10.4 history物件 149
10.4.1 概述 149
10.4.2 常用方法 150
10.5 navigator物件 150
10.5.1 概述 150
10.5.2 檢測瀏覽器類型 150
10.6 定時器 151
10.6.1 概述 151
10.6.2 啟動延時定時器 151
10.6.3 取消延時定時器 151
10.6.4 啟動間隔定時器 152
10.6.5 取消間隔定時器 152
10.7 經典案例 153
10.7.1 顯示時鐘 153
10.7.2 顯示與隱藏切換 153
10.7.3 實作文字方塊內容校驗 154
10.7.4 類比發送驗證碼 155
小結 155

第11章 JavaScript 篇 156
11.1 嚴格模式 156
11.1.1 概述 156
11.1.2 開啟嚴格模式 156
11.1.3 整個腳本文件的嚴格模式 157
11.1.4 特定函數的嚴格模式 157
11.1.5 嚴格模式的使用影響 157
11.2 改變函數內this的指向 159
11.2.1 bind方式 160
11.2.2 callapplybind的總結 161
11.3 物件增強 161
11.3.1 Object.define Property() 162
11.3.2 Object.define Properties() 165
11.3.3 Object.keys() 166
11.3.4 Object.is() 167
11.3.5 Object.assign() 167
11.3.6 Object.create() 169
11.4 JavaScript的記憶體管理 170
11.4.1 概述 170
11.4.2 棧記憶體 170
11.4.3 堆內存 171
11.4.4 基本資料型態傳參 172
11.4.5 引用資料型態傳參 173
11.4.6 值傳遞與引用傳遞 174
11.4.7 垃圾回收 174
11.4.8 引用計數演算法 175
11.4.9 標記清除演算法 176
11.4.10 內存洩漏 176
11.5 閉包 179
11.5.1 案例思考 179
11.5.2 概述 181
11.5.3 閉包的實現原理 181
11.5.4 閉包的生命週期 183
11.5.5 閉包的應用 183
11.6 淺拷貝和深拷貝 184
11.6.1 引用賦值 185
11.6.2 淺拷貝 186
11.6.3 深拷貝 190
11.7 JSON 192
11.7.1 概述 192
11.7.2 物件結構 192
11.7.3 數組結構 193
11.7.4 區分JSON和JavaScript物件 193
11.7.5 JavaScript物件和JSON相互轉換 194
11.7.6 JSON使用時的注意事項 194
11.8 常見演算法 195
11.8.1 冒泡排序 195
11.8.2 選擇排序 196
11.8.3 二分法查找 197
11.8.4 遞歸 198
11.9 防手震和節流 199
11.9.1 防手震 199
11.9.2 節流 201
11.9.3 防手震和節流的對比 204
11.10 WebStorage儲存方案 204
11.10.1 概述 204
11.10.2 分類 204
11.10.3 localStorage 205
11.10.4 sessionStorage 205
11.10.5 自訂工具類別封裝 206
11.11 經典案例 207
11.11.1 Vue2響應式原理簡單實作 207
11.11.2 遞歸實現深拷貝 209
小結 210

第12章 ES6新特性 211
12.1 概述 211
12.1.1 為什麼要學ES6 211
12.1.2 ECMAScript的歷史 211
12.1.3 ECMAScript和JavaScript的關係 212
12.1.4 結束語 212
12.2 變數和常數 212
12.2.1 var定義變數的問題 212
12.2.2 let 213
12.2.3 const 214
12.3 字串擴展 215
12.3.1 新增方法 215
12.3.2 模板字串 216
12.3.3 其他方法擴充說明 217
12.4 變數的解構賦值 217
12.4.1 對象解構 217
12.4.2 數組解構 218
12.4.3 函數參數清單中的解構賦值 218
12.4.4 複雜物件的解構 219
12.5 函數擴充 219
12.5.1 剩餘參數 219
12.5.2 函數參數預設值 219
12.6 箭頭函數 220
12.6.1 箭頭函數的寫法 220
12.6.2 箭頭函數的參數說明 221
12.6.3 箭頭函數的函數體說明 221
12.6.4 箭頭函數中的this 222
12.6.5 箭頭函數的注意事項 223
12.7 簡化對象寫法 223
12.7.1 物件的變數屬性簡寫 223
12.7.2 物件的函數屬性簡寫 224
12.8 數組物件的方法擴展 224
12.8.1 find方法 224
12.8.2 findIndex方法 225
12.8.3 of方法 225
12.8.4 from方法 225
12.9 展開運算子 226
12.9.1 數組展開 226
12.9.2 物件展開 227
12.10 class類 228
12.10.1 定義類別 228
12.10.2 類別的構造方法 229
12.10.3 實例物件的方法 230
12.10.4 靜態屬性與靜態方法 230
12.10.5 繼承 231
12.11 Set 233
12.11.1 概述 233
12.11.2 建立Set集合 233
12.11.3 常用方法與屬性 233
12.11.4 遍歷方式 234
12.12 Map 235
12.12.1 概述 235
12.12.2 建立Map集合 235
12.12.3 常用方法與屬性 236
12.12.4 遍歷方式 237
12.12.5 使用Map計算字元數 238
小結 238

第13章 Promise非同步程式設計 240
13.1 概述 240
13.2 JavaScript非同步程式設計的實作 240
13.2.1 為什麼JavaScript是單執行緒 240
13.2.2 JavaScript如何實現非同步程式設計 241
13.3 回呼函數 242
13.3.1 說明 242
13.3.2 事件處理程序 242
13.3.3 延遲計時器 243
13.3.4 回呼函數再理解 243
13.3.5 回調地獄 244
13.4 Promise 244
13.4.1 概述 245
13.4.2 Promise物件的語法 245
13.4.3 Promise物件的屬性與方法 246
13.4.4 Promise的認識迷思 246
13.4.5 Promise的三種狀態 247
13.4.6 Promise的結果 248
13.4.7 then方法詳解 249
13.4.8 catch方法詳解 255
13.4.9 其他方法 257
13.5 async關鍵字 257
13.5.1 概述 257
13.5.2 非同步函數 257
13.6 await關鍵字 258
13.6.1 概述 258
13.6.2 案例 258
小結 259

第14章 模組化 260
14.1 傳統開發的弊端 260
14.1.1 命名衝突 260
14.1.2 文件依賴 260
14.2 生活中的模組化 261
14.3 ES6模組化概述 261
14.4 模組化開發 262
14.4.1 導出變數和常數 262
14.4.2 導出函數 262
14.4.3 導出類別 263
14.4.4 導出時別名的使用 263
14.4.5 導入時別名的使用 264
14.4.6 一次性導入 265
14.4.7 default預設導出 265
14.4.8 命名導出和預設導出混合使用 266
14.5 動態引入模組 267
14.5.1 需求 267
14.5.2 import()表達式 267
14.5.3 動態引入模組的使用情境 268
小結 268