JavaScript移動開發(fā)項目教程（微課版）

單元1 JAVASCRIPT速覽\t1
項目導(dǎo)入　1
職業(yè)能力目標(biāo)和要求　1
項目描述：實現(xiàn)名詞解析　2
知識準(zhǔn)備　2
1．1　JavaScript簡述　2
1．1．1　JavaScript概要　2
1．1．2　JavaScript的主要特點　3
1．1．3　JavaScript相關(guān)應(yīng)用　4
1．2　JavaScript 編程起步　5
1．2．1選擇JavaScript腳本編輯器　5
1．2．2常用的引入JavaScript腳本的方式　7
1．2．3與用戶的交流方式　10
1．2．4　meta視口標(biāo)簽　13
1．2．5程序的調(diào)試　14
1．2．6頁面結(jié)構(gòu)、表現(xiàn)和行為　18
1．2．7注釋語句　19
項目實施　20
任務(wù)1．　項目分析　20
任務(wù)2．　創(chuàng)建HTML文件　20
任務(wù)3．　創(chuàng)建CSS文件，添加樣式　21
任務(wù)4．　動態(tài)效果的實現(xiàn)　22
單元小結(jié)　22
課后訓(xùn)練　23
【理論測試】　23
【實訓(xùn)內(nèi)容】　24
單元　2 JAVASCRIPT語言基礎(chǔ)　25
項目導(dǎo)入　25
職業(yè)能力目標(biāo)和要求　25
項目描述：實現(xiàn)猜數(shù)字游戲　25
知識準(zhǔn)備　27
2．1數(shù)據(jù)類型　27
2．1．1數(shù)字型　27
2．1．2字符串型　28
2．1．3數(shù)據(jù)類型的隱式轉(zhuǎn)換　30
2．1．4布爾型　30
2．1．5特殊數(shù)據(jù)類型　31
2．1．6數(shù)據(jù)類型的顯式轉(zhuǎn)換　33
2．2　運算符與表達(dá)式　35
2．2．1表達(dá)式　35
2．2．2運算符　35
2．3變量　41
2．3．1關(guān)鍵字　41
2．3．2變量的定義與命名　41
2．3．3變量的聲明與賦值　42
2．4函數(shù)　43
2．4．1自定義函數(shù)的定義與調(diào)用　43
2．4．2帶有返回值的函數(shù)　45
2．4．3變量的作用域　47
2．5基本語句　48
2．5．1流程控制語句　48
2．5．2異常處理語句　49
項目實施　49
任務(wù)1．　項目分析　49
任務(wù)2．　創(chuàng)建HTML文件　49
任務(wù)3．　添加樣式　49
任務(wù)4．　動態(tài)效果的實現(xiàn)　49
任務(wù)5．　功能拓展　49
單元小結(jié)　49
課后訓(xùn)練　49
【理論測試】　49
【實訓(xùn)內(nèi)容】　49
單元3　常用內(nèi)置對象　61
項目導(dǎo)入　61
職業(yè)能力目標(biāo)和要求　61
項目3-1描述：實現(xiàn)中國體育彩票11選5，數(shù)字跳動展示效果　62
知識準(zhǔn)備　62
3．1數(shù)組(ARRAY)對象　62
3．1．1新建數(shù)組　62
3．1．2動態(tài)數(shù)組　63
3．1．3數(shù)組對象的常用屬性與方法　63
3．1．4二維數(shù)組　67
3．2數(shù)學(xué)(MATH)對象　69
3．2．1使用數(shù)學(xué)對象　70
3．2．2數(shù)學(xué)對象的屬性與方法　70
3．2．3數(shù)字的格式化與產(chǎn)生隨機(jī)數(shù)　70
3．2．4定時器函數(shù)　70
3．2．5數(shù)學(xué)對象應(yīng)用案例　70
項目3-1實施　70
任務(wù)1．　項目分析　70
任務(wù)2．　頁面布局的實現(xiàn)　70
任務(wù)3．　添加樣式　70
任務(wù)4．　動態(tài)效果的實現(xiàn)　70
任務(wù)5．　程序流程分析　70
任務(wù)6．　完整代碼展示　70
項目3-2描述：實現(xiàn)猜數(shù)字游戲“再來一局”功能和計時展示　70
知識準(zhǔn)備　70
3．3日期(DATE)對象　70
3．3．1新建日期　70
3．3．2日期對象的常用屬性與方法　70
3．3．3　動態(tài)改變元素樣式　70
項目3-2實施　70
任務(wù)1．　項目分析　70
任務(wù)2．　猜數(shù)字游戲“再來一局”功能實現(xiàn)　70
任務(wù)3．　猜數(shù)字游戲計時功能實現(xiàn)　70
項目3-3描述：實現(xiàn)注冊表單的驗證功能　70
知識準(zhǔn)備　70
3．4字符串(STRING)對象　70
3．4．1使用字符串對象　70
3．4．2字符串對象的屬性與方法　70
3．4．3字符串對象應(yīng)用案例　70
3．5　JAVASCRIPT正則表達(dá)式　70
3．5．1正則表達(dá)式的作用　70
3．5．2創(chuàng)建正則表達(dá)式　70
3．5．3正則表達(dá)式對象的方法　70
3．5．4　正則表達(dá)式中常用符號　70
3．5．5表單應(yīng)用　70
項目3-3實施　70
任務(wù)1．　項目分析　70
任務(wù)2．　input控件常用正則驗證規(guī)則分析　70
任務(wù)3．用戶注冊的功能實現(xiàn)　70
單元小結(jié)　70
課后訓(xùn)練　70
【理論測試】　70
【實訓(xùn)內(nèi)容】　70
單元4　DOM編程與本地存儲　105
項目導(dǎo)入　105
職業(yè)能力目標(biāo)和要求　105
項目描述：JavaScript實現(xiàn)猜數(shù)字游戲“歷史戰(zhàn)績”展示　106
知識準(zhǔn)備　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導(dǎo)航節(jié)點關(guān)系　112
4．1．5　DOM優(yōu)化　114
4．1．6　DOM事件　114
4．2DOM擴(kuò)展　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
任務(wù)1．項目案例分析　114
任務(wù)2　HTML5 Web存儲實現(xiàn)猜數(shù)字游戲“歷史戰(zhàn)績”展示　114
任務(wù)3．猜數(shù)字游戲拓展：實現(xiàn)展示“歷史戰(zhàn)績”功能的封裝　114
任務(wù)4．　猜數(shù)字游戲拓展：列表形式展示“歷史戰(zhàn)績”　114
任務(wù)5．　猜數(shù)字游戲拓展：“歷史戰(zhàn)績”展示（通過創(chuàng)建DOM節(jié)點）　114
單元小結(jié)　114
課后訓(xùn)練　114
【理論測試】　114
【實訓(xùn)內(nèi)容】　114
單元5　MUI移動端框架初體驗　136
項目導(dǎo)入　136
職業(yè)能力目標(biāo)和要求　136
項目描述：基于MUI的移動版猜數(shù)字游戲　137
知識準(zhǔn)備　138
5．1　MUI移動端框架初體驗　138
5．1．1　MUI介紹　138
5．1．2　MUI新項目創(chuàng)建　138
5．2基礎(chǔ)布局　142
5．2．1　搭建一個基于MUI的App應(yīng)用　143
5．2．2　頂部標(biāo)題欄與主體　144
5．2．3　mGallery-Table(圖文表格)　145
5．2．4　MUI-List（列表/圖文列表）　146
5．2．5　底部Tab導(dǎo)航的使用　148
5．2．6　badge（數(shù)字角標(biāo)）實現(xiàn)數(shù)字展示　151
5．3　MUI選擇器及常用方法的使用　153
5．4　事件綁定　155
5．4．1　addEventListener()方法實現(xiàn)事件綁定　156
5．4．2　mui()．on()方法實現(xiàn)事件綁定　156
5．4．3　dialog消息框　156
5．5　MUI基礎(chǔ)表單　156
5．5．1　button（按鈕）　156
5．5．2　input（表單）　156
項目實施　156
任務(wù)1．　項目分析　156
任務(wù)2．　猜數(shù)字游戲主功能頁面制作　156
任務(wù)3．　猜數(shù)字游戲引頁制作　156
任務(wù)4．　猜數(shù)字游戲：打開“歷史戰(zhàn)績”頁面功能　156
任務(wù)5．　猜數(shù)字游戲頁面拓展：增加游戲記錄存儲功能　156
任務(wù)6．　猜數(shù)字游戲“歷史戰(zhàn)績”頁面制作　156
任務(wù)7．　猜數(shù)字游戲App的打包　156
單元小結(jié)　156
課后訓(xùn)練　156
【實訓(xùn)內(nèi)容】　156
單元6　MUI移動端框架進(jìn)階　178
項目導(dǎo)入　178
職業(yè)能力目標(biāo)和要求　178
項目6-1描述：在線測試系統(tǒng)文章列表頁跳轉(zhuǎn)并傳值實現(xiàn)對應(yīng)詳情頁面展示　179
知識準(zhǔn)備　179
6．1　頁面管理　179
6．1．1　MUI初始化　179
6．1．2　底部Tab導(dǎo)航實現(xiàn)切換頁面：DIV模式　181
6．1．3　底部Tab導(dǎo)航實現(xiàn)切換頁面：WebView模式　181
6．1．4　MUI頁面間跳轉(zhuǎn)并傳值實現(xiàn)詳情頁面展示　181
項目6-1實施　181
任務(wù)1．項目分析　181
任務(wù)2．　在線測試系統(tǒng)頁面跳轉(zhuǎn)：技術(shù)文章列表頁的實現(xiàn)　181
任務(wù)3．　在線測試系統(tǒng)頁面跳轉(zhuǎn)：詳情頁接受列表頁傳值　181
任務(wù)4．　在線測試系統(tǒng)頁面跳轉(zhuǎn)拓展：列表頁跳轉(zhuǎn)并傳值實現(xiàn)對應(yīng)文章詳情頁面展示　181
項目6-2描述：生鮮超市購物車實現(xiàn)　181
知識準(zhǔn)備　181
6．2　生鮮超市App　181
6．2．1　輪播組件的使用實現(xiàn)生鮮超市廣告輪播效果　181
6．2．2　numbox(數(shù)字輸入框)　181
項目6-2實施　181
任務(wù)1．項目分析　181
任務(wù)2．MUI靜態(tài)布局實現(xiàn)　181
任務(wù)3．JavaScript實現(xiàn)動態(tài)列表展示及被選商品總價顯示　181
任務(wù)4．拓展：增加刪除選中商品功能　181
單元小結(jié)　181
課后訓(xùn)練　181
【實訓(xùn)內(nèi)容】　181
【拓展內(nèi)容】　181
單元7　在線測試系統(tǒng)主體功能　219
項目導(dǎo)入　219
職業(yè)能力目標(biāo)和要求　219
項目描述：實現(xiàn)在線測試系統(tǒng)主體功能　220
知識準(zhǔn)備　221
7．1　MUI復(fù)選框、單選框的使用　221
7．1．1　復(fù)選框　221
7．1．2　JavaScript獲取復(fù)選框的值　221
7．1．3　單選框　225
7．1．5　JavaScript獲取單選框的值　226
7．1．5　列表式單選實現(xiàn)　228
7．2　Ajax簡介　229
7．2．1　mui．a(chǎn)jax()　229
7．2．2　Ajax簡化模式　230
項目實施　230
任務(wù)1．在線測試系統(tǒng)：登錄驗證功能　230
任務(wù)2．在線測試系統(tǒng)：測試列表頁的實現(xiàn)　233
任務(wù)3．在線測試系統(tǒng)：測試頁面的實現(xiàn)　235
任務(wù)4．　在線測試系統(tǒng)：頁面跳轉(zhuǎn)并傳值　245
任務(wù)5　拓展：Ajax應(yīng)用：實現(xiàn)在線測試系統(tǒng)登錄遠(yuǎn)程驗證功能　252
單元小結(jié)　256
課后訓(xùn)練　256
【實訓(xùn)內(nèi)容】　256