JavaScript前端開(kāi)發(fā)與實(shí)例教程

第1章  JavaScript概述 1
1.1  JavaScript是什么 2
1.1.1  JavaScript簡(jiǎn)介 2
1.1.2  JavaScript的應(yīng)用場(chǎng)景 2
1.1.3  JavaScript的發(fā)展趨勢(shì) 4
1.1.4  JavaScript的組成部分 5
1.2  JavaScript與其他語(yǔ)言 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  初識(shí)JavaScript程序 6
1.3.1  代碼編輯工具—VSCode 6
1.3.2  人工智能輔助編程工具 9
1.3.3  代碼運(yùn)行工具—瀏覽器 10
1.3.4  在網(wǎng)頁(yè)中嵌入JavaScript代碼 11
1.3.5  注釋、縮進(jìn)、分號(hào) 13
1.3.6  常用輸入/輸出語(yǔ)句 13
1.3.7  在線幫助和資源 15
1.4  案例：輸出社會(huì)主義核心價(jià)值觀的內(nèi)容 15
1.5  本章小結(jié) 16
1.6  本章高頻面試題 16
1.7  實(shí)踐操作練習(xí)題 17
第2章  JavaScript語(yǔ)法基礎(chǔ) 18
2.1  變量 19
2.1.1  聲明變量 19
2.1.2  變量命名規(guī)則與規(guī)范 20
2.1.3  使用變量 21
2.2  數(shù)據(jù)類(lèi)型 22
2.2.1  數(shù)據(jù)類(lèi)型分類(lèi) 22
2.2.2  數(shù)據(jù)類(lèi)型檢測(cè) 24
2.2.3  數(shù)據(jù)類(lèi)型轉(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)先級(jí)與結(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  開(kāi)發(fā)人員工具調(diào)試 42
2.6  案例：重污染天氣預(yù)警程序設(shè)計(jì) 44
2.7  本章小結(jié) 46
2.8  本章高頻面試題 46
2.9  實(shí)踐操作練習(xí)題 47
第3章  數(shù)組 49
3.1  數(shù)組概述 50
3.2  創(chuàng)建數(shù)組 50
3.3  訪問(wèn)數(shù)組 50
3.4  數(shù)組的常用屬性和方法 51
3.5  案例：使用數(shù)組實(shí)現(xiàn)“2048”游戲的關(guān)鍵算法 59
3.6  本章小結(jié) 61
3.7  本章高頻面試題 61
3.8  實(shí)踐操作練習(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對(duì)象 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  案例：“漁夫打魚(yú)曬網(wǎng)”程序設(shè)計(jì) 77
4.5  本章小結(jié) 79
4.6  本章高頻面試題 79
4.7  實(shí)踐操作練習(xí)題 80
第5章  JavaScript對(duì)象 82
5.1  對(duì)象概述 83
5.2  創(chuàng)建對(duì)象 83
5.3  訪問(wèn)對(duì)象 84
5.4  常用內(nèi)置對(duì)象 85
5.4.1  Math對(duì)象 86
5.4.2  Date對(duì)象 87
5.4.3  String對(duì)象 89
5.4.4  RegExp對(duì)象與正則表達(dá)式 93
5.5  基本數(shù)據(jù)類(lèi)型和復(fù)雜數(shù)據(jù)類(lèi)型 95
5.6  案例 97
5.6.1  “掃雷”游戲隨機(jī)布雷 97
5.6.2  高亮顯示關(guān)鍵詞 98
5.7  本章小結(jié) 100
5.8  本章高頻面試題 100
5.9  實(shí)踐操作練習(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)類(lèi)型 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  實(shí)踐操作練習(xí)題 130
第7章  事件處理 133
7.1  綁定事件處理程序 134
7.2  刪除事件處理程序 135
7.3  事件對(duì)象 136
7.4  取消默認(rèn)行為 137
7.4.1  取消表單提交 137
7.4.2  取消默認(rèn)右鍵菜單 138
7.5  事件流 139
7.6  事件委托 141
7.7  事件類(lèi)型 142
7.7.1  鼠標(biāo)事件 142
7.7.2  鍵盤(pán)事件 145
7.7.3  表單事件 147
7.8  案例 150
7.8.1  浮現(xiàn)社會(huì)主義核心價(jià)值觀內(nèi)容 150
7.8.2  查看網(wǎng)頁(yè)事件監(jiān)聽(tīng)器 151
7.9  本章小結(jié) 152
7.10  本章高頻面試題 152
7.11  實(shí)踐操作練習(xí)題 153
第8章  BOM 155
8.1  BOM概述 155
8.2  window對(duì)象 156
8.3  location對(duì)象 160
8.4  navigator對(duì)象 162
8.5  history對(duì)象 163
8.6  screen對(duì)象 164
8.7  JavaScript動(dòng)畫(huà) 165
8.7.1  動(dòng)畫(huà)原理 165
8.7.2  封裝動(dòng)畫(huà)函數(shù) 166
8.7.3  jQuery動(dòng)畫(huà) 168
8.8  案例 169
8.8.1  浮現(xiàn)社會(huì)主義核心價(jià)值觀內(nèi)容的動(dòng)畫(huà)效果 169
8.8.2  限時(shí)秒殺 170
8.9  本章小結(jié) 171
8.10  本章高頻面試題 171
8.11  實(shí)踐操作練習(xí)題 172
第9章  JavaScript特效綜合實(shí)例 175
9.1  電影購(gòu)票 175
9.1.1  頁(yè)面布局 176
9.1.2  工具函數(shù) 178
9.1.3  選座 178
9.1.4  取消選座 180
9.2  在線網(wǎng)盤(pán) 181
9.2.1  頁(yè)面布局 181
9.2.2  新建文件夾 182
9.2.3  文件夾操作 182
9.2.4  全選功能 183
9.3  “2048”游戲 184
9.3.1  頁(yè)面布局 184
9.3.2  工具函數(shù) 186
9.3.3  鍵盤(pán)事件處理 187
9.4  輪播圖 187
9.4.1  頁(yè)面布局 188
9.4.2  輪播動(dòng)畫(huà) 189
9.4.3  防止暴力單擊 190
9.5  網(wǎng)絡(luò)購(gòu)物車(chē) 190
9.5.1  頁(yè)面布局 191
9.5.2  工具函數(shù) 192
9.5.3  勾選商品 193
9.5.4  增減和刪除商品 193
9.6  放大鏡 194
9.6.1  頁(yè)面布局 195
9.6.2  功能實(shí)現(xiàn) 195
9.7  本章小結(jié) 196
9.8  實(shí)踐操作練習(xí)題 196
第10章  Ajax 198
10.1  Ajax簡(jiǎn)介 199
10.2  Ajax對(duì)象 199
10.2.1  創(chuàng)建XMLHttpRequest對(duì)象 199
10.2.2  向服務(wù)器發(fā)送請(qǐng)求 199
10.2.3  獲取服務(wù)器數(shù)據(jù) 200
10.3  Ajax數(shù)據(jù)交換格式 202
10.3.1  JSON簡(jiǎn)介 202
10.3.2  JSON數(shù)據(jù)格式 202
10.3.3  JSON方法 204
10.4  Ajax跨域 205
10.5  封裝Ajax方法 207
10.6  案例：獲取騰訊天氣預(yù)報(bào)數(shù)據(jù) 208
10.7  Ajax訪問(wèn)本地JSON文件 211
10.8  本章小結(jié) 212
10.9  本章高頻面試題 212
10.10  實(shí)踐操作練習(xí)題 213
第11章  基于Ajax ECharts的天氣預(yù)報(bào)系統(tǒng) 214
11.1  數(shù)據(jù)可視化簡(jiǎn)介 214
11.2  ECharts 215
11.2.1  ECharts簡(jiǎn)介 215
11.2.2  ECharts快速上手 215
11.2.3  配置項(xiàng) 216
11.2.4  常用圖表配置項(xiàng) 217
11.3  案例：基于Ajax ECharts的天氣預(yù)報(bào)系統(tǒng)的設(shè)計(jì)與實(shí)現(xiàn) 221
11.3.1  案例呈現(xiàn) 222
11.3.2  案例分析 222
11.3.3  頁(yè)面布局 222
11.3.4  城市選擇模塊 223
11.3.5  Ajax獲取騰訊天氣數(shù)據(jù)模塊 224
11.3.6  數(shù)據(jù)更新時(shí)間和實(shí)時(shí)提示語(yǔ)模塊 225
11.3.7  極端天氣預(yù)警信息模塊 225
11.3.8  當(dāng)前天氣模塊 226
11.3.9  濕度水球圖模塊 227
11.3.10  氣壓儀表盤(pán)模塊 228
11.3.11  空氣質(zhì)量指數(shù)雷達(dá)圖模塊 228
11.3.12  逐小時(shí)天氣預(yù)報(bào)模塊 229
11.3.13  七日天氣預(yù)報(bào)模塊 231
11.3.14  七日最高溫最低溫柱狀圖模塊 233
11.4  本章小結(jié) 235
11.5  本章高頻面試題 235
11.6  實(shí)踐操作練習(xí)題 236
第12章  ECMAScript 6 238
12.1  ECMAScript 6簡(jiǎn)介 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  對(duì)象的解構(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  實(shí)例方法：includes() 250
12.5.5  實(shí)例方法：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  實(shí)例方法 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  實(shí)踐操作練習(xí)題 266
第13章  基于ES6的文創(chuàng)商城 268
13.1  項(xiàng)目概述 268
13.2  項(xiàng)目呈現(xiàn) 269
13.3  項(xiàng)目結(jié)構(gòu) 269
13.4  商品數(shù)據(jù)結(jié)構(gòu) 270
13.5  首頁(yè)功能設(shè)計(jì)與實(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)至詳情頁(yè)功能 274
13.6  商品詳情頁(yè)功能設(shè)計(jì)與實(shí)現(xiàn) 275
13.6.1  商品詳情展示功能 275
13.6.2  本地存儲(chǔ)功能 277
13.6.3  加入購(gòu)物車(chē)功能 277
13.7  購(gòu)物車(chē)頁(yè)面功能設(shè)計(jì)與實(shí)現(xiàn) 278
13.7.1  購(gòu)物車(chē)商品展示功能 278
13.7.2  購(gòu)物車(chē)商品刪除功能 279
13.8  本章小結(jié) 279
13.9  實(shí)踐操作練習(xí)題 279