JavaScript前端開發(fā)程序設(shè)計項目式教程（微課版 第2版）

項目1
抽獎頁面——初識JavaScript　　1
情境導(dǎo)入　　1
項目目標(biāo)（含思政元素）　　1
知識儲備　　2
任務(wù)1．1 認(rèn)識JavaScript 　　2
1．1．1 JavaScript的發(fā)展概況和特點　　2
1．1．2 JavaScript的應(yīng)用場景　　4
【任務(wù)實踐1-1】簡單JavaScript——認(rèn)識JavaScript　　5
任務(wù)1．2 開啟JavaScript編程　　6
1．2．1 支持JavaScript的瀏覽器　　6
1．2．2 代碼編輯器　　6
1．2．3 JavaScript在HTML中的應(yīng)用　　6
【任務(wù)實踐1-2】希望你可以努力成為自己想要的樣子——內(nèi)嵌式　　7
1．2．4 JavaScript常用的輸入輸出方式　　9
【任務(wù)實踐1-3】歡迎學(xué)習(xí)JavaScript——簡單輸入輸出　　10
1．2．5 JavaScript的注釋　　10
項目分析　　11
項目實施　　11
項目實訓(xùn)——輸出個人信息　　13
小結(jié)　　14
拓展閱讀——阿特伍德定律　　14
習(xí)題　　14
項目2
體脂率計算器——JavaScript程序設(shè)計基礎(chǔ)　　15
情境導(dǎo)入　　15
項目目標(biāo)（含思政元素）　　16
知識儲備　　16
任務(wù)2．1 使用變量　　16
2．1．1 標(biāo)識符　　16
2．1．2 關(guān)鍵字和保留字　　16
2．1．3 變量的命名　　17
2．1．4 變量的聲明和賦值　　18
【任務(wù)實踐2-1】求圓的周長——var和const　　19
2．1．5 變量的類型　　20
【任務(wù)實踐2-2】輸出課程成績——變量聲明和變量賦值　　20
2．1．6 變量的作用域　　21
任務(wù)2．2 認(rèn)識數(shù)據(jù)類型　　21
2．2．1 數(shù)據(jù)類型分類　　21
2．2．2 基本數(shù)據(jù)類型　　21
2．2．3 引用數(shù)據(jù)類型　　22
2．2．4 特殊數(shù)據(jù)類型　　22
2．2．5 數(shù)據(jù)類型判斷　　24
【任務(wù)實踐2-3】測試變量類型——
typeof　　24
2．2．6 數(shù)據(jù)類型轉(zhuǎn)換　　25
任務(wù)2．3 使用運算符　　26
2．3．1 算術(shù)運算符　　27
【任務(wù)實踐2-4】計算賬單金額——
算術(shù)運算符　　27
2．3．2 關(guān)系運算符　　28
【任務(wù)實踐2-5】比較兩個數(shù)的大小——
關(guān)系運算符　　28
2．3．3 賦值運算符　　29
【任務(wù)實踐2-6】變量賦值——
賦值運算符　　30
2．3．4 邏輯運算符　　31
【任務(wù)實踐2-7】判斷某年是否為閏年——邏輯運算符　　31
2．3．5 條件運算符　　32
【任務(wù)實踐2-8】判斷是否成年——
條件運算符　　32
2．3．6 位操作運算符　　32
【任務(wù)實踐2-9】交換兩個變量的值——
位操作運算符　　33
2．3．7 運算符優(yōu)先級　　34
任務(wù)2．4 認(rèn)識表達式　　34
【任務(wù)實踐2-10】人民幣和美元換算——
表達式　　34
項目分析　　35
項目實施　　35
項目實訓(xùn)——驗證用戶輸入的密碼　　35
小結(jié)　　36
擴展閱讀——symbol類型　　36
習(xí)題　　37
項目3
猜數(shù)字游戲——JavaScript流程
控制　　39
情境導(dǎo)入　　39
項目目標(biāo)（含思政元素）　　40
知識儲備　　40
任務(wù)3．1 認(rèn)識流程控制　　40
【任務(wù)實踐3-1】顯示個人信息——
順序結(jié)構(gòu)　　40
任務(wù)3．2 使用分支結(jié)構(gòu)　　41
3．2．1 單分支結(jié)構(gòu)（if語句）　　41
3．2．2 雙分支結(jié)構(gòu)（if…else語句）　　42
【任務(wù)實踐3-2】判斷最大值——雙分支
語句　　42
3．2．3 分支結(jié)構(gòu)（if…else語句）嵌套　　43
【任務(wù)實踐3-3】評定成績等級——分支
結(jié)構(gòu)嵌套　　44
3．2．4 多分支結(jié)構(gòu)（if…else if…else
語句）　　45
【任務(wù)實踐3-4】分時問候——多分支
結(jié)構(gòu)　　47
3．2．5 多分支結(jié)構(gòu)（switch語句）　　48
【任務(wù)實踐3-5】判斷今天是星期幾——switch語句　　50
任務(wù)3．3 使用循環(huán)結(jié)構(gòu)　　51
3．3．1 while循環(huán)語句　　51
【任務(wù)實踐3-6】求1到100的奇數(shù)累加和
——while循環(huán)　　52
3．3．2 do…while循環(huán)語句　　53
【任務(wù)實踐3-7】求1到100的偶數(shù)累加和——do…while循環(huán)　　53
3．3．3 for循環(huán)語句　　54
【任務(wù)實踐3-8】求1到100的累加和——for循環(huán)　　54
3．3．4 循環(huán)語句嵌套　　55
【任務(wù)實踐3-9】輸出直角三角形圖案——循環(huán)嵌套語句　　55
3．3．5 break和continue語句　　56
【任務(wù)實踐3-10】數(shù)值累加——continue和break　　56
項目分析　　57
項目實施　　58
項目實訓(xùn)——答題小游戲　　59
小結(jié)　　60
擴展閱讀——其他for循環(huán)語句　　60
習(xí)題　　61
項目4
計算個人所得稅——JavaScript
函數(shù)　　62
情境導(dǎo)入　　62
項目目標(biāo)（含思政元素）　　63
知識儲備　　63
任務(wù)4．1 認(rèn)識函數(shù)　　63
【任務(wù)實踐4-1】輸出個人信息——函數(shù)的
應(yīng)用　　63
任務(wù)4．2 使用預(yù)定義函數(shù)　　64
4．2．1 消息對話框函數(shù)　　64
【任務(wù)實踐4-2】新學(xué)期寄語——警示
對話框　　65
【任務(wù)實踐4-3】確定詩句作者——確認(rèn)
對話框　　65
【任務(wù)實踐4-4】詩詞對答——提示
對話框　　66
4．2．2 數(shù)值處理函數(shù)　　67
【任務(wù)實踐4-5】判斷數(shù)據(jù)是否為數(shù)字——
isNaN()函數(shù)　　68
【任務(wù)實踐4-6】格式化數(shù)據(jù)——
parseFloat()和parseInt()函數(shù)　　68
4．2．3 字符串處理函數(shù)　　69
【任務(wù)實踐4-7】計算表達式的值——
eval()函數(shù)　　70
任務(wù)4．3 使用自定義函數(shù)　　70
4．3．1 聲明自定義函數(shù)　　71
【任務(wù)實踐4-8】計算商品總價——函數(shù)
定義　　71
4．3．2 調(diào)用自定義函數(shù)　　72
【任務(wù)實踐4-9】計算商品總價——使用
函數(shù)名調(diào)用函數(shù)　　72
【任務(wù)實踐4-10】計算商品總價——使用
超鏈接調(diào)用函數(shù)　　73
4．3．3 函數(shù)的參數(shù)和返回值　　74
【任務(wù)實踐4-11】計算任意商品總價——
有參函數(shù)　　74
【任務(wù)實踐4-12】求兩個數(shù)的最大數(shù)——
return語句　　75
4．3．4 函數(shù)變量的作用域　　77
【任務(wù)實踐4-13】輸出變量的值——變量
的作用域　　77
4．3．5 函數(shù)的嵌套　　78
【任務(wù)實踐4-14】求1+（1+2）+（1+2+3）+…+（1+2+…+n）的值——函數(shù)嵌套
78
任務(wù)4．4 運用函數(shù)進階　　79
4．4．1 函數(shù)表達式　　79
4．4．2 匿名函數(shù)　　80
4．4．3 箭頭函數(shù)　　80
【任務(wù)實踐4-15】使用箭頭函數(shù)實現(xiàn)不同
層數(shù)的三角形圖案——箭頭函數(shù)
81
項目分析　　82
項目實施　　82
項目實訓(xùn)——簡易計算器　　83
小結(jié)　　84
擴展閱讀——Java Script中的閉包函數(shù)
84
習(xí)題　　85
項目5
畢業(yè)倒計時——JavaScript對象
87
情境導(dǎo)入　　87
項目目標(biāo)（含思政元素）　　87
知識儲備　　88
任務(wù)5．1 認(rèn)識對象　　88
5．1．1 認(rèn)識面向過程與面向?qū)ο蟆　?8
【任務(wù)實踐5-1】模擬洗衣機洗衣服——
面向過程　　88
【任務(wù)實踐5-2】模擬洗衣機洗衣服——
面向?qū)ο蟆　?9
5．1．2 對象的基本概念　　90
5．1．3 JavaScript的對象框架　　92
任務(wù)5．2 使用內(nèi)置對象　　92
5．2．1 Object對象類　　93
5．2．2 Date對象類　　93
【任務(wù)實踐5-3】顯示指定格式日期——
Date對象方法　　95
【任務(wù)實踐5-4】計算已經(jīng)度過的時光——getTime()方法　　96
5．2．3 String對象類　　97
【任務(wù)實踐5-5】提取數(shù)字——charAt()
方法　　99
【任務(wù)實踐5-6】將字符串反向并轉(zhuǎn)換為大寫
形式——toUpperCase()方法　　102
5．2．4 Array對象類　　105
【任務(wù)實踐5-7】輸出今天是星期幾——
Array對象　　107
【任務(wù)實踐5-8】輸出十二生肖——
for循環(huán)　　109
【任務(wù)實踐5-9】輸出十二生肖——
for…in語句　　110
【任務(wù)實踐5-10】數(shù)組連接——concat()
方法　　111
【任務(wù)實踐5-11】數(shù)組元素升序排序——sort()方法　　113
5．2．5 Math對象類　　114
【任務(wù)實踐5-12】計算圓的面積——Math對象屬性　　114
【任務(wù)實踐5-13】求圓周率的4次方——Math．round()方法　　115
【任務(wù)實踐5-14】模擬抽獎過程——Math．random()方法　　116
5．2．6 Number對象類　　117
【任務(wù)實踐5-15】輸出JavaScript能夠處理的數(shù)值區(qū)間——Number對象　　117
任務(wù)5．3 使用自定義對象　　118
5．3．1 通過Object對象創(chuàng)建對象　　118
【任務(wù)實踐5-16】創(chuàng)建對象——Object
對象類　　119
5．3．2 通過字面量對象創(chuàng)建對象　　119
【任務(wù)實踐5-17】創(chuàng)建對象——字面量
對象　　119
5．3．3 通過構(gòu)造函數(shù)創(chuàng)建對象　　120
【任務(wù)實踐5-18】創(chuàng)建對象——構(gòu)造函數(shù)
123
5．3．4 通過Function對象定義方法　　124
【任務(wù)實踐5-19】創(chuàng)建方法——顯示創(chuàng)建Function對象　　125
【任務(wù)實踐5-20】創(chuàng)建方法——隱式創(chuàng)建Function對象　　126
5．3．5 通過原型對象定義方法　　126
【任務(wù)實踐5-21】訪問共享方法——原型
對象　　126
5．3．6 通過for…in語句訪問對象的屬性
127
【任務(wù)實踐5-22】遍歷對象的屬性——
for…in語句　　127
5．3．7 通過with語句訪問對象的屬性
和方法　　128
【任務(wù)實踐5-23】輸出當(dāng)前日期——with
語句　　129
5．3．8 繼承　　129
【任務(wù)實踐5-24】子類擁有父類的屬性和
方法——繼承　　130
項目分析　　131
項目實施　　131
項目實訓(xùn)——模擬隨機選人　　133
小結(jié)　　133
擴展閱讀——ES6新增面向?qū)ο蟆　?34
習(xí)題　　134
項目6
商品放大鏡——DOM對象　　136
情境導(dǎo)入　　136
項目目標(biāo)（含思政元素）　　137
知識儲備　　137
任務(wù)6．1 認(rèn)識DOM對象　　137
6．1．1 DOM概述　　137
6．1．2 核心DOM　　137
【任務(wù)實踐6-1】枚舉Node對象——
核心DOM對象　　138
6．1．3 Document對象　　139
任務(wù)6．2 認(rèn)識HTML DOM　　139
6．2．1 DOM樹　　139
6．2．2 HTML DOM節(jié)點類型　　140
【任務(wù)實踐6-2】節(jié)點類型——HTML
DOM節(jié)點類型　　140
6．2．3 HTML DOM對象分類　　141
任務(wù)6．3 操作元素　　142
6．3．1 獲取HTML文檔元素　　142
【任務(wù)實踐6-3】顯示實時時間——document．getElementById()
方法　　143
6．3．2 獲取元素的集合對象　　145
【任務(wù)實踐6-4】顯示文檔的所有標(biāo)簽——DOM集合對象　　145
【任務(wù)實踐6-5】全選購物車商品——document．querySelectorAll()
方法　　147
6．3．3 改變元素樣式　　147
【任務(wù)實踐6-6】隔行換色——設(shè)置元素
樣式　　148
6．3．4 改變元素內(nèi)容　　149
【任務(wù)實踐6-7】顯示當(dāng)前日期和時間——innerHTML、innerText和textContent　　150
6．3．5 改變元素位置和大小　　151
【任務(wù)實踐6-8】商品放大鏡的移動——offset系列屬性　　152
任務(wù)6．4 操作節(jié)點　　154
6．4．1 節(jié)點關(guān)系　　154
6．4．2 創(chuàng)建和添加節(jié)點　　158
【任務(wù)實踐6-9】列表移動——移動節(jié)點
159
6．4．3 復(fù)制和替換節(jié)點　　160
【任務(wù)實踐6-10】復(fù)制表單——復(fù)制節(jié)點
160
【任務(wù)實踐6-11】替換內(nèi)容——替換節(jié)點
162
6．4．4 刪除節(jié)點　　163
【任務(wù)實踐6-12】刪除水平線——刪除節(jié)點　　163
項目分析　　164
項目實施　　165
項目實訓(xùn)——各地人口數(shù)據(jù)的折疊菜單
167
小結(jié)　　168
擴展閱讀——循環(huán)遍歷　　168
習(xí)題　　169
項目7
故宮輪播圖——BOM對象　　170
情境導(dǎo)入　　170
項目目標(biāo)（含思政元素）　　171
知識儲備　　171
任務(wù)7．1 認(rèn)識BOM　　171
【任務(wù)實踐7-1】實時變化的時鐘——
定時器　　174
【任務(wù)實踐7-2】打開/關(guān)閉新窗口——
open()方法　　176
【任務(wù)實踐7-3】改變窗口大小——resizeTo ()和resizeBy()方法　　177
【任務(wù)實踐7-4】改變窗口位置——moveTo()和moveBy()方法　　179
任務(wù)7．2 使用Screen對象　　181
【任務(wù)實踐7-5】顯示當(dāng)前屏幕分辨率和
可用區(qū)域——Screen對象　　181
任務(wù)7．3 使用Navigator對象　　182
【任務(wù)實踐7-6】顯示當(dāng)前瀏覽器和操作
系統(tǒng)信息——Navigator對象　　182
【任務(wù)實踐7-7】顯示當(dāng)前窗口占據(jù)顯示器的區(qū)域大小——Navigator對象　　183
任務(wù)7．4 使用Location對象　　184
【任務(wù)實踐7-8】登錄成功，自動跳轉(zhuǎn)——Location對象　　185
任務(wù)7．5 使用History對象　　186
【任務(wù)實踐7-9】頁面“前進”和“后退”——History對象　　187
任務(wù)7．6 使用Document對象　　188
【任務(wù)實踐7-10】顯示瀏覽某頁面的
時間——Document對象　　188
項目分析　　190
項目實施　　190
項目實訓(xùn)——北斗三號發(fā)射動畫　　192
小結(jié)　　193
擴展閱讀——輪播圖的Swiper插件
193
習(xí)題　　194
項目8
滑塊驗證碼——事件和事件處理
196
情境導(dǎo)入　　196
項目目標(biāo)（含思政元素）　　196
知識儲備　　197
任務(wù)8．1 認(rèn)識事件　　197
8．1．1 事件的基本概念　　197
8．1．2 事件處理　　198
【任務(wù)實踐8-1】天干地支——行內(nèi)綁定
200
【任務(wù)實踐8-2】天干地支——動態(tài)綁定
202
【任務(wù)實踐8-3】天干地支——事件監(jiān)聽
203
任務(wù)8．2 認(rèn)識事件對象　　204
8．2．1 Event對象　　205
【任務(wù)實踐8-4】顯示觸發(fā)事件——Event對象　　205
8．2．2 Event對象常用屬性和方法　　206
【任務(wù)實踐8-5】顯示觸發(fā)事件名稱——Event對象的屬性　　206
任務(wù)8．3 處理鍵盤事件　　207
8．3．1 鍵盤事件　　207
8．3．2 處理鍵盤事件　　207
【任務(wù)實踐8-6】按鍵以上、下、左、右
移動圖片——處理字符鍵　　210
【任務(wù)實踐8-7】使用方向鍵改變圖片
大小——處理非字符鍵　　212
【任務(wù)實踐8-8】取消組合鍵的全選功能
——處理組合鍵　　213
任務(wù)8．4 處理鼠標(biāo)事件　　214
8．4．1 鼠標(biāo)事件　　215
【任務(wù)實踐8-9】鼠標(biāo)指針滑過顯示不同
圖形——鼠標(biāo)指針移入和移出　　215
8．4．2 處理鼠標(biāo)事件　　216
【任務(wù)實踐8-10】判斷鼠標(biāo)按鍵——Event對象的button屬性　　216
【任務(wù)實踐8-11】跟隨鼠標(biāo)移動的雪花
——鼠標(biāo)事件的位置屬性　　217
任務(wù)8．5 處理頁面事件　　218
8．5．1 頁面加載　　219
【任務(wù)實踐8-12】網(wǎng)頁加載時縮小圖片——onload事件　　220
8．5．2 頁面大小事件　　221
【任務(wù)實踐8-13】改變?yōu)g覽器大小時彈出
提示——onresize事件　　221
任務(wù)8．6 處理文本編輯事件　　222
【任務(wù)實踐8-14】禁止使用復(fù)制、粘貼
方式輸入密碼——復(fù)制、剪切和
粘貼操作　　222
任務(wù)8．7 處理表單事件　　223
8．7．1 表單和表單對象　　224
【任務(wù)實踐8-15】會員注冊表單——
表單元素　　226
8．7．2 訪問表單和表單元素　　227
【任務(wù)實踐8-16】隨機生成指定位數(shù)的
驗證碼——訪問表單元素　　230
8．7．3 操作表單對象　　232
【任務(wù)實踐8-17】驗證表單合法性——
表單驗證　　236
項目分析　　237
項目實施　　238
項目實訓(xùn)——選項卡切換　　241
小結(jié)　　241
擴展閱讀——事件流　　242
習(xí)題　　242
項目9
異步獲取用戶信息——AJAX技術(shù)
244
情境導(dǎo)入　　244
項目目標(biāo)（含思政元素）　　244
知識儲備　　245
任務(wù)9．1 認(rèn)識AJAX　　245
9．1．1 XMLHttpRequest對象　　245
9．1．2 XMLHttpRequest對象的常用
屬性　　246
9．1．3 XMLHttpRequest對象的常用
方法　　246
9．1．4 AJAX請求　　247
【任務(wù)實踐9-1】讀取文本文件信息——AJAX異步獲取文件　　248
任務(wù)9．2 AJAX處理數(shù)據(jù)　　249
9．2．1 AJAX處理文本數(shù)據(jù)　　250
【任務(wù)實踐9-2】讀取“健走的好處”頁面——AJAX異步獲取HTML文件　　250
9．2．2 AJAX處理XML數(shù)據(jù)　　251
【任務(wù)實踐9-3】讀取學(xué)生信息——AJAX異步獲取XML數(shù)據(jù)　　252
9．2．3 AJAX處理JSON數(shù)據(jù)　　253
【任務(wù)實踐9-4】讀取信息——AJAX異步獲取JSON文件數(shù)據(jù)　　254
任務(wù)9．3 AJAX與服務(wù)器數(shù)據(jù)交互　　255
9．3．1 與PHP服務(wù)器交互　　255
【任務(wù)實踐9-5】驗證表單用戶名（一）
——AJAX訪問PHP服務(wù)器　　258
9．3．2 與Java服務(wù)器交互　　260
【任務(wù)實踐9-6】驗證表單用戶名（二）
——AJAX訪問Java后臺服務(wù)器　　263
項目分析　　265
項目實施　　266
項目實訓(xùn)——獲取宿舍學(xué)生信息　　268
小結(jié)　　269
擴展閱讀——jQuery 實現(xiàn)AJAX　　269
習(xí)題　　270
項目10
綜合項目——學(xué)生成績查詢　　271
情境導(dǎo)入　　271
項目目標(biāo)（含思政元素）　　271
項目分析　　272
項目實施　　272
小結(jié)　　280