【温故知新】——HTML5重要知识点复习

前言：本文是自己在学习课程中的课程笔记，这里用来温故知新的，并非本人原创。

一、HTML5新特性 —— 十个新特性：凌乱

(1)新的语义标签

(2)增强型表单(表单2.0)

(3)音频和视频

(4)Canvas绘图

(5)SVG绘图

(6)地理定位

(7)拖放API

(8)Web Worker

(9)Web Storage

(10)Web Socket

二、HTML5中表单的新特性

(1)新的input type <input type="?">

H4中的input type：text、password、radio、checkbox、file、hidden、submit、reset、image

H5中的input type：email、url、number、tel、search、range、color、date、month、week

(2)新的表单元素

H4中的表单元素：input、textarea、select/option、label

H5中新增的表单元素：datalist、progress、meter、output

(3)表单元素的新属性

三、H5中新增的表单元素 —— datalist

<datalist id="list3"> datalist本身不可见

</datalist>

<input type="text" list="list3"> datalist为input提供输入建议列表，用户可以从中选取，也可以手工输入

四、H5中新增的表单元素 —— progress

显示一个进度条，有两种形式：

<progress></progress> 左右晃动的进度条

<progress value="0.7"></progress> 具有指定进度值的进度条

五、H5中新增的表单元素 —— meter

Meter：度量衡、刻度尺，用于标示一个值所处的范围：不可接受(红色)、可以接受(黄色)、非常优秀(绿色)

六、H5中新增的表单元素 —— output

output：输出，语义标签，没有任何外观样式，样式上等同于SPAN。

商品单价: ￥3.50

购买数量：<input type="number" value="1">

小计：<output>￥3.50</output>

七、H5表单新特性 —— 表单元素的新属性

H4中表单元素的属性： <input ?>

id、class、title、style、type、value、name、readonly、disabled、checked

H5中表单元素的新属性：

(1)placeholder：占位字符

(2)autofocus：自动获取输入焦点

(3)multiple：允许输入框中出现多个输入（用逗号分隔），如邮箱输入域

(4)form：用于把输入域放置到FORM外部

====输入验证相关的新属性======

(5)required：必填项，内容不能为空

(6)maxlength：指定字符串的最大长度

(7)minlength：指定字符串的最小长度

(8)max：指定数字的最大值

(9)min：指定数字的最小值

(10)pattern：指定输入必需符合的正则表达式

上述验证属性会影响表单元素对应的JS对象的validity属性。

总结：

HTML5新特性 —— 十个

表单新特性：

新的input type —— ....

新的表单元素 —— 4个

表单元素的新属性 —— 10个

练习：

(1)使用视频做元素的背景

提示：Video自动播放、循环播放、静音，绝对定位到目标元素下面，z-index为负值即可

(2)创建数据库bbs，包含表msg(mid, uname, content, pubTime)；

使用Node.js创建一个“留言板”应用，服务端可以接收如下的请求：

静态内容：

/public/js/jquery-1.11.3.js

/public/msg_add.html

显示“添加新留言”的表单，包括“姓名”、“留言内容”；

/public/msg_list.html 在TABLE中显示出所有留言记录

动态内容：

POST /msg 接收客户端异步提交的uname、content，添加入数据库，

返回{"code":1, "msg":"留言添加成功", "mid":5 }

GET /msg 向客户端返回所有的留言，以JSON格式

目标：

(1)视频和音频 —— 好玩&简单

(2)Canvas绘图 —— 难点&最重点

一、Flash被H5取代体现在哪些方面？

Flash绘图(AS/Flex) => Canvas/SVG

Flash动画 => 定时器+Canvas

Flash视频和音频播放 => VIDEO/AUDIO

Flash客户端存储 => WebStorage

二、H5新特性——视频播放

H5提供了一个新的标签用于播放视频：

<video>

您的浏览器不支持VIDEO播放！

</video>

它本身是一个300*150的inline-block元素。

VIDEO标签/对象常用的成员：

成员属性：

autoplay：false，是否自动播放

controls：false，是否显示播放控件

loop：false，是否循环播放

muted：false，是否静音播放

poster：''，在播放第一帧之前显示的海报

preload：视频的预加载策略，可取值：

auto：预加载视频的元数据以及缓冲一定时长

metadata：仅预加载视频的元数据(尺寸、时长、第一帧内容)，

没有视频缓冲

none：不预加载任何数据

-------------JS对象属性---------------------

currentTime：当前播放的时长

duration：总时长

paused：true，当前视频是否处于暂停状态

volume：1，当前音量

playbackRate：1，回放速率，大于1表快放，小于1表慢放

成员方法：

play( )：播放视频

pause( )：暂停播放

成员事件：

onplay：当视频开始播放时触发的事件

onpause：当视频开始暂停时触发的事件

练习1：不使用Video自带的controls，自定义播放/暂停按钮

鼠标移出视频区域，隐藏按钮；鼠标移入，显示按钮

练习2：不论何种原因，只要视频暂停(如点击暂停按钮、播放完毕、缓冲不足等)，就显示一副广告；只要播放，就隐藏广告

提示：必须监听视频的onplay和onpause事件

三、H5新特性——音频播放

H5提供了一个新的标签用于播放音频：

<audio>

您的浏览器不支持AUDIO播放！

</audio>

它默认是一个300*30的inline-block元素；但若没有controls属性，则display:none。

AUDIO标签/对象常用的成员：

成员属性：

autoplay：false，是否自动播放

controls：false，是否显示播放控件

loop：false，是否循环播放

muted：false，是否静音播放

preload：视频的预加载策略，可取值：

auto：预加载视频的元数据以及缓冲一定时长

metadata：仅预加载视频的元数据(尺寸、时长、第一帧内容)，

没有视频缓冲

none：不预加载任何数据

-------------JS对象属性---------------------

currentTime：当前播放的时长

duration：总时长

paused：true，当前视频是否处于暂停状态

volume：1，当前音量

playbackRate：1，回放速率，大于1表快放，小于1表慢放

成员方法：

play( )：播放视频

pause( )：暂停播放

成员事件：

onplay：当视频开始播放时触发的事件

onpause：当视频开始暂停时触发的事件

练习：使用复选框控制网页背景音乐

挑战性要求：音量实现淡入和淡出

四、网页中可用的绘图技术

网页中的实时走势图、统计图、在线画图板、网页游戏、地图应用都要使用到绘图技术。有三种绘图技术：

(1)SVG绘图：2D矢量绘图技术，2000年出现，后纳入H5标准

(2)Canvas绘图：2D位图绘图技术，H5提出的绘图技术

(3)WebGL绘图：3D绘图技术，尚未纳入H5标准

Canvas绘图难点所在：

(1)坐标系

(2)单词比较多

五、H5新特性——Canvas绘图技术

Canvas：画布，是H5提供的2D绘图技术。

您的浏览器不支持Canvas标签！

</canvas>

CANVAS标签在浏览器中默认是300*150的inline-block。画布的宽和高只能使用HTML/JS属性来赋值，不能使用CSS样式赋值！

每个画布上有且只有一个“画笔”对象——称为“绘图上下文”对象——使用该对象进行绘图！

var ctx = canvas.getContext('2d') //得到画布上的画笔对象

(1)使用Canvas绘制矩形

矩形的定位点在自己的左上角

ctx.lineWidth = 1 描边宽度

ctx.fillStyle = '#000' 填充样式/颜色

ctx.strokeStyle = '#000' 描边样式/颜色

ctx.fillRect( x, y, w, h ) 填充一个矩形

ctx.strokeRect( x, y, w, h ) 描边一个矩形

ctx.clearRect( x, y, w, h ) 清除一个矩形范围内所有的绘图

练习：

在画布的左上角填充一个100*80的矩形

在画布的右上角填充一个100*80的矩形

在画布的左下角描边一个100*80的矩形

在画布的右下角描边一个100*80的矩形

在画布的正*描边一个100*80的矩形

在画布上描边一个可以左右移动的100*80的矩形

提示：使用定时器，先清除画布上的已有内容，再重新绘制一个（X不停的增加）

在画布上描边一个可以上下移动的100*80的矩形(Y不停的增加)

在画布上描边一个可以斜向右下45度角移动的100*80的矩形(X/Y不停的增加)

在画布上描边一个可以斜向右下30度角移动的100*80的矩形(X/Y不停的增加)

(2)使用Canvas绘制文本

一段文字的定位点在其文本基线的起点

ctx.textBaseline = 'alphabetic' 文本基线

ctx.font = '12px sans-serif' 文本大小和字体

ctx.fillText( str, x, y ) 填充一段文本

ctx.strokeText( str, x, y ) 描边一段文本

ctx.measureText( str ) 基于当前文字大小字体设置测量文本，

返回一个对象：{width: x}

练习：

在画布左上角描边一段黑色文本：达内科技2017©

在画布右上角描边一段蓝色文本：达内科技2017©

在画布左下角填充一段黑色文本：达内科技2017©

在画布右下角填充一段蓝色文本：达内科技2017©

在画布正*填充一段蓝色文本：达内科技2017©

在画布左上角描边一段黑色文本：达内科技2017©，左右移动

六、Canvas绘图中使用渐变对象

线性渐变： linearGradient

径向渐变： radialGradient

可以参考PS中的渐变效果。

var g = ctx.createLinearGradient( x1, y1, x2, y2 );

g.addColorStop( offset, color )

....

g.addColorStop( offset, color )

ctx.strokeStyle = g;

ctx.fillStyle = g;

课后练习：

创建Node.js服务器，可以接收客户端的如下请求：

静态资源请求：

/public/salesdata.html 向客户端输出一个只有空白画布的页面，加载完成后异步请求动态数据

/public/jquery-1.11.3.js

动态资源请求：

GET /salesdata 向客户端返回如下的JSON数据：

[

{"label": "部门1", "value":300},

{"label": "部门2", "value":500},

{"label": "部门3", "value":150},

{"label": "部门4", "value":400},

{"label": "部门5", "value":550},

{"label": "部门6", "value":250}

]

客户端根据这些数据，绘制出如下图所示的统计图：

提示：为简化起见，可以把value值看做每个柱的高度。

一、Canvas的尺寸不能用CSS指定

使用CSS指定的Canvas尺寸，实际不是修改了画布尺寸，而是进行了拉伸，上面的绘图内容也会随着进行拉伸。

可以使用HTML标签的width和height属性，也可以使用JS对象的width和height属性。

二、使用Canvas进行绘图 —— 路径

Path：类似于PS中的“钢笔工具”，由多个坐标点组成的任意形状，路径不可见，可用于“描边”、“填充”、“裁剪”。

ctx.beginPath() 开始一条新路径

ctx.closePath() 闭合当前路径

ctx.moveTo(x, y) 移动到指定点

ctx.lineTo(x, y) 从当前点到指定点画直线

ctx.arc(cx, cy, r, start, end) 绘制圆拱路径

ctx.stroke() 对当前路径描边

ctx.fill() 对当前路径填充

ctx.clip() 使用当前路径进行裁剪

练习：使用路径描边绘制一个坐标轴

练习：使用圆拱绘制可以前进的圆环进度条

提示：开始角度是-90，使用定时器,不停的修改结束角

练习：创建一个函数openMouth()，在画布上绘制如下的图形

练习：创建一个函数closeMouth()，在画布上绘制如下的图形

练习：使用定时器，每隔1s中交替调用openMouth()和closeMouth()

三、使用Canvas进行绘图 —— 图像

Canvas属于客户端技术，图片在服务器中，所以浏览器必须先下载要绘制的图片，且等待图片异步加载完成：

var p3 = new Image();

p3.src = 'img/p3.png'; //浏览器会自动异步请求图片

console.log(p3.width); //0

p3.onload = function(){ //图片加载完成

console.log(p3.width); //200

//开始绘制图片到画布上....

ctx.drawImage( p3, x, y ); //原始大小绘图

ctx.drawImage( p3, x, y, w, h ); //拉伸绘图

}

练习：在画布的四个角落各画一个原始大小的飞机

练习：在画布的正*画一个400*200大小的飞机

练习：在画布的左上角画一个飞机，左右移动

练习：在画布的正*画一个飞机，可以随着鼠标的移动而移动

全局变量： var x , y

鼠标在画布上方移动： e.offsetX e.offsetY

定时器：不停的删除已有内容，重绘飞机

Canvas绘图核心知识点：—— 重点

绘制矩形：

ctx.fillRect() ctx.strokeRect() ctx.clearRect()

绘制文本：

ctx.fillText() ctx.strokeText() ctx.measureText().width

绘制路径：

ctx.beginPath() ctx.closePath()

ctx.moveTo() ctx.lineTo()

ctx.arc()

ctx.stroke() ctx.fill() ctx.clip()

绘制图像：

ctx.drawImage()

四、使用Canvas绘图时进行变形操作

CSS中有变形相关样式： transform: rotate/scale/translate/skew，

这些变形只能作用于某个HTML元素。

Canvas绘图中也有变形技术，可以针对某一个图像/图形的绘制过程进行变形：

rotate、scale、translate。

ctx.rotate( 弧度 ) 旋转绘图上下文对象(即画笔),轴点是画布的原点

ctx.translate( x, y ) 将整个画布的原点平移到指定的点

ctx.save() 保存画笔当前的所有变形状态值（游戏中从存盘）

ctx.restore() 恢复画笔变形状态到最近的一次保存（游戏中读取存盘）

练习：在画布左上角画一个绕自己为中心旋转的飞机1；在同一个画布的右上角画一个不选旋转的飞机2；在同一个画布的左上角画一个旋转速度是飞机1速度2倍的飞机3

提示：每个小飞机“平移+旋转+绘制+逆向旋转+逆向平移”才不会影响后续飞机的绘制

五、第三方绘制统计图工具

(1)Chart.js：免费的，提供了八种统计图表

(2)FusionCharts.js：收费的，提供了90+中统计图表

(3)ECharts：百度提供的免费的绘图工具，与地图整合的很好

(4)FreeCharts ....

提示：第三方工具使用无需记忆！重点掌握自学的过程：

(1)打开官网，查看说明 http://www.chartjs.org/

(2)仿照DEMO编写示例

开源免费的、8种图表、基于H5 Canvas、支持响应式

(3)在实际项目中加以应用，查看详细API说明

您的浏览器不支持Canvas绘图！

</canvas>

new Chart(c15, {

type: 'bar',//line、pie、noughnut...

data: {},

options: {}

});

</script>

练习：参考手册，使用Chart.js绘制彩色的柱状图，且Y轴从0开始。

位图(Photoshop)：由一个又一个像素点组成，每个点各有自己的颜色，色彩细腻，但放大会失真

矢量图(Illustrator)：由一个又一个线条组成，每个线条可以指定颜色、方向，可以无限缩放，但细节不够丰富

六、HTML5新特性——SVG绘图

Scalable Vector Graph：可缩放的矢量图

	Canvas绘图	SVG绘图
类型	2D位图	2D矢量图
如何绘图	使用JS代码绘图	使用标签绘图
事件绑定	每个图形不是元素，无法直接绑定事件	每个图形都是元素，可以直接绑定事件监听
应用场合	统计图、游戏	统计图、图标、地图

SVG技术诞生于2000年，早期作为XML的扩展应用出现；H5标准把常用的SVG标签采纳为标准，但有些被废弃掉。

SVG技术在HTML5出现之前的使用方法：

(1)在一个XML文档中声明要绘制的图形

(2)再编写HTML文档，使用IMG/IFRAME应用XML文档即可

SVG技术在HTML5出现之后的使用方法：

直接创建HTML5文档，在其中书写SVG标签即可

使用SVG标签绘制矩形： <rect>

使用SVG标签绘制圆形： <circle>

使用SVG标签绘制椭圆： <ellipse>

使用SVG标签绘制直线： <line>

使用SVG标签绘制折线： <polyline>

使用SVG标签绘制多边形： <polygon>

任务：

(1)编写一个带AUDIO标签的网页上传到自己的新浪云服务器，用iOS手机访问试试。

(2)自学第三方绘图工具库：ECharts，绘制股票走势图

(3) 使用Canvas绘制一个随机改变的验证码图片

var str = 'ABCDEFGHJKLMNPQRSTWXY3456789';

var char = str[ 0~字符串长度间的随机数 ];

要求：

画布背景颜色随机(浅色) ctx.fillRect()

文字内容随机、大小随机，颜色随机(深色)、旋转角度随机。

5条随机干扰线（深色），处于文字上方。

100个杂色点（半径为1为圆），处于文字上方。

（4）仿网易云音乐的播放界面

点击播放按钮，碟片开始旋转，背景音乐开始播放；

再次点击播放按钮，碟片停止旋转，背景音乐停止播放。

一、补充：Canvans上如何按照特定的顺序绘制图片

Canvas绘图中若需要多张图片，他们的加载都是异步的，无法预测哪一张先加载完成！

但是绘图往往需要按照一定顺序，如先绘背景，再绘上面的内容。所以必须等待所有图片全部加载完成，才能开始绘图。

var progress = 0; //所有图片的总加载进度

var imgBg = new Image();

imgBg.src = 'img/bg.jpg';

imgBg.onload = function(){

progress += 40; //为每张图片赋一个权重值

if(progress===100){

startDraw();

}

var imgDisc = new Image();

imgDisc.src = 'img/disc.png';

imgDisc.onload = function(){

progress += 60;

if(progress===100){

startDraw();

}

二、补充：如何为Canvas上的图形/图像绑定事件监听

网页中只能为HTML元素绑定监听函数，Canvas上的图形/图像都是用JS绘制的，不是DOM元素，不能直接进行事件绑定！

只能绑定给整个Canvas！然后再具体计算事件发生坐标是否处于某个图像/图形内部——仅适用于规则图像/图形。

三、SVG图形中为元素绑定事件监听

SVG图形中每个图形/图像都是一个标签，可以很方便进行事件绑定

SVG绘图的特点——着重注意！

(1)所有的图形默认只有填充色（黑色），没有描边色。

(2)SVG图形的样式可以用元素属性声明，也可以用CSS形式来声明。但用CSS声明时，只能使用SVG专用的样式，不能使用CSS样式，如边框设置只能用stroke，而不用border！

(3)图形可以使用JS来对属性赋值；但不能使用HTML DOM形式，只能用核心DOM操作，如：

r.x = 10; r.width = 100; //无效

r.setAttribute('x', 10); r.setAttribute('width', 100)//有效

(4)动态添加SVG图形可以使用两种方式：

1)HTML字符串拼接

var html = `<rect></rect>`;

svg.innerHTML = html;

2)使用document.createElementNS

('http://www.w3.org/2000/svg','标签名')创建

四、使用SVG进行绘图——矩形

练习：在SVG画布正*创建一个30*300的矩形柱子，初始时淡红色(#faa)填充和深红色(#800)边框都是半透明的；鼠标悬停时，变为不透明，提示：修改HTML元素属性用setAttribute()

练习：绘制两个柱子，初始高度都是0，使用定时器，不断修改它们的高度，一个高度变为300停止，另一个变为150停止

提示：用JS修改SVG图形属性只能使用核心DOM方法！

练习：使用AJAX从服务器端异步获取一段JSON数据，[{"label": "部门1", value:350}, ....]，根据这些数据动态创建统计图。

五、使用SVG进行绘图——圆形

练习：

在SVG画布的左上角填充一个黑色圆形

在SVG画布的右上角填充一个蓝色圆形

在SVG画布的左下角描边一个黑色圆形

在SVG画布的右下角描边一个蓝色圆形

在SVG画布的*描边(蓝色)+填充(黄色)一个圆形

在SVG画布上随机的绘制30个实心圆形，大小随机、位置随机、填充颜色随机、透明度随机；点击某个圆形后，它慢慢变大/淡，直至消失从DOM树上删除

六、使用SVG进行绘图——椭圆

七、使用SVG进行绘图——直线

练习：使用SVG中的直线绘制如下的图标

提示：若多个SVG图形有完全一样的属性，可以抽出来，放在一个公共的父元素中（小组）

</g>

八、使用SVG进行绘图——折线

一条折线上可以有任意多个连续的点

练习：使用折线绘制如下图标

九、使用SVG进行绘图——多边形

练习：使用多边形绘制如下两个图标

十、附加：使用SVG进行绘图——文本

SVG画布上不允许使用普通的HTML元素绘制文本，如SPAN、P等！只能使用：

十一、附加：使用SVG进行绘图——图像

不能使用IMG置于SVG画布上！只能使用：

SVG绘图的主要知识点：

<svg>

</svg>

十二、补充小知识：如何在SVG中使用渐变

<defs> 定义特效对象：渐变对象属于一种特效对象

</linearGradient>

</defs>

练习：使用渐变对象，为不同的柱子分配不同的渐变色

十三、补充小知识：如何在SVG中使用滤镜

<defs>

</filter>

</defs>

SVG中支持的所有滤镜：

https://developer.mozilla.org/en-US/docs/Web/SVG/Element/filter

网页中可用的绘图技术：

(1)Canvas绘图

(2)SVG绘图

(3)WebGL绘图

十四、第三方绘图工具库 —— Two.js

(1)打开官网，查看说明

https://two.js.org/

是一个2D绘图函数库，提供了一套API，可用于不同的技术下的绘图，

如SVG/CANVAS/WEBGL。

(2)参考DEMO，编写示例

var two = new Two({ }).appendTo(box);

//绘制一个圆形

var c = two.makeCircle(200,200,100);

//绘制一个矩形——定位点在矩形中心，而不是左上角

var r = two.makeRectangle(600,200, 200,200);

//把绘图对象中的内容绘制到DOM树

two.update(); //更新DOM树

(3)查看API，在项目中加以应用

课后练习：

创建Node.js Web服务器，客户端先请求一个静态页面 public/stat.html，页面加载完成后，异步请求动态数据： GET /stat，该资源返回如下的JSON数据：

'[{"label":"HTML",value:3}, {"label":"CSS",value:5},....]'

根据这段JSON字符串，绘制下图：

3)自学two.js工具的使用，理解其作用，仿写官方示例代码，学会使用方法，实现如下效果：

面试题：H5新增的标签有哪些？标签属性有哪些？废弃的标签有哪些？标签属性有哪些？

目标：

(1)地理定位 —— 了解

(2)拖放API —— 掌握

(3)Web Worker —— 代码简单，需要理解底层原理

一、HTML5新特性之六 —— 地理定位

Geolocation：地理定位，使用JS获取当前浏览器所在的地理坐标（经度、维度、海拔、速度）数据，用于实现LBS应用(Location Based Service)，如饿了么、高德导航...

手机浏览器如何获得定位信息：

(1)首选手机中的GPS芯片与卫星通信，定位精度在米

(2)次选手机通信基站进行定位获取，定位精度在公里

PC浏览器如何获得定位信息：

通过IP地址进行反向解析，定位精度取决于IP地址库的大小

HTML5中提供了一个新的对象，用于获取当前浏览器的定位信息：

window.navigator.geolocation{

getCurrentPosition: fn, 获得当前定位信息

watchPosition: fn, 监视定位数据的改变

clearWatch: fn 取消监视

}

获得客户端的定位信息：

navigator.geolocation.getCurrentPosition(

(pos)=>{ pos.coords.latitude pos.coords.longitude },

(err)=>{ err.code err.message }

)

二、扩展小知识：在网页中如何嵌入百度地图

(1)注册百度开发者账号

http://lbsyun.baidu.com/

(2)创建一个网站；登录百度地图，为网站申请一个地图的AccessKey

http://lbsyun.baidu.com/apiconsole/key

(3)在自己的网页中嵌入百度地图提供的API，嵌入百度地图

官方手册：http://lbsyun.baidu.com/index.php?title=jspopular

var map = new BMap.Map("container"); // 创建地图实例

var point = new BMap.Point(116.300829,39.915836); // 创建点坐标

map.centerAndZoom(point, 17); // 以指定点为中心并缩放

三、HTML5新特性之七 —— 拖放API

Drag & Drop：拖动和释放

HTML5为拖放行为提供了7个事件，分为两组：

拖动的源对象(会动)可以触发的事件：

dragstart：拖动开始

drag：拖动中

dragend：拖动结束

整个拖动过程： dragstart*1 + drag*n + dragend*1

拖动的目标对象(不动)可以触发的事件：

dragenter：拖动着进入

dragover：拖动着悬停在上方

dragleave：拖动着离开

drop：在上方释放

整个拖动过程1： dragenter*1 + dragover*n + dragleave*1

整个拖动过程2： dragenter*1 + dragover*n + drop*1

注意：必须阻止dragover的默认行为，drop才可能触发！

练习：使用拖动源对象提供的事件句柄，实现“可以随鼠标拖动而移动的小飞机”。

提示：父元素相对定位，飞机元素要绝对定位；飞机移动，就是修改left/top属性。拖动事件可以获取到相对于整个页面的左上角的偏移量，e.pageX/pageY

练习：使用拖动事件的源对象和目标对象可能触发的7个事件，实现“拖动删除效果”

提示：在刚开始拖动时(src.ondragstart)记录被拖动的源对象的ID，释放时(target.ondrop)根据此ID找到源对象，执行删除：div.removeChild( c )

面试题：浏览器在加载完一个HTML后，是如何请求页面中引入的资源文件，安装哪种顺序来执行的？

四、HTML5新特性之八 — Web Worker — 代码就3行

程序：Program，指可被CPU执行的代码，存储在外存中

进程：Process/Task，指程序被OS调入内存，分配执行空间，随时供CPU调度执行

线程：Thread，线程是进程内执行代码基本单位

进程和线程：

(1)进程是操作系统分配内存的基本单位；

(2)线程是CPU执行代码的基本单位；

(3)线程必须处于某个进程内部；

(4)一个进程内必须至少有一个线程；也可以有多个；

(5)一个操作系统中可能同时存在几千个线程，它们是“并发执行的”——

宏观上看同时执行，微观上看是依次循环执行

Chrome浏览器中的线程模型：

一个Chrome进程内，至少有6个线程，可以“同时/并发”向Web服务器发起HTTP请求，以获得所需的资源——资源请求线程。

还有一个线程负责将所有内容绘制到浏览器页面中——UI主线程——不允许多线程同时绘图，防止内容布局错乱。

五、观察如下一段代码执行特点

<button onclick="console.log(222)">按钮

现象：JS执行过程中，按钮1可见，但点击无效；按钮2不可见。

原因：浏览器中执行代码的只有一个线程——UI主线程

解决办法：（1）创建新的线程，由它来执行耗时的JS任务；

（2）UI主线程继续执行后续的HTML渲染：

var w = new Worker('14.js')

</script>

<button onclick="console.log(222)">按钮

一、补充小知识：在拖动源对象和目标对象间传递数据

如：拖动开始时(src.ondragstart)记录被拖动元素的ID，释放时(target.ondrop)根据ID查找拖动的源对象，进行相关操作。

方法1：使用一个全局变量 —— 造成全局对象的污染

方法2：使用H5拖放API专供的e.dataTransfer（数据传递）

//拖动的源对象

src.ondragstart = function(e){

//海南：往拖拉机中装数据

e.dataTransfer.setData('key', 'value')

}

//拖动的目标对象

target.ondrop = function(e){

//哈尔滨：从拖拉机中读取数据

var data = e.dataTransfer.getData('key'); //value

}

二、HTML5新特性之八——WebWorker——代码就3行，重点在理论理解

进程：操作系统分配内存的单位 —— 工厂

线程：处于进程内部，用于执行代码 —— 生产线

线程并发：操作系统中所有的线程宏观上看“同时执行”；微观上看是“依次交替执行”

Chrome中的线程模型：请求资源——6个线程；运行代码/渲染页面内容——1个线程

上述代码中若x.js很耗时，按钮1无法点击，按钮2在运行js过程中不可见——所有的代码(HTML/CSS/JS)都在单线程(UI主线程)中执行

解决方案：创建一个并发执行的新线程，让它来执行耗时的JS任务

三、Worker线程的致命缺陷

浏览器不允许Worker线程操作任何的DOM&BOM对象！！

原因：浏览器只允许UI主线程操作DOM&BOM！若多个线程同时都可以操作DOM结构，页面将混乱。

所以，类似jQuery的脚步决不能使用Worker来加载执行。

Worker线程可以给UI主线程发数据消息：

UI主线程：

var w6 =new Worker('6.js');

w6.onmessage = function(e){ e.data }

Worker线程：

postMessage(stringMsg)

UI主线程可以给Worker线程发数据消息：

UI主线程：

var w6 =new Worker('6.js');

w6.postMessage(stringMsg)

Worker线程：

onmessage = function(e){ e.data }

练习：在HTML中有一个INPUT，按钮“开始计算累加和”，点击此按钮，创建一个Worker线程来计算出用户输入数字的累加和，在下方一个DIV显示出计算结果。

项目中Worker的使用场景：

(1)只要js中有DOM&BOM就不能用Worker！

(2)Worker适合于执行耗时的JS任务！如复杂计算、加密和解密、大数据统计、路径规划......

四、HTML5新特性之九 —— WebStorage

在浏览器中存储当前用户专有的数据：访问历史、内容定制、样式定制...

在客户端存储数据可以使用的技术：

(1)Cookie技术：浏览器兼容性好；不能超过4KB，操作复杂

(2)Flash存储：依赖于Flash播放器

(3)H5 WebStorage：不能超过8MB，操作简单

(4)IndexedDB：可存大量数据，还不是标准技术

Session：会话，浏览器从打开某个网站的一个页面开始，中间可能打开很多页面，直到关闭浏览器，整个过程称为“浏览器与Web服务器的一次会话”。

WebStorage技术中，浏览器为用户提供了两个对象：

(1)window.sessionStorage：类数组对象，会话级数据存储

在浏览器进程所分得的内存存储着一次Web会话可用的数据，可供此次会话中所有的页面共同使用；浏览器一旦关闭就消失了。作用：在同一个会话中的所有页面间共享数据，如登录用户名。

sessionStorage[key] = value //保存一个数据

sessionStorage.setItem(key, value) //保存一个数据

var v = sessionStorage[key] //读取一个数据

var v = sessionStorage.getItem(key) //读取一个数据

sessionStorage.removeItem(key) //删除一个数据

sessionStorage.clear() //清除所有数据

sessionStorage.length //数据的数量

sessionStorage.key(i) //获取第i个key

练习：

创建index.html，右上角提示“请登录”超链接；

创建login.html，输入用户名、密码、提交按钮，用户点击提交后，提示“登录成功，3s后将自动跳转回首页...” setTimeout + location.href="..."

返回index.html，右上角提示“欢迎回来：xxx 退出登录”

创建logout.html，提示“您已退出登录，3s后自动跳转回首页...”

返回index.html，右上角提示“请登录”超链接；

(2)window.localStorage：类数组对象，本地存储(跨会话级存储)

在浏览器所能管理的外存(硬盘)中存储着用户的浏览数据，可供此次会话以及后续的会话中的页面共同使用；即使浏览器关闭也不会消失——永久存在。作用：在当前客户端所对应的所有会话*享数据，如登录用户名。

localStorage[key] = value //保存一个数据

localStorage.setItem(key, value) //保存一个数据

var v = localStorage [key] //读取一个数据

var v = localStorage.getItem(key) //读取一个数据

localStorage.removeItem(key) //删除一个数据

localStorage.clear() //清除所有数据

localStorage.length //数据的数量

localStorage.key(i) //获取第i个key

localStorage中若数据发生了修改，会触发一次window.onstorage事件，可以监听此事件，实现监视localStorage数据改变的目的，用于在一个窗口中监视其它窗口中对localStorage数据的修改——不能监视sessionStorage数据的修改！

练习：

创建index.html，有一个下拉菜单，“请选择您喜欢的主题”：“蔚蓝天空”、“芭比公主”、“暗黑主题”,各对应一个class名：

.blue{ background: #ddf; color: #33a; }

.pink{ background: #fdf; color: #a3a; }

.dark{ background: #333; color: #eee; }

用户选中某个选项(select.onchange)，为当前页面(body)使用指定的样式。

创建usercenter.html，打开此页面即可应用index.html中一样的主题样式；即使重启浏览器，直接访问usercenter.html，仍是之前曾选中的主题样式。

返回index.html，也应该自动应用之前曾选中的主题样式。

五、HTML5新特性之十 —— WebSocket——代码不复杂重点在原理的理解

HTTP协议：属于“请求-响应”模型，只有客户端发起请求消息，服务器才会返回响应消息，没有请求就没有响应；一个请求，只能得到一个响应。有些场景中，此模型就力不从心了：实时走势应用、在线聊天室。解决方案：长轮询(Long-Polling)/心跳请求——定时器+AJAX——请求过于频繁，服务器压力过大；不够频繁，客户端数据延迟较大。

WebSocket协议：属于“广播-收听”模型，客户端连接到服务器就不再断开，永久的连接，双方就随时向对方发送消息，且是全双工不对等发送。WS协议在实时走势应用、在线聊天室应用中有着特别的优势。

WS协议的应用程序也分为客户端程序和服务器端程序：

WS服务器端应用：

监听指定端口，接收客户端请求，向对方发消息，并接收消息；

可以使用php/java/node.js等语言编写

WS客户端应用：

主动发起连接请求，保持永久的连接，向对方消息，并接收消息，可以使用php/java/node.js/html5等语言编写

六、了解：使用Node.js创建WS协议的服务器

node.js官方没有提供ws协议的模块，必须使用NPM下载第三方ws协议模块： npm i ws

查看README,编写WS协议的服务器：

......

七、掌握：使用HTML5创建WS协议的客户端应用

//连接到WS服务器

var socket = new WebSocket('ws://127.0.0.1:9001')

//向服务器发消息

socket.send(stringMsg)

//接收服务器发来的消息

socket.onmessage = function(e){

e.data //消息内容

}

//断开到WS服务器的连接

socket.close();

练习：单词测试系统

(1)用户可以在save.html中不停的录入新单词；

(2)进入test.html开始测试，需要对之前录入过的所有单词进行测试；

(3)提交答案后，在result.html中显示出测试成绩。

提示：录入的单词需要永久保存；而此次测试结果只需要在当前会话中保存。

//遍历客户端存储的数据

for(var i=0; i<localStorage.length; i++){

var key = localStorage.key(i) //获取第i个key

var value = localStorage[key] //获取第i个key对应的value

}

秒客网

【温故知新】——HTML5重要知识点复习

相关文章