01-HTML5新增语义化标签
妙味课堂
极富有人情味的学习网站
我在 有个约会
课堂
国内知名的IT培训机构
by 痞子坦
这是一个mark，作用是标记
HTML5语义化标签的兼容
头部
内容区域
HTML5新增表单控件和表单属性
HTML5表单验证反馈
捕获
//自定义验证
incalid事件：验证反馈
ev.preventDefault()//组织默认事件
formnovalidate//关闭验证
新的选择器
JSON的新方法
/*
* eval可以解析任何字符串变成JS
* parse()只能解析JSON形式的字符串编程JS.安全性会高一些
* */
var str = '{"name":"hello"}';//一定是严格形式JSON模式
var json = JSON.parse(str);
console.log(json.name);
//JSON转换为字符串
var json = {name:'hellow'};
var str = JSON.stringify(json);
console.log(str);
//深层拷贝。IE低版本存在兼容性问题
var a = {
name:'hello'
}
var str = JSON.stringify(a);
var b = JSON.parse(str);
b.name = '小明';
console.log(a.name);
console.log(b.name);
自定义数据与JS加载
专门做异步加载的库:labjs库
历史管理器history
拖放操作一
var div1 =document.getElementById('div1');
var getLi =document.getElementsByTagName('li');
var i =0;
var t =0;
for(var i =0;i
捕获
拖放操作二
解决火狐下不能够拖拽的问题
/*
* 火狐的兼容解决
* 必须设置dataTransfer对象的setData方法才可以拖拽除图片外的其他标签
* */
/*
* dataTransfer是出现在event对象下的
*
* setData():设置数据key和value(必须是字符串)
* getData():获取数据，根据key值，获取对应的value
* */
var div1 =document.getElementById('div1');
var getLi =document.getElementsByTagName('li');
var ul = document.getElementById('ul1');
var i =0;
var t =0;
for(var i =0;i
拖放操作三
拖放实例
一个简单的拖拽购物车
canvas基础
oGC.clearRect(0,0,oC.width,oC.height);//清空画布。[X,Y,W,H]
oGC.save();
//封闭路径。比如说中间是一个设置背景颜色的是全局通用。如果加在这个里面就是局部
oGC.restore();
使用style修改的宽高是进行缩放的，会带来像素扭曲
canvas基础二
// 弧度=角度*Math.PI/180
oGC.moveTo(200,200);
oGC.arc(200,200,150,0,90*Math.PI/180,false);//false是顺时针，true是逆时针
//[X,Y，半径，起始弧度，结束弧度，旋转方向]//X Y 表示中心
oGC.stroke();//画线
oGC.beginPath();
oGC.moveTo(100,200);
oGC.arcTo(100,100,200,100,50);//绘制曲线[起点X,起点Y,终点X,终点Y,半径]
oGC.stroke();//画线
oGC.closePath();
oGC.quadraticCurveTo(100,100,200,100);//贝塞尔曲线[X,Y,C1,C2] //贝塞尔曲线。控制点1，控制点2，结束坐标1，结束坐标2
oGC.bezierCurveTo(100,100,200,200,200,100);//两个点贝塞尔曲线[X1,Y1,X2,Y2,C1,C2] //控制点1，控制点2，结束坐标1，结束坐标2.
/*
* translate
* - 偏移
* rotate
* - 旋转:参数为弧度
* scale
* - 缩放
* */
oGC.translate(100,100);//移动[X,Y]
oGC.rotate(45*Math.PI/180);
oGC.scale(0.5,0.5);
oGC.fillRect(0,0,100,100);
oGC.translate(100,100);//移动[X,Y]
setInterval(function(){
num++;
oGC.save();//封闭
oGC.clearRect(0,0,oC.width,oC.height);
oGC.rotate(num*Math.PI/180);
oGC.translate(-50,-50);
oGC.fillRect(0,0,100,100);
oGC.restore();//封闭
},30)
canvas基础
/*
* - 插入图片，等图片加载完在执行canvas方法
* - 图片预加载：在onload中调用方法
* - drawlmage(oimg,x,y,w,h)
* - oimg:当前图片 x,y:坐标 w h:宽高
* - 例子：微博的图片旋转效果
*oGC.drawImage(obj,0,0,400,400)//[图片对象,X轴坐标,Y轴坐标,宽度,高度].如果两个 *宽高参数不写会自适应宽高
*
*
*createPattem(oimg,平铺方式)
*- 2参为:repeat,repeat-x,repeat-y,no-repeat
*
*/
var bg = oGC.createPattern(obj,'repeat');/*设置背景：[img,平铺方式*/
oGC.fillStyle = bg;/*填充背景*/
oGC.fillRect(0,0,300,300);
//线性渐变
var oC = document.getElementById('c1');
var oGC = oC.getContext('2d');
var obj = oGC.createLinearGradient(150,100,150,200);/*线性渐变。[起点X,起点Y,终点X,终点Y]*/
obj.addColorStop(0,'red');//起点
obj.addColorStop(0.5,'pink');//中间可以添加多个点
obj.addColorStop(1,'blue');//终点
oGC.fillStyle = obj;
oGC.fillRect(150,100,100,100);
//放射性渐变
var oC = document.getElementById('c1');
var oGC = oC.getContext('2d');
var obj =oGC.createRadialGradient(200,200,100,200,200,150);//放射性渐变[X1,Y1,R1,X2,Y2,R2]
obj.addColorStop(0,'green');//起点
obj.addColorStop(0.5,'yellow');//中间可以添加多个点
obj.addColorStop(1,'blue');//终点
oGC.fillStyle = obj;
oGC.fillRect(0,0,oC.width,oC.height);
canvas基础
var oC = document.getElementById('c1');
var oGC = oC.getContext('2d');
oGC.fillRect(0,0,100,100);
/*
* 获取像素点*/
var pixel = oGC.getImageData(0,0,100,100);
console.log(pixel.width);
console.log(pixel.height);
console.log(pixel.data);//整体像素的数组集合
for(var i =0;i /*
* createImageData(w,h)
* - 生成新的像素矩阵，初始值是全透明的黑色，即是(0,0,0,0)
* -像素显字
*
* */
canvas基础教程五
在canvas中，画布画的每个图形都是由像素组成的
/*
* 源:新的图形
* 目标:已经绘制过的图形
* - oGC.globalCompositeOperation
* - sourec-over默认属性/*+--
* - destination-over 目标属性会覆盖
*
*
*
* */
oGC.globalCompositeOperation = 'destination-over';
oGC.fillRect(50,50,100,100);
oGC.globalAlpha = 0.5;/*设置全局透明度*/
属性
/*
* 将画布导出为图像
* - toDataURL
* - 而火狐右键可以直接导出成图片
* 事件操作
* - isPointlnPath
* - 是否在点击范围内
* */
var oC = document.getElementById('c1');
var oGC = oC.getContext('2d');
var img1 = document.getElementById('img1');
oGC.fillStyle = 'green';
oGC.fillRect(10,10,100,100);
oGC.globalCompositeOperation = 'source-over';
oGC.fillStyle = 'red';
oGC.fillRect(50,50,100,100);
img1.src = oC.toDataURL();//图片默认是透明的
// alert(oC.toDataURL());//是一个64位的图片地址信息
//事件操作
//是采用重新绘制来解决问题
jCanvaScript(canvas中的jquery)
canvas 元素用于在网页上绘制图形。
01
canvas设置宽高. 默认宽300,高150
fillRect(x,y,w,h) //默认绘制已填黑色的矩形
strokeRect(x,y,w,h) //绘制无填充的边框矩形
fillStyle = ; //定义填充颜色
strokeStyle = ; //修改边框颜色
lineWidth = ; //borderer宽度
lineJoin= ; //修改矩形边角样式[默认尖角]
beginPath() // 在画布中开始子路径的一个新的集合
moveTo(x,y) //起始点的位置
lineTo(x,y) //到达一个点
closeePath //结束绘制路径||创建一个从当前点到起始点的路径
stroke() //实际绘出线
fill() //填充当前图像
rece(x,y,w,h) //绘制矩形
clearRect(x,y,w,h) //清除画布
save() //保存路径
restore() //恢复路径 [他们两个就像是局部函数,对外不造成影响]
lineCap = ; //设置线条末端的线帽的样式
02
[弧度= 角度*Math.PI/180]
arc(x,y,r,起始弧度,结束弧度,时针); //绘制一个圆形
arcTo(x1,y1,x2,y2,r); //绘制一个弧形
quadraticCurveTo(); //二次贝塞尔曲线
bezierCurveTo(); // 三次贝塞尔曲线
translate(x,y); //偏移[移动到Xpx与Ypx]
rotate(弧度); //旋转
scale(x,y) //缩放
03
drawImage(img,x,y) //在画布上绘制图片[加载完图片之后执行]
createPattern(img,repleat); //设置要重复的方式
createLinearGradient(); //渐变
addColorStop(); //添加渐变
createRadialGradient() //渐变圆
font //设置字体大小及字体
fillText //生成字体[填充]
strokeText //生成字体[线条]
textBaseline //设置文本基线[类似于拼音格]
strokeStyle //设置线条颜色
fillStyle //设置填充颜色
measureText('检查的字体').width //在画布上输出文本之前,检查文本的宽度
- shadowOffsetX; //阴影X偏移量
- shadowOffsetY; //阴影Y偏移量
- shadowBlur; //阴影模糊度
- shadowColor; //阴影颜色
04
getImageData(x,y,w,h) // 返回canvas的像素数据
.width
.height
.data.length //整体像素的数组集合[100*100的区域有4W个数组]
putImageData(); //把像素数据放回到画布中
createImageData(w,h); //Create ImageData Object
05
- globalAlpha; //设置全局透明度
- globalCompositeOperation //设置叠加方式
- toDataURL(); // canvas图片信息
- isPointInPath(x,y) //事件。如果在绘制图内点击就会触发
祖玛
//在canvas中，让动画动起来，其实都是重新绘制
准备工作和同域下的窗口通信
//这是window的open对对象
var btn = document.getElementById('btn');
var btn1 = document.getElementById('btn1');
var newWindow = null;
btn.onclick = function(){
//返回打开窗口的window对象
newWindow = window.open('04_window.open.html','_blank');
}
btn1.onclick = function(){
newWindow.document.body.style.backgroundColor = 'pink';
}
窗口跨域操作问题和postMessage的使用
/*
* 跨域 操作是禁止的
* 本页面和包含页面不在同一个域名下的时候，这样操作就会有跨域安全限制问题
*
* postMessage:可以通过这个对象下的方法给另外一个窗口发送信息。[方法是全局的].只能够发送数据，不能够操作DOM
*
* 接收消息的窗口的window对象.postMessage(发送的数据,接收的域);
*
* */
getInput.onclick = function(){
//getiframe.contentWindow.document.body.style.backgroundColor = 'yellow';
getiframe.contentWindow.postMessage('ac','http://www.bb.com');
}
在同域下面
/*
* window //当前窗口
* parent //父级窗口
* window.top //指的是顶层
* */
window.top.document.body.style.background = 'green';
//window.opener[作用范围是在同域下]
sonBtn.onclick = function(){
window.opener.document.body.style.backgroundColor = 'gold';
}
/*
* parent->window 如果当前页面是顶级，没有被其他页面所包含，那么parent就是当前页面的window对象。如果包含了，则parent就是包含当前页面的父级页面的window对象
* */center
/*
* parent->window 如果当前页面是顶级，没有被其他页面所包含，那么parent就是当前页面的window对象。如果包含了，则parent就是包含当前页面的父级页面的window对象
*
* window对象
* parent对象
*
* */
ajax跨域的问题和处理
btn.onclick = function(){
/*
*
* 在标准浏览器下，XMLHttpRequest对象已经是升级版本，支持更多特性，可以跨域请求。但是如果想实现跨域请求，还需要后端的相关配合
* */
/*
*
* 添加
*
* 文件：
* IE 下 [IE10-,eage支持标准方法]
var btn = document.getElementById('btn');
btn.onclick = function(){
var xdr = new XDomainRequest();
xdr.open('get','http://www.bb.com/readAjax.php',true);
xdr.send();
xdr.onload = function(){
alert(xdr.responseText);
}
}
XMLHttpRequest增加了很多功能，不推荐使用onreadystatechange来监听，推荐使用onload
ajax无刷新上传
0%
nodejs的安装搭建和一个简单http服务器的实现
websocket协议
TCP/IP协议
- 定义了电子设备如何连入因特网，以及数据在它们之间传输数据的标准(如何传输)
- 传输数据[协议]类型:Email,www,FTP等
HTTP协议 - 浏览器和万维网服务器之间通信的规则
HTTP协议特点
- 功能强大
- 采用请求，响应模式，单向通信
- 短连接，响应完成链接就断开
实时web交互 - 股票，网游
- 实现服务器主动推送
websocket
搭建HTTP服务器
var http = require('http');//加载模块
var serv = http.createServer(function(req,res){//一个是请求，一个是响应
console.log('有人进来了');//执行回调函数
res.writeHeader(404,{
'content-type' : 'text/html;charset="utf-8"'
});
console.log(req);//请求者的用户信息
res.write('欢迎访问');
res.end();
}).listen(8888);//创建一个服务器并监听8888端口
console.log('服务器开启成功');
var http = require('http');
var fs = require('fs');//FS模块[文件系统模块]，使用这一个去读取文件
var documentRoot = 'D:/learntest/websocket/www';//文件存储路径
var httpServer = http.createServer(function(req,res){//创建一个服务器
var url = req.url;//获得用户请求的url
console.log(url);
var file = documentRoot+url;
console.log(file);
fs.readFile(file,function(err,data){//去读取文件 参数[代表失败参数,读取来的文件内容]
if(err){
res.writeHeader(404,{
'content-type' : 'text/html;charset="utf-8"'
});
res.write('404
');
res.end();
}else{
res.writeHeader(200,{
'content-type' : 'text/html;charset="utf-8"'
});
res.write(data);//读取获得来的数据
res.end();
}
});
}).listen(8888);
console.log('服务器2开启成功');
nodejs-websocker服务器的创建和应用
- node.js步骤
- 安装node.js
- 转到安装目录
- 运行 node scriptname.js
- http 服务区的创建
- 安装websocket模块[npm install socket.io]后面可以带参数，全局模式
- websocket服务的创建
实际创建中是失败，失败原因是由于版本的问题
实际文档查看 :socket.io
HTML5之离线存储
应用于与服务器没有交互的展示场景
cache
与html标签中的名字相同
需要缓存的文件
HTML5之workers
- 什么是worker
- JS的单线程[方式UI队列的个数，利用定时器解决]
- 可以让web应用程序具备后台处理能力，对多线程的支持非常好
- worker API
- new Worker('后台处理的JS地址');
- 利用postMessage传输数据
- importScripts('导入其他JS文件');
可以使用的
HTML5之一些小功能
地理信息与本地存储
/*
* - 位置从哪里获取
* IP地址
* GPS
* WIFI
* 基站
*
**/
oInput.onclick = function(){
navigator.geolocation.getCurrentPosition(function(position){
oT.value += '经度:' + position.coords.longitude+'\n';
oT.value += '纬度 :' + position.coords.latitude+'\n';
oT.value += '准确度 :' + position.coords.accuracy+'\n';
oT.value += '海拔 :' + position.coords.altitude+'\n';
oT.value += '海拔准确度 :' + position.coords.altitudeAcuracy+'\n';
oT.value += '行进方向 :' + position.coords.heading+'\n';
oT.value += '地面速度 :' + position.coords.speed+'\n';
oT.value += '时间戳:' + new Date(position.timestamp)+'\n';
},function(err){
//err.code // 失败所对应的编号
alert( err.code );
},{
enableHighAcuracy : true,
timeout : 5000,//设置超时时间
maximumAge : 5000
});
};//[请求成功回调,请求失败回调,收集方式]
};
位置请求
位置请求
位置请求
位置请求
navigator.geolocation.clearWatch(timer);//关闭请求, 与clearInterval();类似
frequency:5000//设置更新时间，在移动设备上有效
了解地图接口
地理信息与本地存储2
- cookie每次运行都会请求服务器
storage
- sessionStorage[数据不共享]
- localStorage[数据共享]
stroage
地理信息与本地存储3
getInput[0].onclick = function(){
window.sessionStorage.setItem('name',getInput[3].value);
}
地理信息与本地存储4
- 当数据有修改或删除的情况下，就会触发storage事件。[是与之共享的页面会触发.]
实测在chrome中不支持事件
StorageAPI
有一个应用场景是一个同步购物车,估计到不经常使用网络的人群
地理信息与本地存储5
*ERR:浏览器位置不能获取位置
音频与视频 webWorkers 移动端HTML5
audio
video
source//兼容
HTML5打造自定义播放器
//时间是通过JS来进行控制的
setInterval(function(){
console.log(a1.currentTime);
},1000);
mediaElem
mediaElem2
媒体事件
- video的额外特性
- poster:视频播放前的预览图片
- width,height:设置视频的尺寸
- viderWidth,videoHeight:视频的原始尺寸[readOnly]