JavaScript移動開發項目教程（微課版）

鄭麗萍

事多年教科研工作，主持品牌專業子項目《JavaScript及框架應用》在線課程及項目化課程建設；
主持建設谷歌高職地方院校課程教改項目《JavaScript移動開發》；
省級大學生創新項目指導教師；2017年江蘇省高等學校微課教學比賽二等獎。
主編新形態一體化教材《JavaScript與jQuery案例教程》。

單元1 JAVASCRIPT速覽 1
項目導入　1
職業能力目標和要求　1
項目描述：實現名詞解析　2
知識準備　2
1.1　JavaScript簡述　2
1.1.1　JavaScript概要　2
1.1.2　JavaScript的主要特點　3
1.1.3　JavaScript相關應用　4
1.2　JavaScript 編程起步　5
1.2.1選擇JavaScript腳本編輯器　5
1.2.2常用的引入JavaScript腳本的方式　7
1.2.3與用戶的交流方式　10
1.2.4　meta視口標簽　13
1.2.5程序的調試　14
1.2.6頁面結構、表現和行為　18
1.2.7註釋語句　19
項目實施　20
任務1.　項目分析　20
任務2.　創建HTML文件　20
任務3.　創建CSS文件，添加樣式　21
任務4.　動態效果的實現　22
單元小結　22
課後訓練　23
【理論測試】　23
【實訓內容】　24

單元　2 JAVASCRIPT語言基礎　25
項目導入　25
職業能力目標和要求　25
項目描述：實現猜數字游戲　25
知識準備　27
2.1數據類型　27
2.1.1數字型　27
2.1.2字符串型　28
2.1.3數據類型的隱式轉換　30
2.1.4布爾型　30
2.1.5特殊數據類型　31
2.1.6數據類型的顯式轉換　33
2.2　運算符與表達式　35
2.2.1表達式　35
2.2.2運算符　35
2.3變量　41
2.3.1關鍵字　41
2.3.2變量的定義與命名　41
2.3.3變量的聲明與賦值　42
2.4函數　43
2.4.1自定義函數的定義與調用　43
2.4.2帶有返回值的函數　45
2.4.3變量的作用域　47
2.5基本語句　48
2.5.1流程控制語句　48
2.5.2異常處理語句　49
項目實施　49
任務1.　項目分析　49
任務2.　創建HTML文件　49
任務3.　添加樣式　49
任務4.　動態效果的實現　49
任務5.　功能拓展　49
單元小結　49
課後訓練　49
【理論測試】　49
【實訓內容】　49

單元3　常用內置對象　61
項目導入　61
職業能力目標和要求　61
項目3-1描述：實現中國體育彩票11選5，數字跳動展示效果　62
知識準備　62
3.1數組(ARRAY)對象　62
3.1.1新建數組　62
3.1.2動態數組　63
3.1.3數組對象的常用屬性與方法　63
3.1.4二維數組　67
3.2數學(MATH)對象　69
3.2.1使用數學對象　70
3.2.2數學對象的屬性與方法　70
3.2.3數字的格式化與產生隨機數　70
3.2.4定時器函數　70
3.2.5數學對象應用案例　70
項目3-1實施　70
任務1.　項目分析　70
任務2.　頁面佈局的實現　70
任務3.　添加樣式　70
任務4.　動態效果的實現　70
任務5.　程序流程分析　70
任務6.　完整代碼展示　70
項目3-2描述：實現猜數字游戲“再來一局”功能和計時展示　70
知識準備　70
3.3日期(DATE)對象　70
3.3.1新建日期　70
3.3.2日期對象的常用屬性與方法　70
3.3.3　動態改變元素樣式　70
項目3-2實施　70
任務1.　項目分析　70
任務2.　猜數字游戲“再來一局”功能實現　70
任務3.　猜數字游戲計時功能實現　70
項目3-3描述：實現註冊表單的驗證功能　70
知識準備　70
3.4字符串(STRING)對象　70
3.4.1使用字符串對象　70
3.4.2字符串對象的屬性與方法　70
3.4.3字符串對象應用案例　70
3.5　JAVASCRIPT正則表達式　70
3.5.1正則表達式的作用　70
3.5.2創建正則表達式　70
3.5.3正則表達式對象的方法　70
3.5.4　正則表達式中常用符號　70
3.5.5表單應用　70
項目3-3實施　70
任務1.　項目分析　70
任務2.　input控件常用正則驗證規則分析　70
任務3.用戶註冊的功能實現　70
單元小結　70
課後訓練　70
【理論測試】　70
【實訓內容】　70

單元4　DOM編程與本地存儲　105
項目導入　105
職業能力目標和要求　105
項目描述：JavaScript實現猜數字游戲“歷史戰績”展示　106
知識準備　106
4.1訪問HTMLDOM對象　106
4.1.1獲取元素對象的一般方法　108
4.1.2元素的innerText、innerHTML、outerHTML、outerText　109
4.1.3修改DOM　110
4.1.4導航節點關系　112
4.1.5　DOM優化　114
4.1.6　DOM事件　114
4.2DOM擴展　114
4.2.1　querySelector()與querySelectorAll()　114
4.2.2　元素的遍歷　114
4.2.3　classList屬性　114
4.3　JSON簡介　114
4.3.1　JSON語法　114
4.3.2　JSON解析和序列化　114
4.4本地存儲　114
4.4.1　Web存儲（Web Storage）簡介　114
4.4.2　Web存儲的使用　114
項目實施　114
任務1.項目案例分析　114
任務2　HTML5 Web存儲實現猜數字游戲“歷史戰績”展示　114
任務3.猜數字游戲拓展：實現展示“歷史戰績”功能的封裝　114
任務4.　猜數字游戲拓展：列表形式展示“歷史戰績”　114
任務5.　猜數字游戲拓展：“歷史戰績”展示（通過創建DOM節點）　114
單元小結　114
課後訓練　114
【理論測試】　114
【實訓內容】　114

單元5　MUI移動端框架初體驗　136
項目導入　136
職業能力目標和要求　136
項目描述：基於MUI的移動版猜數字游戲　137
知識準備　138
5.1　MUI移動端框架初體驗　138
5.1.1　MUI介紹　138
5.1.2　MUI新項目創建　138
5.2基礎佈局　142
5.2.1　搭建一個基於MUI的App應用　143
5.2.2　頂部標題欄與主體　144
5.2.3　mGallery-Table(圖文表格)　145
5.2.4　MUI-List（列表/圖文列表）　146
5.2.5　底部Tab導航的使用　148
5.2.6　badge（數字角標）實現數字展示　151
5.3　MUI選擇器及常用方法的使用　153
5.4　事件綁定　155
5.4.1　addEventListener()方法實現事件綁定　156
5.4.2　mui().on()方法實現事件綁定　156
5.4.3　dialog消息框　156
5.5　MUI基礎表單　156
5.5.1　button（按鈕）　156
5.5.2　input（表單）　156
項目實施　156
任務1.　項目分析　156
任務2.　猜數字游戲主功能頁面製作　156
任務3.　猜數字游戲引頁製作　156
任務4.　猜數字游戲：打開“歷史戰績”頁面功能　156
任務5.　猜數字游戲頁面拓展：增加游戲記錄存儲功能　156
任務6.　猜數字游戲“歷史戰績”頁面製作　156
任務7.　猜數字游戲App的打包　156
單元小結　156
課後訓練　156
【實訓內容】　156

單元6　MUI移動端框架進階　178
項目導入　178
職業能力目標和要求　178
項目6-1描述：在線測試系統文章列表頁跳轉並傳值實現對應詳情頁面展示　179
知識準備　179
6.1　頁面管理　179
6.1.1　MUI初始化　179
6.1.2　底部Tab導航實現切換頁面：DIV模式　181
6.1.3　底部Tab導航實現切換頁面：WebView模式　181
6.1.4　MUI頁面間跳轉並傳值實現詳情頁面展示　181
項目6-1實施　181
任務1.項目分析　181
任務2.　在線測試系統頁面跳轉：技術文章列表頁的實現　181
任務3.　在線測試系統頁面跳轉：詳情頁接受列表頁傳值　181
任務4.　在線測試系統頁面跳轉拓展：列表頁跳轉並傳值實現對應文章詳情頁面展示　181
項目6-2描述：生鮮超市購物車實現　181
知識準備　181
6.2　生鮮超市App　181
6.2.1　輪播組件的使用實現生鮮超市廣告輪播效果　181
6.2.2　numbox(數字輸入框)　181
項目6-2實施　181
任務1.項目分析　181
任務2.MUI靜態佈局實現　181
任務3.JavaScript實現動態列表展示及被選商品總價顯示　181
任務4.拓展：增加刪除選中商品功能　181
單元小結　181
課後訓練　181
【實訓內容】　181
【拓展內容】　181

單元7　在線測試系統主體功能　219
項目導入　219
職業能力目標和要求　219
項目描述：實現在線測試系統主體功能　220
知識準備　221
7.1　MUI復選框、單選框的使用　221
7.1.1　復選框　221
7.1.2　JavaScript獲取復選框的值　221
7.1.3　單選框　225
7.1.5　JavaScript獲取單選框的值　226
7.1.5　列表式單選實現　228
7.2　Ajax簡介　229
7.2.1　mui.ajax()　229
7.2.2　Ajax簡化模式　230
項目實施　230
任務1.在線測試系統：登錄驗證功能　230
任務2.在線測試系統：測試列表頁的實現　233
任務3.在線測試系統：測試頁面的實現　235
任務4.　在線測試系統：頁面跳轉並傳值　245
任務5　拓展：Ajax應用：實現在線測試系統登錄遠程驗證功能　252
單元小結　256
課後訓練　256
【實訓內容】　256