《Javscript實用教程》目錄

目錄

Javascript實用教程... 1

目錄... 2

第 1 部分... 12

◄ Javascript基礎 ►. 12

第 1 章... 13

◄ JavaScript 語法基礎►. 13

1.1 基本概念和開發工具... 13

1.1.1 編程語言... 13

1.1.2 計算機語言... 13

1.1.3 編程語言... 13

1.1.4 翻譯器... 14

1.1.5 編程語言和標記語言區別... 14

1.1.6 計算機基礎... 14

1.1.7 瀏覽器... 16

1.1.8 網頁、網站和應用程序... 16

1.1.9 開發工具... 16

1.2 JavaScript 是什麼... 18

1.2.1 JavaScript語言特色... 18

1.2.2 編譯語言和腳本語言... 19

1.2.3 JavaScript應用場景... 19

1.2.4 JavaScript 與瀏覽器的關係... 20

1.2.5 JavaScript的組成... 20

1.3 初次體驗JavaScript 代碼... 21

1.3.1 JavaScript代碼注意事項：... 22

1.3.2 代碼註釋... 23

1.4 變量... 24

1.4.1 變量引入、聲明和初始化... 24

1.4.2 變量在內存中的存儲... 25

1.4.3 變量的命名規則和規範... 25

1.4 數據類型... 27

1.4.1 Number類型... 27

1.4.2 進制介紹（瞭解）... 27

1.4.3 String類型... 30

1.4.4 Boolean類型... 32

1.4.5 Undefined和Null 32

1.4.6 數據類型轉換... 32

1.4.7 字面量... 34

1.4.8 獲取變量的類型... 34

1.4.7 複雜數據類型 Object（對象）... 35

1.5 運算符... 36

1.5.1 算術運算符... 36

1.5.2 一元運算符... 36

1.5.3 邏輯運算符(布爾運算符) 37

1.5.4 關係運算符(比較運算符) 37

1.5.5 賦值運算符... 37

1.5.6 運算符的優先級... 37

第 2 章... 39

◄ JavaScript流程控制►. 39

2.1 順序結構... 39

2.2 分支結構... 39

2.2.1 if語句... 39

2.2.2 三元運算符... 41

2.2.3 switch語句... 41

2.2.4 分支語句總結... 42

2.2.5 布爾類型的隱式轉換... 43

2.3 循環結構... 43

2.3.1 while語句... 43

2.3.2 do...while語句... 44

2.3.3 for語句... 45

2.3.4 continue和break. 46

2.3 調試... 47

第 3 章... 48

◄ 數組、函數、做用域►. 48

3.1 數組... 48

3.1.1爲何要學習數組... 48

3.1.2 數組的概念... 48

3.1.3 數組的定義... 48

3.1.4 獲取數組元素... 49

3.1.5 遍歷數組... 50

3.1.6 數組中新增元素... 50

3.1.7 數組案例... 50

3.2 函數... 52

3.2.1 爲何要有函數... 52

3.2.2 什麼是函數... 52

3.2.3 函數的定義... 53

3.2.4 函數的調用... 53

3.2.5 函數的參數... 54

3.2.6 函數的返回值... 55

3.2.7 arguments的使用... 56

3.2.8 匿名函數... 56

3.2.9 自調用函數... 56

3.2.10 函數是一種數據類型... 57

3.3 做用域... 58

3.3.1 全局變量和局部變量... 58

3.3.2 塊級做用域... 59

3.3.3 詞法做用域... 59

3.3.4 做用域鏈... 60

3.3.5 變量提高... 60

3.3.6 預解析... 61

第 4 章... 64

◄ 對象和內置對象►. 64

4.1 對象... 64

4.1.1 爲何要有對象... 64

4.1.2 什麼是對象？... 64

4.1.3 JavaScript中的對象... 65

4.1.4 對象建立方式... 65

4.1.5 屬性和方法... 66

4.1.6 new關鍵字... 67

4.1.7 this詳解... 67

4.1.8 對象操做... 68

4.1.8.1 遍歷對象的屬性... 68

4.1.8.2 刪除對象的屬性... 68

4.2 基本類型和複雜類型... 69

4.2.1 堆和棧... 69

4.2.2 值類型在內存中的存儲... 69

4.2.3 引用類型在內存中的存儲... 70

4.2.4 值類型做爲函數的參數... 71

4.2.5 引用類型做爲函數的參數... 72

4.3 內置對象... 73

4.3.1 Math對象... 73

4.3.2 Date對象... 74

4.3.3 Array對象... 76

4.3.4 基本包裝類型... 79

4.3.5 String對象... 80

第 2 部分... 83

◄ Web API ►. 83

Web API介紹... 83

API的概念... 83

Web API的概念... 83

JavaScript的組成... 83

第 5 章... 85

◄ BOM►. 85

5.1 BOM介紹... 85

5.1.1 BOM的概念... 85

5.1.2 BOM的頂級對象window.. 85

5.2 對話框... 87

5.2.1 alert() 87

5.2.2 prompt() 88

5.2.3 confirm() 88

5.2 頁面加載事件... 89

5.3 定時器... 89

5.4 location對象... 90

5.5 history對象... 93

5.6 navigator對象... 94

第 6 章... 97

◄ DOM和事件►. 97

6.1 DOM... 97

6.1.1 DOM的概念... 97

6.1.2 模擬文檔樹結構... 98

6.2.3 DOM常常進行的操做... 99

6.2 事件... 101

6.2.1 事件的基本使用... 101

6.3 屬性操做... 102

6.3.1 非表單元素的屬性... 102

6.3.2 innerText、textContent 105

6.3.3 innerHTML和innerText的區別... 105

6.3.4 表單元素屬性... 106

6.3.5 自定義屬性操做... 110

6.3.6 樣式操做... 112

6.3.7 類名操做... 112

6.3.8 建立元素的三種方式... 114

6.4 節點操做... 116

6.4.1 節點的基本操做... 116

6.4.2 節點屬性操做... 118

6.4.3 節點層級... 118

6.4.3.1 獲取單個的子節點... 118

6.4.3.2 獲取全部的子節點... 119

6.4.3.3 獲取父節點... 119

6.5 事件詳解... 121

6.5.1 註冊/移除事件的三種方式... 121

6.5.2 事件冒泡... 123

6.5.3 事件的三個階段... 125

6.5.4 事件對象的屬性和方法... 127

6.5.4.1 事件句柄　(Event Handlers). 127

6.5.4.2 經常使用的鼠標和鍵盤屬性... 128

6.5.4.3 event屬性和方法總結... 129

6.5.4.4 案例... 130

6.6 偏移量... 132

6.6.1 offset系列：獲取元素... 132

6.6.2 client系列可視區域... 134

6.6.3 滾動偏移：scroll系列... 135

6.7 綜合案例... 136

6.7.1 輪播圖... 136

6.7.2 固定導航欄... 142

6.7.3 導航欄特效... 145

第 3 部分... 149

◄ Javascript 高級►. 149

第 7 章... 150

◄  JavaScript 面向對象編程 ►. 150

7.1 面向對象介紹... 150

7.2 建立對象的方式... 151

7.2.1 字面量的方式... 151

7.2.2 調用系統的構造函數... 152

7.2.3 自定義構造函數方式... 152

7.2.4          工廠模式建立對象... 153

7.2.5 工廠模式和自定義構造函數建立對象的區別... 153

7.2.6 構造函數和對象的關係... 154

7.3 原型的引入... 155

7.4 面向過程和麪向對象... 156

7.5 構造函數、原型對象、實例對象之間的關係... 158

7.6 利用原型共享數據... 158

7.6.1 原型的簡單語法... 158

7.6.2 原型中方法的使用... 159

7.6.3 內置對象的原型方法... 160

7.6.4 把局部變量變成全局變量... 161

7.7 原型及原型鏈... 162

7.7.1 原型指向能夠改變... 162

7.7.2 實例對象屬性和原型對象屬性重名問題... 164

7.7.3 經過一個HTML的元素對象來查看原型鏈... 166

7.8 實現繼承... 166

7.8.1 原型實現繼承... 167

7.8.2 構造函數實現繼承... 167

7.8.3 組合繼承... 169

7.8.4 拷貝繼承... 170

第 8 章... 172

◄ 函數進階和其它 ►. 172

8.1 函數的定義方式... 172

8.2 函數的調用方式... 173

8.2.1 函數內 this 指向的不一樣場景... 173

8.2.2 嚴格模式... 174

8.2.3 函數也是對象... 175

8.2.4 數組中函數的調用... 176

8.2.5 apply和call調用... 177

8.2.6 bind方法... 179

8.2.7 call、apply、bind的區別... 180

8.3 函數中自帶的屬性介紹... 180

8.4 函數做爲參數使用... 181

8.3 函數做爲返回值使用... 182

8.4 做用域和做用域鏈... 183

8.5 閉包... 184

8.6 沙箱模式... 186

8.7 遞歸... 187

8.8 淺拷貝和深拷貝... 188

8.9 遞歸案例... 191

8.9.1 遍歷DOM樹... 191

8.9.2 生成菜單導航... 192

8.10 僞數組和數組... 194

8.11 JavaScript 垃圾回收機制... 196

8.11.1 可訪問性（Reachability）... 196

8.11.2 一個簡單示例... 196

8.11.3 兩個引用... 197

8.11.4 相互引用的對象... 197

8.11.5 孤島（Unreachable island) 199

8.11.6 內部算法... 200

第 9 章... 203

◄ 正則表達式 ►. 203

9.1 正則表達式簡介... 203

9.1.1 什麼是正則表達式... 203

9.1.2 正則表達式的做用... 203

9.1.3 正則表達式的特色... 203

9.1.4 正則表達式的組成... 204

9.1.5 經常使用案例... 205

9.1.6 如何驗證正則表達式的正確性... 206

9.1 JavaScript 中使用正則表達式... 206

9.1.1 建立正則對象... 206

9.1.2 正則匹配... 207

9.1.3 正則提取... 207

9.1.4 正則替換... 209

9.3 正則表達式使用案例... 210

9.3.1 密碼強度驗證... 210

9.3.2 表單驗證... 214

第 10 章... 217

◄ 貪吃蛇案例 ►. 217

10.1 示例介紹... 217

10.2 實現步驟... 219

10.2.1 畫地圖和操做按鈕... 219

10.2.2 封裝食物對象... 220

10.2.3 封裝小蛇對象... 222

10.2.4 封裝遊戲對象... 224

10.2.5 遊戲調用... 227

第 4 部分... 228

◄ Javascript下一代標準 ►. 228

第 11 章... 229

◄ ES6~ES10新特性介紹 ►. 229

11.1 ES6新特性... 229

11.1.1 Arrows（箭頭函數）... 229

11.1.2 const和let 230

11.1.3 模板字符串... 230

11.1.4 函數的參數默認值... 230

11.1.5 延展操做符(Spread operator) 231

11.1.6 對象解構... 231

11.1.7 for...of 和 for...in. 231

11.1.8 對象屬性簡寫... 232

11.1.9 Promise. 232

11.1.10 class（類）... 235

11.1.11 Module (模塊化) 236

11.2 ES7新特性... 238

11.2.1 Array.prototype.includes() 238

11.2.2 指數操做符**. 238

11.3 ES8新特性... 238

11.3.1 async await 239

11.3.2 Object.values/Object.entries. 241

11.3.3 padStart 和 padEnd. 241

11.4 ES9新特性... 242

11.4.1 for await...of. 242

11.4.2 Object Rest Spread. 243

11.4.3 Promise.prototype.finally() 245

11.4.4 新的正則表達式特性... 246

11.5 ES10新特性... 248

11.5.1 Array.prototype.flat() 248

11.5.2 Array.prototype.flatMap() 249

11.5.3 String.trimStart 和 String.trimEnd. 249

11.5.4 String.prototype.matchAll. 249

11.5.5 修改 catch 綁定... 250

11.5.6 新的基本數據類型 BigInt. 250

11.5.7 Object.fromEntries(). 250

11.5.8 Symbol.prototype.description. 251

11.5.9 Function.prototype.toString() 251

第 12 章... 252

◄ TypeScript簡單介紹 ►. 252

12.1 TypeScript簡介... 252

12.1.1 安裝TypeScript 252

12.1.2 開始咱們的第一個TypeScript程序... 253

12.1.3 類型註解... 255

12.1.4 接口... 255

12.1.5 類... 256

12.2 TypeScript基礎類型... 257

12.2.1 元組 Tuple. 257

12.2.2 枚舉... 257

12.2.3 任意值any. 258

12.2.4 空值... 259

12.2.5 Null 和 Undefined. 259

12.2.6 Never 259

12.2.7 類型斷言... 259

參考文獻... 261