资讯专栏INFORMATION COLUMN

JavaScript权威指南笔记(下)- 客户端javascript

BlackHole1 / 2189人阅读

摘要:用来获取上下文对象,传入参数会获得对象,传入可以获得图形的上下文。表示二进制大对象字节大小类型读取利用对象文件系统有效期大小为该文件系统对象客户端数据库弃用对象数据库套接字或者协议

web浏览器中的javascript 在html中嵌入javascript

在script标签里面如果有<、&,会被当成xml标记,需要使用如下写法:

window对象 浏览器定位与导航 载入新的文档

location.assign()

location.replace()

location.reload() 刷新

浏览历史

history.back()

history.forward()

history.go()

浏览器和屏幕信息
navigator:{
   appName:,
   appVersion:,
   userAgent:,
   platform:,
   *onLine:,
   *geolocation:,
   *javaEnabled:,
   *cookieEnable:,
}
// 星号为未标准化
错误处理

window.onerror

打开和关闭窗口

window.open()

window.open().opener

window.close()

窗体之间的关系

外部获取iframe内容,iframe.contentWindow

iframe内部获取iframe,window.frameElement

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

脚本化文档 选取文档元素

getElementById

getElementByName

getElementByTagName

getElementByClassName

querySelectorAll 接受css选择器

querySelector 返回第一个匹配的元素

文档结构和遍历 作为节点树的文档

parentNode

childNodes

firstChild,lastChild

nextSibling,previoursSibling

nodeType

nodeValue

nodeName

作为元素树的文档

firstElementChild,lastElementChild

nextElementChild,previoursElementChild

childElementCount

获取和设置非标准HTML属性

getAttribute()

setAttribute()

hasAttribute()

removeAttribute()

操作来自其他命名空间中属性的xml文档,可以使用如下方法,第一参数为标识命名空间的uri,第二个为属性的本地名字

getAttributeNS()

setAttributeNS()

hasAttributeNS()

removeAttributeNS()

作为html的元素内容

insertAdjacentHTML() 在指定元素相邻位置插入标记,第一个参数为位置(beforebegin、afterbegin、beforeend,afterend),第二个参数为插入的标记

作为纯文本的元素内容

node.textContent 读取或者获取文本内容,ie使用innerText

创建、插入和删除节点 创建节点

createElement 创建Element节点

createTextNode 创建文本节点

cloneNode 复制节点

importNode

插入节点

Node.appendChild

Node.insertBefore

删除和替换节点

removeChild

replaceChild

文档和元素的几何形状和滚动

????????

html表单 表单和元素的属性

type

form

name

value

方法:

reset()

submit()

表单和元素的事件处理程序

不会被reset()和submit()触发,仅被按钮触发

onsubmit

onreset

可以通过在事件中返回false来阻止默认事件执行

其他文档属性

cookie

domain

lastModified

location

referrer

title

URL

document.writr()方法

查询选取的文本

window.getSelection()

可编辑内容

元素属性contenteditable

Document的designMode属性为on,整个文档可以编辑

执行元素编辑命令,execCommand()

脚本化CSS CSS概览 层叠

CSS中的C代表层叠,有低到高顺序为:

web浏览器的默认样式

文档的样式表

每个html元素的style属性

事件处理

异步事件驱动编程模型

18.脚本化HTTP

Ajax:Asynchronous JavaScript and XML

实现Ajax和Comet方式:

img标签的src

iframe的src(跨域)

scritp(即JSONP,不跨域)

XMLHttpRequest对象

使用XMLHttpRequest
var request= new XMLHttpRequest();

http请求组成:

http请求方法或动作

正在请求的url

一个可选的请求头集合

一个可选的请求主体

服务器返回的http响应组成:

一个由数字和文字组成的状态码,标识请求成功或者失败

一个响应头集合

响应主体

指定请求

调用open方法

第一个参数指定HTTP方法或者动作,第二个参数指定请求的URL

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

添加头部

var request.setRequestHeader("Conten-Type","text/plain") //设置头部

以下头部不能自己设置:
QQ浏览器截图20181109130830

发送请求

request.send(null);
// send参数为请求主体
取得响应

status和statusText以数字和文本形式返回HTTP状态码

getResponseHeader()和getAllResponseHeaders()查询响应头

responseText中获取文本形式的响应主体,responseXML中获取Document形式的响应主体

readyState属性标识响应状态:

QQ浏览器截图20181109132343

readystatechange绑定事件处理程序,readyState改变均会触发此事件,也可以使用addEventListener

QQ浏览器截图20181109132556

同步响应

open的第三个参数传false,将使用同步响应,此时不需要事件处理程序

响应编码

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

HTTP进度事件

调用send时触发loadstart()

加载服务器响应时,触发progress

超时触发timeout()

中止触发abort()

错误触发error()

progress常用属性:

loaded:目前传输的字节数

total:整体字节长度

中止请求和超时

abort()

跨域HTTP请求

CORS:跨域资源共享

借助 绘制线段和填充多边形
c.beginPath() //开始一条新路径
c.moveTo(100,100) //从(100,100)开始定义一条新的子路径
c.lineTo(200,200) //从(100,100)到(200,200)绘制一条线段
c.fill() // 填充区域
c.stroke() // 勾勒线段
c.closePath()  // 关闭路径,即将终点和起点连接起来
非零绕数原则

QQ浏览器截图20181117190737

图形属性

QQ浏览器截图20181117191058
QQ浏览器截图20181117191109

save()将当前图形状态压入用于保存状态的栈上

restore() 从栈中弹出并恢复最近一次保存的状态

画布的尺寸和坐标

尺寸:canvas元素的width和height属性和画布对象的宽度高度决定画布的尺寸

坐标:画布左上角为原点

坐标系转换

当前变换矩阵:定义画布的当前坐标系

绘制和填充曲线

QQ浏览器截图20181117195232

矩形

fillRect()

stokeRect()

clearRect()

rect()

颜色、透明度、渐变以及图案

strokeStyle、fillStyle

globalAlpha

利用createPattern()方法填充图案

var image = document.getElementById("myimage")
c.fillStyle=c.createPattern(image,"repeat")
// 第一个参数指定填充的图案,可以是img元素(包括通过Image构造函数创建)、canvas元素、video元素;第二个参数定义平铺方式

利用CanvasGradient对象创建渐变

QQ浏览器截图20181117201131

线段绘制相关的属性

lineWidth:默认为1,任意正数,小于1的小数时绘制半透明

lineCap:封顶

lineJoin

QQ浏览器截图20181117201749

文本

fillText()/strokeText():

第一个参数为文本内容

第二个和第三个参数分别为绘制X、Y坐标

textAlign/textBaseline

QQ浏览器截图20181117201749

第四个参数指定显示宽度,如果文本溢出则会缩放画布或者采用更窄更小的字体

在绘制前可以通过measureText()度量文本宽度

裁剪

clip()

阴影

shadowColor:颜色

shadowOffsetX、shadowOffsetY偏移量

shadowBlur模糊度

图片

drawImage():

第一个参数为图片源,可以是img元素(包括通过Image构造函数创建)、canvas元素、video元素

第二个和第三个参数分别为绘制X、Y坐标

如果传递5个参数,剩余两个指定宽高

如果传递9个参数,2~5参数指定源矩形区域,6~9指定目标矩形区域

toDataURL(),画布元素自身的方法,提取成一张图片,同源限制

第一个参数指定MIME类型,默认png

合成

QQ浏览器截图20181117204539
QQ浏览器截图20181117204604

像素操作

QQ浏览器截图20181117204940

命中检测

isPointInPath() 指定点是否在路径上

getImageData() 检测指定点是否已绘制

HTML5 API 地理位置

navigator.geolocation

navigator.geolocation.getCurrentPosition() // 获取当前位置,异步
navigator.geolocation.wathcPosition() // 获取并监听当前位置,改变触发回调,异步
navigator.geolocation.clearWatch() //停止监听 
历史记录管理

location.hash、hashchange

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

跨域消息传递

postMessage(data数据,url目标窗口源),触发目标窗口window.onmessage,事件对象属性:

data:内容

source:消息来源window

origin:消息来源url

Web Worker Worker对象
let worke= new Worker("./worker.js") // 创建worker实例
// 如果地址是绝对地址,那么受同源策略限制
worke.postMessage(data) // 将数据传递(结构性复制)给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() // 使用完关闭进程
worker作用域

创建的worker在一个全新的运行环境中,即WorkerGlobalScope全局对象,该对象有如下属性和方法:

onmessage=fn(e) 接受外部传来的数据

postMessage(data) 发送消息出去

close() 关闭当前worker

importScript(url1,url2...) 加载库代码 同步

self 自身引用

计时器相关

location

navigator

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

onerror

类型化数组和ArrayBuffer

类数组对象,和常规数组区别:

类型化数组元素均为数字,在创建时就决定了数组中数字的类型和大小(单位:位)

类型化数组有固定长度

在创建类型化数组时,数组中元素总是默认为0

一共有8种:
微信截图_20181119223833
方法:

set() 将一个常规或者类型化数组复制到另外一个类型化数组中

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) 返回部分内容

DataView定义了8个set和get方法

Blob

是对大数据块的不透明引用或者句柄。表示二进制大对象

let blob= new BlobBuilder()
blob.append("data")
blob.size //字节大小
blob.type // MIME类型
blob.slice(0,1024,"text/plain")
读取blob

利用FileReader对象

文件系统API
let fs = requestFileSystemSync(PERSISTENT,1024*1024)
requestFileSystemSync(TEMPORARY,// 有效期
    50*1024*1024,// 大小:50MB
    function(fs){//fs为该文件系统对象 
    
    },function(err){

    
})
客户端数据库

webSQL 弃用

indexedDB 对象数据库

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://协议
socket.onopen=function(e){}
socket.onclose=function(e){}
socket.onerror=function(e){}
socket.onmessage=function(e){}
socket.send("hello")
socket.close()

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/100894.html

相关文章

  • JavaScript 权威指南》读书笔记 1 - 简介

    摘要:原文第一章主要介绍的大概情况基本语法。通过和来引用对象属性或数组元素的值就构成一个表达式。 原文:https://keelii.github.io/2016/06/16/javascript-definitive-guide-note-0/ 第一章 主要介绍 JavaScript 的大概情况、基本语法。之前没有 JavaScript 基础的看不懂也没关系,后续章节会有进一步的详细说明...

    sydMobile 评论0 收藏0
  • JavaScript 权威指南笔记 - 可选的分号

    摘要:分号只有缺少分号无法正确解析代码的时候会自动添加分号但例外,如果这三个关键字紧接着换行,会自动填补分号和例外,会自动作为下一行代码的前缀操作符 分号 只有缺少分号无法正确解析代码的时候会自动添加分号 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权威指南读书笔记(一)

    摘要:如果没有找到找到符合条件的文档,就会以这个条件和更新文档为基础新建一个新的文档。使用它可以快速方便的对文档进行更新。更新多个文档默认情况下,文档的更新只针对第一个匹配到的文档,多个条件符合时,其它文档不会改变。 what is MongoDB ? 面向文档的数据库 不再有行的概念,不再有预定义模式 易于拓展 丰富的功能 索引 聚合 特殊的集合类型 文件存储 高性能 可以一个示...

    Barrior 评论0 收藏0
  • MongoDB权威指南读书笔记(一)

    摘要:如果没有找到找到符合条件的文档,就会以这个条件和更新文档为基础新建一个新的文档。使用它可以快速方便的对文档进行更新。更新多个文档默认情况下,文档的更新只针对第一个匹配到的文档,多个条件符合时,其它文档不会改变。 what is MongoDB ? 面向文档的数据库 不再有行的概念,不再有预定义模式 易于拓展 丰富的功能 索引 聚合 特殊的集合类型 文件存储 高性能 可以一个示...

    sixleaves 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<