JavaScript前端開發程序設計項目式教程（微課版）（第3版）

李玉臣，副教授，濰坊職業學院產學研合作辦公室主任，濰坊金貝爾軟件工程有限公司前端開發技術首席顧問，校企合作軟件開發專業負責人，Web前端開發技術JavaScript課程開發者，Web前端開發教學資源庫主持人，教育部首批“1+X”Web前端開發職業技能等級證書試點學院負責人。

目 錄

項目1

抽獎頁面—初識JavaScript 1

情境導入 1

學習目標 1

知識儲備 2

任務1.1　認識JavaScript 2

1.1.1　JavaScript的發展概況和

特性 2

1.1.2　JavaScript的應用場景 4

【素養進階】阿特伍德定律 4

任務1.2　搭建JavaScript開發環境 4

1.2.1　支持JavaScript的瀏覽器 5

1.2.2　JavaScript代碼編輯器 5

1.2.3　Visual Studio Code概述 5

【素養進階】人工智能助手：工具而非替

代品 8

【能力提升】VS Code編輯器的使用技巧 8

任務1.3　開啟JavaScript編程 8

1.3.1　JavaScript在HTML中的

應用方式 8

【任務實踐1-1】彈出鼓勵信息—內嵌式 9

1.3.2　JavaScript代碼編寫的基本

規範 10

1.3.3　JavaScript的常用輸入和輸出

方式 11

【任務實踐1-2】歡迎學習JavaScript—

簡單輸入和輸出 11

1.3.4　在JavaScript中實現換行 12

1.3.5　JavaScript的註釋 13

項目分析 13

資源準備說明 13

項目準備 13

項目實施 14

項目實訓—輸出個人信息 15

項目小結 16

鞏固練習 16

AI助學—智能編程助手使用指南 16

項目2

健康體脂率速算器—JavaScript

程序設計基礎 17

情境導入 17

學習目標 18

知識儲備 18

任務2.1　使用變量和常量 18

2.1.1　標識符 18

2.1.2　關鍵字和保留字 18

2.1.3　變量的命名 19

【素養進階】變量命名的藝術 19

2.1.4　變量和常量的聲明和賦值 19

【任務實踐2-1】求圓的周長—變量和常量的聲明和賦值 20

2.1.5　變量的類型 22

【任務實踐2-2】輸出課程成績—變量的

類型 22

2.1.6　變量的作用域 23

任務2.2　認識數據類型 23

2.2.1　數據類型概覽 23

2.2.2　基本數據類型 23

【能力提升】模板字符串的簡單用法 25

【能力提升】轉義字符 25

【能力提升】null與undefined的差異 26

【任務實踐2-3】確定變量類型—typeof 27

2.2.3　引用數據類型 27

【能力提升】BigInt類型 28

任務2.3　使用運算符 28

2.3.1　運算符的分類 28

【任務實踐2-4】檢查用戶是否符合法定投票年齡要求—條件運算符 29

2.3.2　算術運算符 29

【任務實踐2-5】計算購物賬單—算術運

算符 30

【能力提升】使用ES6字面量模板簡化字符

串的拼接操作 30

2.3.3　關系運算符 31

【任務實踐2-6】購物比價小助手—關系

運算符 31

2.3.4　賦值運算符 32

【能力提升】解構賦值 32

【任務實踐2-7】計算學生成績總分—賦值運算符 33

2.3.5　邏輯運算符 33

【任務實踐2-8】判斷某年是否為閏年—

邏輯運算符 34

2.3.6　位操作運算符 34

【任務實踐2-9】模擬朋友間交換秘密

數字—位操作運算符 35

2.3.7　運算符的優先級 35

任務2.4　認識表達式 36

【任務實踐2-10】零花錢兌換—表達式 37

任務2.5　轉換數據類型 37

2.5.1　隱式類型轉換 37

2.5.2　顯式類型轉換 38

項目分析 38

項目實施 39

項目實訓—驗證用戶輸入的密碼 39

項目小結 39

鞏固練習 40

項目3

猜數字遊戲—JavaScript流程

控制 41

情境導入 41

學習目標 41

知識儲備 42

任務3.1　認識流程控制 42

【任務實踐3-1】學生信息登記—順序

結構 42

任務3.2　使用分支結構 43

3.2.1　單分支結構 43

3.2.2　雙分支結構 44

【任務實踐3-2】比較兩個同學的成績—

雙分支語句 44

3.2.3　分支結構嵌套 45

【任務實踐3-3】評定學生的考評等級—

分支結構嵌套 46

3.2.4　多分支結構（if…else if…else

語句） 47

【任務實踐3-4】咖啡店優惠活動—多分支結構 49

【能力提升】深入理解分支結構中else的

含義 50

3.2.5　多分支結構（switch語句） 51

【任務實踐3-5】判斷今天是星期幾—

switch語句 53

任務3.3　使用循環結構 53

3.3.1　while循環語句 54

【任務實踐3-6】累加正整數序列—while

循環 54

3.3.2　do…while循環語句 55

【任務實踐3-7】查找第 一個能被5整除的

三位數—do…while循環 55

【素養進階】循環與堅持的力量 56

3.3.3　for循環語句 56

【任務實踐3-8】計算1～100自然數的累加和—for循環 56

【能力提升】其他for循環語句 57

3.3.4　循環語句的嵌套 57

【任務實踐3-9】輸出直角三角形圖案—

循環嵌套語句 57

任務3.4　探究跳轉語句 58

【任務實踐3-10】正數累加—continue和

break語句的應用 58

項目分析 60

項目實施 60

項目實訓—加法答題小遊戲 61

項目小結 63

鞏固練習 63

項目4

計算個人所得稅—JavaScript

函數 64

情境導入 64

學習目標 65

知識儲備 65

任務4.1　認識函數 65

【任務實踐4-1】展示個人信息—函數的

使用 65

任務4.2　使用預定義函數 66

4.2.1　消息對話框函數 66

【任務實踐4-2】新學期寄語—警示

對話框 67

【任務實踐4-3】服務協議確認—確認

對話框 67

【任務實踐4-4】詩詞接力—提示

對話框 68

4.2.2　數值處理函數 69

【任務實踐4-5】數據有效性驗證—

isNaN()和isFinite()函數的使用 69

【任務實踐4-6】數據格式化—parseFloat()

和parseInt()函數的使用 70

4.2.3　字符串處理函數 71

【任務實踐4-7】計算數學表達式—

eval()函數 72

任務4.3　使用自定義函數 72

4.3.1　聲明自定義函數 73

【任務實踐4-8】計算商品總價—函數

定義 73

4.3.2　調用自定義函數 74

【任務實踐4-9】計算商品總價—直接使用函數名調用函數 74

【任務實踐4-10】計算商品總價—通過

超鏈接調用函數 75

4.3.3　函數的參數和返回值 75

【任務實踐4-11】計算任意商品總價—

有參函數 76

【任務實踐4-12】計算兩個成績的平均值—

return語句的簡單應用 77

4.3.4　變量的作用域（函數/

塊級） 77

【任務實踐4-13】輸出變量的值—變量的

作用域 78

4.3.5　函數的嵌套 79

【任務實踐4-14】計算累加和—函數嵌套

的應用 79

任務4.4　運用函數進階 80

4.4.1　函數表達式 80

4.4.2　匿名函數 80

4.4.3　箭頭函數 81

【任務實踐4-15】繪制星號三角形圖案—

箭頭函數 82

【能力提升】閉包函數 83

項目分析 83

項目實施 83

項目實訓—簡易計算器 85

項目小結 85

鞏固練習 86

項目5

畢業倒計時—JavaScript對象 87

情境導入 87

學習目標 87

知識儲備 88

任務5.1　認識對象 88

5.1.1　認識面向過程和面向對象 88

【任務實踐5-1】模擬用洗衣機洗衣服的

過程—面向過程 88

【任務實踐5-2】模擬用洗衣機洗衣服的

過程—面向對象 89

5.1.2　面向過程和面向對象的

對比 90

5.1.3　面向對象的核心概念 90

5.1.4　面向對象的特征 91

5.1.5　JavaScript的對象 91

任務5.2　使用內置對象 92

5.2.1　Object構造函數與原型

對象 92

5.2.2　Date對象 93

【任務實踐5-3】以用戶友好的方式顯示當前

日期—Date對象方法 95

【任務實踐5-4】計算已經度過的時光並給出

溫馨寄語—getTime()方法 96

5.2.3　String對象 96

【任務實踐5-5】提取數字—charAt()

方法 99

【任務實踐5-6】反轉短句並轉換為大寫形式

輸出—toUpperCase()方法 101

【能力提升】startsWith()、endsWith()、

includes()方法的進階用法 104

5.2.4　Array對象 104

【任務實踐5-7】輸出今天是星期幾—

Array對象 105

【能力提升】使用解構賦值為數組元素

賦值 106

【任務實踐5-8】輸出十二生肖—for

循環 107

【任務實踐5-9】輸出十二生肖—for…in

循環 108

【任務實踐5-10】合並學習小組—concat()

方法 109

【任務實踐5-11】成績升序排列—sort()

方法 110

5.2.5　Math對象 111

【任務實踐5-12】計算圓的面積—Math

對象屬性 111

【任務實踐5-13】求圓周率的4次方—

Math.round()方法 112

【任務實踐5-14】模擬抽獎—

Math.random()方法 113

5.2.6　Number對象 114

【任務實踐5-15】探索JavaScript能處理的數值範圍—利用Number對象 114

任務5.3　使用自定義對象 115

5.3.1　使用Object()構造函數創建

對象 115

【任務實踐5-16】創建學生對象—Object()

構造函數 115

5.3.2　使用字面量創建對象 116

【任務實踐5-17】創建學生對象—

字面量 116

5.3.3　使用構造函數創建對象 117

【任務實踐5-18】創建學生對象—構造

函數 118

【能力提升】ES6的類語法 119

5.3.4　使用Function對象定義

方法 120

【任務實踐5-19】創建方法—顯式創建

Function對象 120

【任務實踐5-20】創建方法—隱式創建

Function對象 121

5.3.5　使用原型對象定義方法 121

【任務實踐5-21】添加共享方法—原型

對象 121

【能力提升】原型方法的動態性 122

5.3.6　使用for…in循環訪問對象的

屬性 122

【任務實踐5-22】遍歷對象的屬性—

for…in循環 123

5.3.7　原型鏈與繼承機制 124

【任務實踐5-23】Student類繼承自Person

類—繼承 124

項目分析 126

項目實施 126

項目實訓—模擬隨機選人 127

項目小結 128

鞏固練習 129

AI助學—對象方法快速查詢 129

項目6

商品放大鏡—DOM對象 130

情境導入 130

學習目標 130

知識儲備 131

任務6.1　探究DOM對象 131

6.1.1　DOM概述 131

6.1.2　核心DOM概覽 131

【任務實踐6-1】枚舉節點對象—核心

DOM對象 132

6.1.3　文檔對象 132

任務6.2　認識HTML DOM 132

6.2.1　DOM樹 133

6.2.2　HTML DOM節點類型 133

【任務實踐6-2】查看節點類型—HTML

DOM節點類型 134

6.2.3　HTML DOM對象的分類 134

任務6.3　操作元素 136

6.3.1　獲取HTML文檔元素 136

【任務實踐6-3】創建簡單時鐘—獲取

DOM元素 137

6.3.2　獲取元素集合 138

【任務實踐6-4】統計頁面標簽名—DOM

元素集合 138

【任務實踐6-5】購物車商品全選功能—

獲取元素集合 139

【能力提升】循環遍歷 140

6.3.3　改變元素樣式 141

【任務實踐6-6】新聞列表隔行換色—設置

元素樣式 141

【能力提升】高效修改多個元素的樣式 142

6.3.4　改變元素內容 143

【任務實踐6-7】顯示當前日期和時間—

改變元素內容 143

6.3.5　改變元素位置和尺寸 144

【任務實踐6-8】實現商品放大鏡移動

效果—offset系列屬性 145

任務6.4　操作DOM節點 147

6.4.1　節點關系 147

6.4.2　創建和添加DOM節點 150

【任務實踐6-9】列表元素移動—移動

節點 151

6.4.3　復制和替換DOM節點 152

【任務實踐6-10】復制表單對象—復制

節點 152

【任務實踐6-11】替換列表內容—替換

節點 153

6.4.4　刪除DOM節點 154

【任務實踐6-12】優化頁面布局—刪除

特定節點 154

項目分析 155

項目實施 156

項目實訓—全國人口普查數據的折疊

菜單 158

項目小結 159

鞏固練習 159

項目7

故宮輪播圖—BOM對象 161

情境導入 161

學習目標 161

知識儲備 162

任務7.1　認識BOM對象 162

7.1.1　BOM對象概述 162

7.1.2　Window對象詳解 162

【任務實踐7-1】實時更新的時鐘—

定時器 165

【任務實踐7-2】打開/關閉新窗口—open()/

close()方法 166

【任務實踐7-3】動態調整窗口大小—

resizeTo()和resizeBy()方法 168

【任務實踐7-4】靈活改變窗口位置—

moveTo()和moveBy()方法 170

任務7.2　使用Screen對象 171

【任務實踐7-5】顯示當前屏幕的信息—

Screen對象 172

【能力提升】Screen對象的應用 173

任務7.3　使用Navigator對象 173

【任務實踐7-6】顯示當前瀏覽器和操作系統

信息—Navigator對象 173

任務7.4　使用Location對象 174

【任務實踐7-7】登錄成功，自動跳轉—

Location對象 175

任務7.5　使用History對象 176

【任務實踐7-8】頁面“前進”和“後退”—

History對象 176

項目分析 177

項目實施 178

【能力提升】輪播圖的Swiper插件 180

項目實訓—火箭發射動畫 181

項目小結 181

鞏固練習 182

項目8

滑塊驗證碼—事件和事件處理 184

情境導入 184

學習目標 184

知識儲備 185

任務8.1　認識事件 185

8.1.1　事件的基本概念 185

8.1.2　事件處理 186

【任務實踐8-1】天幹地支—行內綁定 189

【任務實踐8-2】天幹地支—動態處理 190

【任務實踐8-3】天幹地支—事件監聽 191

【能力提升】事件委托 192

任務8.2　認識Event對象 192

8.2.1　Event對象 192

【任務實踐8-4】顯示觸發事件類型—

Event對象 192

8.2.2　Event對象的常用屬性和

方法 193

【任務實踐8-5】探索事件坐標—Event

對象的屬性 193

任務8.3　鍵盤事件 194

8.3.1　鍵盤事件類型 194

8.3.2　處理鍵盤事件 195

【任務實踐8-6】使用鍵盤控制圖片移動—

處理字符鍵 196

【任務實踐8-7】使用方向鍵改變圖片大小—

處理非字符鍵 198

【任務實踐8-8】取消Ctrl+A組合鍵的全選

功能—處理組合鍵 199

任務8.4　鼠標事件 200

8.4.1　鼠標事件類型 200

【任務實踐8-9】鼠標指針進入/離開切換

圖片—鼠標事件 201

8.4.2　處理鼠標事件 202

【任務實踐8-10】識別被按下的鼠標按鍵—

Event對象的button屬性 202

【任務實踐8-11】雪花圖片跟隨鼠標指針移

動的效果—鼠標事件的坐標屬性 203

任務8.5　頁面事件 204

8.5.1　頁面加載事件 205

【任務實踐8-12】頁面加載時調整圖片

大小—DOMContentLoaded

事件 205

8.5.2　resize事件 206

【任務實踐8-13】改變瀏覽器窗口大小時

彈出提示—resize事件 206

任務8.6　文本編輯事件 207

【任務實踐8-14】禁止密碼框中的復制、剪切

和粘貼操作—文本編輯事件 207

任務8.7　表單事件 209

8.7.1　表單和表單元素 209

【任務實踐8-15】創建會員註冊頁面—

表單元素 212

8.7.2　訪問表單和表單元素 213

【任務實踐8-16】隨機生成指定位數的

驗證碼—訪問表單元素 215

8.7.3　操作表單對象 216

【任務實踐8-17】驗證表單合法性—

表單驗證 219

項目分析 220

項目實施 220

項目實訓—選項卡切換 223

項目小結 224

鞏固練習 224

AI助學—AI輔助排障與優化指南 225

項目9

異步獲取學生信息—Ajax+Node.js

技術 226

情境導入 226

學習目標 226

知識儲備 227

任務9.1　認識Ajax 227

9.1.1　創建XMLHttpRequest

對象 227

9.1.2　XMLHttpRequest對象的

常用屬性 227

9.1.3　XMLHttpRequest對象的

常用方法 228

9.1.4　發送Ajax請求 228

【任務實踐9-1】讀取文本文件內容—

Ajax異步獲取文件 229

【能力提升】jQuery實現Ajax 230

任務9.2　Ajax處理數據 231

9.2.1　Ajax處理文本數據 231

【任務實踐9-2】讀取HTML文件—

Ajax處理文本數據 231

9.2.2　Ajax處理XML格式數據 232

【任務實踐9-3】讀取學生信息—通過

Ajax異步獲取XML格式數據 233

9.2.3　Ajax處理JSON格式

數據 234

【任務實踐9-4】讀取信息—通過Ajax

異步獲取JSON格式數據 234

任務9.3　構建Node.js服務器環境 236

9.3.1　搭建Node.js開發環境 236

9.3.2　Node.js模塊 237

9.3.3　Node.js項目依賴管理 241

9.3.4　Node.js服務器開發 243

9.3.5　Express框架 246

9.3.6　Express中間件 247

9.3.7　Express模塊化路由 250

9.3.8　使用Express接收請求

參數 252

任務9.4　Ajax與Node.js服務器數據

交互 255

9.4.1　獲取服務器的響應 255

9.4.2　傳遞請求參數 256

項目分析 259

項目實施 260

項目實訓—實時天氣查詢 262

項目小結 262

鞏固練習 263

項目10

綜合項目—學生成績查詢 264

情境導入 264

學習目標 264

知識儲備 264

任務　使用Node.js操作數據庫 265

項目分析 267

項目實施 267

項目小結 270