資訊專欄INFORMATION COLUMN
摘要：最典型的場景就是聊天室。主要特點就是服務(wù)器可以主動向客戶端推送信息，客戶端也可以主動向服務(wù)器發(fā)送信息，是真正的雙向平等對話，屬于服務(wù)器推送技術(shù)的一種。
語義化標(biāo)簽 input的新屬性值 表單的驗證 json的新方法 自定義屬性 拖放 canvas 地理位置的獲取 離線存儲 本地存儲 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ū)域的 劃分出獨立的區(qū)塊
article 結(jié)構(gòu)完整并且內(nèi)容相對獨立的一部分
aside 和主題相關(guān)的附屬信息
相對獨立的語義化的新標(biāo)簽
figure 媒體元素組合（圖片+文字） img+figcaption
time 時間標(biāo)簽 標(biāo)簽有一個datatime屬性
dataList 列表標(biāo)簽 input中可能會輸入的值
details 標(biāo)簽 配合summary
//加上open屬性 p的內(nèi)容就會顯示sasa
sassasas
實現(xiàn)了點擊summary的時候會顯示p中的內(nèi)容
dialog 標(biāo)簽
必須加上open屬性 才能顯示整個對話框
address 標(biāo)簽 頁面上的地址 傾斜
mark 標(biāo)簽 標(biāo)記一下 文字的背景變黃
功能性標(biāo)簽
progress 進度條
瀏覽器h5的兼容 頁面開始的地方添加腳本
等一系列新的結(jié)構(gòu)性的標(biāo)簽、兼容低版本瀏覽器的插件 html5.js
html5新增表單元素 input的屬性值email 輸入的必須為email
tel 輸入的必須為一個電話號
url 輸入的必須為一個網(wǎng)址
search 搜索框 輸入的過程中 輸入框尾部總有一個X 一點擊X輸入的內(nèi)容就沒有了
range 數(shù)值選擇器 step=2 min=0 max=10 value=當(dāng)前的值
number 輸入框的尾部 有向上和向下的箭頭 會改變數(shù)值
color 顏色輸入框
datetime 顯示完整的日期
time 小時和分鐘數(shù)的顯示
week 周顯示器 顯示當(dāng)前是這一年的第幾周
month 月顯示器 顯示當(dāng)前是這一年的第幾月
placeholder 輸入框內(nèi)會默認(rèn)顯示的值
autocomplete 輸入的過程中是否會自動提示 如果在公共電腦上不需要保存的話 autocomplete =“off”
autofocus 表單是否會自動獲取焦點 直接使用沒有值
input 的list屬性指定這個輸入框的datalist
required 在提交之前這個輸入 這個字段是必填的
pattern 屬性值為正則表達式 可以校驗這個輸入的字符串 在失去焦點的時候就會校驗
formaction 這個輸入框多帶帶的提交地址 傳統(tǒng)的都是整個表單會提交到一個地方 在opera可以
html
js
var oText=document.getElementById("text");
//只有再沒有填寫在這個字段 并且提交的時候才會觸發(fā)這個事件
oText.addEventListener("invalid",fn,false);
//用戶向輸入框中輸入文字的時候便會觸發(fā)該事件
oText.oninput=function () {
console.log(112)
//自定義驗證
if(this.value=="111"){
this.setCustomValidity("這是銘感詞")
}else{
this.setCustomValidity("這是銘感詞")
}
}
function fn() {
console.log(this.validity) //整個驗證信息都是保存在這個對象當(dāng)中的
console.log(this.validity.valid) //布爾值 驗證通過為true
console.log(this.validity.valueMissing) //布爾值 輸入的字符串是否為空
console.log(this.validity.typeMismatch) //布爾值 輸入的字符串是否和要求的類型不一致返回true
console.log(this.validity.patternMismatch) //布爾值 輸入的字符串是否和pattern的屬性值的正則是否不匹配 返回為true
console.log(this.validity.tooLong) //布爾值 輸入的字符串的長度大于maxlength的屬性值
}
在設(shè)計 保存至草稿箱按鈕的時候注意
1、關(guān)閉表單驗證 為這個input 添加formnovalidate 關(guān)閉驗證
2、使用formaction 提交到本地
querySelector（id，class[只能選擇到一組中的第一個元素],標(biāo)簽） 返回的都是一個元素
html
sasa
js
window.onload=function () {
var oDIv=document.querySelector("#test2")
oDIv.style.background="red"
}
querySelectorAll(id，class[選擇到一組元素],標(biāo)簽)
html5增加了對元素類的操作
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)化為對象 json必須是一個嚴(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(對象) 返回的是嚴(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
對象之間的賦值會出現(xiàn)引用
var a={name:"sasa"};
var b=a;
b.name="sa11";
console.log(a.name) //sa11
但是使用for循環(huán)對對象的賦值只能是淺拷貝。
實現(xià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)化為對象 實現(xiàn)了深拷貝
html5中的自定義屬性html
sasa
js
var maiowei=document.querySelector("#miaowei")
console.log(maiowei.dataset.maiaov) //妙味
console.log(maiowei.dataset.maiaovAll) //妙味課堂 使用駝峰式來訪問
在使用自定義的屬性的時候注意：
1、html中屬性值都是 data-name-value=""
2、js中訪問這個值得時候都是 存放在這個元素上的dataset上邊 比如說dataset.nameValue
defer="defer" 延遲加載js這個屬性
會先輸出333載執(zhí)行a.js文件
html5為js異步加載的屬性 async異步加載js 加載完就會某個事件
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ā)生變化的時候 div中的值也會發(fā)生改變
使用history.push(三個參數(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 開始拖拽的時候（而不是鼠標(biāo)按下）會響應(yīng)
ondrag 拖拽前和拖拽結(jié)束的中間會連續(xù)觸發(fā)
ondragend 拖拽結(jié)束的時候觸發(fā)的事件（也就是釋放鼠標(biāo)的時候）
目標(biāo)元素（拖拽到的地方）事件
ondragenter 拖拽的元素進入目標(biāo)區(qū)域的時候會響應(yīng)事件
ondragover 進入目標(biāo)區(qū)域之后離開目標(biāo)區(qū)域之前會一直響應(yīng)
ondragleave 拖拽的元素離開目標(biāo)區(qū)域的時候會響應(yīng)事件
ondrop 在目標(biāo)元素上釋放被拖拽元素的時候會觸發(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時
依次觸發(fā)的事件為：ondragstart ondrag ondragenter ondragover ondragleave ondragend
剛被拖拽的元素會觸發(fā)drop時
依次觸發(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() //起點和終點進行連接
oGC.stroke(); //畫線的功能
6、繪制其他的路徑
oGC.stroke() 畫線
oGC.fill() 填充
oGC.rect() 填充 默認(rèn)是黑色
oGC.clearRect(L T W H) 清除畫布的大小
oGC.save() 保存當(dāng)前的畫筆 在設(shè)置畫筆前進行
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) //控制點坐標(biāo) 結(jié)束點坐標(biāo)
oGC.stroke()
畫貝塞爾曲線 方法二
oGC.moveTo(100,200)
oGC.bezierCurveTo(100,100,200,200,200,100) //第一組控制點 第二組控制點 結(jié)束點
oGC.stroke()
canvas的變換
translate 畫布原點的位移 (x,y)
rotate 旋轉(zhuǎn)的角度(deg) 矩形以左上角的點 旋轉(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");//得到的是一個填充的樣式
oGC.fillStyle=bg;
oGC.fillRect(0,0,300,300)
}
}
canvas漸變
線性漸變
var oc=document.getElementById("c1");
//得到繪制環(huán)境 畫筆
var oGC=oc.getContext("2d");
//漸變的起始點的坐標(biāo) 漸變的終點的坐標(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è)置影音必須的一步 因為默認(rèn)的陰影顏色是黑色透明
oGC.fillText(str,0,0)
canvas中的像素操作
得到像素點 畫筆.getImageData(x,y,width,heigth)
為畫布設(shè)置像素點 畫筆.putImageData(像素對象,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為一個對象 包括
console.log(oImg.width) //寬的像素
console.log(oImg.height) //高的像素
console.log(oImg.data[0]) //40000 整體像素的數(shù)組集合
//一個像素點使用四個值表示 rgba
for(var i=0;i
創(chuàng)建新的像素 oGC.createImageData(x,y,w,h)
通過 坐標(biāo)得到像素點 通過坐標(biāo)設(shè)置像素點
//設(shè)置像素點
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)的是后畫的會覆蓋之前畫的
源 即將繪制的圖形 目標(biāo)已經(jīng)繪制過的圖形
context.gloalCompositionOperation="destination-over" //默認(rèn)的值
將canvas導(dǎo)出為圖片
var ii=oc.toDataURL(); //畫布的方法
img.src=ii;
canvas的事件操作
isPointInPath(x,y) 判斷點擊的點是否在路徑內(nèi) 但是這個方法只會針對最后一個畫的圖形
context.isPointInPath(x,y)
為每一個繪制在每一個畫布上的圓添加點擊事件
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/ 一個專注于操作canvas的庫
html5的跨文檔通信
同域的不同窗口(iframe)之間的通信、window.open（）新打開窗口之間的通信
1、 iframe 這個頁面就會有兩個窗口
找到子窗口
//指向了子窗口的window
var smallwindow=iframe1.contentWindow
smallwindow.document.body.style.background="red"
2、通過window.open（）方法打開的窗口
跨域下會報錯
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"; //這就會因為跨域下的限制報錯
}
跨域的方法
1、通過postMeassage window對象的方法
用于這個對象下的方法 給另外的一個窗口發(fā)送信息
postMeassage(發(fā)送的數(shù)據(jù),接收數(shù)據(jù)的協(xié)議+域名) 發(fā)送端
window.onMessage（function(){}） 接收端
當(dāng)接收窗口接受到postmessag方法 發(fā)送給過來的消息 就會觸發(fā)這個事件
使用postMessage發(fā)送的消息
服務(wù)器端
var http = require("http");//引入http模塊
//開啟服務(wù)，監(jiān)聽8888端口
//端口號最好為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)頁面沒有被其他頁面包括 這個頁面的額parent就是window
當(dāng)頁面是