JavaScript移動開發項目教程(微課版)
內容描述
本書內容涵蓋JavaScript基本語法、DOM編程、事件、HTML5相關API應用、
本地存儲、JSON數據應用、Ajax實現等客戶端交互特效製作行業新技術。
由淺入深,介紹流行且容易上手的MUI框架技術,實現JavaScript移動端的開發。
設計了由易到難、層次遞進的教學項目,並設計實戰項目貫穿知識體系,讓讀者學以致用。
本書每單元內容實現先通過案例任務描述引入問題,然後進行知識介紹,
最後對任務進行解析及具體實現;以新穎的編寫形式呈現給讀者。
每單元內容都與案例緊密結合,有助於讀者理解知識、應用知識、
達到學以致用的目的,大大加強讀者實踐動手操作的能力。
所選案例具有極強的擴展性,能夠給讀者以啟發,使讀者舉一反三,實現非常實用的效果。
本書可以作為普通高等職業院校各專業網頁特效設計課程的教材,
也可以作為網頁從業人員的培訓用書及技術參考書。
目錄大綱
單元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
作者介紹
鄭麗萍
事多年教科研工作,主持品牌專業子項目《JavaScript及框架應用》在線課程及項目化課程建設;
主持建設谷歌高職地方院校課程教改項目《JavaScript移動開發》;
省級大學生創新項目指導教師;2017年江蘇省高等學校微課教學比賽二等獎。
主編新形態一體化教材《JavaScript與jQuery案例教程》。