成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

JavaScript權(quán)威指南筆記(下)- 客戶端javascript

BlackHole1 / 2203人閱讀

摘要:用來獲取上下文對象,傳入?yún)?shù)會獲得對象,傳入可以獲得圖形的上下文。表示二進制大對象字節(jié)大小類型讀取利用對象文件系統(tǒng)有效期大小為該文件系統(tǒng)對象客戶端數(shù)據(jù)庫棄用對象數(shù)據(jù)庫套接字或者協(xié)議

web瀏覽器中的javascript 在html中嵌入javascript

在script標簽里面如果有<、&,會被當成xml標記,需要使用如下寫法:

window對象 瀏覽器定位與導(dǎo)航 載入新的文檔

location.assign()

location.replace()

location.reload() 刷新

瀏覽歷史

history.back()

history.forward()

history.go()

瀏覽器和屏幕信息
navigator:{
   appName:,
   appVersion:,
   userAgent:,
   platform:,
   *onLine:,
   *geolocation:,
   *javaEnabled:,
   *cookieEnable:,
}
// 星號為未標準化
錯誤處理

window.onerror

打開和關(guān)閉窗口

window.open()

window.open().opener

window.close()

窗體之間的關(guān)系

外部獲取iframe內(nèi)容,iframe.contentWindow

iframe內(nèi)部獲取iframe,window.frameElement

window.frames引用自身包含的窗口或窗體的子窗體

腳本化文檔 選取文檔元素

getElementById

getElementByName

getElementByTagName

getElementByClassName

querySelectorAll 接受css選擇器

querySelector 返回第一個匹配的元素

文檔結(jié)構(gòu)和遍歷 作為節(jié)點樹的文檔

parentNode

childNodes

firstChild,lastChild

nextSibling,previoursSibling

nodeType

nodeValue

nodeName

作為元素樹的文檔

firstElementChild,lastElementChild

nextElementChild,previoursElementChild

childElementCount

獲取和設(shè)置非標準HTML屬性

getAttribute()

setAttribute()

hasAttribute()

removeAttribute()

操作來自其他命名空間中屬性的xml文檔,可以使用如下方法,第一參數(shù)為標識命名空間的uri,第二個為屬性的本地名字

getAttributeNS()

setAttributeNS()

hasAttributeNS()

removeAttributeNS()

作為html的元素內(nèi)容

insertAdjacentHTML() 在指定元素相鄰位置插入標記,第一個參數(shù)為位置(beforebegin、afterbegin、beforeend,afterend),第二個參數(shù)為插入的標記

作為純文本的元素內(nèi)容

node.textContent 讀取或者獲取文本內(nèi)容,ie使用innerText

創(chuàng)建、插入和刪除節(jié)點 創(chuàng)建節(jié)點

createElement 創(chuàng)建Element節(jié)點

createTextNode 創(chuàng)建文本節(jié)點

cloneNode 復(fù)制節(jié)點

importNode

插入節(jié)點

Node.appendChild

Node.insertBefore

刪除和替換節(jié)點

removeChild

replaceChild

文檔和元素的幾何形狀和滾動

????????

html表單 表單和元素的屬性

type

form

name

value

方法:

reset()

submit()

表單和元素的事件處理程序

不會被reset()和submit()觸發(fā),僅被按鈕觸發(fā)

onsubmit

onreset

可以通過在事件中返回false來阻止默認事件執(zhí)行

其他文檔屬性

cookie

domain

lastModified

location

referrer

title

URL

document.writr()方法

查詢選取的文本

window.getSelection()

可編輯內(nèi)容

元素屬性contenteditable

Document的designMode屬性為on,整個文檔可以編輯

執(zhí)行元素編輯命令,execCommand()

腳本化CSS CSS概覽 層疊

CSS中的C代表層疊,有低到高順序為:

web瀏覽器的默認樣式

文檔的樣式表

每個html元素的style屬性

事件處理

異步事件驅(qū)動編程模型

18.腳本化HTTP

Ajax:Asynchronous JavaScript and XML

實現(xiàn)Ajax和Comet方式:

img標簽的src

iframe的src(跨域)

scritp(即JSONP,不跨域)

XMLHttpRequest對象

使用XMLHttpRequest
var request= new XMLHttpRequest();

http請求組成:

http請求方法或動作

正在請求的url

一個可選的請求頭集合

一個可選的請求主體

服務(wù)器返回的http響應(yīng)組成:

一個由數(shù)字和文字組成的狀態(tài)碼,標識請求成功或者失敗

一個響應(yīng)頭集合

響應(yīng)主體

指定請求

調(diào)用open方法

第一個參數(shù)指定HTTP方法或者動作,第二個參數(shù)指定請求的URL

var request= new XMLHttpRequest();
var request.open("GET","data.csv");

添加頭部

var request.setRequestHeader("Conten-Type","text/plain") //設(shè)置頭部

以下頭部不能自己設(shè)置:
QQ瀏覽器截圖20181109130830

發(fā)送請求

request.send(null);
// send參數(shù)為請求主體
取得響應(yīng)

status和statusText以數(shù)字和文本形式返回HTTP狀態(tài)碼

getResponseHeader()和getAllResponseHeaders()查詢響應(yīng)頭

responseText中獲取文本形式的響應(yīng)主體,responseXML中獲取Document形式的響應(yīng)主體

readyState屬性標識響應(yīng)狀態(tài):

QQ瀏覽器截圖20181109132343

readystatechange綁定事件處理程序,readyState改變均會觸發(fā)此事件,也可以使用addEventListener

QQ瀏覽器截圖20181109132556

同步響應(yīng)

open的第三個參數(shù)傳false,將使用同步響應(yīng),此時不需要事件處理程序

響應(yīng)編碼

request.overrideMimeType("text/plain;charset=utf-8")

HTTP進度事件

調(diào)用send時觸發(fā)loadstart()

加載服務(wù)器響應(yīng)時,觸發(fā)progress

超時觸發(fā)timeout()

中止觸發(fā)abort()

錯誤觸發(fā)error()

progress常用屬性:

loaded:目前傳輸?shù)淖止?jié)數(shù)

total:整體字節(jié)長度

中止請求和超時

abort()

跨域HTTP請求

CORS:跨域資源共享

借助 繪制線段和填充多邊形
c.beginPath() //開始一條新路徑
c.moveTo(100,100) //從(100,100)開始定義一條新的子路徑
c.lineTo(200,200) //從(100,100)到(200,200)繪制一條線段
c.fill() // 填充區(qū)域
c.stroke() // 勾勒線段
c.closePath()  // 關(guān)閉路徑,即將終點和起點連接起來
非零繞數(shù)原則

QQ瀏覽器截圖20181117190737

圖形屬性

QQ瀏覽器截圖20181117191058
QQ瀏覽器截圖20181117191109

save()將當前圖形狀態(tài)壓入用于保存狀態(tài)的棧上

restore() 從棧中彈出并恢復(fù)最近一次保存的狀態(tài)

畫布的尺寸和坐標

尺寸:canvas元素的width和height屬性和畫布對象的寬度高度決定畫布的尺寸

坐標:畫布左上角為原點

坐標系轉(zhuǎn)換

當前變換矩陣:定義畫布的當前坐標系

繪制和填充曲線

QQ瀏覽器截圖20181117195232

矩形

fillRect()

stokeRect()

clearRect()

rect()

顏色、透明度、漸變以及圖案

strokeStyle、fillStyle

globalAlpha

利用createPattern()方法填充圖案

var image = document.getElementById("myimage")
c.fillStyle=c.createPattern(image,"repeat")
// 第一個參數(shù)指定填充的圖案,可以是img元素(包括通過Image構(gòu)造函數(shù)創(chuàng)建)、canvas元素、video元素;第二個參數(shù)定義平鋪方式

利用CanvasGradient對象創(chuàng)建漸變

QQ瀏覽器截圖20181117201131

線段繪制相關(guān)的屬性

lineWidth:默認為1,任意正數(shù),小于1的小數(shù)時繪制半透明

lineCap:封頂

lineJoin

QQ瀏覽器截圖20181117201749

文本

fillText()/strokeText():

第一個參數(shù)為文本內(nèi)容

第二個和第三個參數(shù)分別為繪制X、Y坐標

textAlign/textBaseline

QQ瀏覽器截圖20181117201749

第四個參數(shù)指定顯示寬度,如果文本溢出則會縮放畫布或者采用更窄更小的字體

在繪制前可以通過measureText()度量文本寬度

裁剪

clip()

陰影

shadowColor:顏色

shadowOffsetX、shadowOffsetY偏移量

shadowBlur模糊度

圖片

drawImage():

第一個參數(shù)為圖片源,可以是img元素(包括通過Image構(gòu)造函數(shù)創(chuàng)建)、canvas元素、video元素

第二個和第三個參數(shù)分別為繪制X、Y坐標

如果傳遞5個參數(shù),剩余兩個指定寬高

如果傳遞9個參數(shù),2~5參數(shù)指定源矩形區(qū)域,6~9指定目標矩形區(qū)域

toDataURL(),畫布元素自身的方法,提取成一張圖片,同源限制

第一個參數(shù)指定MIME類型,默認png

合成

QQ瀏覽器截圖20181117204539
QQ瀏覽器截圖20181117204604

像素操作

QQ瀏覽器截圖20181117204940

命中檢測

isPointInPath() 指定點是否在路徑上

getImageData() 檢測指定點是否已繪制

HTML5 API 地理位置

navigator.geolocation

navigator.geolocation.getCurrentPosition() // 獲取當前位置,異步
navigator.geolocation.wathcPosition() // 獲取并監(jiān)聽當前位置,改變觸發(fā)回調(diào),異步
navigator.geolocation.clearWatch() //停止監(jiān)聽 
歷史記錄管理

location.hash、hashchange

history.pushState()、popstate、history.replaceState()

跨域消息傳遞

postMessage(data數(shù)據(jù),url目標窗口源),觸發(fā)目標窗口window.onmessage,事件對象屬性:

data:內(nèi)容

source:消息來源window

origin:消息來源url

Web Worker Worker對象
let worke= new Worker("./worker.js") // 創(chuàng)建worker實例
// 如果地址是絕對地址,那么受同源策略限制
worke.postMessage(data) // 將數(shù)據(jù)傳遞(結(jié)構(gòu)性復(fù)制)給worker

// 在worker對象中接受消息
worke.onmessage=function(e){
    let data=e.data
}
// 捕捉錯誤
worke.onerror=function(e){
    console.log(e.filename)
    console.log(e.lineno)
}
// 也可以使用addEventListener和removeEventListener代替以上方法

worke.terminate() // 使用完關(guān)閉進程
worker作用域

創(chuàng)建的worker在一個全新的運行環(huán)境中,即WorkerGlobalScope全局對象,該對象有如下屬性和方法:

onmessage=fn(e) 接受外部傳來的數(shù)據(jù)

postMessage(data) 發(fā)送消息出去

close() 關(guān)閉當前worker

importScript(url1,url2...) 加載庫代碼 同步

self 自身引用

計時器相關(guān)

location

navigator

常用的事件目標方法,addEventLisitener、removeEventListener

onerror

類型化數(shù)組和ArrayBuffer

類數(shù)組對象,和常規(guī)數(shù)組區(qū)別:

類型化數(shù)組元素均為數(shù)字,在創(chuàng)建時就決定了數(shù)組中數(shù)字的類型和大?。▎挝唬何唬?/p>

類型化數(shù)組有固定長度

在創(chuàng)建類型化數(shù)組時,數(shù)組中元素總是默認為0

一共有8種:
微信截圖_20181119223833
方法:

set() 將一個常規(guī)或者類型化數(shù)組復(fù)制到另外一個類型化數(shù)組中

let bytes=new Uint8Array(1024)
let pattern=new Uint8Array([0,1,2,3])
bytes.set(pattern)
bytes.set(pattern,4) // 4為偏移量
bytes.set([0,1,2,3],8)

subarray(start,end) 返回部分內(nèi)容

DataView定義了8個set和get方法

Blob

是對大數(shù)據(jù)塊的不透明引用或者句柄。表示二進制大對象

let blob= new BlobBuilder()
blob.append("data")
blob.size //字節(jié)大小
blob.type // MIME類型
blob.slice(0,1024,"text/plain")
讀取blob

利用FileReader對象

文件系統(tǒng)API
let fs = requestFileSystemSync(PERSISTENT,1024*1024)
requestFileSystemSync(TEMPORARY,// 有效期
    50*1024*1024,// 大小:50MB
    function(fs){//fs為該文件系統(tǒng)對象 
    
    },function(err){

    
})
客戶端數(shù)據(jù)庫

webSQL 棄用

indexedDB 對象數(shù)據(jù)庫

let indexedDB=window.indexedDB
let request=indexedDB.open("dbName")
request.onerror=function(err){}
request.onsuccess=function(){
    let db=request.result
}
web套接字
let socket=new WebSocket(url) // ws://或者wss://協(xié)議
socket.onopen=function(e){}
socket.onclose=function(e){}
socket.onerror=function(e){}
socket.onmessage=function(e){}
socket.send("hello")
socket.close()

文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址:http://systransis.cn/yun/100894.html

相關(guān)文章

  • JavaScript 權(quán)威指南》讀書筆記 1 - 簡介

    摘要:原文第一章主要介紹的大概情況基本語法。通過和來引用對象屬性或數(shù)組元素的值就構(gòu)成一個表達式。 原文:https://keelii.github.io/2016/06/16/javascript-definitive-guide-note-0/ 第一章 主要介紹 JavaScript 的大概情況、基本語法。之前沒有 JavaScript 基礎(chǔ)的看不懂也沒關(guān)系,后續(xù)章節(jié)會有進一步的詳細說明...

    sydMobile 評論0 收藏0
  • JavaScript 權(quán)威指南筆記 - 可選的分號

    摘要:分號只有缺少分號無法正確解析代碼的時候會自動添加分號但例外,如果這三個關(guān)鍵字緊接著換行,會自動填補分號和例外,會自動作為下一行代碼的前綴操作符 分號 只有缺少分號無法正確解析代碼的時候會自動添加分號 var a a = 3 => var a; a = 3; var y = x + f (a + b).toString() => var y = x + f(a + b).toStrin...

    Lyux 評論0 收藏0
  • MongoDB權(quán)威指南讀書筆記(一)

    摘要:如果沒有找到找到符合條件的文檔,就會以這個條件和更新文檔為基礎(chǔ)新建一個新的文檔。使用它可以快速方便的對文檔進行更新。更新多個文檔默認情況下,文檔的更新只針對第一個匹配到的文檔,多個條件符合時,其它文檔不會改變。 what is MongoDB ? 面向文檔的數(shù)據(jù)庫 不再有行的概念,不再有預(yù)定義模式 易于拓展 豐富的功能 索引 聚合 特殊的集合類型 文件存儲 高性能 可以一個示...

    Barrior 評論0 收藏0
  • MongoDB權(quán)威指南讀書筆記(一)

    摘要:如果沒有找到找到符合條件的文檔,就會以這個條件和更新文檔為基礎(chǔ)新建一個新的文檔。使用它可以快速方便的對文檔進行更新。更新多個文檔默認情況下,文檔的更新只針對第一個匹配到的文檔,多個條件符合時,其它文檔不會改變。 what is MongoDB ? 面向文檔的數(shù)據(jù)庫 不再有行的概念,不再有預(yù)定義模式 易于拓展 豐富的功能 索引 聚合 特殊的集合類型 文件存儲 高性能 可以一個示...

    sixleaves 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<