JavaScript移動(dòng)開發(fā)項(xiàng)目教程（微課版）

單元1 JAVASCRIPT速覽\t1
項(xiàng)目導(dǎo)入　1
職業(yè)能力目標(biāo)和要求　1
項(xiàng)目描述：實(shí)現(xiàn)名詞解析　2
知識(shí)準(zhǔn)備　2
1．1　JavaScript簡(jiǎn)述　2
1．1．1　JavaScript概要　2
1．1．2　JavaScript的主要特點(diǎn)　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
項(xiàng)目實(shí)施　20
任務(wù)1．　項(xiàng)目分析　20
任務(wù)2．　創(chuàng)建HTML文件　20
任務(wù)3．　創(chuàng)建CSS文件，添加樣式　21
任務(wù)4．　動(dòng)態(tài)效果的實(shí)現(xiàn)　22
單元小結(jié)　22
課后訓(xùn)練　23
【理論測(cè)試】　23
【實(shí)訓(xùn)內(nèi)容】　24
單元　2 JAVASCRIPT語言基礎(chǔ)　25
項(xiàng)目導(dǎo)入　25
職業(yè)能力目標(biāo)和要求　25
項(xiàng)目描述：實(shí)現(xiàn)猜數(shù)字游戲　25
知識(shí)準(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　運(yùn)算符與表達(dá)式　35
2．2．1表達(dá)式　35
2．2．2運(yùn)算符　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
項(xiàng)目實(shí)施　49
任務(wù)1．　項(xiàng)目分析　49
任務(wù)2．　創(chuàng)建HTML文件　49
任務(wù)3．　添加樣式　49
任務(wù)4．　動(dòng)態(tài)效果的實(shí)現(xiàn)　49
任務(wù)5．　功能拓展　49
單元小結(jié)　49
課后訓(xùn)練　49
【理論測(cè)試】　49
【實(shí)訓(xùn)內(nèi)容】　49
單元3　常用內(nèi)置對(duì)象　61
項(xiàng)目導(dǎo)入　61
職業(yè)能力目標(biāo)和要求　61
項(xiàng)目3-1描述：實(shí)現(xiàn)中國(guó)體育彩票11選5，數(shù)字跳動(dòng)展示效果　62
知識(shí)準(zhǔn)備　62
3．1數(shù)組(ARRAY)對(duì)象　62
3．1．1新建數(shù)組　62
3．1．2動(dòng)態(tài)數(shù)組　63
3．1．3數(shù)組對(duì)象的常用屬性與方法　63
3．1．4二維數(shù)組　67
3．2數(shù)學(xué)(MATH)對(duì)象　69
3．2．1使用數(shù)學(xué)對(duì)象　70
3．2．2數(shù)學(xué)對(duì)象的屬性與方法　70
3．2．3數(shù)字的格式化與產(chǎn)生隨機(jī)數(shù)　70
3．2．4定時(shí)器函數(shù)　70
3．2．5數(shù)學(xué)對(duì)象應(yīng)用案例　70
項(xiàng)目3-1實(shí)施　70
任務(wù)1．　項(xiàng)目分析　70
任務(wù)2．　頁面布局的實(shí)現(xiàn)　70
任務(wù)3．　添加樣式　70
任務(wù)4．　動(dòng)態(tài)效果的實(shí)現(xiàn)　70
任務(wù)5．　程序流程分析　70
任務(wù)6．　完整代碼展示　70
項(xiàng)目3-2描述：實(shí)現(xiàn)猜數(shù)字游戲“再來一局”功能和計(jì)時(shí)展示　70
知識(shí)準(zhǔn)備　70
3．3日期(DATE)對(duì)象　70
3．3．1新建日期　70
3．3．2日期對(duì)象的常用屬性與方法　70
3．3．3　動(dòng)態(tài)改變?cè)貥邮健?0
項(xiàng)目3-2實(shí)施　70
任務(wù)1．　項(xiàng)目分析　70
任務(wù)2．　猜數(shù)字游戲“再來一局”功能實(shí)現(xiàn)　70
任務(wù)3．　猜數(shù)字游戲計(jì)時(shí)功能實(shí)現(xiàn)　70
項(xiàng)目3-3描述：實(shí)現(xiàn)注冊(cè)表單的驗(yàn)證功能　70
知識(shí)準(zhǔn)備　70
3．4字符串(STRING)對(duì)象　70
3．4．1使用字符串對(duì)象　70
3．4．2字符串對(duì)象的屬性與方法　70
3．4．3字符串對(duì)象應(yīng)用案例　70
3．5　JAVASCRIPT正則表達(dá)式　70
3．5．1正則表達(dá)式的作用　70
3．5．2創(chuàng)建正則表達(dá)式　70
3．5．3正則表達(dá)式對(duì)象的方法　70
3．5．4　正則表達(dá)式中常用符號(hào)　70
3．5．5表單應(yīng)用　70
項(xiàng)目3-3實(shí)施　70
任務(wù)1．　項(xiàng)目分析　70
任務(wù)2．　input控件常用正則驗(yàn)證規(guī)則分析　70
任務(wù)3．用戶注冊(cè)的功能實(shí)現(xiàn)　70
單元小結(jié)　70
課后訓(xùn)練　70
【理論測(cè)試】　70
【實(shí)訓(xùn)內(nèi)容】　70
單元4　DOM編程與本地存儲(chǔ)　105
項(xiàng)目導(dǎo)入　105
職業(yè)能力目標(biāo)和要求　105
項(xiàng)目描述：JavaScript實(shí)現(xiàn)猜數(shù)字游戲“歷史戰(zhàn)績(jī)”展示　106
知識(shí)準(zhǔn)備　106
4．1訪問HTMLDOM對(duì)象　106
4．1．1獲取元素對(duì)象的一般方法　108
4．1．2元素的innerText、innerHTML、outerHTML、outerText　109
4．1．3修改DOM　110
4．1．4導(dǎo)航節(jié)點(diǎn)關(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簡(jiǎn)介　114
4．3．1　JSON語法　114
4．3．2　JSON解析和序列化　114
4．4本地存儲(chǔ)　114
4．4．1　Web存儲(chǔ)（Web Storage）簡(jiǎn)介　114
4．4．2　Web存儲(chǔ)的使用　114
項(xiàng)目實(shí)施　114
任務(wù)1．項(xiàng)目案例分析　114
任務(wù)2　HTML5 Web存儲(chǔ)實(shí)現(xiàn)猜數(shù)字游戲“歷史戰(zhàn)績(jī)”展示　114
任務(wù)3．猜數(shù)字游戲拓展：實(shí)現(xiàn)展示“歷史戰(zhàn)績(jī)”功能的封裝　114
任務(wù)4．　猜數(shù)字游戲拓展：列表形式展示“歷史戰(zhàn)績(jī)”　114
任務(wù)5．　猜數(shù)字游戲拓展：“歷史戰(zhàn)績(jī)”展示（通過創(chuàng)建DOM節(jié)點(diǎn)）　114
單元小結(jié)　114
課后訓(xùn)練　114
【理論測(cè)試】　114
【實(shí)訓(xùn)內(nèi)容】　114
單元5　MUI移動(dòng)端框架初體驗(yàn)　136
項(xiàng)目導(dǎo)入　136
職業(yè)能力目標(biāo)和要求　136
項(xiàng)目描述：基于MUI的移動(dòng)版猜數(shù)字游戲　137
知識(shí)準(zhǔn)備　138
5．1　MUI移動(dòng)端框架初體驗(yàn)　138
5．1．1　MUI介紹　138
5．1．2　MUI新項(xiàng)目創(chuàng)建　138
5．2基礎(chǔ)布局　142
5．2．1　搭建一個(gè)基于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)）實(shí)現(xiàn)數(shù)字展示　151
5．3　MUI選擇器及常用方法的使用　153
5．4　事件綁定　155
5．4．1　addEventListener()方法實(shí)現(xiàn)事件綁定　156
5．4．2　mui()．on()方法實(shí)現(xiàn)事件綁定　156
5．4．3　dialog消息框　156
5．5　MUI基礎(chǔ)表單　156
5．5．1　button（按鈕）　156
5．5．2　input（表單）　156
項(xiàng)目實(shí)施　156
任務(wù)1．　項(xiàng)目分析　156
任務(wù)2．　猜數(shù)字游戲主功能頁面制作　156
任務(wù)3．　猜數(shù)字游戲引頁制作　156
任務(wù)4．　猜數(shù)字游戲：打開“歷史戰(zhàn)績(jī)”頁面功能　156
任務(wù)5．　猜數(shù)字游戲頁面拓展：增加游戲記錄存儲(chǔ)功能　156
任務(wù)6．　猜數(shù)字游戲“歷史戰(zhàn)績(jī)”頁面制作　156
任務(wù)7．　猜數(shù)字游戲App的打包　156
單元小結(jié)　156
課后訓(xùn)練　156
【實(shí)訓(xùn)內(nèi)容】　156
單元6　MUI移動(dòng)端框架進(jìn)階　178
項(xiàng)目導(dǎo)入　178
職業(yè)能力目標(biāo)和要求　178
項(xiàng)目6-1描述：在線測(cè)試系統(tǒng)文章列表頁跳轉(zhuǎn)并傳值實(shí)現(xiàn)對(duì)應(yīng)詳情頁面展示　179
知識(shí)準(zhǔn)備　179
6．1　頁面管理　179
6．1．1　MUI初始化　179
6．1．2　底部Tab導(dǎo)航實(shí)現(xiàn)切換頁面：DIV模式　181
6．1．3　底部Tab導(dǎo)航實(shí)現(xiàn)切換頁面：WebView模式　181
6．1．4　MUI頁面間跳轉(zhuǎn)并傳值實(shí)現(xiàn)詳情頁面展示　181
項(xiàng)目6-1實(shí)施　181
任務(wù)1．項(xiàng)目分析　181
任務(wù)2．　在線測(cè)試系統(tǒng)頁面跳轉(zhuǎn)：技術(shù)文章列表頁的實(shí)現(xiàn)　181
任務(wù)3．　在線測(cè)試系統(tǒng)頁面跳轉(zhuǎn)：詳情頁接受列表頁傳值　181
任務(wù)4．　在線測(cè)試系統(tǒng)頁面跳轉(zhuǎn)拓展：列表頁跳轉(zhuǎn)并傳值實(shí)現(xiàn)對(duì)應(yīng)文章詳情頁面展示　181
項(xiàng)目6-2描述：生鮮超市購(gòu)物車實(shí)現(xiàn)　181
知識(shí)準(zhǔn)備　181
6．2　生鮮超市App　181
6．2．1　輪播組件的使用實(shí)現(xiàn)生鮮超市廣告輪播效果　181
6．2．2　numbox(數(shù)字輸入框)　181
項(xiàng)目6-2實(shí)施　181
任務(wù)1．項(xiàng)目分析　181
任務(wù)2．MUI靜態(tài)布局實(shí)現(xiàn)　181
任務(wù)3．JavaScript實(shí)現(xiàn)動(dòng)態(tài)列表展示及被選商品總價(jià)顯示　181
任務(wù)4．拓展：增加刪除選中商品功能　181
單元小結(jié)　181
課后訓(xùn)練　181
【實(shí)訓(xùn)內(nèi)容】　181
【拓展內(nèi)容】　181
單元7　在線測(cè)試系統(tǒng)主體功能　219
項(xiàng)目導(dǎo)入　219
職業(yè)能力目標(biāo)和要求　219
項(xiàng)目描述：實(shí)現(xiàn)在線測(cè)試系統(tǒng)主體功能　220
知識(shí)準(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　列表式單選實(shí)現(xiàn)　228
7．2　Ajax簡(jiǎn)介　229
7．2．1　mui．a(chǎn)jax()　229
7．2．2　Ajax簡(jiǎn)化模式　230
項(xiàng)目實(shí)施　230
任務(wù)1．在線測(cè)試系統(tǒng)：登錄驗(yàn)證功能　230
任務(wù)2．在線測(cè)試系統(tǒng)：測(cè)試列表頁的實(shí)現(xiàn)　233
任務(wù)3．在線測(cè)試系統(tǒng)：測(cè)試頁面的實(shí)現(xiàn)　235
任務(wù)4．　在線測(cè)試系統(tǒng)：頁面跳轉(zhuǎn)并傳值　245
任務(wù)5　拓展：Ajax應(yīng)用：實(shí)現(xiàn)在線測(cè)試系統(tǒng)登錄遠(yuǎn)程驗(yàn)證功能　252
單元小結(jié)　256
課后訓(xùn)練　256
【實(shí)訓(xùn)內(nèi)容】　256