JavaScript前端開發與實例教程

目    錄

 

第1章  JavaScript概述 1

1.1  JavaScript是什麽 2

1.1.1  JavaScript簡介 2

1.1.2  JavaScript的應用場景 2

1.1.3  JavaScript的發展趨勢 4

1.1.4  JavaScript的組成部分 5

1.2  JavaScript與其他語言 5

1.2.1  JavaScript與HTML、CSS的關系 5

1.2.2  JavaScript與Java的關系 5

1.2.3  JavaScript與TypeScript的關系 6

1.3  初識JavaScript程序 6

1.3.1  代碼編輯工具—VSCode 6

1.3.2  人工智能輔助編程工具 9

1.3.3  代碼運行工具—瀏覽器 10

1.3.4  在網頁中嵌入JavaScript代碼 11

1.3.5  註釋、縮進、分號 13

1.3.6  常用輸入/輸出語句 13

1.3.7  在線幫助和資源 15

1.4  案例：輸出社會主義核心價值觀的內容 15

1.5  本章小結 16

1.6  本章高頻面試題 16

1.7  實踐操作練習題 17

第2章  JavaScript語法基礎 18

2.1  變量 19

2.1.1  聲明變量 19

2.1.2  變量命名規則與規範 20

2.1.3  使用變量 21

2.2  數據類型 22

2.2.1  數據類型分類 22

2.2.2  數據類型檢測 24

2.2.3  數據類型轉換 25

2.3  運算符和表達式 26

2.3.1  算術運算符 26

2.3.2  遞增和遞減運算符 27

2.3.3  賦值運算符 28

2.3.4  比較運算符 28

2.3.5  邏輯運算符 29

2.3.6  條件運算符 31

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

2.4  流程控制 32

2.4.1  選擇結構 33

2.4.2  循環結構 36

2.4.3  異常處理 40

2.5  代碼調試 41

2.5.1  alert()方法 41

2.5.2  console.log()方法 42

2.5.3  開發人員工具調試 42

2.6  案例：重污染天氣預警程序設計 44

2.7  本章小結 46

2.8  本章高頻面試題 46

2.9  實踐操作練習題 47

第3章  數組 49

3.1  數組概述 50

3.2  創建數組 50

3.3  訪問數組 50

3.4  數組的常用屬性和方法 51

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

3.6  本章小結 61

3.7  本章高頻面試題 61

3.8  實踐操作練習題 63

第4章  函數 64

4.1  函數概述 64

4.2  自定義函數 65

4.2.1  函數的定義 65

4.2.2  函數的調用 66

4.2.3  函數返回值 67

4.2.4  arguments對象 69

4.2.5  變量作用域 69

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

4.2.7  回調函數 73

4.3  內置函數 73

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

4.5  本章小結 79

4.6  本章高頻面試題 79

4.7  實踐操作練習題 80

第5章  JavaScript對象 82

5.1  對象概述 83

5.2  創建對象 83

5.3  訪問對象 84

5.4  常用內置對象 85

5.4.1  Math對象 86

5.4.2  Date對象 87

5.4.3  String對象 89

5.4.4  RegExp對象與正則表達式 93

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

5.6  案例 97

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

5.6.2  高亮顯示關鍵詞 98

5.7  本章小結 100

5.8  本章高頻面試題 100

5.9  實踐操作練習題 101

第6章  DOM 104

6.1  DOM概述 105

6.2  獲取元素 105

6.3  事件基礎 109

6.4  操作元素 110

6.4.1  常用屬性操作 111

6.4.2  樣式操作 112

6.4.3  自定義屬性操作 116

6.5  this關鍵字 117

6.6  節點操作 118

6.6.1  節點類型 119

6.6.2  獲取節點 119

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

6.6.4  克隆節點 125

6.7  案例 126

6.7.1  留言板 126

6.7.2  折疊面板 128

6.8  本章小結 130

6.9  本章高頻面試題 130

6.10  實踐操作練習題 130

第7章  事件處理 133

7.1  綁定事件處理程序 134

7.2  刪除事件處理程序 135

7.3  事件對象 136

7.4  取消默認行為 137

7.4.1  取消表單提交 137

7.4.2  取消默認右鍵菜單 138

7.5  事件流 139

7.6  事件委托 141

7.7  事件類型 142

7.7.1  鼠標事件 142

7.7.2  鍵盤事件 145

7.7.3  表單事件 147

7.8  案例 150

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

7.8.2  查看網頁事件監聽器 151

7.9  本章小結 152

7.10  本章高頻面試題 152

7.11  實踐操作練習題 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  封裝動畫函數 166

8.7.3  jQuery動畫 168

8.8  案例 169

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

8.8.2  限時秒殺 170

8.9  本章小結 171

8.10  本章高頻面試題 171

8.11  實踐操作練習題 172

第9章  JavaScript特效綜合實例 175

9.1  電影購票 175

9.1.1  頁面佈局 176

9.1.2  工具函數 178

9.1.3  選座 178

9.1.4  取消選座 180

9.2  在線網盤 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  工具函數 186

9.3.3  鍵盤事件處理 187

9.4  輪播圖 187

9.4.1  頁面佈局 188

9.4.2  輪播動畫 189

9.4.3  防止暴力單擊 190

9.5  網絡購物車 190

9.5.1  頁面佈局 191

9.5.2  工具函數 192

9.5.3  勾選商品 193

9.5.4  增減和刪除商品 193

9.6  放大鏡 194

9.6.1  頁面佈局 195

9.6.2  功能實現 195

9.7  本章小結 196

9.8  實踐操作練習題 196

第10章  Ajax 198

10.1  Ajax簡介 199

10.2  Ajax對象 199

10.2.1  創建XMLHttpRequest對象 199

10.2.2  向服務器發送請求 199

10.2.3  獲取服務器數據 200

10.3  Ajax數據交換格式 202

10.3.1  JSON簡介 202

10.3.2  JSON數據格式 202

10.3.3  JSON方法 204

10.4  Ajax跨域 205

10.5  封裝Ajax方法 207

10.6  案例：獲取騰訊天氣預報數據 208

10.7  Ajax訪問本地JSON文件 211

10.8  本章小結 212

10.9  本章高頻面試題 212

10.10  實踐操作練習題 213

第11章  基於Ajax+ECharts的天氣預報系統 214

11.1  數據可視化簡介 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的天氣預報系統的設計與實現 221

11.3.1  案例呈現 222

11.3.2  案例分析 222

11.3.3  頁面佈局 222

11.3.4  城市選擇模塊 223

11.3.5  Ajax獲取騰訊天氣數據模塊 224

11.3.6  數據更新時間和實時提示語模塊 225

11.3.7  極端天氣預警信息模塊 225

11.3.8  當前天氣模塊 226

11.3.9  濕度水球圖模塊 227

11.3.10  氣壓儀表盤模塊 228

11.3.11  空氣質量指數雷達圖模塊 228

11.3.12  逐小時天氣預報模塊 229

11.3.13  七日天氣預報模塊 231

11.3.14  七日最高溫最低溫柱狀圖模塊 233

11.4  本章小結 235

11.5  本章高頻面試題 235

11.6  實踐操作練習題 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  解構賦值 242

12.3.1  數組的解構賦值 242

12.3.2  對象的解構賦值 243

12.4  運算符的擴展 244

12.4.1  指數運算符 244

12.4.2  鏈判斷運算符 244

12.4.3  Null判斷運算符 245

12.4.4  邏輯賦值運算符 246

12.5  數組的擴展 247

12.5.1  擴展運算符 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  函數的擴展 251

12.6.1  箭頭函數 251

12.6.2  函數參數的默認值 253

12.6.3  rest參數 254

12.7  字符串的擴展 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  本章小結 265

12.14  本章高頻面試題 265

12.15  實踐操作練習題 266

第13章  基於ES6的文創商城 268

13.1  項目概述 268

13.2  項目呈現 269

13.3  項目結構 269

13.4  商品數據結構 270

13.5  首頁功能設計與實現 271

13.5.1  商品展示功能 271

13.5.2  商品切換功能 272

13.5.3  搜索欄吸附功能 273

13.5.4  側邊欄定位功能 274

13.5.5  跳轉至詳情頁功能 274

13.6  商品詳情頁功能設計與實現 275

13.6.1  商品詳情展示功能 275

13.6.2  本地存儲功能 277

13.6.3  加入購物車功能 277

13.7  購物車頁面功能設計與實現 278

13.7.1  購物車商品展示功能 278

13.7.2  購物車商品刪除功能 279

13.8  本章小結 279

13.9  實踐操作練習題 279