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

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