标签：
HTML5 DAY01:
基本内容
HTML5目前最新的规范(标准)是2014年10月推出
2005年左右出现HTML5版本(非标准)
W3C组织(两个组织定义H5规范)
学习(研究)HTML5是学习未来(将来主流)
HTML版本 - 第一阶段主要学习还是4版本(包含5版本)
<header><nav>
HTML5版本之后,声明不再出现版本信息
有意地版本,以后可能不再会有新版本
HTML5的规范内容实时更新
注意
HTML5永远都不可能离开javascript.
HTML5在移动端支持好于PC端
HTML5新表单
1、input新类型
①email类型
语法：<input type=”email” />
作用 - 验证是否包含"@"
问题 - 验证逻辑并不完整
②url类型
语法：<input type=”url” />
作用 - 提交表单时,验证是否包含"http://"
问题 - 验证逻辑并不完整
③tel类型 - 只在移动端显示
④number类型
语法：<input type=”number” />
min - 最小值
max - 最大值
step - 步长,默认值为1
⑤range类型
语法：<input type=”range” min=”1” max=”100” value”50”/>
min - 最小值
max - 最大值
tep - 步长
value - 当前值
⑥date类型
语法：<input type=”date” />
⑦week类型
语法：<input type=”week” />
⑧month类型
语法：<input type=”month” />
⑨color类型
语法：<input type=”color” />
search类型--输入搜索关键字操作的文本框
语法：<input type=”search” />
2、表单新元素
①datalist元素--定义备选项(并不显示)
配合<input>元素使用
定义list属性 - 属性值等于<datalist>元素的id属性值
效果 - 和<select>下拉列表类似
特点 - 数据与结构的分离
数据 - 预定义数据内容<datalist>
结构 - 显示在HTML页面中的元素<input>
优点 - 使用<datalist>元素定义的数据,可以重复使用
②progress元素---进度条
max - 设置进度条的最大值
没有min属性 - 最小值为0
value - 表示当前的进度值
③meter元素--刻度
min - 最小值
max - 最大值
value - 当前值
low - 低预警值
high - 高预警值
④output元素--输出
3、表单新属性
①placeholder属性 - 提供默认提示内容
语法：<input type=”text” placeholder=”提示文本 ” />
作用 - 类似于value属性
区别
value属性值
显示为黑色
确实存在文本框中
placeholder属性值
显示为灰色
类似于背景存在
②multiple属性 - 允许输入多个值
语法：<input type=”text” multple/>
作用 - 允许输入多个值
注意 - 多个值之间使用","
用法 - 只定义属性名,没有属性值
③autofocus属性 - 自动获取焦点
语法：<input type=”text” autofocus />
作用 - 自动获取焦点
用法 - 只定义属性名,没有属性值
④form 属性- 允许表单元素定义在表单之外
语法：<form id=”myform”></form>
<input type=”text” form=”myform” name=”uname”>
原本的HTML页面中定义表单元素
所有的表单元素,必须定义在<form>元素中
作用 - 允许将表单元素定义在<form>元素外
<form>元素外的表单元素,使用该属性
form属性值等于<form>元素的id属性值
4、表单新验证
(1)验证属性
①required属性：验证当前元素值是否为空
语法：<input type=”text” required />
②pattern属性:使用正则表达式验证当前元素值是否匹配
语法：<input type=”text” pattern=”[0-9a-zA-Z]{6,16}” />
注意 - 并不能验证当前元素值是否为空
③min和max属性：验证当前元素值最小值或最大值
一般适用于number、range等元素
语法：<input type=”number” min=”1” max=”50” />
④minlength和maxlength属性
语法：<input type=”text” maxlength=”10” minlength=”1” />
minlength - 验证当前元素值的最小长度
输入值时,允许输入小于指定值
提交表单时,验证元素值最小长度
注意：minlength并不是HTML5新属性
maxlength - 验证当前元素值的最大长度
输入值时,长度不能大于指定值
⑤validity属性
语法：指定元素.validity.validityState
如：Elem.validity.valid
表单验证HTML5提供一种有效状态
有效状态通过validityState对象获取到
validityState对象可通过validity属性得到
验证(有效)状态
validityState对象提供了一系列的有效状态
通过这些有效状态,进行判断
注意：所有验证状态必须配合上述的验证属性使用
作用：用来替换原本手工实现的逻辑
(2)验证状态
①valid
作用 - 判断当前元素值是否正确
注意：该状态返回true,表示验证成功；该状态返回false,表示验证失败
②valueMissing
作用 - 判断当前元素值是否为空
用法 - 配合required属性使用
③typeMismatch
作用 - 判断当前元素值的类型是否匹配
用法 - 配合email、number、url等
④patternMismatch
作用 - 判断当前元素值是否与指定正则表达式匹配
用法 - 配合pattern属性使用
⑤tooLong
作用 - 判断当前元素值的长度是否正确
用法 - 配合maxlength属性
注意：使用maxlength属性后,实际不可能出现长度大于maxlength的 值 ；tooLong很难出现这种情况
⑥rangeUnderflow
作用 - 判断当前元素值是否小于min属性值
用法 - 配合min属性
注意 - 并不能与max属性值进行比较
⑦stepMismatch
作用 - 判断当前元素值是否与step设置相符
用法 - 配合step使用
注意 - 并不能与min或max属性值进行比较
⑧customError
用法 - 配合setCustomValidity()方法
如果使用该方法,该状态返回true
setCustomValidity()方法
作用 - 设置自定义的错误提示内容
存在的问题 ： 一旦使用该方法修改默认错误提示信息后
即使输入正确,错误提示依旧存在(逻辑错误)
解决：判断如果用户输入正确的话，调用该方法将信息设置为空("")
不能使用上述有效状态的任何一种判断输入是否正确(所有状态返回false)
HTML Day02
1、视频处理 <video></video>
①基本内容：使用Flash技术处理HTML页面中的视频内容
包含音频、动画、网页游戏等
特点
浏览器原生不支持(IE浏览器要求安装ActiveX组件)
性能不好(不能过多地使用)
智能移动端并不支持Flash技术
命运
Flash的母公司Adobe公开宣布放弃
目前用于替代Flash技术最好的选择 - HTML5
几乎所有浏览器原生支持<video>元素
性能更高
智能移动端支持非常好
②如何实现视频处理
<video>元素
如果当前浏览器不支持<video>元素
在<video>元素内编写提示内容
属性
src - 引入视频文件的路径
autoplay - 自动播放视频
使用<source>元素
<video>
<source src="一种视频格式" />
<source src="一种视频格式" />
<source src="一种视频格式" />
</video>
③<video>支持的视频格式
MP4格式 - 目前比较主流
OGG格式 - 多用于移动端
WebM格式 - 目前唯一支持超高清格式
在HTML页面中支持超高清格式(HTML5)
由Google公司推出的
④<video>元素的属性
src - 引入视频文件的路径
autoplay - 自动播放视频
controls - 提供控制面板
loop - 表示循环播放
poster - 设置播放之前显示的图片
width和height - 设置显示视频的宽度和高度
preload - 预加载
auto - (默认值)自动加载
none - 不加载
metadata - 只加载视频的基本信息(不含视频)
⑤高级内容
方法
play() - 播放视频
pause() - 暂停视频
load() - 加载视频
canPlayType() - 判断当前浏览器是否支持指定视频格式
事件
play - 当视频播放时被触发
pause - 当视频暂停时被触发
ended - 当视频结束时被触发
error - 当视频错误时被触发
canplay - 不考虑整体情况下,只要能播放,就播放
canplaythrough - 考虑整体情况下,只要能播放,就播放
progress - 表示视频加载的进度
属性 - 用于判断
paused - 表示判断当前视频是否暂停
返回Boolean值,true表示暂停,false表示播放
ended - 表示判断当前视频是否播放完毕
返回Boolean值,true表示完毕
duration - 表示当前视频的时长
currentTime - 表示当前视频播放的位置
2、音频处理<audio></audio>
第一种 - 只支持一种音频格式
<audio src="音频文件的路径"></audio>
第二种 - 同时引入多个音频格式
<audio>
<source src="一种音频格式" />
<source src="一种音频格式" />
<source src="一种音频格式" />
</audio>
<audio>元素支持音频格式
MP3 - 目前最主流
OGG
WAV
3、画布<canvas></canvas>
①基本内容
简单来说,HTML5提供的新元素<canvas>
Canvas在HTML页面提供画布的功能，在画布中绘制各种图形
Canvas绘制的图形与HTML页面无关
无法通过DOM获取绘制的图形
无法为绘制的图形绑定DOM事件
只能使用Canvas提供的API
Canvas用途
在HTML页面中绘制图表(例如柱状图、饼状图等)
网页游戏 - Flash技术
使用HTML5中的Canvas
如何使用Canvas
在HTML页面中定义<canvas>元素
在javascript代码中
获取<canvas>元素
创建画布对象
getContext(‘2d‘)方法
使用Canvas提供的API
②绘制图形
绘制矩形
fillRect(x,y,width,height) - 实心矩形
x和y - 矩形的左上角坐标值
width - 设置矩形的宽度
height - 设置彗星的高度
strokeRect(x,y,width,height) - 空心矩形
clearRect(x,y,width,height) - 清除指定区域的矩形
设置颜色
fillStyle - 设置填充颜色
strokeStyle - 设置描边颜色
globalAlpha - 设置透明度(0-1)
设置渐变
线型渐变 - createLinearGradient(x1,y1,x2,y2)
具有基准线 - 起点(x1,y1)和终点(x2,y2)
1. 设置线型渐变
createLinearGradient(x1,y1,x2,y2)
x1和y1 - 基准线的起点坐标值
x2和y2 - 基准线的终点坐标值
该方法返回渐变对象
2. 通过渐变对象,设置渐变颜色
addColorStop(postion,color)方法
postion - 设置渐变颜色的位置
该值的范围为 0-1
color - 设置渐变的颜色
3. 设置填充颜色 - 渐变对象
4.绘制矩形
扇形(射线)渐变 - createRadialGradient(x1,y1,r1,x2,y2,r2)
具有柱形(锥形) - 两个圆的面积
参数
x1和y1 - 第一个圆的圆心坐标值
r1 - 第一个圆的半径
x2和y2 - 第二个圆的圆心坐标值
r2 - 第二个圆的半径
1. 设置扇形渐变
createRadialGradient(x1,y1,r1,x2,y2,r2)
x1和y1 - 第一个基准圆的圆心坐标值
r1 - 第一个基准圆的半径
x2和y2 - 第二个基准圆的圆心坐标值
r2 - 第二个基准圆的半径
该方法返回渐变对象
2. 设置渐变颜色
3. 设置填充颜色为渐变
4. 绘制矩形
③绘制文字
方法：
fillText(text,x,y) - 实心文字
text - 绘制的文字内容
x和y - 绘制的坐标值
strokeText(text,x,y) - 空心文字
属性
font - 类似于CSS中的font属性
textAlign - 设置文字的水平方向对齐
left - 左对齐
center - 水平居中
right - 右对齐
textBaseline - 设置文字的垂直方向对齐
top - 顶部对齐
middle - (垂直)居中对齐
bottom - 底部对齐
hanging - 悬挂基线
alphabetic - 字母基线
注意
无论是水平方向还是垂直方向对齐,基准线对齐,并不是文字对齐
无论是水平方向还是垂直方向对齐,并不是必要的属性(不使用也是可以的)
④阴影效果
shadowColor - 设置阴影颜色
shadowOffsetX - 设置水平方向阴影
shadowOffsetY - 设置垂直方向阴影
shadowBlur - 设置阴影的模糊程度
⑤创建路径
(标识)方法
beginPath() - 表示开始创建路径
closePath() - 表示结束创建路径
设置方法
rect(x,y,width,height) - 设置矩形形状
x和y - 设置矩形的左上角坐标值
width和height - 设置矩形的宽度和高度
arc(x,y,radius,startAngle,endAngle,direction) - 设置圆形形状
x和y - 设置圆形的圆心坐标值
radius - 设置圆形的半径
startAngle和endAngle - 设置圆形的起始位置
direction - 按照顺时针或逆时针绘制
绘制方法
stroke() - 绘制轮廓
fill() - 绘制填充
绘制线条(直线和折线、多边形) - 创建路径
moveTo(x,y) - 设置这条线的起点坐标值
lineTo(x,y) - 设置这条线的终点(折点)坐标值
⑥设置线条
lineWidth - 设置线条的宽度
默认值为1(px)
lineCap - 设置线条端点的形状
butt - 默认值,平直
round - 圆角
square - 正方向
lineJoin - 设置两条线焦点的形状
miter - 默认值,尖角
round - 圆角
bevel - 斜角
miterLimit - 配合lineJoin使用
lineJoin设置为miter,该属性值设置尖角的延伸范围
4、Canvas处理图片
绘制图片
drawImage(img,x,y) - 按照图片原大小加载
img - 当前加载(绘制)的图片
x和y - 绘制图片的坐标值(左上角)
drawImage(img,x,y,width,height) - 按照指定大小加载图片
img - 当前加载(绘制)的图片
x和y - 绘制图片的坐标值(左上角)
width和height - 设置绘制图片显示的宽度和高度
注意：必须保证图片加载完毕(onload事件)后,再绘制图片
平铺图片
createPattern(img,type)
img - 平铺的图片
type - 平铺的方式
repeat - 平铺
no-repeat - 不平铺
repeat-x - 水平方向平铺
repeat-y - 垂直方向平铺
注意：必须保证图片加载完毕(onload事件)后,再绘制图片
切割图片
clip() - 切割(按照创建路径使用)
画布方法
scale(x,y) - 缩放(缩小或放大)
x - 表示水平方向的缩放
y - 表示垂直方向的缩放
参数的取值
如果为1的话,表示不缩放(原大小)
如果小于1的话,表示缩小
如果大于1的话,表示放大
translate(x,y) - 重新定位(x,y)
x和y - 新的坐标值
注意 - x和y是相对于上次定位坐标值
rotate(旋转角度) - 旋转画布
公式为 degrees*Math.PI / 180;
5、Chart.js - Canvas的JS库
作用 - 提供各种图表
如何使用
①.在HTML页面中引入Chart.js文件
②.在HTML页面中定义<canvas>元素
③.在javascript代码中
获取<canvas>元素
创建画布对象
var context = canvas.getContext("2d");
通过画布对象,创建Chart对象
var chart = new Chart(context);
利用Chart对象调用API方法
var data = [];
④. chart.Pie(data);
提供6种图表
柱状图 - Bar(data,options)
饼状图 - Pie(data,options)
曲线图 - Line(data,options)
环形图 - Doughnut(data,options)
雷达图 - Radar(data,options)
极地区域图 - PolarArea(data,options)
HTML5 DAY04:
SVG
1、基本内容
SVG并不属于HTML5专有内容
HTML5提供有关SVG原生的内容
在HTML5出现之前,就有SVG内容
SVG,简单来说就是矢量图
SVG文件的扩展名为".svg"
SVG使用的是XML语法
2、概念
SVG是一种使用XML技术描述二维图形的语言
SVG的特点:
SVG绘制图形可以被搜索引擎抓取
SVG在图片质量不下降的情况下,被放大
3、**SVG与Canvas的区别
SVG
不依赖分辨率
支持事件绑定
大型渲染区域的程序(例如百度地图)
不能用来实现网页游戏
Canvas
依赖分辨率
不支持事件绑定
最合适网页游戏
保存为".jpg"格式的图片
4、用途
网页中一些小的图标
网页中动态特效(动画效果)
5、绘制图形
①矩形元素
<rect x="" y="" width="" height="" />
绘制矩形 - <rect />
x和y - 绘制矩形的左上角坐标值
width和height - 绘制矩形的宽度和高度
必须使用属性方式,不能使用style样式方式
默认颜色为黑色
设置颜色 - 既可以使用属性,还可以使用样式
fill - 设置填充颜色
stroke - 设置描边颜色
设置线条宽度
stroke-width
注意
svg绘制的图形,使用style方式设置样式,使用的不是CSS属性,而是SVG属性
②圆形元素
<circle cx="" cy="" r="" />
绘制圆形 - <circle>
cx和cy - 圆形的圆形坐标值
r - 圆形的半径
③椭圆元素
<ellipse cx="" cy="" rx="" ry="">
绘制椭圆 - <ellipse>
rx - 横向的半径；ry - 纵向的半径
④直线元素
<line x1="" y1="" x2="" y2="" stroke-width="" stroke="" />
stroke-width 线条粗细；stroke 直线颜色
⑥折线元素
<polyline points="x1,y1 x2,y2 x3,y3 xn,yn">
points - 设置起点、折点及终点
x和y之间使用","分隔
多个点之间使用空格分隔
折线的特点
默认将折线中的区域(起点到终点),默认提供黑色
⑦多边形元素
<polygon points="x1,y1 x2,y2 x3,y3 xn,yn" />
6、特效元素
①渐变 - 渐变元素定义在<defs>元素内
线型渐变 - <linearGradient> 该元素是起始元素
<defs>
<linearGradient id=”mygrd” x1="%" y1="%" x2="%" y2="%">
<stop offset="%" stop-color="color" />
</linearGradient>
</defs>
将上面设置线型渐变,添加在下面的矩形中
<rect x="0" y="0" width="400" height="400" fill="url(#mygrd)" />
扇形(射线)渐变 - <radialGradient>
②滤镜 - 高斯模糊
滤镜使用<filter>元素
<feGaussianBlur>元素 - 高斯模糊
<defs>
<filter>
<feGaussianBlur in="SourceGraphic" stdDeviation=n>
</filter>
</defs>
stdDeviation - 设置模糊程度
注意 - 定义在<defs>元素中
将上面的高斯模糊与下面的元素进行关联
使用filter属性,值为url(#id)
设置当前图形的滤镜
<rect x="100" y="100" width="100" height="100" filter="url(#myfilter)" fill="green" />
TWO.js
1.基本内容
JS库介绍
three.js - 专门用于绘制三维图形
two.js - 专门用于绘制二维图形
two.js支持的格式
SVG - 默认
Canvas
WebGL - 专门用于绘制图像
2.如何使用two.js
①在HTML页面中引入two.js文件
②在HTML页面中定义容器(<div>)
③在javascript代码中
获取HTML页面中的容器
创建Two对象,将该对象添加到容器中
new Two(params).appendTo(Element);
使用two.js提供的API方法进行绘制
利用two.js提供的方法,设置图形
two.makeCircle 设置圆形
two.makeRectangle 设置矩形
利用update()方法进行绘制
3.创建Two对象
构造器 - new Two(params)
params参数 - 设置当前对象的信息
type - 设置当前使用的格式(Two.Types.svg)
svg - 默认值
canvas
webgl
width和height - 设置宽度和高度
fullscreen - 设置是否全屏
Boolean值,true表示全屏
图形方法
makeLine() - 绘制线条
makeRectangle() - 绘制矩形
makeCircle() - 绘制圆形
makeEllipse() - 绘制椭圆
动画方法
update() - 更新动画
play() - 添加动画(循环)
pause() - 删除动画
4.设置绘制图形的样式
调用Two对象的绘制方法绘制图形时,返回该图形对象
通过该图形对象,设置相关属性值
分组操作
Two.Group
如果在HTML页面绘制多个图形,并且每个图形设置样式相同或类似
默认方式 - 每个图形重新设置一次(代码重复)
分组操作(Two.Group) - 当前案例
将绘制的圆形和矩形分为一组
针对这一组,统一设置显示样式
实际操作
利用Two对象的makeGroup(objects)方法进行分组
objects - 设置分为一组的图形
格式 - 允许传递多(不定)个参数
该方法返回Group对象
通过Group对象,统一针对这一组设置样式
动画效果
bind(event,callback)方法 - 事件绑定
event - 绑定事件名称
update - 对应update()方法的作用
所有的DOM事件都可以绑定
callback - 事件处理函数
two.bind("update",function(){
//实现动画逻辑代码
}).play();
上述写法类似于DOM中的setInteval()
setInterval(function(){
实现动画逻辑
},时间);
HTML5 DAY05:
1、Geolocation(地理定位)
基本内容
地理定位 - 地球的经度和纬度的相交点
实现地理定位的方式
GPS - 美国的,依靠卫星定位
北斗定位 - 纯国产,惯性定位技术和卫星定位
基站定位 - 移动运营商创建基站(提供信号源)
基于互联网 - IP地址(PC端和移动端)
目前很多浏览器都具有定位功能
HTML5中地理定位
地理定位功能并不是属于HTML5专有内容
HTML5的地理定位技术,由Google公司提供的
Google Map产品
中国 - 国内不能使用Google公司所有服务和产品
百度地图和高德地图
百度地图
百度地图 - http://developer.baidu.com/map/
注册百度开发者账户
http://developer.baidu.com/
条件 - 必须能连接互联网
目的 - 掌握如何使用百度地图
JS库或百度地图
提供的API帮助文档
提供的Demo示例代码
学习目的
学习的百度地图的功能
百度地图的使用特点
如何使用百度地图
在HTML页面中
引入百度地图的JS
http://api.map.baidu.com/api?v=2.0&ak=秘钥
定义显示地图的容器
<div id="" style=""></div>
在javascript代码中
创建百度地图Map对象
var map = new BMap.Map(容器id);
进行地图的初始化
map.centerAndZoom();
百度地图的组件
核心类 - Map类
构造器 - BMap.Map(容器id);
方法
centerAndZoom() - 初始化方法
addControl() - 添加控件
addOverlay() - 添加标注
Control类 - 控件类
ScaleControl类 - 表示地图的比例尺
构造器 - 创建比例尺对象
NavigationControl类 - 表示移动缩放控件
构造器 - 创建移动缩放控件
Overlay类 - 遮盖物类
Marker类 - 表示地图的一个标注
构造器 - Marker(point)
Point类 - 标注类
2、拖放(拖拽)API
实现拖拽效果
要拖拽的文件是什么? - 源元素
要拖拽到哪里去? - 目标元素
目前实现拖拽效果
使用原生DOM就能实现 - 最麻烦
使用jQuery的插件 - 拖拽效果
HTML5中提供的拖拽功能
HTML5中拖拽
源元素事件
dragstart - 当鼠标开始拖放时被触发
drag - 当鼠标拖放过程中,类似于mousemove事件
dragend - 当鼠标结束拖放时被触发
目标元素事件
dragenter - 当鼠标拖放进入到目标元素内被触发
dragover - 当鼠标到达目前元素被触发
为该事件增加event.preventDefault();
drop - 当鼠标实现拖放效果时被触发
默认情况下,该事件没有被触发
原因 - HTML页面默认情况下,不允许拖放
称之为HTML页面的默认行为
解决 - 阻止页面的默认行为
事件对象event.preventDefault()方法
dragleave - 当鼠标拖放离开目标元素被触发
dataTransfer对象
作用 - 类似于window系统的剪切板的功能
功能
可以将源元素的信息(数据),存储在这里
将存储在该对象的源元素信息,提供给目标元素
方法
setData() - 设置(源元素)数据
在源元素事件中使用
getData() - 获取设置的数据
在目标元素事件中使用
clearData() - 清除(设置的)数据
所有的数据内容,存储在浏览器内存中
当使用完毕数据内容时,清除
setDragImage()方法
作用 - 修改拖放过程中,鼠标跟随的图片效果
用法 - drag、dragstart等事件
注意 - 实际操作中,该方法几乎不用
Web Worker
基本内容
单线程与多线程
Worker可以模拟多线程的效果
定义 - 运行在后台的javascript
注意 - 不能使用DOM
在Worker中只能使用javascript中的ECMA
目前主流浏览器都支持Worker,除IE8之前
Worker提供API
检测当前浏览器是否支持Worker
if( typeof(Worker) !== "undefined" ){
说明当前浏览器支持Web Worker
}else{
说明当前浏览器不支持Web Worker
}
创建WebWorker对象
new Worker(worker文件)
Worker对象
onmessage事件
postMessage()方法
terminate()方法
Web存储API
基本内容
数据仓库 - 用于存储数据
HTML5存储系统
localStorage(本地存储) - 替代Cookie
sessionStorage(会话存储) - 替代Session(类似于内存)
sessionStorage
setItem(key,value)方法
作用 - 设置数据(新增|修改数据)
新增数据 - key值是新的
修改数据 - key值是存在的
参数 :key - 作为存储数据的标识(唯一,不可重复)
value - 存储的数据内容(number|string)
getItem(key)方法
作用 - 获取数据(读取数据)
参数 :key - 根据key获取对应的数据内容
返回值 - key对应的value值
key(index)方法
作用 - 根据索引值返回对应key
参数
index - 索引值
返回值 - 返回key值
removeItem(key)方法
作用 - 删除数据
参数
key - 根据key删除指定数据内容
clear()方法
作用 - 将存储系统的所有数据删除(清空)
length属性
作用 - 返回当前存储系统的数据个数
localStorage
提供的属性和方法与sessionStorage一致
storage事件
作用 - 实现多个窗口之间共享数据内容
问题：数据安全性低
目前除Safari浏览器支持该事件,其他所有浏览器都不支持
对于数据的操作
新增 - setItem()
查询 - getItem()
length属性
key(index)
删除 - removeItem()
clear()
修改
key(index) - key
getItem() - value
setItem(key,新value)
sessionStorage与localStorage
sessionStorage存储系统存储数据的特点
当浏览器窗口关闭时,数据全部丢失
当再次打开浏览器窗口时,数据不能使用
localStorage存储系统存储数据的特点
当浏览器窗口关闭时,数据依旧存储
当再次打开浏览器窗口时,数据继续使用
数据只能由用户删除
Web Socket(了解)
基本内容
socket - 是一种网络协议
网络协议 - SERVER&HTTP课程中的HTTP
WebSocket
表示在HTML5页面中允许支持socket协议
浏览器-服务器
使用的网络协议 - http协议
http协议的问题
短连接
无状态
WebSocket提供的API
创建WebSocket对象
var socket = new WebSocket(URL);
URL - 是以"ws://"开始的
创建Socket对象,建立连接
WebSocket对象的方法
send() - 向服务器端发送数据内容
close() - 关闭socket链接
WebSocket对象的事件
onmessage事件 - 当服务器端向客户端发送返回数据时被触发
onopen事件 - 当客户端与服务器端建立连接时被触发
完成初始化功能
onclose事件 - 当客户端与服务器端关闭链接时被触发
完成资源释放功能
WebSocket对象的属性
readyState属性 - 表示服务器端的通信状态
CONNECTING(数字值为0)，表示正在连接。
OPEN(数字值为1)，表示已建立连接。
CLOSING(数字值为2)，表示正在关闭连接。
CLOSED(数字值为2)，表示已关闭连接。
标签：
原文地址：http://www.cnblogs.com/--silence/p/4966615.html
