JavaScript 前端開發與實例教程 (微課視頻版)

目    錄

第1章  JavaScript概述 1

1.1  JavaScript是什麽 1

1.1.1  JavaScript簡介 1

1.1.2  JavaScript應用場景 2

1.1.3  JavaScript發展趨勢 3

1.1.4  JavaScript組成部分 4

1.2  JavaScript與其他語言 5

1.2.1  JavaScript與HTML、CSS的關系 5

1.2.2  JavaScript與Java的關系 5

1.2.3  JavaScript與TypeScript的關系 5

1.3  第一個JavaScript程序 5

1.3.1  代碼編輯工具VSCode 5

1.3.2  代碼運行工具——瀏覽器 6

1.3.3  在網頁中嵌入JavaScript代碼 7

1.3.4  註釋、縮進、分號 9

1.3.5  常用輸入/輸出語句 9

1.3.6  在線幫助和資源 11

1.4  案例：輸出“社會主義核心價值觀”內容 11

1.5  本章小結 12

1.6  本章常見面試題 12

1.7  實踐操作練習題 13

第2章  JavaScript語法基礎 14

2.1  變量 14

2.1.1  聲明變量 14

2.1.2  變量命名規則與規範 15

2.1.3  使用變量 16

2.2  數據類型 17

2.2.1  數據類型分類 17

2.2.2  數據類型檢測 19

2.2.3  數據類型轉換 20

2.3  運算符和表達式 21

2.3.1  算術運算符 21

2.3.2  遞增和遞減運算符 22

2.3.3  賦值運算符 23

2.3.4  比較運算符 23

2.3.5  邏輯運算符 24

2.3.6  條件運算符 26

2.3.7  運算符的優先級與結合性 26

2.4  流程控制 27

2.4.1  選擇結構 28

2.4.2  循環結構 31

2.5  代碼調試 35

2.5.1  alert()方法 35

2.5.2  console.log()方法 35

2.5.3  開發者工具調試 36

2.6  案例：新冠肺炎疫情風險等級劃分程序設計 38

2.6.1  案例呈現 38

2.6.2  案例分析 39

2.6.3  案例實現 39

2.7  本章小結 40

2.8  本章常見面試題 40

2.9  實踐操作練習題 41

第3章  數組 43

3.1  數組概述 43

3.2  創建數組 43

3.3  訪問數組 44

3.4  數組常用屬性和方法 45

3.5  案例：使用數組實現“2048”游戲的關鍵算法 52

3.5.1  案例呈現 52

3.5.2  案例分析 53

3.5.3  案例實現 53

3.6  本章小結 54

3.7  本章常見面試題 55

3.8  實踐操作練習題 56

第4章  函數 57

4.1  函數概述 57

4.2  自定義函數 57

4.2.1  函數的定義 58

4.2.2  函數的調用 59

4.2.3  函數的返回值 60

4.2.4  arguments對象 61

4.2.5  變量作用域 62

4.2.6  函數的嵌套調用和遞歸調用 64

4.2.7  回調函數 65

4.3  內置函數 66

4.4  案例：“漁夫打魚曬網”程序設計 69

4.4.1  案例呈現 69

4.4.2  案例分析 69

4.4.3  案例實現 69

4.5  本章小結 71

4.6  本章常見面試題 71

4.7  實踐操作練習題 72

第5章  JavaScript對象 74

5.1  對象概述 74

5.2  創建對象 75

5.3  訪問對象 76

5.4  常用內置對象 77

5.4.1  Math對象 77

5.4.2  Date對象 79

5.4.3  String對象 81

5.4.4  String對象與正則表達式 84

5.5  基本數據類型和復雜數據類型 86

5.6  案例 88

5.6.1  “掃雷”游戲隨機佈雷 88

5.6.2  高亮顯示關鍵詞 90

5.7  本章小結 91

5.8  本章常見面試題 91

5.9  實踐操作練習題 92

第6章  DOM 94

6.1  DOM概述 94

6.2  獲取元素 94

6.3  事件基礎 99

6.4  操作元素 100

6.4.1  常用屬性操作 101

6.4.2  樣式操作 102

6.4.3  自定義屬性操作 105

6.5  this關鍵字 106

6.6  節點操作 108

6.6.1  節點類型 108

6.6.2  獲取節點 109

6.6.3  創建、添加和刪除節點 113

6.6.4  克隆節點 115

6.7  案例 116

6.7.1  留言板 116

6.7.2  折疊面板 118

6.8  本章小結 119

6.9  本章常見面試題 120

6.10  實踐操作練習題 120

第7章  事件處理 123

7.1  綁定事件處理程序 123

7.2  刪除事件處理程序 125

7.3  事件對象 125

7.4  取消默認行為 127

7.4.1  取消表單提交 127

7.4.2  取消默認右鍵菜單 127

7.5  事件流 128

7.6  事件委托 131

7.7  事件類型 132

7.7.1  鼠標事件 132

7.7.2  鍵盤事件 134

7.7.3  表單事件 136

7.8  案例 139

7.8.1  浮現社會主義核心價值觀內容 139

7.8.2  查看網頁事件監聽器 140

7.9  本章小結 142

7.10  本章常見面試題 142

7.11  實踐操作練習題 142

第8章  BOM 144

8.1  BOM概述 144

8.2  window對象 145

8.3  location對象 149

8.4  navigator對象 151

8.5  history對象 152

8.6  screen對象 153

8.7  JavaScript動畫 153

8.7.1  動畫原理 153

8.7.2  封裝動畫函數 154

8.8  案例 157

8.8.1  浮現社會主義核心價值觀內容動畫效果 157

8.8.2  限時秒殺 158

8.9  本章小結 159

8.10  本章常見面試題 159

8.11  實踐操作練習題 160

第9章  JavaScript特效綜合實例 162

9.1  電影購票 162

9.1.1  頁面佈局 163

9.1.2  工具函數 164

9.1.3  選座 165

9.1.4  取消選座 167

9.2  在線網盤 167

9.2.1  頁面佈局 168

9.2.2  新建文件夾 168

9.2.3  文件夾操作 169

9.2.4  全選功能 170

9.3  “2048”游戲 171

9.3.1  頁面佈局 171

9.3.2  工具函數 172

9.3.3  鍵盤事件處理 173

9.4  輪播圖 174

9.4.1  頁面佈局 174

9.4.2  輪播動畫 175

9.4.3  防止暴力點擊 176

9.5  網絡購物車 177

9.5.1  頁面佈局 177

9.5.2  工具函數 178

9.5.3  勾選商品 179

9.5.4  增減和刪除商品 180

9.6  放大鏡 181

9.6.1  頁面佈局 181

9.6.2  功能實現 181

9.7  本章小結 183

9.8  實踐操作練習題 183

第10章  Ajax技術 184

10.1  Ajax簡介 184

10.2  Ajax對象 184

10.2.1  創建XMLHttpRequest對象 185

10.2.2  向服務器發送請求 185

10.2.3  獲取服務器數據 186

10.3  Ajax數據交換格式 189

10.3.1  JSON簡介 189

10.3.2  JSON數據格式 189

10.3.3  JSON方法 190

10.4  Ajax跨域 192

10.5  封裝Ajax方法 194

10.6  案例：獲取全國疫情實時追蹤數據 195

10.7  本章小結 197

10.8  本章常見面試題 198

10.9  實踐操作練習題 198

第11章  基於ECharts的疫情實時監控系統 200

11.1  數據可視化簡介 200

11.2  ECharts 201

11.2.1  ECharts簡介 201

11.2.2  ECharts快速上手 201

11.2.3  配置項 202

11.2.4  常用圖表配置項 203

11.3  案例：基於ECharts的疫情實時監控系統設計與實現 205

11.3.1  案例呈現 206

11.3.2  案例分析 206

11.3.3  頁面佈局 206

11.3.4  實時時間模塊 207

11.3.5  全球新冠疫苗實時接種數據模塊 207

11.3.6  中國累計接種趨勢數據模塊 208

11.3.7  中國每百人接種趨勢數據模塊 209

11.3.8  全國疫情實時追蹤數據模塊 210

11.3.9  全國疫情柱狀模塊 210

11.3.10  全國現有確診人數TOP10模塊 212

11.3.11  全國疫情中高風險名單模塊 213

11.4  本章小結 214

第12章  Vue簡介 215

12.1  認識Vue 215

12.1.1  什麽是Vue 215

12.1.2  Vue的優勢 217

12.1.3  Vue的信創意義 217

12.2  代碼編輯工具 217

12.3  配置Node.js環境 218

12.4  安裝Vue 219

12.5  vue-devtools調試工具 220

12.6  本章小結 221

12.7  本章常見面試題 221

12.8  實踐操作練習題 221

第13章  Vue基礎特性 222

13.1  案例：輸出“Vue.js是我國優秀的信創軟件框架” 222

13.2  Vue生命周期 223

13.2.1  認識生命周期 223

13.2.2  生命周期鉤子函數 225

13.3  插值、表達式和過濾器 227

13.3.1  文本插值 227

13.3.2  插入原始HTML 227

13.3.3  使用JavaScript表達式 227

13.4  本章小結 228

13.5  本章常見面試題 228

13.6  實踐操作練習題 228