資訊專欄INFORMATION COLUMN
摘要：最典型的場(chǎng)景就是聊天室。主要特點(diǎn)就是服務(wù)器可以主動(dòng)向客戶端推送信息，客戶端也可以主動(dòng)向服務(wù)器發(fā)送信息，是真正的雙向平等對(duì)話，屬于服務(wù)器推送技術(shù)的一種。
語義化標(biāo)簽 input的新屬性值 表單的驗(yàn)證 json的新方法 自定義屬性 拖放 canvas 地理位置的獲取 離線存儲(chǔ) 本地存儲(chǔ) audio video
語義化標(biāo)簽使用最多的id->當(dāng)前的語義化標(biāo)簽
頁面整體架構(gòu)
header標(biāo)簽 頁面頭部或者板塊的頭部
footer標(biāo)簽 頁面底部或者板塊的底部
nav標(biāo)簽 頁面的導(dǎo)航
hgroup 頁面中的標(biāo)題組合
內(nèi)容部分
section 頁面中用來劃分區(qū)域的 劃分出獨(dú)立的區(qū)塊
article 結(jié)構(gòu)完整并且內(nèi)容相對(duì)獨(dú)立的一部分
aside 和主題相關(guān)的附屬信息
相對(duì)獨(dú)立的語義化的新標(biāo)簽
figure 媒體元素組合（圖片+文字） img+figcaption
time 時(shí)間標(biāo)簽 標(biāo)簽有一個(gè)datatime屬性
dataList 列表標(biāo)簽 input中可能會(huì)輸入的值
details 標(biāo)簽 配合summary
//加上open屬性 p的內(nèi)容就會(huì)顯示sasa
sassasas
實(shí)現(xiàn)了點(diǎn)擊summary的時(shí)候會(huì)顯示p中的內(nèi)容
dialog 標(biāo)簽
必須加上open屬性 才能顯示整個(gè)對(duì)話框
address 標(biāo)簽 頁面上的地址 傾斜
mark 標(biāo)簽 標(biāo)記一下 文字的背景變黃
功能性標(biāo)簽
progress 進(jìn)度條
瀏覽器h5的兼容 頁面開始的地方添加腳本
等一系列新的結(jié)構(gòu)性的標(biāo)簽、兼容低版本瀏覽器的插件 html5.js
html5新增表單元素 input的屬性值email 輸入的必須為email
tel 輸入的必須為一個(gè)電話號(hào)
url 輸入的必須為一個(gè)網(wǎng)址
search 搜索框 輸入的過程中 輸入框尾部總有一個(gè)X 一點(diǎn)擊X輸入的內(nèi)容就沒有了
range 數(shù)值選擇器 step=2 min=0 max=10 value=當(dāng)前的值
number 輸入框的尾部 有向上和向下的箭頭 會(huì)改變數(shù)值
color 顏色輸入框
datetime 顯示完整的日期
time 小時(shí)和分鐘數(shù)的顯示
week 周顯示器 顯示當(dāng)前是這一年的第幾周
month 月顯示器 顯示當(dāng)前是這一年的第幾月
placeholder 輸入框內(nèi)會(huì)默認(rèn)顯示的值
autocomplete 輸入的過程中是否會(huì)自動(dòng)提示 如果在公共電腦上不需要保存的話 autocomplete =“off”
autofocus 表單是否會(huì)自動(dòng)獲取焦點(diǎn) 直接使用沒有值
input 的list屬性指定這個(gè)輸入框的datalist
required 在提交之前這個(gè)輸入 這個(gè)字段是必填的
pattern 屬性值為正則表達(dá)式 可以校驗(yàn)這個(gè)輸入的字符串 在失去焦點(diǎn)的時(shí)候就會(huì)校驗(yàn)
formaction 這個(gè)輸入框多帶帶的提交地址 傳統(tǒng)的都是整個(gè)表單會(huì)提交到一個(gè)地方 在opera可以
html
js
var oText=document.getElementById("text");
//只有再?zèng)]有填寫在這個(gè)字段 并且提交的時(shí)候才會(huì)觸發(fā)這個(gè)事件
oText.addEventListener("invalid",fn,false);
//用戶向輸入框中輸入文字的時(shí)候便會(huì)觸發(fā)該事件
oText.oninput=function () {
console.log(112)
//自定義驗(yàn)證
if(this.value=="111"){
this.setCustomValidity("這是銘感詞")
}else{
this.setCustomValidity("這是銘感詞")
}
}
function fn() {
console.log(this.validity) //整個(gè)驗(yàn)證信息都是保存在這個(gè)對(duì)象當(dāng)中的
console.log(this.validity.valid) //布爾值 驗(yàn)證通過為true
console.log(this.validity.valueMissing) //布爾值 輸入的字符串是否為空
console.log(this.validity.typeMismatch) //布爾值 輸入的字符串是否和要求的類型不一致返回true
console.log(this.validity.patternMismatch) //布爾值 輸入的字符串是否和pattern的屬性值的正則是否不匹配 返回為true
console.log(this.validity.tooLong) //布爾值 輸入的字符串的長(zhǎng)度大于maxlength的屬性值
}
在設(shè)計(jì) 保存至草稿箱按鈕的時(shí)候注意
1、關(guān)閉表單驗(yàn)證 為這個(gè)input 添加formnovalidate 關(guān)閉驗(yàn)證
2、使用formaction 提交到本地
querySelector（id，class[只能選擇到一組中的第一個(gè)元素],標(biāo)簽） 返回的都是一個(gè)元素
html
sasa
js
window.onload=function () {
var oDIv=document.querySelector("#test2")
oDIv.style.background="red"
}
querySelectorAll(id，class[選擇到一組元素],標(biāo)簽)
html5增加了對(duì)元素類的操作
var oDIv=document.querySelector("#test2")
console.log(oDIv.classList)
oDIv.classList.add("box4") //為元素增加了類 box4
oDIv.classList.remove("box2") //為元素刪除了類 box4
oDIv.classList.toggle("box2") //如果元素有box2就刪除box2 如果沒有box2增加box2
html5的JSON的新方法
JSON.parse("json類型的字符串") 只能解析json類型的字符串轉(zhuǎn)化為對(duì)象 json必須是一個(gè)嚴(yán)格的json
嚴(yán)格的json 屬性和屬性值都帶著“”
eval("任何字符串") 將任意類型的字符串轉(zhuǎn)化為js
var sss=JSON.parse("{"name":"huangxiaojian","age":"23"}")
console.log(typeof sss) //object
將js轉(zhuǎn)化為字符串
JSON.strify(對(duì)象) 返回的是嚴(yán)格的json字符串
var sss=JSON.parse("{"name":"huangxiaojian","age":"23"}")
console.log(typeof sss) //object
var sss1=JSON.stringify(sss);
console.log(typeof sss1) //string
對(duì)象之間的賦值會(huì)出現(xiàn)引用
var a={name:"sasa"};
var b=a;
b.name="sa11";
console.log(a.name) //sa11
但是使用for循環(huán)對(duì)對(duì)象的賦值只能是淺拷貝。
實(shí)現(xiàn)深拷貝的最簡(jiǎn)單的方法。
var a={name:"11"};
var str=JSON.stringify(a);
var b=JSON.parse(str);
b.name="sasa";
console.log(a.name) //依然為11
先轉(zhuǎn)化為字符串 再將字符串轉(zhuǎn)化為對(duì)象 實(shí)現(xiàn)了深拷貝
html5中的自定義屬性html
sasa
js
var maiowei=document.querySelector("#miaowei")
console.log(maiowei.dataset.maiaov) //妙味
console.log(maiowei.dataset.maiaovAll) //妙味課堂 使用駝峰式來訪問
在使用自定義的屬性的時(shí)候注意：
1、html中屬性值都是 data-name-value=""
2、js中訪問這個(gè)值得時(shí)候都是 存放在這個(gè)元素上的dataset上邊 比如說dataset.nameValue
defer="defer" 延遲加載js這個(gè)屬性
會(huì)先輸出333載執(zhí)行a.js文件
html5為js異步加載的屬性 async異步加載js 加載完就會(huì)某個(gè)事件
async="async"
異步加載的執(zhí)行順序是不定的
一般用來加載 和頁面加載和顯示無關(guān)的js
改變歷史管理
1、跳轉(zhuǎn)頁面
2、增加哈希值 http://localhost:63342/study_... onhashchange
3、pushstate()
onhashchange()改變hash值來管理
var oInput=document.getElementById("input1")
var div1=document.getElementById("div1");
var json={};
window.onload=function () {
oInput.onclick=function () {
var number=Math.random();
var arr=randomNum(35,7)
json[number]=arr;
div1.innerHTML=arr;
window.location.hash=number
}
function randomNum(iAll,isNow) {
var arr=[];
var newArr=[];
for(var i=1;i<=iAll;i++){
arr.push(i)
}
for(var i=0;i
當(dāng)url部分的哈希值發(fā)生變化的時(shí)候 div中的值也會(huì)發(fā)生改變
使用history.push(三個(gè)參數(shù)) 數(shù)據(jù)、標(biāo)題、地址
var oInput=document.getElementById("input1")
var div1=document.getElementById("div1");
var json={};
window.onload=function () {
oInput.onclick=function () {
var arr=randomNum(35,7)
history.pushState(arr,"",arr)
div1.innerHTML=arr;
}
window.onpopstate=function (ev) {
div1.innerHTML=ev.state
}
function randomNum(iAll,isNow) {
var arr=[];
var newArr=[];
for(var i=1;i<=iAll;i++){
arr.push(i)
}
for(var i=0;i
html5的拖放事件
draggable=true
拖拽元素事件
ondragstart 開始拖拽的時(shí)候（而不是鼠標(biāo)按下）會(huì)響應(yīng)
ondrag 拖拽前和拖拽結(jié)束的中間會(huì)連續(xù)觸發(fā)
ondragend 拖拽結(jié)束的時(shí)候觸發(fā)的事件（也就是釋放鼠標(biāo)的時(shí)候）
目標(biāo)元素（拖拽到的地方）事件
ondragenter 拖拽的元素進(jìn)入目標(biāo)區(qū)域的時(shí)候會(huì)響應(yīng)事件
ondragover 進(jìn)入目標(biāo)區(qū)域之后離開目標(biāo)區(qū)域之前會(huì)一直響應(yīng)
ondragleave 拖拽的元素離開目標(biāo)區(qū)域的時(shí)候會(huì)響應(yīng)事件
ondrop 在目標(biāo)元素上釋放被拖拽元素的時(shí)候會(huì)觸發(fā)(要想觸發(fā)drop事件，就必須觸發(fā)在ondragover中阻止默認(rèn)事件)
html
- 1
- 1
- 1
js
var lis=document.getElementsByTagName("li");
var i=0;
for(var i=0;i
剛被拖拽的元素沒有觸發(fā)drop時(shí)
依次觸發(fā)的事件為：ondragstart ondrag ondragenter ondragover ondragleave ondragend
剛被拖拽的元素會(huì)觸發(fā)drop時(shí)
依次觸發(fā)的事件為：ondragstart ondrag ondragenter ondragover ondrop ondragend
解決火狐下元素的拖放
兼容火狐瀏覽器，并且利用dataTransfer來傳遞數(shù)據(jù)
html
- 1
- 2
- 3
var ul=document.getElementsByTagName("ul")[0];
var lis=ul.getElementsByTagName("li");
var i=0;
var div1=document.getElementById("div1");
for(var i=0;i
html5中的canvas應(yīng)用
canvas的默認(rèn)大小 寬300高150
繪圖的前提
1、得到畫筆
var oc=document.getElementById("c1");
var oGC=oc.getContext("2d");
2、繪制方塊
oGC.fillRect(50,50,50,50) //L T W H
3、繪制只有邊框的方塊
oGC.strokeRect(50,50,50,50) //L T W H
4、設(shè)置繪圖的屬性
oGC.fillStyle="red"; //設(shè)置填充的顏色
oGC.strokeStyle="blue" //設(shè)置邊框的顏色
oGC.lineWidth=10 //設(shè)置邊框的顏色
oGC.lineJoin="round" //矩形四周圓角連接
oGC.lineJoin="bevel" //矩形四周斜角連接
oGC.lineCap="squre" //方形的頭
5、繪制直線 繪制路徑
oGC.beginPath();
oGC.moveTo(100,100);
oGC.lineTo(200,200);
oGC.lineTo(300,200);
oGC.closePath() //起點(diǎn)和終點(diǎn)進(jìn)行連接
oGC.stroke(); //畫線的功能
6、繪制其他的路徑
oGC.stroke() 畫線
oGC.fill() 填充
oGC.rect() 填充 默認(rèn)是黑色
oGC.clearRect(L T W H) 清除畫布的大小
oGC.save() 保存當(dāng)前的畫筆 在設(shè)置畫筆前進(jìn)行
oGC.restore() 恢復(fù)畫筆
window.onload=function () {
var oc=document.getElementById("c1");
//得到繪制環(huán)境
var oGC=oc.getContext("2d");
//先將畫筆保存起來
oGC.save();
oGC.fillStyle="red"
oGC.beginPath();
oGC.moveTo(50,50);
oGC.lineTo(100,50);
oGC.lineTo(100,100);
oGC.closePath()
oGC.fill();
//再恢復(fù)畫筆
oGC.restore();
oGC.beginPath();
oGC.moveTo(100,100);
oGC.lineTo(200,200);
oGC.lineTo(200,300);
oGC.closePath();
oGC.fill();
}
canvas畫曲線
畫弧線
oGC.moveTo(100,200)
oGC.arcTo(100,100,200,100,50) //兩組xy 半徑
oGC.stroke()
畫貝塞爾曲線 方法一
oGC.moveTo(100,200)
oGC.quadraticCurveTo(100,100,200,100) //控制點(diǎn)坐標(biāo) 結(jié)束點(diǎn)坐標(biāo)
oGC.stroke()
畫貝塞爾曲線 方法二
oGC.moveTo(100,200)
oGC.bezierCurveTo(100,100,200,200,200,100) //第一組控制點(diǎn) 第二組控制點(diǎn) 結(jié)束點(diǎn)
oGC.stroke()
canvas的變換
translate 畫布原點(diǎn)的位移 (x,y)
rotate 旋轉(zhuǎn)的角度(deg) 矩形以左上角的點(diǎn) 旋轉(zhuǎn)
scale 縮放 (x,y) x和y縮放的比例
在canvas上邊加載圖片
畫筆.drawImage(image,x,y) 參考旋轉(zhuǎn)圖片的額例子
將圖片平鋪畫布
畫筆.createPattern(obj,"平鋪的方式repeat")
window.onload=function () {
var oc=document.getElementById("c1");
//得到繪制環(huán)境 畫筆
var oGC=oc.getContext("2d");
var yImg=new Image();
yImg.src="111.jpg"
yImg.onload=function () {
draw();
}
function draw() {
var bg=oGC.createPattern(yImg,"repeat");//得到的是一個(gè)填充的樣式
oGC.fillStyle=bg;
oGC.fillRect(0,0,300,300)
}
}
canvas漸變
線性漸變
var oc=document.getElementById("c1");
//得到繪制環(huán)境 畫筆
var oGC=oc.getContext("2d");
//漸變的起始點(diǎn)的坐標(biāo) 漸變的終點(diǎn)的坐標(biāo)
var obj=oGC.createLinearGradient(150,100,250,200);
obj.addColorStop(0,"red")
obj.addColorStop(0.5,"green")
obj.addColorStop(1,"blue")
oGC.fillStyle=obj;
oGC.fillRect(150,100,100,100)
放射性漸變
canvas的文本
設(shè)置文字的樣式
oGC.font="20px impact" //文字的大小 文字的樣式
設(shè)置文字的基線
oGC.textBaseline="top"; bottom
在畫布上寫字
oGC.fillText(str,200,200) // 內(nèi)容和文字
oGC.strokeText(str,200,200) //內(nèi)容和文字
設(shè)置文字的坐標(biāo)
oGC.textAlign="left" //設(shè)置文字的左右基線
oGC.textBaseline="top"; //設(shè)置文字的上下基線
oGC.strokeText(str,0,0) //
得到文字的寬度
oGC.measureText(str).width
為文字添加陰影
var oc=document.getElementById("c1");
//得到繪制環(huán)境 畫筆
var oGC=oc.getContext("2d");
oGC.font="60px impact" //文字的大小 文字的樣式
var str="sasa"
oGC.textAlign="left"
oGC.textBaseline="top";
oGC.shadowOffsetX=10; //x軸便宜
oGC.shadowOffsetY=10; //Y軸便宜
oGC.shadowBlur=3 //設(shè)置高斯模糊
oGC.shadowColor="red" //設(shè)置影音必須的一步 因?yàn)槟J(rèn)的陰影顏色是黑色透明
oGC.fillText(str,0,0)
canvas中的像素操作
得到像素點(diǎn) 畫筆.getImageData(x,y,width,heigth)
為畫布設(shè)置像素點(diǎn) 畫筆.putImageData(像素對(duì)象,x,y)
var oc=document.getElementById("c1");
//得到繪制環(huán)境 畫筆
var oGC=oc.getContext("2d");
oGC.fillRect(0,0,100,100);
var oImg=oGC.getImageData(0,0,100,100); //獲取到黑色方塊的所有的像素
//oImg為一個(gè)對(duì)象 包括
console.log(oImg.width) //寬的像素
console.log(oImg.height) //高的像素
console.log(oImg.data[0]) //40000 整體像素的數(shù)組集合
//一個(gè)像素點(diǎn)使用四個(gè)值表示 rgba
for(var i=0;i
創(chuàng)建新的像素 oGC.createImageData(x,y,w,h)
通過 坐標(biāo)得到像素點(diǎn) 通過坐標(biāo)設(shè)置像素點(diǎn)
//設(shè)置像素點(diǎn)
function setXY(obj,x,y,color) {
var w=obj.width;
var h=obj.height;
var d=obj.data;
for(var i=0;i
設(shè)置畫筆透明
context.globalAlpha=0.5;
改變合成部分元素的疊加順序 默認(rèn)的是后畫的會(huì)覆蓋之前畫的
源 即將繪制的圖形 目標(biāo)已經(jīng)繪制過的圖形
context.gloalCompositionOperation="destination-over" //默認(rèn)的值
將canvas導(dǎo)出為圖片
var ii=oc.toDataURL(); //畫布的方法
img.src=ii;
canvas的事件操作
isPointInPath(x,y) 判斷點(diǎn)擊的點(diǎn)是否在路徑內(nèi) 但是這個(gè)方法只會(huì)針對(duì)最后一個(gè)畫的圖形
context.isPointInPath(x,y)
為每一個(gè)繪制在每一個(gè)畫布上的圓添加點(diǎn)擊事件
var oc=document.getElementById("c1");
var img=document.getElementsByTagName("img")[0];
//得到繪制環(huán)境 畫筆
var context=oc.getContext("2d");
var c1=new shape(100,100,50)
var c2=new shape(200,200,50)
oc.onmousedown=function (ev) {
var e=window.event||ev
var point={
x:ev.clientX-oc.offsetLeft,
y:ev.clientY-oc.offsetTop
}
c1.repaint(point);
c2.repaint(point);
}
c1.click=function () {
console.log(111)
}
c2.click=function () {
console.log(222)
}
function shape(x,y,r) {
this.x=x;
this.y=y;
this.r=r;
context.beginPath();
context.arc(this.x,this.y,this.r,0,360*Math.PI/180);
context.closePath();
context.fill();
}
shape.prototype.repaint=function (point) {
context.beginPath();
context.arc(this.x,this.y,this.r,0,360*Math.PI/180);
context.closePath();
context.fill();
if(context.isPointInPath(point.x,point.y)){
this.click();
}
}
http://jcscript.com/ 一個(gè)專注于操作canvas的庫
html5的跨文檔通信
同域的不同窗口(iframe)之間的通信、window.open（）新打開窗口之間的通信
1、 iframe 這個(gè)頁面就會(huì)有兩個(gè)窗口
找到子窗口
//指向了子窗口的window
var smallwindow=iframe1.contentWindow
smallwindow.document.body.style.background="red"
2、通過window.open（）方法打開的窗口
跨域下會(huì)報(bào)錯(cuò)
js
var btn1=document.getElementById("btn1");
var iframe1=document.getElementById("iframe1");
btn1.onclick=function () {
var window=iframe1.contentWindow
console.log(window)
window.document.body.style.background="red"; //這就會(huì)因?yàn)榭缬蛳碌南拗茍?bào)錯(cuò)
}
跨域的方法
1、通過postMeassage window對(duì)象的方法
用于這個(gè)對(duì)象下的方法 給另外的一個(gè)窗口發(fā)送信息
postMeassage(發(fā)送的數(shù)據(jù),接收數(shù)據(jù)的協(xié)議+域名) 發(fā)送端
window.onMessage（function(){}） 接收端
當(dāng)接收窗口接受到postmessag方法 發(fā)送給過來的消息 就會(huì)觸發(fā)這個(gè)事件
使用postMessage發(fā)送的消息
服務(wù)器端
var http = require("http");//引入http模塊
//開啟服務(wù)，監(jiān)聽8888端口
//端口號(hào)最好為6000以上
var server = http.createServer(function(req,res){
res.writeHeader(200,{
"content-type" : "text/html;charset="utf-8""
});
var data;
//ev.origin 判斷發(fā)送消息的域
res.write("sasa");//顯示給客戶端
res.end();
}).listen(8888);
console.log("服務(wù)器開啟成功");
關(guān)于parent
當(dāng)頁面沒有被其他頁面包括 這個(gè)頁面的額parent就是window
當(dāng)頁面是