细说HTML5高级API+2

内容简介

Cordova诞生的目的，是为了快速构建台的移动APP，在市场开发需求增加和要求开发效率提高的情况下，我们不得不选择基于HTML5的开发技术，而Cordova是基于HTML5的，支持所有市面上的移动端设备，本书的主要特点是为了读者能够深入浅出的学HTML5和Cordova的技术开发移动端APP。本书分为三部分，*部分是介绍HTML5的移动端布局和不台下Node.js和Cordova的环境搭建，部分介绍Cordova的常用核心API含了事件处理，地理位置，Web存储，多媒体等等。第三部分介绍了HTMLPI中的几个常用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.etItem()与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协议和的不同 64
5.2 WebSocket和会话演示 67
5.2.1 的会话演示 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 K的安装与配置 126
9.1.1 在Mac OS X上安装K 127
9.1.2 在Window台上安装K 128
9.1.3 测试Java是否安装 129
9.1.4 在Window台上配置环境变量 129
9.2 Android Studio的与安装 132
9.2.1 Mac上Android Studio的与安装 132
9.2.2 Windows上Android Studio的与安装 133
9.3 Android Studio的SD的管理 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