1、画布 -- 非常重要，H5能够展现优秀图表的源泉
I、定义画布元素
II、js绘制图像
a、获取元素 getElement
b、初始化Context - element.getContext("2d");
c、绘制
i、绘制路径（多边形） moveTo lineTo stroke
ii、绘制矩形 fillRect
iii、绘制圆形 arc
iv、字符 fillText
v、增加图形 drawImage
vi、渐变 （径向|线性） createLinearGradient/createRadialGradient
Canvas 坐标体系是，按照 左上角位置(x,y) 右下角位置(x,y)
画布是透明的，可以放到页面任何一个元素之上，这样就可以实现任何界面组合功能；如果需要样式，可以指定border/background 等等
III、矢量图形
H5可以嵌入矢量图形
2、存储增强 - 本地存储 | 本地数据库 | 离线数据
-- 特别是本地存储和本地数据库，比原先的cookie功能增加了非常多的可用性；同cookie一样，localStorage/sessionStorage也是window的对象。本地存储特别是对移动端，减少了cookie来回交互的带宽流量(主要指HTTP头)
I、本地存储 localStorage | sessionStorage
存储在本地浏览器中，每个域(domain)可以存 5M
if(typeof(Storage)!=="undefined")
{
// 是的! 支持 localStorage sessionStorage 对象!
// 一些代码.....
}
else
{
// 抱歉! 不支持 web 存储。
}
a、存储方式：
因为是一个对象，所以可以用对象的存储方式 . []
或者数组访问 localStorage[key]= value; 设置和获取值;也可以对象访问 localStorage.key = value
同时也提供了 方法操作
可以直接设置值 localStorage.setItem(key, value);
b、数据处理
localStorage.length -- 存储的数据数目
localStorage.key(index);
localStorage.removeItem(key);
localStorage.clear();
c、存储内容
虽然是基本的 key-value，只能在localStorage存储字符串；但可以通过存储json字符串，来实现数组、对象等存储
localStorage.setItem("stickiesArray", JSON.stringify(stickiesArray));
stickiesArray = JSON.parse(localStorage["stickiesArray"]);
localStorage VS sessionStorage
属性方法都是一样的，区别是 sessionStorage 是会话级别的，关闭了浏览器窗口存储的数据就丢失了
II、浏览器提供了一个本地的 SQL 数据库
a、打开数据库
var db = openDatabase('databasename','version','desc',size,callback);
--有则打开，没有则创建
b、执行操作
db.transaction(function (tx){
tx.executeSql(sql);
});
sql也可以使用动态绑定的方式
c、获取数据
tx.executeSql(sql, [], function(tx,results){
results.rows.item(i).column
III、离线文件
缓存文件 *.appcache 包含内容，让浏览器缓存服务器的一些文件
a、CACHE MANIFEST - 缓存内容
CACHE MANIFEST
/js.js
/css.css
b、NETWORK -- 需要屏蔽的内容
NETWORK:
*
c、FALLBACK -- 失败（无法访问）时替换
FALLBACK
/html/ /offline.xml
使用缓存的注意事项
I、HTTP 响应时消息头需要设置成 MME-type = "text/cache-manifest"
II、文件更新后，客户端不会自动更新，必须 更新manifest 文件
3、多线程 - Web Workers
通过 WebWorker是可以独立执行一些 脚本，在主线程之外。不过这个线程有限制
不能使用 DOM 的引用；发送给工作线程的对象也是拷贝的副本；可以访问本地存储，也可以使用ajax请求数据
I、启动线程
var worker = new Worker("worker.js"); -- 就能启动一个 Web工作线程
II、消息交互
worker.postMessage("ping"); -- 发送消息，可以发送任意对象，但不能发送函数指针，防止有DOM应用
worker.onmessage = function(event) -- 等待worker 线程完成 计算任务后，发送消息回来
worker.onerror = function(error) -- worker线程 发送错误回来
III、停止线程
worker.terminate -- 终止工程线程
Web工作线程有一个全局函数，可以引用其他的js文件
importScripts
(
"xx.js",
"xxx.js"
)
工程线程中可以使用setInterval 间隔执行。去完成一些定时任务，比如喂狗；一般用工作线程，做一些CPU计算任务。
Web 工作线程中也可以创建子线程
主线程
worker.postMessage("ping");
worker.onmessage = function(event) {
var message = "Worker " + " says " + event.data;
document.getElementById("output").innerHTML = message;
// var worker = event.target; 可以获取worker线程的引用
}
worker.js -- 工作Web线程
onmessage = pingpong; //onmessage 是 Worker的属性
function pingpong(event) {
if (event.data == "ping") {
postMessage("pong");
}
}
4、交互事件模式的变化 SSE | WebSocket
传统服务器和客户端交互，主要是通过 拉 模式，客户端通过 整页定时刷新；或者利用 ajax 部分页面定时请求刷新的方式；这种方式的最大问题是，对服务器资源的消耗，所有流程都要通过端口调度来分发处理。
H5新增了模式， 和消息中间件一样 提供了 推 模式，即一旦建立连接后，数据由服务端推送到客户端，要实现这部分功能至少需要如下基础：
a、服务器和客户端(浏览器) 要保持长链接 - HTTP1.1 / HTTP2.0 keep-alive
b、服务器要不断给客户端发送数据 - 占用线程
一般服务器给客户端的响应有几种方式，一种是基于 IO的，请求的Servlet 给客户端发送数据；另一种基于NIO，只有一个线程，服务端轮询给客户端发送数据；通过定时器不断发送数据
I、SSE - 服务端推送事件
基于HTTP协议之上的一个 文本协议，所以一般用来传递 文本数据（当然也可以传2进制数据）
a、客户端
i、打开一个请求连接 -- 对应的有 open事件
var source=new EventSource("demo_sse.php");
source 有一个 readyState属性 0 正在链接 1 已建立连接 2 链接关闭
ii、接收数据 - message 事件 / error 事件
source.onmessage=function(event)
{
document.getElementById("result").innerHTML+=event.data + "
";
};
event.data | event.origin (URL协议部分) | lastEventId --服务器发送的数据编号可选
iii、关闭连接 - cloase
source.close
iv、自定义事件
source.addEventListener("my",function(event){},false);
--所有事件都是JS的两种方式： onXXX 或者通过 addEventListener("XXX");
b、服务端
i、发送HTTP消息头
Content-Type: text/event-stream
Cache-Control: no-cache
Connection: keep-alive
ii、发送数据
data: message \n\n (双回车作为结束)
id: key (数据编号，可选）
event: my (自定义事件时使用, 可选）
retry: 1000 (服务端超时时间，重新请求，可选）
服务端需要通过定时器，定时发送数据
II、WebSocket - 新增的基于TCP 的交互协议
基于HTTP，只有单向的通讯，即浏览器客户端向服务端请求；如果需要有交互的就比较麻烦了；H5新增了，基于TCP的双向交互协议，是2进制协议。
a、客户端
i、打开WebSocket -- 对应有 open事件
var ws = new WebSocket("ws://localhost:9998/echo");
ii、发送数据
ws.send
iii、接收数据 - 对应message 事件 | onerror
ws.onmessage = function (evt)
{
var received_msg = evt.data;
alert("数据已接收...");
};
iv、关闭 - 对应close事件
ws.onclose = function()
b、服务端
JavaEE7开始支持，tomcat和jetty都是7 以后支持
5、新增的元素
I、语义元素
II、数学运算符
math ...
III、拖拽功能
拖拽功能几步骤
a、设置元素可以拖拽
b、拖拽的内容是什么
ondragstar 属性定义拖拽内容
ev.dataTransefer.setData
c、拖拽目的地
ondragover
获取拖拽内容 ev.dataTransfer.getData
然后放置位置 ev.target.appendchild
6、表单增强
I、表单元素
a、datalist -- 在Input基础上，提供类似 搜索的下来列表功能
b、keygen - 密钥和公钥
c、output - 用于表达式计算输出
II、input属性
a、颜色拾色器
b、日期类型
c、email地址
d、数字
e、搜索
f、url
III、表单属性
autocomplete -- 主要是浏览器系统记忆 以前输入的值
novalidate -- 不校验表单域
autofocus -- 自动获取焦点/默认焦点
form属性 -- 如果指定了 form属性，则该表单域无论是否在此表单中，都是该表单域的
formaction -- 覆盖 以前HTML 默认的 action 属性
formenctype -- 对提交到表单的数据进行编码（主要是特殊字符）
formmethod -- 覆盖 原先 method 属性(get/post)
formnovalidate -- 覆盖前面的 novalidate 属性
formtarget -- 覆盖 原先的target属性，新弹出框显示提交后的结果
input 中 image 类型的 height/width属性
前面表单元素 的 datalist / list
multiple 属性，可以选择多个值，特别是 input /file 类型非常实用
pattern 检验 input 元素的值
placeholder -- 灰化的默认值，特别是搜索导航框里面出现
required -- 提交之前必须有输入
7、多媒体
I、视频
三种视屏格式
容器MP4 (H264)
容器Ogg .ogv
容器webm .webm
解决这个问题
取消掉 vdeio 的 src 资源，使用子元素 提供多个编码视屏供选择
对于其他格式的非HTML5熟悉的，或者早期的flash 可以使用
II、音频
音频同样有多种格式
8、地理定位
主要是返回经纬度，因为涉及隐私，很多浏览器或者用户不支持
var x=document.getElementById("demo");
function getLocation() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showPosition);
}
else {
x.innerHTML="该浏览器不支持获取地理位置。";
}
}
function showPosition(position) {
x.innerHTML="纬度: " + position.coords.latitude +
"
经度: " + position.coords.longitude;
}
网友评论