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

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