摘要:用来获取上下文对象,传入参数会获得对象,传入可以获得图形的上下文。表示二进制大对象字节大小类型读取利用对象文件系统有效期大小为该文件系统对象客户端数据库弃用对象数据库套接字或者协议
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.脚本化HTTPAjax:Asynchronous JavaScript and XML
实现Ajax和Comet方式:
img标签的src
iframe的src(跨域)
scritp(即JSONP,不跨域)
XMLHttpRequest对象
使用XMLHttpRequestvar 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") //设置头部
以下头部不能自己设置:
发送请求
request.send(null); // send参数为请求主体取得响应
status和statusText以数字和文本形式返回HTTP状态码
getResponseHeader()和getAllResponseHeaders()查询响应头
responseText中获取文本形式的响应主体,responseXML中获取Document形式的响应主体
readyState属性标识响应状态:
readystatechange绑定事件处理程序,readyState改变均会触发此事件,也可以使用addEventListener
open的第三个参数传false,将使用同步响应,此时不需要事件处理程序
响应编码request.overrideMimeType("text/plain;charset=utf-8")
HTTP进度事件调用send时触发loadstart()
加载服务器响应时,触发progress
超时触发timeout()
中止触发abort()
错误触发error()
progress常用属性:
loaded:目前传输的字节数
total:整体字节长度
中止请求和超时abort()
跨域HTTP请求CORS:跨域资源共享
借助发送HTTP请求:JSONP// 指定回调函数名称 url?jsonp=xxx url?callback=xxx客户端存储
形式:
web存储:localStrorage、sessionStrorage
cookie:针对服务端脚本设计,每一次HTTP请求都会传输到服务端
离线Web应用
web数据库
文件系统API
localStrorage和sessionStrorage区别:
localStrorage永久性,作用域限定在文档源级别
sessionStrorage有效期仅在在本次会话中,作用域限定在文档源级别,且仅限在本标签页
设置localStrorage.key=value
localStrorage.setItem(key,value)
获取localStrorage.key
localStrorage.getItem(key)
删除delete localStrorage.key (IE8不支持)
localStrorage.removeItem(key)
localStrorage.clear()
监听改变使用addEventListener
事件对象:
key clear()时为null
newValue removeItem()时为null
oldValue 新增时为null
storageArea localStorage或sessionStrorage对象
url 触发所在文档的url
cookienavigator.cookieEnabled检测cookie是否可用(启用)
有效期为本次会话期间,默认有效期为直到浏览器关闭,如果要延长可以设置max-age,单位秒
作用域默认对本页面、本页面同目录和子目录可见,不过可以设置其domain和path
设置cookiedocument.cookie="key=encodeURIComponent(value);max-age=seconds"
获取cookiedocument.cookie,可以使用decodeURIComponent解析
限制浏览器最大300
每个web服务器20
保存数据最大4k
应用程序存储和离线web应用??? 21.多媒体和图形编程 脚本化图片new Image() // 可以使用此方式提前强制缓存图片脚本化音频和视频
new Audio("src/demo.wav") // 音频构造函数,和选取标签得到的对象一样类型选择和加载
使用canPlayType(MIME类型)测试一个媒体元素是否能播放指定类型的媒体文件
let a=new Audio(); a.canPlayType("audio/wav")
使用lode()方法加载source标签指定的媒体源
控制媒体播放play()
pause()
设置currentTime定点播放
volumn表示音量,介于0~1
muted静音模式
playbackRate:播放速度,默认1.0,负值表示回放
controls播放控件
loop循环播放
preload预加载,none不预加载,metadata预加载元数据,auto
autoplay
查询媒体状态paused
seeking 进度跳转中
ended 播放完,loop为true时永不为true
duration媒体时长,载入前为NAN
initialTime开始时间
played已播放的时间段
buffered已缓冲的时间段
seekable需要跳到的时间段
readyState
networkState
error
媒体相关事件大部分的画布绘制API都不是在canvas元素上定义,而是定义在一个绘制上下文对象上。
getContext() 用来获取上下文对象,传入"2d"参数会获得CanvasRenderingContext2D对象,传入"webgl"可以获得3D图形的上下文。
绘制线段和填充多边形
c.beginPath() //开始一条新路径 c.moveTo(100,100) //从(100,100)开始定义一条新的子路径 c.lineTo(200,200) //从(100,100)到(200,200)绘制一条线段 c.fill() // 填充区域 c.stroke() // 勾勒线段 c.closePath() // 关闭路径,即将终点和起点连接起来
save()将当前图形状态压入用于保存状态的栈上
restore() 从栈中弹出并恢复最近一次保存的状态
画布的尺寸和坐标尺寸:canvas元素的width和height属性和画布对象的宽度高度决定画布的尺寸
坐标:画布左上角为原点
坐标系转换当前变换矩阵:定义画布的当前坐标系
绘制和填充曲线 矩形fillRect()
stokeRect()
clearRect()
rect()
颜色、透明度、渐变以及图案strokeStyle、fillStyle
globalAlpha
利用createPattern()方法填充图案
var image = document.getElementById("myimage") c.fillStyle=c.createPattern(image,"repeat") // 第一个参数指定填充的图案,可以是img元素(包括通过Image构造函数创建)、canvas元素、video元素;第二个参数定义平铺方式
利用CanvasGradient对象创建渐变
线段绘制相关的属性lineWidth:默认为1,任意正数,小于1的小数时绘制半透明
lineCap:封顶
lineJoin
文本fillText()/strokeText():
第一个参数为文本内容
第二个和第三个参数分别为绘制X、Y坐标
textAlign/textBaseline
第四个参数指定显示宽度,如果文本溢出则会缩放画布或者采用更窄更小的字体
在绘制前可以通过measureText()度量文本宽度
裁剪clip()
阴影shadowColor:颜色
shadowOffsetX、shadowOffsetY偏移量
shadowBlur模糊度
图片drawImage():
第一个参数为图片源,可以是img元素(包括通过Image构造函数创建)、canvas元素、video元素
第二个和第三个参数分别为绘制X、Y坐标
如果传递5个参数,剩余两个指定宽高
如果传递9个参数,2~5参数指定源矩形区域,6~9指定目标矩形区域
toDataURL(),画布元素自身的方法,提取成一张图片,同源限制
第一个参数指定MIME类型,默认png
合成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种:
方法:
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对象
文件系统APIlet 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
摘要:原文第一章主要介绍的大概情况基本语法。通过和来引用对象属性或数组元素的值就构成一个表达式。 原文:https://keelii.github.io/2016/06/16/javascript-definitive-guide-note-0/ 第一章 主要介绍 JavaScript 的大概情况、基本语法。之前没有 JavaScript 基础的看不懂也没关系,后续章节会有进一步的详细说明...
摘要:分号只有缺少分号无法正确解析代码的时候会自动添加分号但例外,如果这三个关键字紧接着换行,会自动填补分号和例外,会自动作为下一行代码的前缀操作符 分号 只有缺少分号无法正确解析代码的时候会自动添加分号 var a a = 3 => var a; a = 3; var y = x + f (a + b).toString() => var y = x + f(a + b).toStrin...
摘要:如果没有找到找到符合条件的文档,就会以这个条件和更新文档为基础新建一个新的文档。使用它可以快速方便的对文档进行更新。更新多个文档默认情况下,文档的更新只针对第一个匹配到的文档,多个条件符合时,其它文档不会改变。 what is MongoDB ? 面向文档的数据库 不再有行的概念,不再有预定义模式 易于拓展 丰富的功能 索引 聚合 特殊的集合类型 文件存储 高性能 可以一个示...
摘要:如果没有找到找到符合条件的文档,就会以这个条件和更新文档为基础新建一个新的文档。使用它可以快速方便的对文档进行更新。更新多个文档默认情况下,文档的更新只针对第一个匹配到的文档,多个条件符合时,其它文档不会改变。 what is MongoDB ? 面向文档的数据库 不再有行的概念,不再有预定义模式 易于拓展 丰富的功能 索引 聚合 特殊的集合类型 文件存储 高性能 可以一个示...
阅读 2471·2021-09-24 10:29
阅读 3777·2021-09-22 15:46
阅读 2550·2021-09-04 16:41
阅读 2960·2019-08-30 15:53
阅读 1238·2019-08-30 14:24
阅读 3023·2019-08-30 13:19
阅读 2135·2019-08-29 14:17
阅读 3486·2019-08-29 12:55