**ECMAScript + DOM + BOM **
(1)JavaScript是Ecma国际(信息和电信标准组织)定义的ECMA-262标准的实现。
(2) ECMA-262规定的语言组成(语言描述文档)
语法
类型
语句
关键字
保留字
操作符
对象
**(3)**Web浏览器只是ECMAScript的宿主环境之一,同时Web浏览器还提供了对ECMAscript的扩展。其他的宿主环境包括Node、Adobe Flash。
**(1)**文档对象模型(Document Object Model)是针对HTML的编程接口(API),DOM是将HTML文档映射为一个多层次节点的结构。
**(2)**DOM由W3C规划:
DOM1级标准:由DOM核心和DOM HTML组成,DOM核心是规定如何映射HTML文档结构,DOM HTML是规定了对HTML的方法和属性。
DOM2级标准:扩充了用户界面的UI事件、范围、遍历DOM的模块,通过对象接口增加了对CSS的支持。
DOM3级标准:统一了DOM文档的加载和保存方法,新增验证文档的方法,对DOM核心进行了扩展,并开始支持XML1.0标准。
**(3)**当W3C标准出现,Web浏览器厂商逐渐开始实现标准。
补充:以上是针对HTML定义的DOM标准,这里还有基于XML定义的DOM的标准,来对应不同的标记语言。例如:SVG(可伸缩矢量图标记语言)、MathML(数学标记语言)、SMIL(同步多媒体继承语言)。
浏览器对象模型(Browser Object Model)是由不同的浏览器厂商自行实现的,在HTML5没出现之前没有统一的标准,HTML5则是致力于把BOM功能写入正式规范。
BOM包括了一些浏览器窗口操作接口和一些扩展:
- 弹出新浏览器窗口
- 移动、缩放和关闭浏览器窗口
- 提供浏览器详细信息的Navigator对象
- 提供浏览器所加载的页面的详细信息的Location对象
- 提供显示器分辨率详细信息的Screen对象
- 提供对Cookie的支持
- 提供浏览器厂商的自定义对象,例如:XMLHttpRequest、IE的ActiveXObject对象
向HTML文档中使用JavaScript的主要方法是使用<script></script>标签,<script></script>标签具有几个属性:
1.async //表示立即下载脚本,但不能妨碍页面中的其他操作,作用域外部引入引入的脚本。
2.charset //引入的脚本的字符集。
3.defer //表示脚本可以延迟到HTML文档完全解析和显示之后在执行脚本,作用域外部引入的脚本
4.src //引入外部脚本的路径。(可用来解决跨域,Jsonp的应用)
5.type //表示脚本的mime类型
按照惯例,所有<script></script>标签都应放到<head></head>中,但是为了避免页面呈现的延迟,一般将<script></script>标签放置在<body></body>中.同样也可以用<script></script>标签的defer和async属性解决延迟问题.
5种基本简单数据类型
undefined
NULL
Boolean
number
string
1中复杂数据类型
- object
补充: 1.数据类型的检测,由于JavaScript类型是松散的,对一个值使用typeof操作符检测变量信息是,可能返回的值是undefined、Boolean、string、number、object和function。(null返回object) // 当判断数据类用typeof, // 当判断一个值是哪一种"引用"类型用instanceof。 // 当用==操作符判断undefined和null时,结果为真。 2.number类型,在number类型中,因为JavaScript中最高精度为17位小数,其浮点数算数计算精度远远不及整数。例如:0.1+0.2=0.30000000000000004。 还有在number类型中还有一个特殊数值---NaN。应该返回数值而未返回数值即为NaN,为了不抛出错误,NaN不等于任何值包括自身。 // 数值类型的全局转换函数(由宿主浏览器提供):parseInt(value,进制(默认十进制))、parseFloat() 3.重要的object类型,object类型所对应的每个实例都具有以下属性和方法(除宿主对象) 属性 constructor //构造函数,保存着创建对象实例的函数 方法 hasOwnProperty() //用于检测对象属性位于对象实例自身而不是对象原型中 isprototypeof() //用于检测传入的参数是否是此对象的原型 propertyIsEnumberable() //用于检测传入的属性是否可用for-in枚举 toLocalestring() //返回对象的字符串表示(本地化) toString() //返回对象的字符串表示 ValueOf() //返回对象的字符串、数值或布尔表示
//数组方法总结
【数组模仿堆栈结构】
push() //末尾增加一个值
pop() //末尾弹出一个值
shift() //弹出数值的第一个值
unshift() //在数组最前面插入一个值
【数组重排序】
reverse() //反转数组
sort([fn(a,b)]) //升降序排列数组,(会对数组每项进行调用tostring方法再比较)
【数组操作方法】
concat([array]) //将参数添加到数据末尾
slice([num,num]) //返回剪切的数组,参数分别代表起始和结束位置
splice([num,num,num]) //可实现删除、插入、替换操作
//参数为2个时为删除操作,参数1为起始位置,参数2为删除项数
//参数为3个时且参数2为0时为插入操作,参数3为插入的值
//参数为3个时且参数2不为0时,为替换操作
【数组位置方法】
indexOf([value,index]) //查找从index开始以后的value项,从前往后
lastIndexOf([value,index]) //查找从index开始以后的value项,从后往前
【迭代方法】
每个迭代方法接收两个参数,第一个参数为一个函数、第二个参数为第一个参数函数作用域的this。第一个函数参数有三个参数:当前项、当前项的索引、和操作数组本身
every(fn,this) //所有相为true,返回true
filter(fn,this) //返回操作项为true的项组成的数组
forEach(fn,this) //对每项运行fn函数,无返回
map(fn,this) //对于每一项运行fn函数,返回每项新值组成的函数
some(fn,this) //对于每一项运行fn函数,存在true则返回true
【缩小方法】
reduce(fn) //对每一项值运行fn之后的值返回值作为下一个项的基础往后运行
reduceRight(fn) //与reduce()相反
【转字符串方法】
join('') //参数为每一项的连接方式(链接符)
//date对象的方法
let date = New Date()
date.getTimne() //获取毫秒值
date.getFullYear() //获取4位的年份
date.getMonth() //获取月份,(从0开始位一月)
date.getDate() //获取当前月份的天数
date.getDay() //获取星期
date.getHours() //获取小时
date.getMinutes() //获取分钟
date.getSeconds() //获取秒数
//RegExp对象
let reg = /pattren/flags /*pattern:正则表达式,flags:表明正则表达式的行为*/
flags
1.g 表示全局(global)匹配,
2.i 表示不区分大小写
3.m 表示多行(multiline)匹配,
pattern(常用)
1.[] 或,匹配[]中的任意一个字符
2.\ 转义
3.^ 开头,或者当在[]中表示不包括
4.$ 结尾
5.* 匹配*之前的表达式零次或多次
6.+ 匹配*之前的表达式一次或多次
7.? 非贪婪模式匹配,尽可能少的匹配
8.. 匹配除换行符以外的所有字符
9.() 匹配()中的匹配,所得到的匹配形成一个集合,由$0、$2……表示
10.| 或
11.\b 匹配单词边界
12.\B 匹配非单词边界
13.\d 匹配数字字符,等价于[0-9]
14.\D 匹配非数字字符,等价于[^0-9]
15.\s 匹配任何空白字符,包括空格、制表符、换页符等,等价于[\f\n\r\t\v]
16.\S 匹配非空白字符,等价于[^\f\n\r\t\v]
17.\w 匹配字母、数字、下划线,等价于[a-zA-Z0-9_]
18.\W 匹配非字母、数字、下划线
正则实例属性
1.global //是否启用g修饰
2.ignoreCase //是否启用i修饰
3.source //返回原始字符串
4.lastIndex //返回执行下一次匹配的位置
5.multiline //是否启用m修饰
正则实例的方法
reg.exce(string) //返回包含匹配到的项的数组,其中有两个特殊项,索引为index的项表示匹配字符串的位置,索引为input表示源字符串
reg.test(string) //返回Boolean。
/*RegExp的实例当调用exec()和test()时,RegExp构造函数的一些属性会获得相应的值*/
//function
this //此关键字引用的是函数执行环境的对象
函数的属性
length //参数个数
prototype //原型
函数的非继承方法
apply() //在指定的作用域调用函数,会调用函数
call() //同上,传递参数方式不同
bind() //bind()方法会创建一个函数实例(即不会立即执行的函数),并把this绑定到参数上。
/*js函数没有重载(即不同参数类型,做出不同的反应)*/
对基本类型(string、number、Boolean)添加方法和属性时,后台会自动调用相关构造函数,创建基本类型实例,但只是一瞬间。【在别的语言可能会称为自动装箱、以及自动拆箱】
包装字符串类型具有的方法
concat()
slice()
substr() //截取
trim() //去除首位空格
match([reg]) //匹配方法
replace(reg|string,fn|string) //替换
split('') //以指定分隔符分割字符串,返回一个数组
es6新增
repeat() //重复字符串
此处只例举要点
相等(==)操作符的类型转换
- 如果有一个操作数是布尔值,则比较之前将其转换位数值
- 如果有一个操作数是字符串,另一个是数值,则将字符串转数值
- 如果有一个操作数是对象,另一个不是对象,则调用对象的ValueOf()得到对象的基本类型再作比较
- null与undefined比较时为真
- 如果一个操作数是NaN,则结果位false
- 若两个操作数都是对象,则比较是不是同一个对象
全等(===)不进行类型转换
由ECMAScript实现提供不依赖于宿主环境,在程序运行之前就已经存在了,不会让开发人员显式实例的对象。
不属于任何对象的方法和属性都属Global对象的方法和属性,即"兜底儿"对象。
/*由于ECMAScript位标明Global对象,所以浏览器将Global对象作为Window对象的一部分加以实现*/
属性:几乎所有构造函数都为Global的 属性
方法:
isNaN() //是否是NaN
isFinite() //是否有穷
parseInt() //取整
parseFloat() //浮点数取位
encodeURLComponent() //URL编码
encodeURL() //URL编码
decodeURL() //URL解码
decodeURLComponent() //URL解码
encodeURLComponent() 相较于 encodeURL() 更为安全
属性
Math.E //常量e的值
Math.PI //圆周率
方法
Math.ceil() //向上舍入
Math.floor() //向下舍入
Math.round() //四舍五入
Math.random() //随机产生[0,1)之间的数值
当局部作用域中不存在使用的标识符声明,则延作用域链查找
垃圾回收机制:找出不再继续使用的变量,然后释放其占用的内存。
两种垃圾回收策略:
1.标记清除
当变量进入执行环境时(如在一个局部作用域中声明一个变量),就将这个变量标记为‘进入环境’,当变量离开环境时,就标记为‘离开环境’(底层的实现可用翻转一个位)。垃圾收集器会除去环境变量中的变量,以及环境中引用的变量,在此之外的变量则视为准备删除的变量。
2.引用计数
跟踪记录每个变量被引用的次数,当声明一个变量并将一个引用型数据赋值给这个变量时,变量的引用次数为1.如果同一个变量又被赋值给另一个变量,则该变量的引用次数加一,当此变量取得了另一个值,则引用计数减一,当引用计数值为零时,说明这个变量无法访问了。因而占用的内存被收回,当垃圾收集器下一次运行时,会释放引用计数为零的值所占用的空间。
//Web浏览器可用的内存远小于桌面应用程序,为获得更好的页面性能,当有数据不再使用,就应当令其值为null,来释放内存。
*】解除一个值的引用并不是立马回收内存,而是便于垃圾收集器下次运行时将其收回。
属性的类型
(1)数据型属性,【由四个描述符用来描述其行为特性】
[[Configurable]] //能否通过delete删除
[[Enumberable]] //能否通过for-in枚举
[[Writable]] //能否修改
[[Value]] //属性的数据值
(2)访问器型属性
1.getter() //获取
2.setter() //设置
通过Object.defineproperty()方法改变默认特性
通过Object.getOwnpropertydescriptor()方法读取默认特性描述
抽象创建对象的过程,将特定接口(参数)创建对象的细节用函数封装。
自定义构造函数,从而自定义对象的属性和方法,用new关键字来创建对象。
//new操作符经历的过程
1.创建一个新对象
2.将构造函数的作用域赋给新对象,(即this指向了新对象)
3.执行构造函数中的代码,(即为新对象添加属性和方法)
在ECMAScript中,每创建一个函数都自动拥有一个prototype属性,是一个指针指向一个对象。其作用是共享所有实例可以共享的属性和方法。对于函数本身的prototype指向函数的原型对象。默认情况下prototype会自动获取一个constructor属性,其constructor指向包含prototype的函数(即构造函数本身)。
ES5规定了一个方法Object.getprototype()用来获取对象的原型。可通过实例的[obj].hasOwnPrototype()检测属性或方法属于实例本身还是实例原型。
//原型模式的缺陷
当实例对象原型中的属性或方法是引用型数据类型时,若修改其属性或方法,将会影响实例的原型,以至于影响所有其他实例。
将可共享的属性和方法在原型中定义,在构造函数中定义个性属性和方法。
将另一个类型的实例对象赋给此原型对象。实现了此原型对象中有一个指针指向另一个类型的原型,以此类推构成原型链。
//存在问题:若存在引用型数据,可能导致重写;另一个问题是不能向父级函数传递参数)
在子类构造函数中调用(借用)父类的构造函数。
//存在问题:很难实现函数复用
用原型链继承共享属性和方法,用构造函数继承实例的属性和方法。
当用function声明函数时,存在函数声明提升,即可在声明之前调用函数。
闭包是作用域链的一个副作用,闭包函数只能取到包含函数的最后一个值,
闭包可能会导致this指向的不确定,
使用闭包不当时,可能会导致包含函数占用的内存不会回收,导致内存泄漏。
拓展:
模块模式: 对单例创建私有变量和特权方法,称作模块模式。
将共有的对象标准化,由W3C纳入HTML的规范中
window.screenTop //获取浏览器窗口相对于屏幕的Y坐标
window.screenLeft //获取浏览器窗口相对于屏幕的X坐标
window.moveTo(X,Y) //相对于屏幕移动浏览器窗口
window.moveBy(px,px) //同上
window.innerHeight //获取窗口的文档显示区的高度,(视口高,减去滚动条)
window.innerWdith //获取窗口的文档显示去的高度,(视口宽,减去滚动条)
document.documentElement.clientWidth //获取窗口的文档显示去的宽度,(视口宽,减去滚动条)
document.documentElement.clientHeight //获取窗口的文档显示去的高度,(视口宽,减去滚动条)
window.open(URL,target,string(打开方式),改变history)
window.close() //只允许关闭由window.open()打开的窗口
setTimeout(fn,time) //超时调用
setInterval(fn,time) //间歇调用
alert() //弹窗
comfirm() //返回Boolean的弹窗
prompt() //返回用户输入
【属性】
Location.hash
Location.host
Location.port
【方法】
Location.assign(URL) //打开URL
Location.replace() //替换URL
【属性】
Navigator.appName
Navigator.appVersion
提供显示器的信息
【方法】
history.go(num) //前进或后退
拓展:
1.能力检测:用以解决兼容性问题
2.怪癖检测:用以解决为特定的浏览器书写特定脚本
3.用户代理检测:用以检测确定浏览器版本、厂商
Node.ELEMENT_NODE == 1
Node.ATTRIBUTE_NODE == 2
Node.TEXT_NODE == 3
Node.CDATA_SECTION_NODE == 4
Node.ENTITY_REFERENCE_NODE == 5
Node.ENTITY_NODE == 6
Node.PROCESSING_INSTRUCTION_NODE == 7
Node.COMMENT_NODE == 8
Node.DOCUMENT_NODE == 9
Node.DOCUMENT_TYPE_NODE == 10
Node.DOCUMENT_FRAGMENT_NODE == 11
Node.NOTATION_NODE == 12
每个节点都有childNode、NodeList、parentNode属性
nodeNmae
nodeValue
插入节点 appendChild()、insertBefore()
替换节点replaceChild()
移除节点removeChild()
克隆节点cloneChild(boolean) //为true时深复制
Document类型表示文档,document是Document的实例,表示HTML页面。
Document类型的特性
nodeType == 9
nodeName 为 #document
nodeValue 的值为null
parentNode 的值为null
ownerDocument 的值为null
Element类型表示页面html元素
Element 类型的特性
nodeType == 1
nodeName 为 标签名
nodeValue 的值为null
parentNode 的值可能是Element 或Document
1.HTML元素
a.每个html元素都具有下列标准属性
id //元素在文档的唯一标识符
title //有关元素的附件说明信息
lang //元素内容的语言
className //与元素的class特性相对应,
b.操作元素属性
getAttribute('属性名') //获取元素属性值
setAttribute('name','value') //设置元素属性
removeAttribute('name') //移除元素属性
c.attributes属性
与nodeList类似,包含一个NameNodeMap。是一个动态集合。
2.创建元素
document.createElement('tagName')
3.获取元素子节点
ele.childNodes
4.获取元素
document.getElementById('id')
document.getElementsByClassName('className')
document.getElementsByTagName('tagName')
Text类型的特性
nodeType == 3
nodeName 为 #text
nodeValue 的值为所包含的文本
parentNode 的值可能是Element
1.创建文本节点
document.createTextNode('string')
Comment类型的特性
nodeType == 8
nodeName 为 #comment
nodeValue 的值为所注释内容
parentNode 的值可能是Element 或Document
DocumentFragment类型的特性
nodeType == 11
nodeName 为 #document-fragment
nodeValue 的值为null
parentNode 的值为null
1.创建DocumentFragment片段
document.crreateDocumentFragment()
Attr类型的特性
nodeType == 11
nodeName 为值的名称
nodeValue 的值为特性值
parentNode 的值为null
document.querySelector(‘CSS选择器’) //获取单个元素
document.querySelentAll(‘CSS选择器’) //选择多个元素
classList对象的方法
ele.classList.add(‘value’) //添加类名
ele.classList.contains(‘value’) //是否包含此类名,返回Boolean
ele.classList.remove(‘value’) //移除类名
ele.classList.taggle(‘value’) //有则移除无则添加
data-*
获取与设置
value =ele.dataset.[name]
ele.dataset.name=value
innerHTML(‘string’)
outerHTML()
innerText(‘string’)
outerText()
CSS扩展
ele.style.cssText = 'key:value' //设置style中的CSS代码
css = ele.style.cssText //读取style中的CSS代码
DOM2级中加入了getComputerStyle('元素','null或伪元素')
css = document.defaultView.getComputerStyle('ele',null)
//操作引入的外部CSS和style中的css
CSSStyleSheets对象
【元素大小】
offsetHeight //元素在垂直方向的占用空间
offsetWidth //元素在水平方向的占用空间
offsetLeft //元素的左边框至包含元素的左边框之间的距离
offsetTop //元素的上边框至包含元素的上边框之间的距离
clientHeight //元素的内容加内边距在垂直方向上的占用空间
clientWidth //元素的内容加内边距在水平方向上的占用空间
【滚动大小】
scrollTop //滚动被隐藏的上部区域的像素数
scrollLeft //滚动被隐藏的左侧区域的像素数
【鼠标位置】
e.pageX|e.clientX //相对于页面|相对于视口
e.pageY|e.clientY
事件
事件流:页面中元素接收事件的顺序
事件冒泡(IE的事件流):事件由最具体的元素到最不具体的元素传播
事件捕获(Netscape事件流):事件由最不具体的元素到最具体的元素传播
DOM2级中规定的事件流:分三个阶段,事件捕获阶段->处于目标阶段->事件冒泡阶段
事件处理程序
DOM0级事件处理程序
例如:ele.onclick = fn
DOM2级事件处理程序
ele.addEventListener('事件名',fn,boolean)
ele.removeEventListener('事件名',同一个fn,boolean)
【IE的事件处理程序】
ele.attachEvent(on + '事件名',fn)
ele.detachEvent(on + '事件名',fn)
【事件对象】
在触发某一事件时会产生一个Event对象,包含事件的所有有关信息。
//在IE中当使用DOM0级时Event为window的一个属性。event = window.event
事件对象中常用的属性
event.type //事件类型
event.target //事件目标
event.cancelbable //表明是否可以取消事件的默认行为
event.preventDefault() //若cancelBubble为true,则可以取消事件的默认行为
event.stopPropagation() //取消事件的进一步冒泡或者捕获
IE的事件对象的常用属性
event.cancelBubble = Boolean //等于true时表示取消事件冒泡
event.returnValue = Boolean //等于false时表示取消默认事件
event.srcElement //事件目标
event.type //事件类型
1.UI事件
onload //页面加载后
onunload //页面卸载后
onselect //选择文本
onresize //窗口变化时
onscroll //当滚动带有滚动条的元素
2.焦点事件
onblur //失去焦点 (不冒泡)
onfocus //获得焦点 (不冒泡)
3.鼠标与滚轮事件
onclick //单击鼠标
ondbclick //双击鼠标
onmousedown //按下鼠标
onmouseenter //光标移入元素
onmouseleave //光标移出元素
onmousemove //鼠标指针在元素内移动
onmouseout //鼠标移出一个元素到另一个元素 (包含关系,由内到外)
onmouseover //鼠标移出一个元素到另一个元素 (包含关系,由外到内)
onmouseup //释放鼠标
【鼠标按键】 --包含于事件对象的button属性
event.button = 0 表示鼠标左键
event.button = 1 表示鼠标中键
event.button = 2 表示鼠标右键
oncontextmenu //右键菜单事件
onmousewheel //滚轮事件
【滚轮方向】 --包含于事件对象的wheelDelta属性
+120 表示向前推 火狐中 -3 表示向前推
-120 表示向后滚 +3 表示向后滚
4.键盘事件与文本事件
onkeydown //按下按键
onkeypress //点击释放按键时触发
onkeyup //释放按键
ontextinput //当用户在可编辑区域输入时
5.触摸事件
touchstart
touchmove
将事件绑定到父级元素,判断事件对象中的事件目标来触发事件
disabled //是否禁用 Boolean
name //字段名 string
readOnly //是否只读 Boolean
type //字段类型 string
value //提交给服务器的字段值 string
required //必填 HTML5新增
blur //字段失去焦点触发
change //在<input>和<textarea>的value发生改变且失去焦点、或者<select>的选中 项改变时触发
focus //在在字段获得焦点时触发
未完待续…
【进阶】