编辑推荐

适读人群：《细说HTML5高级API》的读者对象为传统的Web应用开发者,读者朋友需要具备熟练书写HTML4/5,JavaScript(ES5),CSS2/3的能力,我们在《细说HTML5高级API》中并没有掺杂过多的ES6部分的知识,因此,很多熟悉C++,JAVA,C#的开发者,在了解一些基础知识之后,也能迅速适用《细说HTML5高级API》的思路,《细说HTML5高级API》主要的目的是应用现阶段的主流WEB高级API,以及如何适用传统的Web技术构建跨平台的移动端应用,《细说HTML5高级API》整体构思比较注重实战对概念的理解,因此,无论在此之前,读者朋友适用的是什么语言开发,并不影响对此书的阅读。
　　

《细说HTML5高级API》比较适合有一定的JavaScript+HTML5开发基础的读者，希望读者能够从每个例子中举一反三，获取更多知识。

内容简介

　　

Cordova诞生的目的，是为了快速构建跨平台的移动APP，在市场开发需求增加和要求开发效率提高的情况下，我们不得不选择基于HTML5的开发技术，而Cordova是基于HTML5的，支持所有市面上的移动端设备，《细说HTML5高级API》的主要特点就是为了读者能够深入浅出的学习使用HTML5和Cordova的技术开发移动端APP。《细说HTML5高级API》分为三部分，第一部分是介绍HTML5的移动端布局和不同平台下Node.js和Cordova的环境搭建，第二部分介绍Cordova的常用核心API，包含了事件处理，地理位置，Web存储，多媒体等等。第三部分介绍了HTML5高级API中的几个常用API，WebWorkers，WebSocket，和Canvas等比较常用的API。《细说HTML5高级API》比较适合有一定的JavaScript+HTML5开发基础的读者，希望读者能够从每个例子中举一反三，获取更多知识。

作者简介

高洛峰，兄弟连IT教育教研总监，十多年的软件开发和IT教学工作经验。曾任多家上市公司技术总监、项目经理、高级软件工程师等职务，具有扎实的技术功底。国内资深技术讲师，从事IT培训以来累计授课长达一万课时以上，培养过百名IT名师，培训上万名学员成功走向IT岗位。熟悉掌握多种IT技能，对当前主流应用的编程语言、数据库以及软件架构设计都很擅长。对Web系统软件开发深有研究，近年来致力于推广开源的PHP语言和前端HTML5技术，荣获腾讯2016年度网络人气名人讲师。

目录

第1章鸟瞰HTML51
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．WebAPI和APP组件开发5
1．3．1面向API方式的开发方式6
1．3．2组件化自动化构建7
1．3．3未来展望7
1．4本章总结8
第2章HTML5bMap地理位置与服务9
2．1基本知识之经纬度9
2．2bMapJavaScriptAPI实例之HellobMap10
2．2．1创建账户和申请密钥11
2．2．2HellobMap应用13
2．3应用bMapJavaScriptAPI15
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．1WebStorageAPI29
3．1．1使用WebStorageAPI的好处29
3．1．2浏览器客户端常用的存储数据方式30
3．1．3简单存储实例30
3．2WebStorage的常用方法32
3．2．1setItem()与getItem()方法的使用32
3．2．2key()方法的使用32
3．2．3removeItem()和clear()方法的使用34
3．3实例：幻灯播放35
3．3．1impress的介绍与下载35
3．3．2效果与代码清单36
3．3．3impress．js的主要方法38
3．4本章小结39
练习题40
第4章HTML5CanvasAPI应用41
4．1什么是Canvas41
4．1．1Canvas的由来41
4．1．2Canvas的概念42
4．2如何使用Canvas43
4．2．1使用CanvasAPI的基本知识43
4．2．2检测浏览器是否支持Canvas44
4．2．3Canvas与CSS的关系与应用46
4．3使用Canvas绘制矩形的对角线48
4．3．1HTML代码实例48
4．3．2思路分析51
4．4使用CanvasAPI绘制圆51
4．4．1绘制圆的参数说明51
4．4．2绘制圆的HTML代码清单52
4．4．3绘制圆的效果图53
4．5使用CanvasAPI绘制矩形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认识WebSocketAPI63
5．1．1简单理解WebSocket63
5．1．2WebSocket协议和HTTP的不同64
5．2WebSocket和HTTP会话演示67
5．2．1HTTP的会话演示67
5．2．2WebSocket的会话演示67
5．2．3浏览器的支持情况68
5．2．4WebSocket的API常用的方法和属性68
5．3经典案例：WebSocket聊天室69
5．3．1服务器代码片段70
5．3．2HTML界面代码片段72
5．3．3客户端的实现75
5．3．4效果演示和详解78
5．4本章总结81
第6章FileReaderAPI的引用82
6．1FileReaderAPI的概念82
6．2FileReaderAPI的相关方法83
6．2．1readAsText()方法83
6．2．2readAsDataURL()方法83
6．2．3readAsBinaryString()方法84
6．2．4readAsArrayBuffer()方法84
6．2．5abort()方法84
6．3实例：读取文本内容84
6．3．1思路分析84
6．3．2HTML文档代码片段85
6．3．3JavaScript代码片段86
6．3．4简单的CSS代码片段87
6．3．5必要属性和事件驱动87
6．4实例：读取图像文件89
6．4．1JavaScript代码片段89
6．4．2HTML代码片段89
6．4．3CSS代码片段91
6．4．4思路梳理91
6．5本章总结93
练习题93
第7章HTML5拖放API95
7．1DOM和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章ApacheCordova简介106
8．1Cordova或PhoneGap106
8．1．1Cordova的由来107
8．1．2Cordova和PhoneGap的区别108
8．1．3Cordova的特点108
8．1．4注意事项109
8．2搭建Cordova环境109
8．2．1安装Node．js109
8．2．2安装和使用Node．js版本管理工具113

8．3安装使用Cordova116
8．3．1安装Cordova到系统中116
8．3．2使用淘宝的镜像117
8．3．3创建第一个CordovaAPP118
8．3．4项目目录的结构讲解120
8．3．5单页面应用121
8．4本章总结124
练习题125
第9章Cordova的真机调试和必备知识126
9．1JDK的安装与配置126
9．1．1在MacOSX上安装JDK127
9．1．2在Windows平台上安装JDK128
9．1．3测试Java是否安装成功129
9．1．4在Windows平台上配置环境变量129
9．2AndroidStudio的下载与安装132
9．2．1Mac上AndroidStudio的下载与安装132
9．2．2Windows上AndroidStudio的下载与安装133
9．3AndroidStudio的SDK包的管理134
9．3．1安装必要的SDK134
9．3．2单例模式下运行SDKManager135
9．4安卓真机的运行与调试136
9．4．1创建一个名为HelloAndroid的APP136
9．4．2添加安卓平台136
9．4．3查看编译环境137
9．4．4编译安卓应用137
9．4．5安装到安卓手机并运行138
9．5苹果手机的真机调试139
9．5．1新建一个名为hello的APP139
9．5．2打开Xcode，加载项目140
9．5．3编译和安装hello项目140
9．5．4重新打开手机上名为hello的APP141
9．6Cordova编辑器小知识142
9．6．1SublimeText3142
9．6．2WebStorm143
9．7本章总结144
练习题144
第10章Cordova开发基础146
10．1什么是flexbox146
10．2理解flexbox布局模型147
10．3深入理解伸缩容器的属性148
10．3．1display属性149
10．3．2flex-direction属性150
10．3．3flex-wrap属性153
10．3．4flex-flow属性156
10．3．5justify-content属性158
10．3．6align-items属性162
10．3．7align-content属性167
10．4深入理解伸缩项目的属性173
10．4．1order属性174
10．4．2flex-grow属性175
10．4．3flex-shrink177
10．4．4flex-basis属性178
10．4．5flex属性180
10．4．6align-self属性181
10．5本章总结187
练习题188
第11章Cordova中的事件处理189
11．1关于Cordova生命周期189
11．1．1认识程序的生命周期189
11．1．2理解Cordova生命周期中的事件191
11．2Cordova生命周期事件的使用194
11．2．1Cordova的生命周期中的程序加载状态事件194
11．2．2Cordova生命周期中的设备状态事件198
11．2．3Cordova生命周期中的用户主动触发事件200
11．3本章总结204
练习题204
第12章Cordova地理位置信息服务206
12．1GeolocationAPI的使用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设备方向API216
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第二个实例：自定义URL250
15．4本章总结253
练习题253
第16章Cordova中的数据库存储255
16．1Cordova中的本地存储255
16．1．1Web端的本地存储255
16．1．2Cordova应用中的本地存储258
16．2Cordova中的数据库259
16．2．1认识Cordova中的SQLiteAPI261
16．2．2使用SQLiteSQL261
16．3本章总结266
练习题266
第17章Cordova中的DeviceMotionAPI268
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

精彩书摘

　　《细说HTML5高级API》：
　　如上所示，我们在使用鼠标事件模拟拖曳功能叫，需要向用户提供可供拖曳的特定位置是否能够进行拖放。但是，我们不能确定开发者构建的体系都能够兼容。事实上，在某些情况下使用其他开发者搭建或构建的类似拖放功能的插件时，需要仔细研究是否能够和页面的其他元素进行内容合并。开发者在开发的过程中可以仔细比对和校验代码的准确性，但是在实际操作中，我们很呵能处于比较繁忙的开发状态，这种非常特殊的拖放方法不能够应用于桌面客户端的交互，在HTML5的新特性中，这些问题终于得到了解决，只需要在适合的场合使用拖放API即可。
　　7.2的概念
　　如果读者之前在使用Java等编程语言时使用过拖放API，那么对于HTML5中的拖放API应该也比较熟悉，相比于之前的基于鼠标基本事件的模拟，现在的拖放API功能的封装和集成已经很抽象了，实现指定效果的效率也非常高。
　　当用户开始拖放操作时，拖动的起始位置被称为拖动源，起始动作应为单击和拖动鼠标指针。从拖动鼠标开始到释放鼠标时指针最终到达的目标Ⅸ域被称为放置目标，在用户释放鼠标之前也许会经过许多放置目标。
　　有些我们需要注意的问题，首先，在用户拖动元素过程中，是否需要提供一些反馈信息？例如，显示哪些目标区域不可拖放、显示指定的拖放区域、改变拖放过程中鼠标的样式。
　　除此之外，我们还应该重视一个关键性的概念-datatransfer（数据传输），往HTML5规范中，datatransfer扮演着中央处理器的角色，负责公开发布拖动的数据存储信息，而且datatransfer被定义为一组对象，在JavaScript中基于对象的传输方式我们已见多不怪了。
　　……

前言/序言

随着HTML5标准化逐渐成熟，以及互联网的飞速发展和移动端的应用不断创新，再加上微信公众号、小程序的应用飙升，原生APP向WebAPP和混合APP的转变，用户对视觉效果和操作体验的要求越来越高，HTML5成为移动互联网的主要技术，也是目前的主流技术之一。HTML5是超文本标记语言（HTML）的第5次修订，是近年来Web标准的巨大飞跃。Web是一个内涵极为丰富的平台，和以前版本不同的是，HTML5并非仅仅用来表示Web内容，在这个平台上还能非常方便地加入视频、音频、图像、动画，以及与计算机的交互。HTML5的意义在于它带来了一个无缝的网络，无论是PC、平板电脑，还是智能手机，都能非常方便地浏览基于HTML5的各类网站。对用户来说，手机上的APP会越来越少，用HTML5实现的一些应用不需要下载安装，就能立即在手机界面中生成一个APP图标，使用手机中的浏览器来运行，新增的导航标签也能更好地帮助小屏幕设备和有视力障碍人士使用。HTML5拥有服务器推送技术，给用户带来了更便捷的实时聊天功能和更快速的网游体验。
HTML5对于开发者来说更是福音。HTML5本身是由W3C推荐的，也就意味着每一个浏览器或每一个平台都可以实现，这样可以节省开发者花在浏览器页面展现兼容性上的时间。另外，HTML5是Web前端技术的一个代名词，其核心技术点还是JavaScript。如HTML5的服务器推送技术再结合JavaScript编程，能够帮助我们实现服务器将数据“推送”到客户端的功能，客户端与服务器之间的数据传输将更加高效。基于SVG、Canvas、WebGL及CSS3的3D功能，会让用户惊叹在浏览器中所呈现的各种炫酷的视觉效果。以往在iPhoneiPad上不支持的Flash将来都有可能通过HTML5华丽地呈现在用户的iOS设备上。
本套图书介绍
为了让前端技术初学者少走弯路，快速而轻松地学习HTML5和JavaScript编程，我们结合新技术和兄弟连多年的教学经验积累，再通过对企业实际应用的调研，编写了一整套HTML5系列图书，共5本，包括《细说网页制作》、《细说JavaScript语言》、《细说DOM编程》、《细说AJAX与jQuery》和《细说HTML5高级API》。每一《细说HTML5高级API》都是不同层次的完整内容，不仅给初学者安排了循序渐进的学习过程，也便于不同层次的读者选择；既适合没有编程基础的前端技术初学者作为入门教程，也适合正在从事前端开发的人员作为技术提升参考资料。本套图书编写的初衷是为了紧跟新技术和兄弟连IT教育HTML5学科的教学发展，作为本校培训教程使用，也可作为大、中专院校和其他培训学校的教材。同时，对于前端开发爱好者，《细说HTML5高级API》也有较高的参考价值。
《细说网页制作》
作为“跟兄弟连学HTML5系列教程”的第一《细说HTML5高级API》，主要带领HTML5初学者一步步完成精美的页面制作。《细说HTML5高级API》内容包括HTML应用、CSS应用、HTML5的新技术、各种主流的页面布局方法和一整套页面开发实战技能，让读者可以使用多种方法完成PC端的页面制作、移动端的页面制作，以及响应式布局页面的制作，不仅能做出页面，还能掌握如何做好页面。
《细说JavaScript语言》
这是“跟兄弟连学HTML5系列教程”的第二《细说HTML5高级API》，在学习《细说HTML5高级API》之前需要简单了解一下第一《细说HTML5高级API》中的HTML和CSS内容。《细说HTML5高级API》内容是纯JavaScript语言部分，和浏览器无关，包括JavaScript基本语法、数据类型、流程控制、函数、对象、数组和内置对象，所有知识点都是为了学习DOM编程、Node.js、JS框架等JavaScript高级部分做准备。《细说HTML5高级API》虽然是JavaScript的基础部分，但《细说HTML5高级API》内容都需要牢牢掌握，才能更好地晋级学习。
《细说DOM编程》
这是“跟兄弟连学HTML5系列教程”的第三《细说HTML5高级API》，《细说HTML5高级API》内容都和浏览器相关，在学习《细说HTML5高级API》之前需要掌握前两《细说HTML5高级API》的技术。《细说HTML5高级API》内容包括BOM和DOM两个关键技术点，并且全部以PC端和移动端的Web特效为主线，以实例贯穿全部知识点进行讲解。学完《细说HTML5高级API》的内容，不仅可以用JavaScript原生的语法完成页面的特效编写，也为学习后面的JavaScript框架课程做好了准备。《细说HTML5高级API》内容是Web前端课程的核心，需要读者按书中的实例多加练习，能熟练地进行浏览器中各种特效程序的开发。
《细说AJAX与jQuery》
这是“跟兄弟连学HTML5系列教程”的第四《细说HTML5高级API》，其内容是建立在第三《细说HTML5高级API》之上的，包括服务器端开发语言Node.js、异步传输AJAX和jQuery框架三部分。其中，Node.js部分是为了配合AJAX完成客户端向服务器端的异步请求；jQuery是目前主流的前端开发框架，其目的是让开发者用尽量少的代码完成尽可能多的功能。AJAX和jQuery是目前前端开发的必备技术，《细说HTML5高级API》从基本应用开始学起，用实例分解方式讲解技术点，让读者完全掌握这些必备的技能。
《细说HTML5高级API》
这是“跟兄弟连学HTML5系列教程”的第五《细说HTML5高级API》，是前端开发的应用部分，主要讲解HTML5高级API的相关内容，包括画布、Web存储、应用缓存、服务器发送事件等，可以用来开发移动端的WebAPP项目。《细说HTML5高级API》重点讲解了Cordova技术，它提供了一组与设备相关的API，通过这组API，移动应用就能够通过JavaScript访问原生的设备功能，如摄像头、麦克风等。Cordova还提供了一组统一的JavaScript类库，以及与这些类库所用的设备相关的原生后台代码。通过编写HTML5程序，再用Cordova打包出混合APP的项目，可以安装在Android和iOS等设备上。
本套图书的特点
1．内容丰富，由浅入深
本套图书在内容组织上本着“起点低，重点高”的原则，内容几乎涵盖前端开发的所有核心技能，对于某一方面的介绍再从多角度进行延伸。为了让读者更加方便地学习本套图书的内容，在每《细说HTML5高级API》的每个章节中都提供了一些实际的项目案例，便于读者在实践中学习。
2．结构清晰，讲解到位
每个章节都环环相扣，为了让初学者更快地上手，本套图书精心设计了学习方式。对于概念的讲解，都是先用准确的语言总结概括，再用直观的图示演示过程，接着以详细的注释解释代码，最后用形象的比喻帮助记忆。对于框架部分，先提取核心功能快速掌握框架的应用，再用多个对应的实例分别讲解每个模块，最后逐一讲解框架的每个功能。对于代码部分，先演示程序效果，再根据需求总结涉及的知识点逐一讲解，然后组合成实例，最后总结分析重点功能的逻辑实现。
3．完整案例，代码实用
为了便于读者学习，本套图书的全部案例都可以在商业项目中直接运用，丰富的案例几乎涵盖前端应用的各个方面。所有的案例都可以通过对应的二维码扫描，直接在手机上查看运行结果，读者可以通过仔细研究其效果，最大限度地掌握开发技术。另外，扫描每个章节中的资源下载二维码，可以获得下载链接，点击链接即可获取所有案例的完整源代码。
4．视频精致，立体学习
字不如表，表不如图，图不如视频，每《细说HTML5高级API》都配有详细讲解的教学视频，由兄弟连名师精心录制，不仅能覆盖书中的全部知识点，而且远远超出书中的内容。通过参考本套图书，再结合教学视频学习，可以加快对知识点的掌握，加快学习进度。读者可以扫描每个章节中提供的教学视频二维码，获取视频列表直接在手机上观看，也可以直接登录“猿代码（www.ydma.cn）”平台在PC端观看，逐步掌握每个技术点。
5．电子教案，学教通用
每《细说HTML5高级API》都提供了和章节配套的电子教案（PPT）。对于学生来说，电子教案可以作为学习笔记使用，是知识点的浓缩和重点内容的记录。由于本套图书可以作为高校相关课程的教材或课外辅导书，所以可以方便教师教学使用。读者可以通过扫描对应章节的二维码，下载或在线观看电子教案。《细说HTML5高级API》为部分章节提供了一些扩展文章，也可以通过扫描二维码的方式下载或在线观看。
6．实时测试，寓学于练
每章最后都提供了专门的测试习题，供读者检验所学知识是否牢固掌握。通过扫描测试习题对应的二维码，可以查看答案和详细的讲解。
7．技术支持，服务到位
为了帮助读者学到更多的HTML5技术，在兄弟连论坛（bbs.itxdl.cn）中还可以下载常用的技术手册和所需的软件。笔者及兄弟连IT教育（新三板上市公司，股票代码：839467）的全体讲师和技术人员也会及时回答读者的提问，与读者进行在线技术交流，并为读者提供各类技术文章，帮助读者提高开发水平，解决读者在开发中遇到的疑难问题。
本套图书的读者群
有审美，喜欢编程，并且怀揣梦想的有志青年。
打算进入前端编程大门的新手，阶梯递进，由浅入深。
专业培训机构前端课程授课教材，有体系地掌握全部前端技能。
各大院校的在校学生和相关的授课老师，课件、试题、代码丰富实用。
前端页面、WebAPP、网页游戏、微信公众号等开发的前沿程序员，是专业人员的开发工具。
其他方向的编程爱好者，需要前端技术配合，或转向前端开发的程序员。
2017年8月


其他推荐