达内2016前端开发知识点总结--HTML5--8天
HTML5 day01
第三阶段：
AJAX - 8 —— 综合且容易出错
HTML5新特性 - 7 —— 零散神不聚
Bootstrap - 5 —— 玩命儿被单词
今日目标：
(1)WebStorm的使用 —— 掌握
(2)H5新特性之一——表单2.0 —— 掌握
1.常用的前端开发软件
(1)小型软件：小巧启动快，功能简单
Editplus、Notepad++、VIM、Emacs
(2)中型软件：
SublimeText
(3)中型软件：体积大启动慢，功能强大
Eclipse-Aptana、IntejIEDA-WebStorm、Dreamweaver
常用的Eclipse快捷键：
(1)Ctrl+Alt+↓ 复制当前行
(2)Alt+↑/↓ 向上/下移动当前行
(3)Ctrl+D 删除当前行
(4)Ctrl+/ 注释/取消注释当前行
(5)Ctrl+Alt+L 格式化当前文件
(6)Alt+鼠标左键 进入多行编辑模式，ESC或左键退出
2.HTML5新特性 —— 十大新特性
(1)新的语义标签和属性
(2)表单新特性
(3)视频和音频
(4)Canvas绘图
(5)SVG绘图
(6)地理定位
(7)拖放API
(8)WebWorker
(9)WebStorage
(10)WebSocket
| 面试题： HTML5新增了哪些标签？废弃了哪些标签？ HTML5新增了哪些标签属性？废弃了哪些标签属性？ |
3.HTML5表单新特性
(1)新的input type
(2)新的表单标签
(3)表单标签的新属性
4. HTML5表单新特性之——新的input type —— 了解
HTML5之前已有的input type：
text、password、radio、checkbox、file、submit、reset、button、image、hidden
HTML5新增加的input type：
(1)email：邮件输入域，在表单提交时提供简单的邮箱格式验证，并弹出一个提示窗口(可定制内容不能定制样式)
(2)url：URL地址输入域，在表单提交时提供简单的URL地址格式验证，并弹出一个提示窗口(可定制内容不能定制样式)
(3)number：数字输入域，在表单提交时提供简单的数字格式验证，并弹出一个提示窗口(可定制内容不能定制样式)
(4)tel：电话号码输入域，在手机浏览器中弹出数字输入键盘
(5)search：搜索输入域，在手机浏览器中右下角呈现搜索按键
(6)range：范围选择控件，帮助用户在一定范围内选择一个数字
练习：实现一个调色板
(7)color：颜色选择控件，浏览器并未自己实现颜色选择框，而是使用操作系统自带的颜色选择控件
(8)date：日期选择控件，FF没有实现，推荐使用第三方插件代替，如jQueryUI-datepicker、laydate等
(9)month：月份选择控件，FF没有实现
(10)week：星期选择控件，FF没有实现
5.HTML5新特性之表单新特性——新的表单元素
HTML5之前FORM可以有的标签——用于数据提交：
INPUT、TEXTAREA、SELECT/OPTION、BUTTON
HTML5新增表单元素——用于信息提示，不能用于数据提交：
(1)datalist：数据列表，配合option使用，本身为不可见元素，为普通的input提供输入建议列表
list="l">
(2)progress：进度条，未指定value属性则显示为“进行中”样式；若指定了value（默认在0~1之间）就可以控制其显示的进度
练习：使用定时器让进度条不断前进，到100%就要停止
(3)meter：刻度尺/度量衡，用红黄绿三色表示出一个数值所处的范围：不可接受/可以接受/最优范围
(4) output：输出，用于描述表单中的计算结果，语义标签，样式与SPAN无异。
6.HTML5新特性表单新特性——表单元素新的属性——重点
HTML5之前表单元素可用的属性：
id、class、title、style、type、name、value、checked、selected、disabled、readonly
HTML5之前表单元素新增的属性：
(1)autocomplete：on/off，自动补全，是否自动记录之前提交的数据，以用于下一次输入建议
(2)placeholder：站位符，用于在输入框中显示提示性文字，与value不同，不能被提交
提示性文字">
(3)autofocus：false/true，自动获得输入焦点
(4)multiple：false/true，是否允许多个输入值，若声明了该属性，输入框中（如email）就允许输入用逗号分隔的多个值
(5)form：为一个元素指定form属性，值为某个表单的ID，则此输入域可以放到表单的外部
form="f">
========上述五个属性是新的通用属性===========
=======上述六个属性是输入验证相关属性========
(6)required：false/true，必需的/必填项，在表单提交时会验证是否有输入，没有输入则弹出提示消息
(7)maxlength：最大长度，在有输入的情况下，限定输入域中字符的个数
(8)minlength：最小长度，在有输入的情况下，限定输入域中字符的个数，不是HTML5标准属性，仅部分浏览器支持（如Chrome）
(9)min：限定输入的数字的最小值
(10)max：限定输入的数字的最大值
(11)step：限定输入的数字的步长，与min属性连用
(12)pattern：指定一个正则表达式，对输入进行验证
注意：上述正则表达式可以省略^和$
7.总结：HTML5表单新特性：
(1)新的input type——10个
email、url、number、tel、search、range、color、date、month、week
(2)新的表单元素——4个
datalist、progress、meter、output
(3)表单元素的新属性——12个
autocomplete、autofocus、placeholder、multiple、form
required、maxlength、minlength、min、max、step、pattern
注意：加粗的是当前项目中立即可用的！红色的特性可能弹出错误消息。
8.如何定制表单2.0中的错误提示消息内容——难点&掌握
HTML5为每个标签对应的JS对象添加了新属性，以标识用户输入的有效性：
input.validity {
badInput：false，无效的输入，如email输入无效
typeMismatch：false，类型不匹配，如number中出现字符
valueMissing：false，值缺失，如required验证失败
tooLong：false，输入的内容超过maxlength限制
tooShort：false，输入的内容不满足minlength限制
rangeOverflow：false，输入的数字超过max
rangeUnderflow：false，输入的数字不满足min
stepMismatch：false，步长不匹配
patternMismatch：false，正则表达式不匹配
customError：false，是否存在自定义错误
valid：true，输入值是否有效
}
注意：
(1)最后的validity.valid属性，只有其它属性都为false（没有任何错误），valid值为true；否则只要任何一个其它属性为true（说明有某方面的错误），valild值为false。
(2)上述属性的值会随着输入域中值的改变而立即改变，无需等到表单提交。
(3)使用input.setCustomValidity('XXX')可以生成一个自定义错误消息，使得validity.customError属性变为true；若执行input.setCustomValidity('')可以删除自定义错误消息，使得validity.customError属性变为false
(4)自定义错误消息的优先级高于任何系统自带的错误消息优先级。
课后练习：
在输入域失去焦点时，使用其validity属性的各个布尔类型的值，验证用户的输入是否合法。下面的效果图可以放大。
HTML5 day02
复习：
HTML5新特性：
(1)新的语义标签和属性
(2)表单新特性
1)新的input type——10个
email、url、number、tel、search、range、color、date、month、week
2)新的表单元素——4个
datalist、progress、meter、output
3)表单元素的新属性——12个
autocomplete、autofocus、placeholder、multiple、form
required、maxlength、minlength、max、min、step、pattern
(3)视频和音频
(4)Canvas绘图
(5)SVG绘图
(6)地理定位
(7)拖放API
(8)WebWorker
(9)WebStorage
(10)WebSocket
今日目标：
(1)视频和音频 —— 简单必须掌握
(2)Canvas绘图 —— 重点&难点
1.面试题：Flash被HTML5取代在哪些方面？
音频和视频 ——
绘图 ——
动画/游戏 ——
统计图表 ——
客户端数据存储 —— WebStorage
2.HTML5新特性——视频播放
HTML5提供了一个新的标签
VIDEO元素/对象的属性：
(1)src：指定要播放的视频的资源路径
(2)autoplay：false，是否自动播放
(3)controls：false，是否显示播放控件，提示：不同浏览器的播放控件外观不同
(4)currentTime：0，当前播放的时间点（s）
(5)duration：60，影片总时长（s）
(6)ended：false，是否播放到结尾
(7)loop：false，是否循环播放
(8)muted：false，是否静音
(9)volume：1，音量设置（0~1），对象属性，不用于标签
(10)paused：当前是否处于暂停状态
(11)poster：''，指定视频第一帧播放前的电影海报
(12)preload：指定视频预加载方案，可取值：
auto：默认值，自动预加载视频的宽高、时长、第一帧内容、并缓冲了一定的时长
metadata：元数据，只预加载视频的宽高、时长、第一帧内容
none：不预加载任何内容
VIDEO对象的方法：
play()：开始播放
pause()：暂停播放
VIDEO对象的事件：
onplay：视频开始播放（可能多种原因引起）
onpause：视频开始暂停（可能多种原因引起）
onplaying:
练习：
(1)不使用video默认的播放控件，使用自定义的按钮，控制视频的播放和暂停
(2)不论何种原因，影片一暂停即显示出广告图片；一播放广告图片就隐藏；提示：不能使用poster属性（影片海报只能在第一次播放之前显示一次）
午间思考：如何将video作为DIV的背景并自动播放？
3.HTML5新特性——音频播放
HTML5提供了一个新的标签
AUDIO元素/对象的属性：
(1)src：指定要播放的视频的资源路径
(2)autoplay：false，是否自动播放
(3)controls：false，是否显示播放控件，提示：不同浏览器的播放控件外观不同
(4)currentTime：0，当前播放的时间点（s）
(5)duration：60，影片总时长（s）
(6)ended：false，是否播放到结尾
(7)loop：false，是否循环播放
(8)muted：false，是否静音
(9)volume：1，音量设置（0~1），对象属性，不用于标签
(10)paused：当前是否处于暂停状态
(12)preload：指定视频预加载方案，可取值：
auto：默认值，自动预加载视频的宽高、时长、第一帧内容、并缓冲了一定的时长
metadata：元数据，只预加载视频的宽高、时长、第一帧内容
none：不预加载任何内容
AUDIO对象的方法：
play()：开始播放
pause()：暂停播放
AUDIO对象的事件：
onplay：视频开始播放（可能多种原因引起）
onpause：视频开始暂停（可能多种原因引起）
onplaying:
练习：为网页添加自动播放的背景音乐，用户可选暂停或继续
可以使用定时器修改audio.volume属性实现音量淡入和淡出。
提示：
(1)
bgsound="x.mp3">属性是老IE的专有属性，也可以用于播放背景音乐，但音量、静音、暂停、停止都无法精准的控制。其它浏览器不支持此属性。(2)当前iOS中的Safari浏览器默认不支持audio标签！只能使用video标签代替。
4.Web前端中可用的绘图技术
在网页中绘图可以使用的功能：
(1)实时走势图
(2)统计图表
(3)随机内容的图片
(4)在线画图板
(5)HTML5游戏——2D/3D
可用的绘图技术：
(1)Canvas技术 —— 专用于绘制2D图形/图像
(2)SVG技术 —— 专用于绘制矢量图
(3)WebGL技术 —— 目前不是HTML5标准技术，功能最强大，3D图形/图像
5.Canvas绘图技术 —— 最重要&难点
| 难点： (1)小学/中学数学知识 (2)单词记忆 |
HTML5引入了
您的浏览器不支持Canvas标签！
往“画布”上绘图需要使用其对应的“画笔”对象：
var ctx = c.getContext('2d'); //绘图上下文——“画笔”
接下来所有的绘图任务都由画笔实现。
Content：内容
Context：上下文
绘图上下文对象的常用属性——console.log(ctx)：
fillStyle：'#000'，填充样式
strokeStyle：'#000'，描边/轮廓样式
lineWidth：1，描边/轮廓的宽度
font：'10px sans-serif'，绘制文本所用的字号/字体
textBaseline：'alphabetic'，文本对齐的基线
showdowOffsetX：0，阴影水平偏移量
showdowOffsetY：0，阴影竖直偏移量
showdowColor：'rgba(0,0,0,0)'，阴影颜色
showdowBlur：0，阴影模糊半径
6.使用Canvas绘制矩形
提示：矩形的定位点在自己左上角
ctx.fillStyle = '#000' 填充颜色
ctx.strokeStyle = '#000'描边颜色
ctx.fillRect(x,y,w,h) 填充一个矩形
ctx.strokeRect(x,y,w,h) 描边一个矩形
ctx.clearRect(x,y,w,h) 清除一个矩形范围内的所有内容
练习：在600*400的画布上绘图 —— 16:10
(1)左上角填充一个矩形100*80，默认颜色
(2)右上角描边一个矩形100*80，默认颜色
(3)左下角填充一个矩形100*80，红色
(4)右下角描边一个矩形100*80，青色
(5)正中央填充+描边一个矩形100*80，注意是什么颜色
(6)重新创建一个画布，使用定时器，绘制一个可以不断向右移动的矩形
(7)绘制一个斜向30度角移动的矩形
课下挑战性任务：绘制一个绕圆形路径移动的矩形
7.使用Canvas绘制文本
提示：文字的定位点默认在文本基线的起点(左侧)
ctx.textBaseline = 'alphabetic' 文本基线，可取为top/bottom/middle/alphabetic
ctx.fillText(txt, x, y) 填充文本
ctx.strokeText(txt, x, y) 描边文本
ctx.measureText(txt).width 测量，根据当前指定的字号和字体计算指定文本的宽度
练习：绘制文本
(1)在左下角绘制一行文本
(2)在右下角描边一行文本
(3)在画布中央绘制一个可以向右移动的文本，向户外LED招牌一样
课下挑战性任务：绘制可以画布上左右移动的文字
8.使用Canvas绘制路径
下次课内容
9.使用Canvas绘制图像
下次课内容
10.为图形文字添加阴影
ctx.shadowColor = '#666'; //阴影颜色
ctx.shadowOffsetX = 8; //阴影偏移量
ctx.shadowOffsetY = 8;
ctx.shadowBlur = 10; //阴影模糊半径
11.在绘图时使用渐变色
//创建渐变对象
var g = ctx.createLinearGradient(50,100, 550,100);
g.addColorStop(0, '#f00'); //添加颜色点
g.addColorStop(1, '#0f0'); //添加颜色点
//使用渐变对象
ctx.fillStyle = g;
ctx.strokeStyle = g;
课后练习：
(1)使用视频做DIV元素的背景
提示：Video自动播放、循环播放、静音，绝对定位到目标元素下面，z-index为负值即可
(2)使用AJAX从服务器端的PHP页面获取如下的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值看做每个柱的高度。
挑战性需求：柱子初次显示时，高度有动画效果。
HTML5 day03
复习：
HTML5新特性：
(1)新的语义标签和属性
(2)表单2.0
(3)视频和音频
(4)Canvas绘图 —— 重点
(5)SVG绘图
(6)地理定位
(7)拖放API
(8)WebWorker
(9)WebStorage
(10)WebSocket
JS绘图技术：
var ctx = c.getContext('2d');
//常用属性
ctx.fillStyle = 颜色/渐变对象
ctx.strokeStyle =颜色/渐变对象
ctx.lineWidth = 1
ctx.font = '10px sans-serif'
ctx.textBaseline = 'alphabetic'
ctx.shadowColor = 'rgba(0,0,0,0)'
ctx.shadowOffsetX = 0
ctx.shadowOffsetY = 0
ctx.shadowBlur = 0
//常用方法
(1)绘制矩形
ctx.fillRect(x, y, w, h)
ctx.strokeRect(x, y, w, h)
ctx.clearRect(x, y, w, h)
(2)绘制文本
ctx.fillText(txt, x, y)
ctx.strokeText(txt, x, y)
ctx.measureText(txt).width
(3)绘制路径
(4)绘制图像
今日目标：
(1)使用Canvas绘制路径和图像 —— 重点&难点
(2)使用第三方绘图工具 —— Chart.js，掌握
1.使用Canvas绘制路径(Path)
提示：Canvas中的路径概念与Photoshop中钢笔工具类似的。路径本身是不可见的，有三个用途：描边、填充(闭合)、裁剪(闭合)
Canavs中与路径绘制相关方法：
ctx.beginPath() //开始一条新路径
ctx.closePath() //闭合路径，让最后一个锚点自动连接到第一个锚点
ctx.moveTo(x, y) //移动到指定点
ctx.lineTo(x,y) //从当前点到指定点绘制直线路径
ctx.arc() //绘制拱形路径
ctx.ellipse() //绘制椭圆路径
ctx.bezierCurveTo() //绘制贝塞尔曲线路径
----------------------------------------------
ctx.stroke()
ctx.fill()
ctx.clip()
练习：
(1)使用直线路径绘制坐标轴
(2)使用圆拱+定时器绘制可以前进的进度条
(3)创建一个函数：openMouth()，在画布上绘制如下的图形：
(4)创建一个函数：closeMouth()，在画布上绘制如下的图形：
(5)使用定时器，不停的调用openMouth()和closeMouth()
2.使用Canvas绘制图像
提示：图片的定位点在图片的左上角。客户端JS必须等待图片加载完成才能开始绘制。
var img = new Image();
img.src = 'x.jpg';
img.onload = function(){
//图片已经加载完成了
ctx.drawImage(img, x, y) //使用默认的宽高
ctx.drawImage(img, x, y, w, h)
}
练习：
(1)在画布的四个角各绘制一个小飞机
(2)在画布的中央绘制一个2倍标准大小的飞机
(3)*绘制一个可以随着鼠标而移动的小飞机，提示需要使用mousemove
注意：Canvas绘图中，只有一个HTML元素——canvas！！其它图形图像都不是元素，不能绑定事件函数！！
(4)*绘制一个可以左右移动的小飞机
(5)**绘制一个可以在画布范围内走斜线移动的小飞机——碰到画布的任何一个边缘，立即反弹
| 小结：Canvas绘图可以绘制的内容： (1)矩形： ctx.fillRect() ctx.strokeRect() ctx.clearRect() (2)文本： ctx.fillText() ctx.strokeText() ctx.measureText() (3)路径 - 描边/填充/裁剪 ctx.beginPath() ctx.closePath() ctx.moveTo() ctx.lineTo() ctx.arc() ctx.stroke() ctx.fill() ctx.clip() (4)图像： ctx.drawImage() (5) |
3.绘图上下文的状态改变和恢复 —— 难点&晦涩
var ctx = canvas.getContext('2d');
//可以将绘图上下文对象（即画笔对象）进行变形(transform)——与对Canvas施加CSS Transform样式不同，绘图上下文的变形只影响当前绘制的图形图像内容
ctx.translate(x,y) //坐标轴原点平移到指定点，所有点的坐标都发生改变
ctx.rotate(deg) //画笔旋转，则内容旋转，轴点在坐标轴原点
ctx.scale() //画笔缩放
====================
ctx.save() //保存绘图上下文(画笔）当前的变形数据
ctx.restore() //恢复最近一次保存的画笔的变形相关的状态
练习：***有点坑——绘制四个小飞机，各在画布的一个角在绕着自己的中心在旋转。
项目中Canvas技术的主要用途：
(1)绘制统计图
(2)小游戏
(3)绘图板
(4)动态的背景（带交互带动画）
4.使用第三方统计图绘制工具——Chart.js——重点在于自学过程
提示：第三方的绘图工具非常多！直接百度“JS绘图工具”！
第三方工具的使用步骤：
(1)打开官网，看工具介绍
http://www.chartjs.org/
Simple yet flexible JavaScript charting for designers & developers。一款开源的、提供了8中图表的、基于Canvas、响应式图表绘制工具库。
(2)参考DEMO，编写示例程序
new Chart(canvasId, {
type: 'bar',//图表的类型，共8中
data: { },//图表必需的数据
options: { }//可选项
});
(3)查看API Document，实现自己的项目需求
参考手册中的示例代码
课后练习：
1) 使用Canvas绘制一个随机改变的验证码图片
var str = 'ABCDEFGHJKLMNPQRSTWXY3456789';
var char = str[ 0~字符串长度间的随机数 ];
要求：
画布背景颜色随机(浅色) ctx.fillRect()
文字内容随机、大小随机，颜色随机(深色)、旋转角度随机。
5条随机干扰线（深色），处于文字上方。
100个杂色点（半径为1为圆），处于文字上方。
2.仿网易云音乐的播放界面
点击播放按钮，碟片开始旋转，背景音乐开始播放；
再次点击播放按钮，碟片停止旋转，背景音乐停止播放。
HTML5 day04
复习：
HTML5新特性：
1.新的语义标签和属性
2.表单2.0
3.视频和音频
4.Canvas绘图
5.SVG绘图
6.地理定位
7.拖放API
8.WebWorker
9.WebStorage
10.WebSocket
Canvas绘图使用方法：
var ctx = c.getContext('2d');
//绘制矩形
ctx.fillRect() ctx.strokeRect() ctx.clearRect()
//绘制文本
ctx.fillText() ctx.strokeText() ctx.measureText()
//绘制路径
ctx.beginPath() ctx.closePath()
ctx.moveTo() ctx.lineTo() ctx.arc()
ctx.stroke() ctx.fill() ctx.clip()
//绘制图像
ctx.drawImage()
//图形图像变形
ctx.translate() ctx.rotate() ctx.scale()
ctx.save() ctx.restore()
今日目标：
(1)补充：Canvas小知识点
(2)SVG绘图技术 —— 重点
(3)第三方2D绘图工具 —— Two.js —— 了解
1.如何等待所有图片加载完成后，才开始绘图？
多张图片绘制需要按照特定的顺序，而加载完成顺序是完全无法预测，只能等待所有图片加载完成，才能开始绘制。
/***************************
//典型的错误代码
var img1 = new Image();
img1.src = "";
img1.onload = function(){
ctx.drawImage(img1, x, y);
}
var img2 = new Image();
img2.src = "";
img2.onload = function(){
ctx.drawImage(img2, x, y);
}
******************************/
var progress = 0; //加载进度 0~100
var img1 = new Image();
img1.src = "";
img1.onload = function(){
progress += 80;
if(progress===100){
startDraw();
}
}
var img2 = new Image();
img2.src = "";
img2.onload = function(){
progress += 20;
if(progress===100){
startDraw();
}
}
2.如何为Canvas上的图形/图像绑定事件监听？——难点
网页只能为DOM元素绑定监听函数，Canvas绘图技术中只要一个Canvas元素，其它图形图像都不是元素——无法进行事件绑定！——
解决办法：为Canvas绑定监听函数，获取事件发生的坐标，是否处于目标图形/图像所在范围内——只能为规则的图形“绑定”监听
| Adobe Photoshop：处理位图——每幅图像由点(rgb)组成，善于描述颜色的细节变化，可用于照片等领域——放大后会出现马赛克失真。 Adobe Illustrator：处理矢量图——每幅图像由线条(需要指定方向、值)，可以无限缩放而不失真——不善于描述颜色的细节变化。 |
3.HTML5新特性之五——SVG绘图
|
|
Canvas绘图 |
SVG绘图 |
| 绘图类型 |
位图 |
矢量图 |
| 缩放 |
失真 |
不失真 |
| 颜色细节 |
丰富 |
不够丰富 |
| 应用领域 |
照片、游戏 |
统计图、图标、地图 |
| 内容 |
JS绘制 |
每个图形都是标签 |
| 事件绑定 |
不方便 |
方便 |
Scalable Vector Graphiph，可缩放的矢量图，此技术在2000年就已经存在了，独立于网页的一门技术；HTML5之后，纳入了HTML5标准标签库，并进行了一定的瘦身。
SVG技术的使用方法：
(1)HTML5之前的使用方法：
SVG标签不属于HTML4或XHTML标签，只能编写在独立的XML文件中，首先编写一个SVG文件（本质是一个XML文件），然后在HTML中使用IMG/IFRAME/OBJECT/EMBED等标签引入.svg文件
(2)HTML5之后的使用方法——H5已经把SVG标签采纳：
在HTML文件中直接使用SVG相关标签即可
练习：
(1)使用SVG矩形绘制一个国际象棋的棋盘——使用HTML中的rect标签
(2)使用SVG矩形绘制一个国际象棋的棋盘——使用JS动态创建rect标签
4.使用SVG绘制矩形
注意：
(1)SVG图形的样式可以用HTML属性赋值，也可以使用CSS形式，但不接受普通的CSS属性！只能使用SVG元素的专有样式属性。
(2)SVG图形的属性不属于HTMLDOM标准，只能使用核心DOM方法操作其属性： rect.setAttribute('','')
(3)使用JS动态创建SVG元素，1)用svg.innerHTML ='' 2)用document.createElementNS('', '')，不能使用document.createElement()
(4)SVG元素的nodeName都是纯小写形式！与普通的HTML元素不同！
练习：
(1)在SVG画布上绘制一个矩形，从左移动到右，同时填充颜色还在不停的随机改变
(2)根据如下的JSON数据，绘制柱状统计图——有坑！！
[
{"label": "1月", "value": 350},
{"label": "2月", "value": 300},
{"label": "3月", "value": 450},
{"label": "4月", "value": 380}
]
5.使用SVG绘制圆形
练习：
(1)创建30个大小随机、颜色随机、透明度随机的圆形
提示：使用createElementNS()创建元素,setAttribute()修改属性
(2)点击某个圆形，其慢慢变大、变淡...... 直至消失，从DOM树上删除该元素
(3)实现“蜻蜓点水”效果，点击svg画布的某处，即在此处生成一个圆形，立即变大、变淡...直至消失
6.使用SVG绘制椭圆
7.使用SVG绘制直线
注意：所有的SVG图形默认只有填充色，没有描边色。
练习：使用line创建如下的图标：
提示：可以把多个元素放在一个
8.使用SVG绘制折线
练习：使用折线绘制如下的图标
9.使用SVG绘制多边形 17:25
练习：使用多边形绘制如下的图标：
10.使用SVG绘制文本
提示：传统的标签不能置于SVG内部！同理，SVG的标签也不能放在其它元素内部！
11 .使用SVG绘制图像
提示：在SVG中绘制图像使用image元素，引入位图后，此SVG图片放大后会失真。
12.如何使用渐变效果
课后练习：
1) 假设前端页面获取到后台返回了如下的JSON数据：
'[{"label":"HTML",value:3}, {"label":"CSS",value:5},....]'
根据这段JSON字符串，绘制下图：
3)自学two.js工具的使用，理解其作用，仿写官方示例代码，学会使用方法，实现如下效果，月亮绕着地球转，地球绕着太阳转：
HTML5 day05
复习：
HTML5新特性
1.新的语义标签
2.表单2.0
3.视频和音频
4.Canvas绘图
5.SVG绘图
6.地理定位
7.拖放API
8.WebWorker
9.WebStorage
10.WebSocket
SVG的使用：
绘制矩形
绘制圆形
绘制椭圆
绘制直线
绘制折线
绘制多边形
绘制文本
绘制图像
贝塞尔路径
特效对象
今日目标：
(1)补充：SVG相关小知识点
(2)地理定位——掌握
(3)拖放API——重点&小难点
1.SVG中定义特效对象——渐变特效
2.SVG中定义特效对象——滤镜(filter)——高斯模糊路径
更多滤镜效果及使用方法：
https://developer.mozilla.org/en-US/docs/Web/SVG/Element/filter
前端领域中可用的绘图技术：
(1)Canvas —— 2D位图
(2)SVG —— 2D矢量图
(3)WebGL —— 2D/3D图
绘制统计图，可以选用上述任意一种！但三种技术可供调用的代码不一样！
3.第三方绘图工具库——Two.js —— 了解&重点在自学过程
(1)看官网，找介绍
Two.js is a two-dimensional drawing api geared towards modern web browsers. It is renderer agnostic enabling the same api to draw in multiple contexts: svg, canvas, and webgl.
提供了一套统一的接口，可用于在svg、canvas、webgl中实现常见图形的绘制，如矩形、三角形、圆形.....
不足：为了兼容三种技术，必须舍弃某个技术所专有的效果；效率上有待提高。
(2)找示例，写Demo
(3)查API Document，在项目中加以应用
4.HTML5新特性之六——地理定位
地理定位：使用JS获取浏览器当前所在的地理坐标，实现LBS（Location Based Service，基于定位的服务），具体数据包括：
经度：longitude
纬度：latitude
海拔：altitude
速度：speed
技术上如何获取浏览器所在的定位信息：
(1)手机中的浏览器
靠手机内置的GPS芯片数据，精度在“米”级
靠手机与之通讯基站数据，精度在“公里”级
(2)PC中的浏览器
靠IP地址反向解析，精度在“公里”级
HTML5新增了用于获取浏览器所在定位的对象：
window.navigator.geolocation {
getCurrentPosition: fn 用于获取当前定位信息
watchPosition: fn 不停的监视定位信息的改变
clearWatch: fn 清除监视
}
------------------------------------
navigator.geolocation.getCurrentPosition(
funcntion(pos){
console.log('定位成功');
}, function(err){
console.log('定位失败');
}
)
5.如何在页面中使用百度地图 —— 扩展小知识
从map.baidu.com下点击“地图开放平台”：
目前官网： http://lbsyun.baidu.com/
JS-API使用手册： http://lbsyun.baidu.com/index.php?title=jspopular
第三方工具的学习步骤：
(1)打开官网，找定义，功能说明
http://lbsyun.baidu.com/
可以基于百度地图进行Android、iOS、Web应用开发
http://lbsyun.baidu.com/index.php?title=jspopular
(2)找示例程序
(3)找API文档，编写自己的应用
使用百度地图API步骤：
(1)注册百度开发者账号
(2)使用开发者账号申请创建一个Web应用账号，获取一个访问百度地图的密钥（AccessKey）
http://lbsyun.baidu.com/apiconsole/key
(3)编写HTML网页，出示当前网站的访问密钥，调用百度地图API
//创建地图实例
var map = new BMap.Map("container");
//创建一个指定的点 —— 文博大厦
var p = new BMap.Point(116.300982,39.915907);
//以指定点为中心显示地图
map.centerAndZoom(p, 17);
6.HTML5新特性之七 —— 拖放API —— 重点&小难点
Drag：拖动
Drop：释放
在HTML5之前只能使用鼠标事件模拟出“拖放”效果；HTML5专门为拖放提供了7个事件句柄。
(1)拖动的源对象(source)可以触发的事件：
dragstart：拖动开始
drag：拖动进行中
dragend：拖动结束
源对象的拖动过程：dragstart x 1 + drag x n + dragend x 1
练习：实现一个可以随着鼠标拖动而移动的小飞机
(2)拖动的目标对象(target)可以触发的事件：
dragenter：拖动着进入
dragover：拖动着在目标对象上方
dragleave：拖动着离开
drop：松手/释放/松开
目标对象的进入/离开过程：
dragenter x 1 + dragover x n + dragleave x 1
目标对象的进入/释放过程：
dragenter x 1 + dragover x n + drop x 1
注意：必须阻止dragover的默认行为！否则drop事件无法触发！
练习：
(1)垃圾桶初始时半透明；拖动小飞机进入垃圾桶变为不透明，离开后重新半透明，在垃圾桶上方松手也变为半透明。
提示：需要用到目标对象的四个事件
(2)一个垃圾桶，下方有一个容器(div#container)，其中有三个小飞机，拖动某个小飞机到垃圾桶上方，则容器中删除此小飞机
提示：需要用到源对象和目标对象的多个事件
7.如何在拖动的源对象和目标对象间传递数据
如何在7个事件间传递数据？
源对象事件——3个：
目标对象事件——4个：
(1)方法一：使用全局变量 —— 全局对象污染
(2)方法二：使用拖放事件对象的dataTransfer属性
说明：dataTransfer，用作数据传递/转移，看作“拖拉机”
源对象触发事件时保存k-v数据：
src.onxxx = function(e){
e.dataTransfer.setData( 'key', 'value' );
}
目标对象触发事件时获取k-v数据：
target.onxxx = function(e){
var value = e.dataTransfer.getData( 'key' )
}
课后练习： 英雄选择
要求：
拖动某架飞机到目标区域，则在上方显示出该飞机；下方该飞机图消失；替换选中区域已有的飞机。
拖动另一架飞机到目标区域，则显示出该飞机，之前选中的飞机变为重新回到待选区域。
HTML5 day06
复习：
HTML5新特性 重要程度(10)
1.新的语义标签 10
2.表单2.0 7
3.视频和音频 8
4.Canvas绘图 9
5.SVG绘图 9
6.地理定位 1
7.拖放API 4
8.WebWorker 4
9.WebStorage 9
10.WebSocket 2
拖放API——七个事件：
源对象可以触发的事件：
dragstart：
drag：
dragend：
目标对象可以触发的事件：
dragenter：
dragover： —— e.preventDefault()
dragleave：
drop：
今日目标：
(1)扩展：如何在网页中拖拽显示客户端的图片
(2)WebWorker
(3)WebStorage
1.面试题：如何在服务器端下载的网页中显示客户端图片？
一般情况下，网页只能显示服务器上的图片；
HTML5中，可以实现用户拖拽一张本地的图片显示在服务器端下载的网页中。
container.ondrop = function(e){
var f0 = e.dataTransfer.files[0];
var reader = new FileReader();
reader.readAsDataURL(f0);
reader.onload = function(){
///读取完成，数据在reader.result中
}
}
| HTML5中提供的用于文件输入输出(I/O)的对象： File：代表一个文件/目录对象 FileList：代表一个文件列表（类数组对象） FileReader：用于从文件中读取内容 FileWriter：用于向向文件写出内容 |
2.面试题：Chrome浏览器的线程模型是怎样的？
程序：计算机可以执行的代码，存在于磁盘中——静止的
进程：把程序调入到内存中，等待被CPU执行——活动的
线程：是CPU执行进程代码的基本单位——生产任务
| 面试题：进程和线程间的关系？ 进程是操作系统分配内存的基本单位。 线程处于进程内部，是CPU执行代码的基本单位。 一个进程中至少有一个线程，也可以有多个。 多个线程间并发执行——宏观上看是“同时”执行，微观上看是“轮流”执行。 |
Chrome中的线程模型：
(1)Chrome中发起HTTP请求最多可以使用6个并发的线程；
(2)Chrome中负责向页面中执行绘制任务(执行HTML/CSS/JS/事件处理等代码)的只有1个线程——UI主线程。
碰到如下的代码，就有问题了：
根本解决之道：
创建一个新的线程，去执行耗时的JS任务——与UI主线程并发执行。new Thread('x.js') —— 其它语言中的类似代码。
3.HTML5新特性之八——Web Worker
HTML5提供了一种类似创建新线程的机制：
new Worker('x.js'); //工人线程，与UI主线程并发执行
注意：Worker线程天然缺陷！！
浏览器禁止Worker线程操作任何的BOM和DOM对象！！！——浏览器只允许UI主线程进行页面内容的渲染！——不能使用Worker加载类似jquery.js文件！！ 项目中，必需用到Worker的场景不多，比如有非常复杂耗时的且与DOM无关的运算时。
UI主线程可以给Worker线程传递数据——发消息：
UI线程：
var w = new Worker('x.js');
w.postMessage('StringMsg');
Worker线程：
onmessage = function(e){ //e.data //UI主线程发来的消息数据 }
Worker线程可以给UI主线程传递数据——发消息：
UI主线程：
var w = new Worker('x.js');
w.onmessage = function(e){ //e.data //Worker线程发来的消息数据}
Worker线程：
.....
postMessage('StringMsg');
练习：在主界面中有一个输入框+按钮（“开始质数计算”），点击后创建一个新的Worker线程，把用户的输入传递给该线程，进行质数判定；.... 计算结果再反传给UI主线程，在一个DIV元素中显示出运算结果。
| 总结：Worker本质是一个线程，在UI主线程之外并发执行的线程；用于执行耗时的JS任务；缺陷：不能操作BOM和DOM，只能和UI主线程发消息。 |
4.数据存储方案
Web项目中需要存储多种数据，大体上有两种存储方法：
(1)服务器端存储：
1)数据库技术：存储项目中的核心数据
2)Session技术：存储当前用户的信息
(2)客户端存储：不太紧要的与客户端有关的数据，如浏览记录、内容定制、样式定制
1)Cookie技术：使用比较繁琐、大小不能超过4KB
2)Flash技术：逐渐被淘汰
3)HTML5WebStorage技术：使用简单，大小不超过8MB
4)IndexedDB技术：客户端直接存储对象，目前还不是HTML标准技术
| Web会话：指客户端浏览器从连接到某个Web服务器开始，一系列的请求-响应过程。直到客户端关闭浏览器，会话结束。 |
5.HTML5新特性之九——WebStorage
HTML5的WebStorage技术，提供了两个对象，用于在浏览器中存储客户端的访问数据：
window.sessionStorage——会话级存储:
在浏览器的内存中存储的与某个服务器间的一系列请求-响应过程中产生的数据——都是Key-Value对形式。当会话结束时(用户关闭了浏览器)，会话级数据即消失。
sessionStorage['key'] = 'value';//存储一个数据
var v = sessionStorage['key'];//读取一个数据
sessionStorage.length//获取数据的个数
sessionStorage.setItem('key', 'value') //存储一个数据
var v = sessionStorage.getItem('key') //读取一个数据
sessionStorage.removeItem('key') //删除一个数据
sessionStorage.clear()//清除所有的数据
window.localStorage——本地/跨会话级存储：
在客户端文件系统/硬盘中存储客户端与服务器间的访问数据——都是Key-Value对形式。即使关闭浏览器，甚至关闭计算机仍然存在，否则会永久存在。
localStorage['key'] = 'value';//存储一个数据
var v = localStorage ['key'];//读取一个数据
localStorage.length//获取数据的个数
localStorage.setItem('key', 'value') //存储一个数据
var v = localStorage.getItem('key') //读取一个数据
localStorage.removeItem('key') //删除一个数据
localStorage.clear()//清除所有的数据
练习：
(1)创建index.html，右上角有一个超链接“登录”，点击此链接跳转到login.html，用户在表单中输入登录信息，点击“提交按钮”，假设用户名和密码都正确，弹出提示“登录成功”，3秒钟跳转回首页，右上角显示出“欢迎回来：xxx 退出登录”；此时若用户在地址栏强行输入login.html，直接跳转到index.html；用户若点击了index.html上的退出登录超链接，则跳转到logout.html，提示出“您已退出登录”，3秒钟跳回index.html，继续显示“登录”超链接
setTimeout(function(){
location.href="";
},3000)
(2)实现一个页面主题的永久定制 17：55
创建index.html，指定3个class
.blue { background: #ccf; color: #339; }
.pink { background: #f3b; color: #916; }
.dark { background: #111; color: #eee; }
提供一个下拉选择框，“—请选择您喜欢的页面主题—”，“湛蓝天空”、“芭比公主”、“杀马特”，选择某项之后，当前页面的body就使用对应的className。
跳转到usercenter.html，默认也呈现出index.html中选中的页面主题，即使重启浏览器，仍可以呈现出之前选中的主题色。提示：即使重新打开index.html，也要显示出之前选中的主题色。
课后练习： 单词测试系统
(1)用户可以在save.html中不停的录入新单词；
(2)进入test.html开始测试，需要对之前录入过的所有单词进行测试；
(3)提交答案后，在result.html中显示出测试成绩。
提示：录入的单词需要永久保存；而此次测试结果只需要在当前会话中保存。
//遍历客户端存储的数据
for(var i=0; i var key = localStorage.key(i) //获取第i个key var value = localStorage[key]; //获取第i个value } 复习： 见思维导图 今日目标： (1)补充小知识点：localStorage的事件 (2)HTML5新特性之十——WebSocket (3)HTML5阶段项目 —— 目前所有知识的大综合演练 1.如何得知localStorage中数据的修改？ localStorage中任何数据的修改，都会触发一个事件： window.onstorage = function(){ } 2. HTML5新特性之十——WebSocket 提示：重在概念的理解 HTTP协议：是基于“请求-响应”模型的协议，客户端发起一个请求，服务器就要返回一个响应，请求消息和响应消息是一一对应的！没有请求就没有响应！在一些特别的应用场景下（如实时走势图，在线聊天室），只能使用“定时器+AJAX”不停的向服务器发起请求以获得最新的数据——“心跳请求”，解决方案并不完美：心跳过快服务器压力过大，过慢导致数据实时性差。 WebSocket协议：是基于“广播-收听”模型的协议，只要客户端连接到服务器上，就不再断开，一方可以发送多条消息，对方只接收而不发送，可以解决上述应用中的问题。这个协议本身的问题：客户端与服务器是“永久连接”，导致服务器可以同时连接的客户端数是有限的！ 基于WebSocket协议的应用必需两套程序： (1)服务器端程序： 可使用PHP、Java、Node.js等语言编写 注意：PHP编写的WebSocket服务器独立运行的，无需依赖Apache！ c:/xampp/php/php.exe e:/socket_server.php 记得修改php.ini文件的907行！去掉开头的分号 extension=php_sockets.dll (2)客户端程序： 可使用PHP、Java、HTML5/JavaScript等语言编写 使用HTML5提供的WebSocket对象创建WS客户端： var wsClient = new WebSocket('ws://地址:端口'); wsClient.onopen = function(){//连接成功 ws.send('msg');//发送消息 ws.onmessage = function(e){ //接收消息 //e.data } } WebSocket是一种新的通讯协议，与HTTP协议不同，是基于“广播-收听”模型的协议，适用于一些特殊的应用场合，如聊天室、实时走势获取 3.“京东商城项目”已经实现的功能点 (1)首页 (2)产品列表页 (3)产品详情页 (4)登录页 (5)注册页 (6)购物车页 (7)订单生成页 (8)用户中心页 4.HTML5阶段项目——京东用户中心 需要实现的功能点： (1)用户注册 (2)查看购物车后确定下单，生成订单 (3)进入用户中心查看自己的所有订单 (4)进入用户中心查看自己的消费统计 (5)进入用户中心参与幸运抽奖 需要使用到的技术： MySQL、PHP、AJAX、Video、表单2.0、WebStorage、Canvas绘图、SVG绘图 实现步骤： SQL -> PHP -> HTML/JS (1)编写PHP，user_add.php，接收客户端提交的uname和upwd，添加到数据库中，返回{"code":1,"userId": 3} (2)编写HTML，register.html，实现异步的用户注册，成功后跳转到产品列表页 (3)修改HTML，productlist.html，用户登录成功后把用户名和编号保存到sessionStorage中 (4)修改HTML，shoppingcart.html，从sessionStorage中读取登录用户的信息，若没有，则跳转到productlist.html让用户登录；若有则显示出“欢迎回来：XXX”。点击“去结算”按钮后跳转到addorder.html (5)创建HTML，addorder.html，异步请求页头和页尾，若没有用户登录信息，则跳转到productlist.html让用户登录 (6)修改HTML，addorder.html，根据登录信息，异步请求当前登录用户购物车中的内容，显示在“下单页面”中 -----------------文华老师的进度线---------------------- (7)编写SQL，添加新的表 创建订单信息表：jd_order( oid, rcvName, addr, price, payment(付款方式1/2/3/4)，orderTime, status(订单状态1/2/3/4/5/6)，userId ) 创建订单详情表：jd_order_detail ( did, orderId, productId, count ) (8)编写PHP，order_add.php，接收客户端的rcvName, addr, price, payment(付款方式1/2/3/4)，userId，执行如下的SQL: SQL1：向jd_order表中插入一行记录，得到oid SQL2：读取当前用户购物车中的条目， SQL3：（循环）针对每个购物车项执行INSERT，插入到jd_order_detail SQL4：删除当前用户购物车中的条目 返回：{"code":1, "orderId": 9234234134} (9)修改HTML，addorder.html，把所有的用户输入/选择全放在，点击“提交订单”后，异步提交给服务器，获取到订单编号，跳转到addorder_succ.html，提示下单成功 1. HTML5阶段项目——京东用户中心 需要实现的功能点： (1)用户注册 (2)查看购物车后确定下单，生成订单 (3)进入用户中心查看自己的所有订单 (4)进入用户中心查看自己的消费统计 (5)进入用户中心参与幸运抽奖 需要使用到的技术： MySQL、PHP、AJAX、Video、表单2.0、WebStorage、Canvas绘图、SVG绘图 实现步骤： SQL -> PHP -> HTML/JS (1)编写PHP，user_add.php，接收客户端提交的uname和upwd，添加到数据库中，返回{"code":1,"userId": 3} (2)编写HTML，register.html，实现异步的用户注册，成功后跳转到产品列表页 (3)修改HTML，productlist.html，用户登录成功后把用户名和编号保存到sessionStorage中 (4)修改HTML，shoppingcart.html，从sessionStorage中读取登录用户的信息，若没有，则跳转到productlist.html让用户登录；若有则显示出“欢迎回来：XXX”。点击“去结算”按钮后跳转到addorder.html (5)创建HTML，addorder.html，异步请求页头和页尾，若没有用户登录信息，则跳转到productlist.html让用户登录 (6)修改HTML，addorder.html，根据登录信息，异步请求当前登录用户购物车中的内容，显示在“下单页面”中 (7)编写SQL，添加新的表 创建订单信息表：jd_order( oid, rcvName, addr, price, payment(付款方式1/2/3/4)，orderTime, status(订单状态1/2/3/4/5/6)，userId ) 创建订单详情表：jd_order_detail ( did, orderId, productId, count ) (8)编写PHP，order_add.php，接收客户端的rcvName, addr, price, payment(付款方式1/2/3/4)，userId，执行如下的SQL: SQL1：向jd_order表中插入一行记录，得到oid SQL2：读取当前用户购物车中的条目， SQL3：（循环）针对每个购物车项执行INSERT，插入到jd_order_detail SQL4：删除当前用户购物车中的条目 返回：{"code":1, "orderId": 9234234134} (9)修改HTML，addorder.html，把所有的用户输入/选择全放在，点击“提交订单”后，异步提交给服务器，获取到订单编号，跳转到addorder_succ.html，提示下单成功 (10)创建HTML，usercenter.html，异步请求页头和页尾 (11)修改HTML，usercenter.html，主体部分实现布局：“父容器宽度不定，左侧定宽210px，右侧占剩余全部”—— 面试题 (12)修改HTML，usercenter.html，点击左侧的附加导航(affix)，实现右侧内容的切换 (13)创建PHP，my_order.php，接收客户端提交的用户编号，获取该用户对应的所有订单，以JSON格式返回：[{},{}...] —— 难点 SQL1： SELECT * FROM jd_order WHERE userId=? foreach($list as $order){ SQL2：SELECT * FROM jd_product WHERE pid IN (SELECT productId FROM jd_order_detail WHERE orderId=?) $order['productList'] = mysqli_fetch_all($result); } (14)修改HTML待页面加载完成，异步请求当前用户所有的订单，显示TABLE中 (15)创建PHP，buy_stat.php，根据客户端提交的用户编号，统计出该用户过去12个月里每个月的消费总金额，以JSON形式 —— 使用伪造数据 (16)修改HTML，usercenter.html，异步请求消费统计数据，使用FusionCharts工具绘制消费统计图表 -------------------文华老师的进度线----------17：20------------ (17)修改SQL，添加表jd_lottery( lid, userId, lotteryTime, grade )，插入如下三行数据： 1 10 1401234567890 2 2 10 1411234567890 4 3 10 1421234567890 4 (18)创建PHP，lottery_stat.php，接收客户端提交用户编号，返回该用户的抽奖统计信息，形如：{"uid":10, "total":21, "used": 3} SQL1：计算指定用户的订单总额 SELECT SUM(price) FROM jd_order WHERE userId=? SQL2：计算指定用户已经抽奖的次数 SELECT COUNT(*) FROM jd_lottery WHERE userId=? (19)修改HTML，usercenter.html，“幸运抽奖”界面中有个统计按钮，待页面加载完成，异步请求抽奖信息，若用户还有剩余抽奖次数，按钮可用，使用Canvas绘制出抽奖的圆盘和指针 (20)点击“开始抽奖”，则圆盘开始旋转，而指针保持正直不动 提示：旋转deg度，绘制圆盘，再逆向旋转deg度，绘制指针 2.面试题：如何实现特定布局：父容器宽度不定，左侧定宽210px，右侧占剩余全部 .parent { } .left { float: left; width: 210px; } .right { margin-left: 210px; } 3.常用的第三方图表绘制工具 (1)Chart.js，基于Canvas，开源，提供了8图表 (2)EChart.js，百度提供的，开源的，手册简单易懂 (3)FusionChart.js，收费的，提供了90+种图表还有几千张地图 第三方图表绘制工具FusionChart.js的使用： (1)找官网，看说明 http://www.fusioncharts.com/ 收费的图表绘制工具，根据底层浏览器的兼容性选择不同的技术实现，如SVG、Flash等。提供了90+种图表还有几千张地图，同时实现了响应式应用。 (2)找Demo，仿写示例 1. Installing FusionCharts Suite XT for your application 2. Converting your data to a JSON or XML format 3. Including the FusionCharts Suite XT JavaScript library in your HTML page 4. Creating a container 5. Using the new FusionCharts() constructor to create the chart instance, and then calling the render()method (3)看API Document，实现项目案例 var c = new FusionCharts({ type: 'column2d', renderAt: 'container-buy-stat-svg', width: '90%', height: '500', dataSource: { data: list } }); c.render(); HTML5 day07
HTML5 day08