JavaScript前端開發(fā)與實例教程

第1章  JavaScript概述 1
1.1  JavaScript是什么 2
1.1.1  JavaScript簡介 2
1.1.2  JavaScript的應(yīng)用場景 2
1.1.3  JavaScript的發(fā)展趨勢 4
1.1.4  JavaScript的組成部分 5
1.2  JavaScript與其他語言 5
1.2.1  JavaScript與HTML、CSS的關(guān)系 5
1.2.2  JavaScript與Java的關(guān)系 5
1.2.3  JavaScript與TypeScript的關(guān)系 6
1.3  初識JavaScript程序 6
1.3.1  代碼編輯工具—VSCode 6
1.3.2  人工智能輔助編程工具 9
1.3.3  代碼運(yùn)行工具—瀏覽器 10
1.3.4  在網(wǎng)頁中嵌入JavaScript代碼 11
1.3.5  注釋、縮進(jìn)、分號 13
1.3.6  常用輸入/輸出語句 13
1.3.7  在線幫助和資源 15
1.4  案例：輸出社會主義核心價值觀的內(nèi)容 15
1.5  本章小結(jié) 16
1.6  本章高頻面試題 16
1.7  實踐操作練習(xí)題 17
第2章  JavaScript語法基礎(chǔ) 18
2.1  變量 19
2.1.1  聲明變量 19
2.1.2  變量命名規(guī)則與規(guī)范 20
2.1.3  使用變量 21
2.2  數(shù)據(jù)類型 22
2.2.1  數(shù)據(jù)類型分類 22
2.2.2  數(shù)據(jù)類型檢測 24
2.2.3  數(shù)據(jù)類型轉(zhuǎn)換 25
2.3  運(yùn)算符和表達(dá)式 26
2.3.1  算術(shù)運(yùn)算符 26
2.3.2  遞增和遞減運(yùn)算符 27
2.3.3  賦值運(yùn)算符 28
2.3.4  比較運(yùn)算符 28
2.3.5  邏輯運(yùn)算符 29
2.3.6  條件運(yùn)算符 31
2.3.7  運(yùn)算符的優(yōu)先級與結(jié)合性 31
2.4  流程控制 32
2.4.1  選擇結(jié)構(gòu) 33
2.4.2  循環(huán)結(jié)構(gòu) 36
2.4.3  異常處理 40
2.5  代碼調(diào)試 41
2.5.1  alert()方法 41
2.5.2  console.log()方法 42
2.5.3  開發(fā)人員工具調(diào)試 42
2.6  案例：重污染天氣預(yù)警程序設(shè)計 44
2.7  本章小結(jié) 46
2.8  本章高頻面試題 46
2.9  實踐操作練習(xí)題 47
第3章  數(shù)組 49
3.1  數(shù)組概述 50
3.2  創(chuàng)建數(shù)組 50
3.3  訪問數(shù)組 50
3.4  數(shù)組的常用屬性和方法 51
3.5  案例：使用數(shù)組實現(xiàn)“2048”游戲的關(guān)鍵算法 59
3.6  本章小結(jié) 61
3.7  本章高頻面試題 61
3.8  實踐操作練習(xí)題 63
第4章  函數(shù) 64
4.1  函數(shù)概述 64
4.2  自定義函數(shù) 65
4.2.1  函數(shù)的定義 65
4.2.2  函數(shù)的調(diào)用 66
4.2.3  函數(shù)返回值 67
4.2.4  arguments對象 69
4.2.5  變量作用域 69
4.2.6  函數(shù)的嵌套調(diào)用和遞歸調(diào)用 71
4.2.7  回調(diào)函數(shù) 73
4.3  內(nèi)置函數(shù) 73
4.4  案例：“漁夫打魚曬網(wǎng)”程序設(shè)計 77
4.5  本章小結(jié) 79
4.6  本章高頻面試題 79
4.7  實踐操作練習(xí)題 80
第5章  JavaScript對象 82
5.1  對象概述 83
5.2  創(chuàng)建對象 83
5.3  訪問對象 84
5.4  常用內(nèi)置對象 85
5.4.1  Math對象 86
5.4.2  Date對象 87
5.4.3  String對象 89
5.4.4  RegExp對象與正則表達(dá)式 93
5.5  基本數(shù)據(jù)類型和復(fù)雜數(shù)據(jù)類型 95
5.6  案例 97
5.6.1  “掃雷”游戲隨機(jī)布雷 97
5.6.2  高亮顯示關(guān)鍵詞 98
5.7  本章小結(jié) 100
5.8  本章高頻面試題 100
5.9  實踐操作練習(xí)題 101
第6章  DOM 104
6.1  DOM概述 105
6.2  獲取元素 105
6.3  事件基礎(chǔ) 109
6.4  操作元素 110
6.4.1  常用屬性操作 111
6.4.2  樣式操作 112
6.4.3  自定義屬性操作 116
6.5  this關(guān)鍵字 117
6.6  節(jié)點(diǎn)操作 118
6.6.1  節(jié)點(diǎn)類型 119
6.6.2  獲取節(jié)點(diǎn) 119
6.6.3  創(chuàng)建、添加和刪除節(jié)點(diǎn) 124
6.6.4  克隆節(jié)點(diǎn) 125
6.7  案例 126
6.7.1  留言板 126
6.7.2  折疊面板 128
6.8  本章小結(jié) 130
6.9  本章高頻面試題 130
6.10  實踐操作練習(xí)題 130
第7章  事件處理 133
7.1  綁定事件處理程序 134
7.2  刪除事件處理程序 135
7.3  事件對象 136
7.4  取消默認(rèn)行為 137
7.4.1  取消表單提交 137
7.4.2  取消默認(rèn)右鍵菜單 138
7.5  事件流 139
7.6  事件委托 141
7.7  事件類型 142
7.7.1  鼠標(biāo)事件 142
7.7.2  鍵盤事件 145
7.7.3  表單事件 147
7.8  案例 150
7.8.1  浮現(xiàn)社會主義核心價值觀內(nèi)容 150
7.8.2  查看網(wǎng)頁事件監(jiān)聽器 151
7.9  本章小結(jié) 152
7.10  本章高頻面試題 152
7.11  實踐操作練習(xí)題 153
第8章  BOM 155
8.1  BOM概述 155
8.2  window對象 156
8.3  location對象 160
8.4  navigator對象 162
8.5  history對象 163
8.6  screen對象 164
8.7  JavaScript動畫 165
8.7.1  動畫原理 165
8.7.2  封裝動畫函數(shù) 166
8.7.3  jQuery動畫 168
8.8  案例 169
8.8.1  浮現(xiàn)社會主義核心價值觀內(nèi)容的動畫效果 169
8.8.2  限時秒殺 170
8.9  本章小結(jié) 171
8.10  本章高頻面試題 171
8.11  實踐操作練習(xí)題 172
第9章  JavaScript特效綜合實例 175
9.1  電影購票 175
9.1.1  頁面布局 176
9.1.2  工具函數(shù) 178
9.1.3  選座 178
9.1.4  取消選座 180
9.2  在線網(wǎng)盤 181
9.2.1  頁面布局 181
9.2.2  新建文件夾 182
9.2.3  文件夾操作 182
9.2.4  全選功能 183
9.3  “2048”游戲 184
9.3.1  頁面布局 184
9.3.2  工具函數(shù) 186
9.3.3  鍵盤事件處理 187
9.4  輪播圖 187
9.4.1  頁面布局 188
9.4.2  輪播動畫 189
9.4.3  防止暴力單擊 190
9.5  網(wǎng)絡(luò)購物車 190
9.5.1  頁面布局 191
9.5.2  工具函數(shù) 192
9.5.3  勾選商品 193
9.5.4  增減和刪除商品 193
9.6  放大鏡 194
9.6.1  頁面布局 195
9.6.2  功能實現(xiàn) 195
9.7  本章小結(jié) 196
9.8  實踐操作練習(xí)題 196
第10章  Ajax 198
10.1  Ajax簡介 199
10.2  Ajax對象 199
10.2.1  創(chuàng)建XMLHttpRequest對象 199
10.2.2  向服務(wù)器發(fā)送請求 199
10.2.3  獲取服務(wù)器數(shù)據(jù) 200
10.3  Ajax數(shù)據(jù)交換格式 202
10.3.1  JSON簡介 202
10.3.2  JSON數(shù)據(jù)格式 202
10.3.3  JSON方法 204
10.4  Ajax跨域 205
10.5  封裝Ajax方法 207
10.6  案例：獲取騰訊天氣預(yù)報數(shù)據(jù) 208
10.7  Ajax訪問本地JSON文件 211
10.8  本章小結(jié) 212
10.9  本章高頻面試題 212
10.10  實踐操作練習(xí)題 213
第11章  基于Ajax ECharts的天氣預(yù)報系統(tǒng) 214
11.1  數(shù)據(jù)可視化簡介 214
11.2  ECharts 215
11.2.1  ECharts簡介 215
11.2.2  ECharts快速上手 215
11.2.3  配置項 216
11.2.4  常用圖表配置項 217
11.3  案例：基于Ajax ECharts的天氣預(yù)報系統(tǒng)的設(shè)計與實現(xiàn) 221
11.3.1  案例呈現(xiàn) 222
11.3.2  案例分析 222
11.3.3  頁面布局 222
11.3.4  城市選擇模塊 223
11.3.5  Ajax獲取騰訊天氣數(shù)據(jù)模塊 224
11.3.6  數(shù)據(jù)更新時間和實時提示語模塊 225
11.3.7  極端天氣預(yù)警信息模塊 225
11.3.8  當(dāng)前天氣模塊 226
11.3.9  濕度水球圖模塊 227
11.3.10  氣壓儀表盤模塊 228
11.3.11  空氣質(zhì)量指數(shù)雷達(dá)圖模塊 228
11.3.12  逐小時天氣預(yù)報模塊 229
11.3.13  七日天氣預(yù)報模塊 231
11.3.14  七日最高溫最低溫柱狀圖模塊 233
11.4  本章小結(jié) 235
11.5  本章高頻面試題 235
11.6  實踐操作練習(xí)題 236
第12章  ECMAScript 6 238
12.1  ECMAScript 6簡介 239
12.2  let和const 239
12.2.1  let 239
12.2.2  const 241
12.3  解構(gòu)賦值 242
12.3.1  數(shù)組的解構(gòu)賦值 242
12.3.2  對象的解構(gòu)賦值 243
12.4  運(yùn)算符的擴(kuò)展 244
12.4.1  指數(shù)運(yùn)算符 244
12.4.2  鏈判斷運(yùn)算符 244
12.4.3  Null判斷運(yùn)算符 245
12.4.4  邏輯賦值運(yùn)算符 246
12.5  數(shù)組的擴(kuò)展 247
12.5.1  擴(kuò)展運(yùn)算符 247
12.5.2  Array.from() 248
12.5.3  Array.of() 249
12.5.4  實例方法：includes() 250
12.5.5  實例方法：at() 250
12.6  函數(shù)的擴(kuò)展 251
12.6.1  箭頭函數(shù) 251
12.6.2  函數(shù)參數(shù)的默認(rèn)值 253
12.6.3  rest參數(shù) 254
12.7  字符串的擴(kuò)展 254
12.7.1  模板字符串 255
12.7.2  實例方法 255
12.8  Symbol 256
12.9  Set和Map 257
12.9.1  Set 257
12.9.2  Map 259
12.10  for…of 260
12.11  Promise 261
12.12  async和await 264
12.13  本章小結(jié) 265
12.14  本章高頻面試題 265
12.15  實踐操作練習(xí)題 266
第13章  基于ES6的文創(chuàng)商城 268
13.1  項目概述 268
13.2  項目呈現(xiàn) 269
13.3  項目結(jié)構(gòu) 269
13.4  商品數(shù)據(jù)結(jié)構(gòu) 270
13.5  首頁功能設(shè)計與實現(xiàn) 271
13.5.1  商品展示功能 271
13.5.2  商品切換功能 272
13.5.3  搜索欄吸附功能 273
13.5.4  側(cè)邊欄定位功能 274
13.5.5  跳轉(zhuǎn)至詳情頁功能 274
13.6  商品詳情頁功能設(shè)計與實現(xiàn) 275
13.6.1  商品詳情展示功能 275
13.6.2  本地存儲功能 277
13.6.3  加入購物車功能 277
13.7  購物車頁面功能設(shè)計與實現(xiàn) 278
13.7.1  購物車商品展示功能 278
13.7.2  購物車商品刪除功能 279
13.8  本章小結(jié) 279
13.9  實踐操作練習(xí)題 279