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

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