細說HTML5高級API

基本信息

細說HTML5高級API

作 譯 者:兄弟連教育

出版時間:2017-10

千 字 數:480

版 次:01-01

頁 數:296

開 本:16開

I S B N :9787121329272

內容簡介

Cordova誕生的目的,是為了快速構建跨平台的移動APP,在市場開發需求增加和要求開發效率提高的情況下,我們不得不選擇基於HTML5的開發技術,而Cordova是基於HTML5的,支持所有市面上的移動端設備,本書的主要特點就是為了讀者能夠深入淺出的學習使用HTML5和Cordova的技術開發移動端APP。本書分為三部分,第一部分是介紹HTML5的移動端布局和不同平台下Node.js和Cordova的環境搭建,第二部分介紹Cordova的常用核心API,包含了事件處理,地理位置,Web存儲,多媒體等等。第三部分介紹了HTML5高級API中的幾個常用API,Web Workers,Web Socket,和Canvas等比較常用的API。本書比較適合有一定的JavaScript+HTML5開發基礎的讀者,希望讀者能夠從每個例子中舉一反三,獲取更多知識。

目錄信息

第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

相關詞條

熱門詞條

聯絡我們