細說 HTML5 高級 API 细说HTML5高级API

高洛峰

兄弟連IT教育教研總監，十多年的軟件開發和IT教學工作經驗。曾任多家上市公司技術總監、項目經理、高級軟件工程師等職務，具有紮實的技術功底。國內資深技術講師，從事IT培訓以來累計授課長達一萬課時以上，培養過百名IT名師，培訓上萬名學員成功走向IT崗位。熟悉掌握多種IT技能，對當前主流應用的編程語言、數據庫以及軟件架構設計都很擅長。對Web系統軟件開發深有研究，近年來致力於推廣開源的PHP語言和前端HTML5技術，榮獲騰訊2016年度網絡人氣名人講師。

第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