細說 HTML5 高級 API
內容描述
Cordova誕生的目的,是為了快速構建跨平臺的移動APP,在市場開發需求增加和要求開發效率提高的情況下,我們不得不選擇基於HTML5的開發技術,而Cordova是基於HTML5的,支持所有市面上的移動端設備,本書的主要特點就是為了讀者能夠深入淺出的學習使用HTML5和Cordova的技術開發移動端APP。本書比較適合有一定的JavaScript+HTML5開發基礎的讀者,希望讀者能夠從每個例子中舉一反三,獲取更多知識。
本書分為三部分:
第一部分是介紹HTML5的移動端佈局和不同平臺下Node.js和Cordova的環境搭建,
第二部分介紹Cordova的常用核心API,包含了事件處理,地理位置,Web存儲,多媒體等等。
第三部分介紹了HTML5高級API中的幾個常用API,Web Workers,Web Socket,和Canvas等比較常用的API。
目錄大綱
第1章鳥瞰HTML5 1
1.1原生還是混合1
1.1.1原生應用的優缺點2
1.1.2混合應用的優缺點2
1.2移動端Web站點和原生應用3
1.2.1構建移動端解決方案3
1.2. 2建立成功的移動端方案4
1.3. Web API和APP組件開發5
1.3.1面向API方式的開發方式6
1.3.2組件化自動化構建7
1.3.3未來展望7
1.4本章總結8
第2章HTML5 bMap地理位置與服務9
2.1基本知識之經緯度9
2.2 bMap JavaScript API實例之Hello bMap 10
2.2.1創建賬戶和申請密鑰11
2.2.2 Hello bMap應用13
2.3應用bMap JavaScript API 15
2.3.1實例之添加定位控件15
2.3.2實例之步行路線18
2.3.3實例之駕車路線21
2.3.4實例之公交路線23
2.3.5實例之本地搜索25
2.4本章總結27
練習題28
第3章HTML5本地存儲29
3.1 Web Storage API 29
3.1.1使用Web Storage API的好處29
3.1.2瀏覽器客戶端常用的存儲數據方式30
3.1.3簡單存儲實例30
3.2 Web Storage的常用方法32
3.2.1 setItem()與getItem()方法的使用32
3.2.2 key()方法的使用32
3.2.3 removeItem()和clear()方法的使用34
3.3實例:幻燈播放35
3.3.1 impress的介紹與下載35
3.3.2效果與代碼清單36
3.3. 3 impress.js的主要方法38
3.4本章小結39
練習題40
第4章HTML5 Canvas API應用41
4.1什麼是Canvas 41
4.1.1 Canvas的由來41
4.1.2 Canvas的概念42
4.2如何使用Canvas 43
4.2.1使用Canvas API的基本知識43
4.2.2檢測瀏覽器是否支持Canvas 44
4.2.3 Canvas與CSS的關係與應用46
4.3使用Canvas繪製矩形的對角線48
4.3.1 HTML代碼實例48
4.3.2思路分析51
4.4使用Canvas API繪製圓51
4.4.1繪製圓的參數說明51
4.4.2繪製圓的HTML代碼清單52
4.4.3繪製圓的效果圖53
4.5使用Canvas API繪製矩形54
4.5.1繪製矩形的參數說明54
4.5.2繪製矩形的HTML代碼54
4.5.3繪製矩形的效果圖55
4.6使用Canvas繪製時鐘的實例56
4.6.1繪製時鐘的原理56
4.6.2繪製時鐘的HTML代碼清單56
4.6.3繪製時鐘的效果圖60
4.7本章總結60
練習題61
第5章HTML5中的WebSocket的應用63
5.1認識WebSocket API 63
5.1.1簡單理解WebSocket 63
5.1.2 WebSocket協議和HTTP的不同64
5.2 WebSocket和HTTP會話演示67
5.2.1 HTTP的會話演示67
5.2.2 WebSocket的會話演示67
5.2.3瀏覽器的支持情況68
5.2.4 WebSocket的API常用的方法和屬性68
5.3經典案例:WebSocket聊天室69
5.3.1服務器代碼片段70
5.3.2 HTML界面代碼片段72
5.3.3客戶端的實現75
5.3.4效果演示和詳解78
5.4本章總結81
第6章FileReader API的引用82
6.1 FileReader API的概念82
6.2 FileReader API的相關方法83
6.2.1 readAsText()方法83
6.2.2 readAsDataURL()方法83
6.2 .3 readAsBinaryString()方法84
6.2.4 readAsArrayBuffer()方法84
6.2.5 abort()方法84
6.3實例:讀取文本內容84
6.3.1思路分析84
6.3.2 HTML文檔代碼片段85
6.3.3 JavaScript代碼片段86
6.3.4簡單的CSS代碼片段87
6.3.5必要屬性和事件驅動87
6.4實例:讀取圖像文件89
6.4.1 JavaScript代碼片段89
6.4.2 HTML代碼片段89
6.4.3 CSS代碼片段91
6.4 .4思路梳理91
6.5本章總結93
練習題93
第7章HTML5拖放API 95
7.1 DOM和CSS實現的類似拖放功能的弊端95
7.2拖放API的概念96
7.3拖放API的事件和說明97
7.4拖放API的使用97
7.5實例1:經典列表拖放98
7.6實例2:文件拖放101
7.7本章總結104
練習題104
第8章Apache Cordova簡介106
8.1 Cordova或PhoneGap 106
8.1.1 Cordova的由來107
8.1.2 Cordova和PhoneGap的區別108
8.1.3 Cordova的特點108
8.1.4注意事項109
8.2搭建Cordova環境109
8.2.1安裝Node.js 109
8.2.2安裝和使用Node.js版本管理工具113
8.3安裝使用Cordova 116
8.3.1安裝Cordova到系統中116
8.3.2使用淘寶的鏡像117
8.3.3創建第一個Cordova APP 118
8.3.4項目目錄的結構講解120
8.3. 5單頁面應用121
8.4本章總結124
練習題125
第9章Cordova的真機調試和必備知識126
9.1 JDK的安裝與配置126
9.1.1在Mac OS X上安裝JDK 127
9.1.2在Windows平台上安裝JDK 128
9.1.3測試Java是否安裝成功129
9.1.4在Windows平台上配置環境變量129
9.2 Android Studio的下載與安裝132
9.2.1 Mac上Android Studio的下載與安裝132
9.2.2 Windows上Android Studio的下載與安裝133
9.3 Android Studio的SDK包的管理134
9.3.1安裝必要的SDK 134
9.3.2單例模式下運行SDK Manager 135
9.4安卓真機的運行與調試136
9.4 .1創建一個名為HelloAndroid的APP 136
9.4.2添加安卓平台136
9.4.3查看編譯環境137
9.4.4編譯安卓應用137
9.4.5安裝到安卓手機並運行138
9.5蘋果手機的真機調試139
9.5 .1新建一個名為hello的APP 139
9.5.2打開Xcode,加載項目140
9.5.3編譯和安裝hello項目140
9.5.4重新打開手機上名為hello的APP 141
9.6 Cordova編輯器小知識142
9.6. 1 SublimeText3 142
9.6.2 WebStorm 143
9.7本章總結144
練習題144
第10章Cordova開發基礎146
10.1什麼是flexbox 146
10.2理解flexbox佈局模型147
10.3深入理解伸縮容器的屬性148
10.3.1 display屬性149
10.3.2 flex-direction屬性150
10.3.3 flex-wrap屬性153
10.3.4 flex-flow屬性156
10.3.5 justify-content屬性158
10.3.6 align-items屬性162
10.3.7 align-content屬性167
10.4深入理解伸縮項目的屬性173
10.4.1 order屬性174
10.4.2 flex-grow屬性175
10.4.3 flex-shrink 177
10.4.4 flex-basis屬性178
10.4.5 flex屬性180
10.4.6 align-self屬性181
10.5本章總結187
練習題188
第11章Cordova中的事件處理189
11.1關於Cordova生命週期189
11.1.1認識程序的生命週期189
11.1.2理解Cordova生命週期中的事件191
11.2 Cordova生命週期事件的使用194
11.2.1 Cordova的生命週期中的程序加載狀態事件194
11.2.2 Cordova生命週期中的設備狀態事件198
11.2.3 Cordova生命週期中的用戶主動觸發事件200
11.3本章總結204
練習題204
第12章Cordova地理位置信息服務206
12.1 Geolocation API的使用206
12.1.1獲取設備的地理位置信息207
12.1.2獲取設備坐標的實例207
12.2監聽設備信息變化210
12.2.1監聽設備地理位置實例210
12.2.2監聽地理位置信息變化參數分析213
12.3本章總結213
練習題214
第13章Cordova設備方向API 216
13.1獲取當前設備的方向案例216
13.2監測當前設備的位置信息220
13.3仿微信搖一搖功能的實例222
13.4本章總結225
練習題226
第14章Cordova中的多媒體228
14.1播放遠程音樂228
14.2暫停音樂播放234
14.3停止音樂播放236
14.4追踪顯示播放進度238
14.5從指定的位置播放240
14.6錄製聲音與播放聲音242
14.7資源與性能優化244
14.8本章總結245
練習題245
第15章Cordova中的內置瀏覽器247
15.1認識內置瀏覽器247
15.2第一個簡單的實例248
15.3第二個實例:自定義URL 250
15.4本章總結253
練習題253
第16章Cordova中的數據庫存儲255
16.1 Cordova中的本地存儲255
16.1.1 Web端的本地存儲255
16.1. 2 Cordova應用中的本地存儲258
16.2 Cordova中的數據庫259
16.2.1認識Cordova中的SQLite API 261
16.2.2使用SQLite SQL 261
16.3本章總結266
練習題266
第17章Cordova中的Device Motion API 268
17.1使用加速傳感器268
17.1.1加速度的概念268
17.1.2獲取當前加速度的實例269
17.2監控設備的加速度271
17.2.1如何監控當前設備的加速度271
17.2.2監測當前設備加速度的實例272
17.2.3深入理解“加速度” 274
17.2.4哪些場景可以應用加速傳感器275
17.3本章總結278
練習題278
作者介紹
高洛峰
兄弟連IT教育教研總監,十多年的軟件開發和IT教學工作經驗。曾任多家上市公司技術總監、項目經理、高級軟件工程師等職務,具有紮實的技術功底。國內資深技術講師,從事IT培訓以來累計授課長達一萬課時以上,培養過百名IT名師,培訓上萬名學員成功走向IT崗位。熟悉掌握多種IT技能,對當前主流應用的編程語言、數據庫以及軟件架構設計都很擅長。對Web系統軟件開發深有研究,近年來致力於推廣開源的PHP語言和前端HTML5技術,榮獲騰訊2016年度網絡人氣名人講師。