移動(dòng)Web開發(fā)從入門到精通

第 0章　移動(dòng)Web開發(fā)學(xué)習(xí)指南 1
本章教學(xué)錄像：23分鐘
移動(dòng)Web程序是指能夠在智能手機(jī)、平板電腦、電子書閱讀器等可移動(dòng)設(shè)備中完整運(yùn)行的Web程序。和傳統(tǒng)桌面式Web程序相比，移動(dòng)Web要求程序更加簡(jiǎn)單并且高效，而且具備傳統(tǒng)桌面Web程序所沒(méi)有的硬件優(yōu)勢(shì)，例如GPS定位、傳感器應(yīng)用等。本章簡(jiǎn)要介紹開發(fā)移動(dòng)Web應(yīng)用程序的基礎(chǔ)知識(shí)，為讀者步入本書后面知識(shí)的學(xué)習(xí)打下基礎(chǔ)。
0．1 Web標(biāo)準(zhǔn)開發(fā)技術(shù) 2
0．1．1 結(jié)構(gòu)化標(biāo)準(zhǔn)語(yǔ)言 2
0．1．2 表現(xiàn)性標(biāo)準(zhǔn)語(yǔ)言 2
0．1．3 行為標(biāo)準(zhǔn) 2
0．2 移動(dòng)Web開發(fā)概覽 3
0．2．1 主流移動(dòng)平臺(tái)介紹 3
0．2．2 移動(dòng)Web的特點(diǎn) 4
0．2．3 設(shè)計(jì)移動(dòng)網(wǎng)站時(shí)需要考慮的問(wèn)題 5
0．2．4 主流移動(dòng)設(shè)備屏幕的分辨率 5
0．2．5 使用標(biāo)準(zhǔn)的HTML、CSS和JavaScript技術(shù) 6
0．3 移動(dòng)Web開發(fā)必備技術(shù) 7
0．4 移動(dòng)Web開發(fā)學(xué)習(xí)路線圖 8
第1篇 基礎(chǔ)知識(shí)
第 1章　網(wǎng)頁(yè)和網(wǎng)站制作基礎(chǔ) 10
本章教學(xué)錄像：24分鐘
Web站點(diǎn)是專業(yè)人員對(duì)各種站點(diǎn)的統(tǒng)稱，普通瀏覽用戶通常將這些站點(diǎn)稱為網(wǎng)站?；ヂ?lián)網(wǎng)中存在形形色色的站點(diǎn)，為瀏覽用戶提供了海量的信息。一個(gè)獨(dú)立的站點(diǎn)是由一個(gè)或多個(gè)網(wǎng)頁(yè)構(gòu)成的，網(wǎng)頁(yè)和網(wǎng)站是構(gòu)成Web站點(diǎn)的最核心元素。本章對(duì)網(wǎng)頁(yè)和網(wǎng)站的基礎(chǔ)知識(shí)進(jìn)行概述，為讀者步入本書后面知識(shí)的學(xué)習(xí)打下基礎(chǔ)。
1．1 認(rèn)識(shí)網(wǎng)頁(yè)和網(wǎng)站 11
1．1．1 何謂網(wǎng)頁(yè) 11
1．1．2 何謂網(wǎng)站 11
1．2 網(wǎng)頁(yè)的基本構(gòu)成元素 12
1．3 制作網(wǎng)頁(yè)的基本流程 14
1．4 制作網(wǎng)站的基本流程 15
1．4．1 網(wǎng)站發(fā)展趨勢(shì) 15
1．4．2 網(wǎng)站制作流程 15
1．4．3 網(wǎng)站設(shè)計(jì)原則 17
1．5 高手點(diǎn)撥 17
1．6 實(shí)戰(zhàn)練習(xí) 18
第 2章　搭建移動(dòng)Web開發(fā)環(huán)境 19
本章教學(xué)錄像：21分鐘
“工欲善其事，必先利其器”出自《論語(yǔ)》，意思是要想高效地完成一件事，需要有合適的工具。對(duì)于移動(dòng)Web開發(fā)人員來(lái)說(shuō)，開發(fā)工具同樣至關(guān)重要。作為一項(xiàng)新興技術(shù)，在進(jìn)行開發(fā)前首先要搭建一個(gè)對(duì)應(yīng)的開發(fā)環(huán)境。本章詳細(xì)講解搭建移動(dòng)Web開發(fā)環(huán)境的基礎(chǔ)知識(shí)，為讀者步入本書后面知識(shí)的學(xué)習(xí)打下基礎(chǔ)。
2．1 安裝Dreamweaver CS6 20
2．2 安裝jQuery Mobile 25
2．2．1 下載jQuery Mobile插件 25
2．2．2 使用URL方式加載插件文件 26
2．3 搭建PhoneGap開發(fā)環(huán)境 27
2．3．1 準(zhǔn)備工作 27
2．3．2 獲得PhoneGap開發(fā)包 27
2．4 搭建測(cè)試環(huán)境 32
2．5 高手點(diǎn)撥 34
2．6 實(shí)戰(zhàn)練習(xí) 34
第 3章　打造移動(dòng)Web應(yīng)用程序 35
本章教學(xué)錄像：35分鐘
在本書前面的內(nèi)容中，已經(jīng)詳細(xì)講解了搭建移動(dòng)Web開發(fā)環(huán)境的方法。本章重點(diǎn)講解在Android和iOS系統(tǒng)中創(chuàng)建移動(dòng)Web程序的方法，為讀者步入本書后面知識(shí)的學(xué)習(xí)打下了基礎(chǔ)。
3．1 創(chuàng)建通用網(wǎng)站的實(shí)現(xiàn)流程 36
3．1．1 確定應(yīng)用程序類型 36
3．1．2 使用CSS改善HTML外觀 36
3．1．3 加入移動(dòng)meta標(biāo)簽 38
3．2 將站點(diǎn)升級(jí)至HTML5 39
3．2．1 確定何時(shí)升級(jí)和升級(jí)的具體方式 40
3．2．2 升級(jí)到HTML5的步驟 41
3．2．3 將HTML5特性作為額外內(nèi)容添加至網(wǎng)站 41
3．2．4 使用HTML5為移動(dòng)Web提供的服務(wù) 42
3．3 將Web程序遷移到移動(dòng)設(shè)備 42
3．3．1 選擇Web編輯器 43
3．3．2 測(cè)試應(yīng)用程序 43
3．3．3 移動(dòng)網(wǎng)站的內(nèi)容特點(diǎn) 44
3．3．4 為移動(dòng)設(shè)備調(diào)整可視化的設(shè)計(jì) 44
3．3．5 HTML5及CSS3檢測(cè) 45
3．4 搭建Android開發(fā)環(huán)境 46
3．4．1 安裝Android SDK的系統(tǒng)要求 46
3．4．2 安裝JDK 47
3．4．3 獲取并安裝Eclipse和Android SDK 51
3．4．4 安裝ADT 54
3．4．5 設(shè)定Android SDK Home 57
3．4．6 驗(yàn)證開發(fā)環(huán)境 58
3．4．7 創(chuàng)建并管理Android虛擬設(shè)備（AVD） 59
3．4．8 啟動(dòng)AVD模擬器 61
3．5 搭建iOS開發(fā)環(huán)境 62
3．5．1 開發(fā)前的準(zhǔn)備——加入iOS開發(fā)團(tuán)隊(duì) 63
3．5．2 安裝Xcode 65
3．5．3 Xcode介紹 65
3．5．4 下載并安裝Xcode 65
3．5．5 創(chuàng)建一個(gè)Xcode項(xiàng)目并啟動(dòng)模擬器 69
3．6 高手點(diǎn)撥 73
3．7 實(shí)戰(zhàn)練習(xí) 74
第2篇 核心技術(shù)
第 4章　HTML基礎(chǔ) 76
本章教學(xué)錄像：35分鐘
HTML即超文本標(biāo)記語(yǔ)言，是HyperText Mark-up Language的縮寫。HTML按一定格式來(lái)標(biāo)記普通文本文件、圖像、表格和表單等元素，使文本及各種對(duì)象能夠在用戶的瀏覽器中，顯示出不同風(fēng)格的標(biāo)記性語(yǔ)言，從而實(shí)現(xiàn)各種頁(yè)面元素的組合。通過(guò)使用Dreamweaver CS6，可以更加快捷地生成HTML代碼，提高了設(shè)計(jì)網(wǎng)頁(yè)的效率。本章簡(jiǎn)要講解HTML標(biāo)記語(yǔ)言的基礎(chǔ)知識(shí)。
4．1 HTML初步 77
4．1．1 HTML概述 77
4．1．2 HTML基本結(jié)構(gòu) 77
4．2 HTML標(biāo)記詳解 79
4．2．1 標(biāo)題文字標(biāo)記 79
4．2．2 文本文字標(biāo)記 80
4．2．3 字型設(shè)置標(biāo)記 82
4．2．4 段落標(biāo)記 83
4．2．5 換行標(biāo)記
84
4．2．6 超級(jí)鏈接標(biāo)記 85
4．2．7 設(shè)置背景圖片標(biāo)記 86
4．2．8 插入圖片標(biāo)記 87
4．2．9 列表標(biāo)記 89
4．2．10 表格標(biāo)記、、和92
4．3 綜合應(yīng)用——制作一個(gè)簡(jiǎn)單網(wǎng)頁(yè) 94
4．4 高手點(diǎn)撥 97
4．5 實(shí)戰(zhàn)練習(xí) 98
第 5章　HTML5 99
本章教學(xué)錄像：36分鐘
HTML5 是Web標(biāo)準(zhǔn)的巨大飛躍。和以前的版本不同，HTML5 并非僅僅用來(lái)表示 Web 內(nèi)容，它的使命是將 Web 帶入一個(gè)成熟的應(yīng)用平臺(tái)。在這個(gè)平臺(tái)上，視頻、音頻、圖像、動(dòng)畫以及同電腦的交互都被標(biāo)準(zhǔn)化。盡管 HTML5 的實(shí)現(xiàn)還有很長(zhǎng)的路要走，但是HTML5正在改變著Web。本章詳細(xì)講解HTML5的基礎(chǔ)知識(shí)，特別是新特性方面的知識(shí)，為讀者步入本書后面知識(shí)的學(xué)習(xí)打下基礎(chǔ)。
5．1 把握未來(lái)的風(fēng)向標(biāo) 100
5．1．1 漫漫發(fā)展歷程 100
5．1．2 無(wú)與倫比的體驗(yàn) 100
5．2 用HTML5設(shè)計(jì)移動(dòng)網(wǎng)站前的準(zhǔn)備 101
5．2．1 為移動(dòng)網(wǎng)站準(zhǔn)備專用的域名 101
5．2．2 準(zhǔn)備測(cè)試環(huán)境 101
5．3 第一段HTML5程序 102
5．4 設(shè)置網(wǎng)頁(yè)頭部元素 103
5．4．1 設(shè)置文檔類型 103
5．4．2 設(shè)置所有鏈接規(guī)定默認(rèn)地址或默認(rèn)目標(biāo) 104
5．4．3 鏈接標(biāo)簽 105
5．4．4 設(shè)置有關(guān)頁(yè)面的元信息 107
5．4．5 定義客戶端腳本 107
5．4．6 定義HTML文檔的樣式信息 108
5．4．7 設(shè)置頁(yè)面標(biāo)題 109
5．5 設(shè)置頁(yè)面正文 110
5．6 注釋 112
5．7 和頁(yè)面結(jié)構(gòu)相關(guān)的新元素 113
5．7．1 定義區(qū)段的標(biāo)簽 113
5．7．2 定義獨(dú)立內(nèi)容的標(biāo)簽 114
5．7．3 定義導(dǎo)航鏈接標(biāo)簽 115
5．7．4 定義其所處內(nèi)容之外的內(nèi)容 116
5．7．5 定義頁(yè)腳內(nèi)容的標(biāo)簽 116
5．8 在網(wǎng)頁(yè)中顯示聯(lián)系信息 117
5．9 自動(dòng)隱藏或顯示網(wǎng)頁(yè)中的文字 118
5．10 綜合應(yīng)用——自動(dòng)檢測(cè)輸入的拼音是否正確 120
5．11 高手點(diǎn)撥 122
5．12 實(shí)戰(zhàn)練習(xí) 122
第 6章　CSS基礎(chǔ) 123
本章教學(xué)錄像：40分鐘
CSS（層疊樣式表）是Cascading Style Sheet的縮寫，簡(jiǎn)稱為樣式表，是W3C組織制定的、控制頁(yè)面顯示樣式的標(biāo)記語(yǔ)言。CSS的最新版本是CSS 3．0，這是現(xiàn)在網(wǎng)頁(yè)所遵循的通用標(biāo)準(zhǔn)。本章將詳細(xì)講解CSS技術(shù)的基礎(chǔ)知識(shí)。
6．1 體驗(yàn)CSS的功能 124
6．2 基本語(yǔ)法 125
6．3 使用選擇符 126
6．3．1 選擇符的種類 126
6．3．2 使用ID選擇符設(shè)置文字顏色 129
6．4 CSS屬性 129
6．5 幾個(gè)常用值 131
6．5．1 顏色單位 131
6．5．2 長(zhǎng)度單位 133
6．5．3 百分比值 134
6．5．4 URL統(tǒng)一資源定位符 134
6．5．5 URL默認(rèn)值 135
6．6 在網(wǎng)頁(yè)中使用CSS 135
6．6．1 頁(yè)面調(diào)用CSS的方式 135
6．6．2 通用優(yōu)先級(jí) 138
6．6．3 類型選擇符和類選擇符 139
6．6．4 ID選擇符 140
6．6．5 最近優(yōu)先原則 141
6．7 CSS的編碼規(guī)范 143
6．7．1 書寫規(guī)范 143
6．7．2 命名規(guī)范 144
6．8 CSS調(diào)試 145
6．8．1 設(shè)計(jì)軟件調(diào)試 145
6．8．2 繼承性和默認(rèn)值帶來(lái)的問(wèn)題 145
6．9 綜合應(yīng)用——實(shí)現(xiàn)精致、符合標(biāo)準(zhǔn)的表單頁(yè)面 147
6．10 高手點(diǎn)撥 149
6．11 實(shí)戰(zhàn)練習(xí) 150
第 7章　JavaScript腳本語(yǔ)言 151
本章教學(xué)錄像：48分鐘
頁(yè)面通過(guò)腳本程序可以實(shí)現(xiàn)用戶數(shù)據(jù)的傳輸和動(dòng)態(tài)交互。本章簡(jiǎn)要介紹JavaScript技術(shù)的基礎(chǔ)知識(shí)，并通過(guò)實(shí)例來(lái)介紹其具體的使用流程，為讀者步入本書后面知識(shí)的學(xué)習(xí)打下堅(jiān)實(shí)的基礎(chǔ)。
7．1 JavaScript簡(jiǎn)介 152
7．1．1 JavaScript格式 152
7．1．2 一個(gè)典型的JavaScript文件 152
7．2 數(shù)據(jù)類型 154
7．2．1 數(shù)據(jù)類型概述 154
7．2．2 JavaScript常量 154
7．2．3 JavaScript變量 155
7．3 表達(dá)式和運(yùn)算符 156
7．3．1 JavaScript表達(dá)式 156
7．3．2 JavaScript運(yùn)算符 156
7．4 JavaScript循環(huán)語(yǔ)句 160
7．4．1 if條件語(yǔ)句 160
7．4．2 for循環(huán)語(yǔ)句 163
7．4．3 while循環(huán)語(yǔ)句 165
7．4．4 do…while循環(huán)語(yǔ)句 166
7．4．5 break控制 168
7．4．6 switch循環(huán)語(yǔ)句 168
7．5 JavaScript函數(shù) 169
7．5．1 函數(shù)的構(gòu)成 169
7．5．2 JavaScript常用函數(shù) 170
7．6 JavaScript對(duì)象 172
7．6．1 對(duì)象的基礎(chǔ)知識(shí) 172
7．6．2 JavaScript常用對(duì)象和方法 175
7．7 JavaScript事件 177
7．7．1 JavaScript常用事件 178
7．7．2 事件處理程序 179
7．8 JavaScript窗口對(duì)象 180
7．8．1 窗口對(duì)象 180
7．8．2 窗口對(duì)象的事件驅(qū)動(dòng) 181
7．8．3 窗口對(duì)象的屬性 181
7．8．4 窗口對(duì)象的方法 181
7．8．5 JavaScript窗口對(duì)象的應(yīng)用 182
7．9 JavaScript框架對(duì)象 184
7．10 綜合應(yīng)用——實(shí)現(xiàn)一個(gè)動(dòng)態(tài)菜單樣式 186
7．11 高手點(diǎn)撥 189
7．12 實(shí)戰(zhàn)練習(xí) 190
第8章　使用jQuery Mobile框架 191
本章教學(xué)錄像：43分鐘
jQuery Mobile 不僅給主流移動(dòng)平臺(tái)帶來(lái)jQuery核心庫(kù)，而且擁有一個(gè)完整統(tǒng)一的jQuery移動(dòng)UI框架，支持全球主流的移動(dòng)平臺(tái)。本章詳細(xì)講解jQuery Mobile的基礎(chǔ)知識(shí)，為讀者步入本書后面知識(shí)的學(xué)習(xí)打下基礎(chǔ)。
8．1 jQuery Mobile簡(jiǎn)介 192
8．1．1 jQuery的優(yōu)勢(shì) 192
8．1．2 jQuery Mobile的特點(diǎn) 192
8．1．3 jQuery Mobile對(duì)瀏覽器的支持 193
8．1．4 jQuery Mobile對(duì)移動(dòng)平臺(tái)的支持 193
8．2 jQuery Mobile的四大優(yōu)勢(shì) 194
8．2．1 跨所有移動(dòng)平臺(tái)的統(tǒng)一UI 194
8．2．2 簡(jiǎn)化的標(biāo)記驅(qū)動(dòng)的開發(fā) 195
8．2．3 漸進(jìn)式增強(qiáng) 195
8．2．4 響應(yīng)式設(shè)計(jì) 195
8．3 jQuery Mobile語(yǔ)法基礎(chǔ) 196
8．3．1 使用基本框架 196
8．3．2 多頁(yè)面模板 200
8．3．3 設(shè)置內(nèi)部頁(yè)面的頁(yè)面標(biāo)題 202
8．3．4 設(shè)置外部頁(yè)面鏈接 204
8．3．5 實(shí)現(xiàn)頁(yè)面后退鏈接 204
8．3．6 使用Ajax修飾導(dǎo)航 205
8．3．7 使用函數(shù)changePage() 209
8．4 預(yù)加載 210
8．5 頁(yè)面緩存 212
8．6 頁(yè)面腳本 214
8．7 綜合應(yīng)用——實(shí)現(xiàn)頁(yè)面跳轉(zhuǎn) 216
8．8 高手點(diǎn)撥 218
8．9 實(shí)戰(zhàn)練習(xí) 218
第9章　使用PhoneGap 219
本章教學(xué)錄像：1小時(shí)23分鐘
PhoneGap基于HTML、CSS和JavaScript技術(shù)，是一個(gè)創(chuàng)建跨平臺(tái)移動(dòng)應(yīng)用程序的快速開發(fā)平臺(tái)。通過(guò)PhoneGap，開發(fā)者能夠利用iPhone、Android、Palm、Symbian、WP7、Bada和Blackberry等智能手機(jī)的核心功能，包括地理定位、加速器、聯(lián)系人、聲音和振動(dòng)等。此外PhoneGap擁有豐富的插件，可以以此擴(kuò)展無(wú)限的功能。本章詳細(xì)講解PhoneGap的基礎(chǔ)知識(shí)，為讀者步入本書后面知識(shí)的學(xué)習(xí)打下基礎(chǔ)。
9．1 PhoneGap基礎(chǔ) 220
9．1．1 產(chǎn)生背景 220
9．1．2 PhoneGap的發(fā)展歷程 220
9．1．3 使用PhoneGap進(jìn)行移動(dòng)Web開發(fā)的步驟 221
9．2 PhoneGap API詳解 222
9．2．1 應(yīng)用API 223
9．2．2 通知API 224
9．2．3 設(shè)備API 226
9．2．4 網(wǎng)絡(luò)連接API 227
9．2．5 加速計(jì)API 230
9．2．6 地理位置API 232
9．2．7 指南針API 235
9．2．8 照相機(jī)API 238
9．2．9 采集API 242
9．2．10 錄音API 244
9．3 綜合應(yīng)用——構(gòu)造一個(gè)播放器 245
9．4 高手點(diǎn)撥 248
9．5 實(shí)戰(zhàn)練習(xí) 248
第 10 章　開發(fā)移動(dòng)設(shè)備網(wǎng)頁(yè) 249
本章教學(xué)錄像：22分鐘
人們用手機(jī)這個(gè)通信工具來(lái)上網(wǎng)是“大勢(shì)所趨”，所以我們很有必要專門開發(fā)能在手機(jī)上瀏覽的網(wǎng)頁(yè)，即能在手機(jī)上瀏覽的網(wǎng)站。本章詳細(xì)講解通過(guò)CSS設(shè)置出符合Android標(biāo)準(zhǔn)的HTML網(wǎng)頁(yè)的方法。
10．1 編寫第一個(gè)適用于Android系統(tǒng)的網(wǎng)頁(yè) 250
10．1．1 控制頁(yè)面的縮放 254
10．1．2 添加CSS樣式 254
10．1．3 添加JavaScript 257
10．2 添加Ajax特效 262
10．3 綜合應(yīng)用——打造一個(gè)iOS+jQuery Mobile+ PhoneGap程序 269
10．4 綜合應(yīng)用——打造一個(gè)Android+jQuery Mobile+PhoneGap程序 271
10．4．1 建立一個(gè)基于Web的Android應(yīng)用 271
10．4．2 添加Web內(nèi)容 273
10．4．3 利用PhoneGap封裝成移動(dòng)Web應(yīng)用 274
10．4．4 修改權(quán)限文件 277
10．5 高手點(diǎn)撥 278
10．6 實(shí)戰(zhàn)練習(xí) 278
第3篇 知識(shí)進(jìn)階
第 11章　Web Sockets實(shí)時(shí)數(shù)據(jù)處理 280
本章教學(xué)錄像：35分鐘
Web Sockets是HTML5中的一種Web應(yīng)用通信機(jī)制，能夠在客戶端與服務(wù)器端之間進(jìn)行非HTTP的通信。本章詳細(xì)介紹在移動(dòng)Web頁(yè)面中使用Web Sockets API實(shí)現(xiàn)通信的方法，為讀者步入本書后面知識(shí)的學(xué)習(xí)打下基礎(chǔ)。
11．1 安裝jWebSocket服務(wù)器 281
11．2 實(shí)現(xiàn)跨文檔傳輸數(shù)據(jù) 281
11．3 使用WebSocket傳送數(shù)據(jù) 286
11．3．1 使用Web Sockets API的方法 286
11．3．2 在網(wǎng)頁(yè)中傳送數(shù)據(jù) 287
11．4 處理JSON對(duì)象 289
11．5 jWebSocket框架 293
11．5．1 jWebSocket框架的構(gòu)成 293
11．5．2 創(chuàng)建jWebSocket服務(wù)器端的偵聽器 293
11．6 jWebSocket令牌詳解 300
11．6．1 令牌的格式 301
11．6．2 令牌的常用術(shù)語(yǔ) 301
11．6．3 系統(tǒng)令牌詳解 302
11．7 綜合應(yīng)用——使用jWebSocketTest框架進(jìn)行通信 308
11．8 高手點(diǎn)撥 311
11．9 實(shí)戰(zhàn)練習(xí) 312
第 12章　Web Workers通信處理 313
本章教學(xué)錄像：26分鐘
在移動(dòng)Web頁(yè)面開發(fā)應(yīng)用中，使用Worker可以將前臺(tái)中的JavaScript代碼分割成若干個(gè)分散的代碼塊，分別由不同的后臺(tái)線程負(fù)責(zé)執(zhí)行，這樣可以避免由于前臺(tái)單線程執(zhí)行緩慢出現(xiàn)用戶等待的情況。本章詳細(xì)介紹使用Worker線程實(shí)現(xiàn)前臺(tái)數(shù)據(jù)和后臺(tái)數(shù)據(jù)交互的過(guò)程，并通過(guò)具體實(shí)例來(lái)演示具體實(shí)現(xiàn)流程。
12．1 Web Workers API基礎(chǔ) 314
12．1．1 使用HTML5 Web Workers API 314
12．1．2 ．js 文件 314
12．1．3 與 Web Worker 進(jìn)行雙向通信 315
12．2 Worker線程處理 317
12．2．1 使用Worker處理線程 318
12．2．2 使用線程傳遞JSON對(duì)象 321
12．2．3 使用線程嵌套交互數(shù)據(jù) 323
12．2．4 通過(guò)JSON發(fā)送消息 326
12．3 執(zhí)行大計(jì)算量任務(wù) 327
12．3．1 創(chuàng)建Worker 328
12．3．2 使用Web Workers API執(zhí)行大計(jì)算量任務(wù) 328
12．4 綜合應(yīng)用——在后臺(tái)運(yùn)行耗時(shí)較長(zhǎng)的運(yùn)算 335
12．5 高手點(diǎn)撥 338
12．6 實(shí)戰(zhàn)練習(xí) 338
第 13章　頁(yè)面數(shù)據(jù)離線處理 339
本章教學(xué)錄像：32分鐘
在Web應(yīng)用技術(shù)中，離線技術(shù)已經(jīng)成為了最主要的應(yīng)用之一，它確保了即使在離線的情況下，也可以正常實(shí)現(xiàn)數(shù)據(jù)交互功能。在HTML5中新增加了一個(gè)專用API，用于實(shí)現(xiàn)本地?cái)?shù)據(jù)的緩存，這個(gè)API使得開發(fā)離線應(yīng)用成為可能。本章將詳細(xì)介紹在移動(dòng)Web頁(yè)面中實(shí)現(xiàn)頁(yè)面數(shù)據(jù)離線處理的基本過(guò)程，為讀者步入本書后面知識(shí)的學(xué)習(xí)打下基礎(chǔ)。
13．1 離線應(yīng)用基礎(chǔ) 340
13．1．1 manifest文件詳解 340
13．1．2 配置IIS服務(wù)器 341
13．1．3 開發(fā)離線應(yīng)用程序 341
13．2 檢測(cè)本地緩存的更新狀態(tài) 343
13．2．1 updateready事件 344
13．2．2 update方法 345
13．2．3 swapCache方法 348
13．2．4 可能觸發(fā)的其他事件 350
13．3 檢測(cè)在線狀態(tài) 352
13．3．1 使用onLine屬性 353
13．3．2 使用online事件和offline 事件 355
13．3．3 開發(fā)一個(gè)離線留言系統(tǒng) 357
13．4 綜合應(yīng)用——開發(fā)一個(gè)離線式日歷提醒系統(tǒng) 360
13．5 高手點(diǎn)撥 364
13．6 實(shí)戰(zhàn)練習(xí) 364
第 14章　繪制三維圖形圖像 365
本章教學(xué)錄像：16分鐘
WebGL是一種3D繪圖標(biāo)準(zhǔn)，這種繪圖技術(shù)標(biāo)準(zhǔn)允許把JavaScript和OpenGL ES 2．0結(jié)合在一起，通過(guò)增加OpenGL ES 2．0的一個(gè)JavaScript綁定，WebGL可以為HTML5 Canvas提供硬件3D加速渲染，這樣Web開發(fā)人員就可以借助系統(tǒng)顯卡在瀏覽器里更流暢地展示3D場(chǎng)景和模型了。本章詳細(xì)講解使用WebGL在移動(dòng)Web頁(yè)面應(yīng)用中繪制三維圖形圖像的基礎(chǔ)知識(shí)。
14．1 WebGL基礎(chǔ) 366
14．1．1 發(fā)展歷程 366
14．1．2 WebGL 和 HTML5的關(guān)系 366
14．1．3 開發(fā)前的準(zhǔn)備 367
14．2 使用WebGL 368
14．2．1 繪制三角形和矩形 368
14．2．2 繪制有顏色的三角形和矩形 373
14．2．3 繪制三維動(dòng)畫 380
14．3 綜合應(yīng)用——繪制一個(gè)三維物體 388
14．4 高手點(diǎn)撥 398
14．5 實(shí)戰(zhàn)練習(xí) 398
第15 章　使用Geolocation API 399
本章教學(xué)錄像：21分鐘
Geolocation API用于將用戶當(dāng)前的地理位置信息共享給信任的站點(diǎn)，因?yàn)樵谶@個(gè)過(guò)程中會(huì)涉及用戶的隱私安全問(wèn)題，所以當(dāng)一個(gè)站點(diǎn)需要獲取用戶的當(dāng)前地理位置時(shí)，瀏覽器會(huì)提示用戶是“允許”或“拒絕”。本章詳細(xì)講解在移動(dòng)Web網(wǎng)頁(yè)中使用Geolocation API實(shí)現(xiàn)定位處理的方法，為讀者步入本書后面知識(shí)的學(xué)習(xí)打下基礎(chǔ)。
15．1 Geolocation API介紹 400
15．1．1 對(duì)瀏覽器的支持情況 400
15．1．2 使用Geolocation API 400
15．2 獲取當(dāng)前地理位置 401
15．3 使用getCurrentPosition()方法 405
15．4 在網(wǎng)頁(yè)中使用地圖 407
15．4．1 在網(wǎng)頁(yè)中調(diào)用地圖 407
15．4．2 在地圖中顯示當(dāng)前位置 410
15．4．3 在網(wǎng)頁(yè)中居中顯示定位地圖 412
15．4．4 利用百度地圖實(shí)現(xiàn)定位 414
15．5 綜合應(yīng)用——在彈出的對(duì)話框中顯示定位信息 416
15．6 高手點(diǎn)撥 419
15．7 實(shí)戰(zhàn)練習(xí) 420
第4篇 典型應(yīng)用
第16 章　使用jQTouch框架 422
本章教學(xué)錄像：12分鐘
jQTouch 是一個(gè) jQuery 插件，主要用于手機(jī)的 Webkit 瀏覽器，是實(shí)現(xiàn)動(dòng)畫、列表導(dǎo)航、默認(rèn)應(yīng)用樣式等各種常見UI效果的 JavaScript 庫(kù)。本章詳細(xì)講解在移動(dòng)Web網(wǎng)頁(yè)中使用jQTouch的方法，為讀者步入本書后面知識(shí)的學(xué)習(xí)打下基礎(chǔ)。
16．1 jQTouch基礎(chǔ) 423
16．1．1 jQTouch的特點(diǎn) 423
16．1．2 體驗(yàn)jQTouch程序 423
16．2 開始使用jQTouch 428
16．2．1 引入一段jQTouch代碼 428
16．2．2 使用 jQuery 生成動(dòng)態(tài)數(shù)據(jù) 430
16．2．3 使用jQTouch創(chuàng)建動(dòng)態(tài)UI 430
16．3 綜合應(yīng)用——使用jQTouch框架開發(fā)動(dòng)畫網(wǎng)頁(yè) 435
16．4 高手點(diǎn)撥 443
16．5 實(shí)戰(zhàn)練習(xí) 444
第 17章　使用Sencha Touch框架 445
本章教學(xué)錄像：19分鐘
Sencha Touch是一個(gè)應(yīng)用于手持移動(dòng)設(shè)備的前端JavaScript框架，與ExtJS是同一個(gè)門派的。Sencha Touch框架的功能強(qiáng)大，效果炫麗，能夠快速開發(fā)出適應(yīng)于在Android和iOS等移動(dòng)系統(tǒng)中運(yùn)行的Web頁(yè)面。本章詳細(xì)講解在移動(dòng)Web網(wǎng)頁(yè)中使用Sencha Touch框架的方法，為讀者步入本書后面知識(shí)的學(xué)習(xí)打下基礎(chǔ)。
17．1 Sencha Touch基礎(chǔ) 446
17．1．1 Sencha Touch簡(jiǎn)介 446
17．1．2 Sencha Touch的特性 447
17．1．3 Sencha Touch的優(yōu)勢(shì) 447
17．2 搭建Sencha Touch開發(fā)環(huán)境 448
17．2．1 獲取Sencha Touch 448
17．2．2 搭建Eclipse+Sencha Touch開發(fā)環(huán)境 450
17．2．3 調(diào)試Sencha Touch程序 455
17．3 Sencha Touch界面布局 456
17．3．1 Hbox布局(水平布局) 456
17．3．2 VBox布局(垂直布局) 457
17．3．3 Card布局(卡片布局) 458
17．3．4 Fit布局(填充布局) 459
17．3．5 Docking(?？? 460
17．4 綜合應(yīng)用——實(shí)現(xiàn)一個(gè)手機(jī)通訊錄 462
17．5 高手點(diǎn)撥 472
17．6 實(shí)戰(zhàn)練習(xí) 472
第5篇 綜合實(shí)戰(zhàn)
第 18章　記事本系統(tǒng) 474
本章教學(xué)錄像：13分鐘
經(jīng)過(guò)本書前面內(nèi)容的學(xué)習(xí)，相信讀者已經(jīng)掌握了移動(dòng)Web開發(fā)技術(shù)的基本知識(shí)。本章綜合運(yùn)用前面所學(xué)的知識(shí)，結(jié)合使用HTML5、CSS3和jQuery Mobile技術(shù)開發(fā)一個(gè)能夠在移動(dòng)設(shè)備中運(yùn)行的記事本管理系統(tǒng)。希望讀者認(rèn)真閱讀本章內(nèi)容，仔細(xì)品味HTML5+jQuery Mobile+CSS組合在移動(dòng)Web開發(fā)領(lǐng)域的真諦。
18．1 系統(tǒng)功能分析 475
18．2 系統(tǒng)模塊劃分 475
18．3 構(gòu)建jQuery Mobile平臺(tái) 476
18．4 頁(yè)面實(shí)現(xiàn) 476
18．4．1 實(shí)現(xiàn)系統(tǒng)首頁(yè) 476
18．4．2 實(shí)現(xiàn)記事本類別列表頁(yè)面 479
18．4．3 實(shí)現(xiàn)記事本列表頁(yè)面 481
18．4．4 實(shí)現(xiàn)記事本詳情和刪除頁(yè)面 483
18．4．5 實(shí)現(xiàn)記事本修改頁(yè)面 485
18．4．6 實(shí)現(xiàn)添加記事本頁(yè)面 487
18．5 系統(tǒng)樣式文件 489
第19章　Android版電話本管理系統(tǒng) 491
本章教學(xué)錄像：16分鐘
本章綜合運(yùn)用前面所學(xué)的知識(shí)，結(jié)合CSS和JavaScript技術(shù)，開發(fā)一個(gè)在Android平臺(tái)運(yùn)行的電話本管理系統(tǒng)。希望讀者認(rèn)真閱讀本章內(nèi)容，仔細(xì)品味HTML5+jQuery Mobile+PhoneGap組合在移動(dòng)Web開發(fā)領(lǐng)域的真諦，為步入以后的工作崗位打下堅(jiān)實(shí)的基礎(chǔ)。
19．1 需求分析 492
19．1．1 產(chǎn)生背景 492
19．1．2 功能分析 492
19．2 創(chuàng)建Android工程 493
19．3 實(shí)現(xiàn)系統(tǒng)主界面 494
19．4 實(shí)現(xiàn)信息查詢模塊 496
19．5 實(shí)現(xiàn)系統(tǒng)管理模塊 498
19．6 實(shí)現(xiàn)信息添加模塊 502
19．7 實(shí)現(xiàn)信息修改模塊 505
19．8 實(shí)現(xiàn)信息刪除模塊和更新模塊 508