JavaScript
**ECMAScript + DOM + BOM **
1.ECMAScript
(1)JavaScript是Ecma国际(信息和电信标准组织)定义的ECMA-262标准的实现。
(2) ECMA-262规定的语言组成（语言描述文档）
语法
类型
语句
关键字
保留字
操作符
对象
**(3)**Web浏览器只是ECMAScript的宿主环境之一，同时Web浏览器还提供了对ECMAscript的扩展。其他的宿主环境包括Node、Adobe Flash。
2.DOM（文档对象模型）
**(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（同步多媒体继承语言）。
3.BOM（浏览器对象模型）
浏览器对象模型（Browser Object Model）是由不同的浏览器厂商自行实现的，在HTML5没出现之前没有统一的标准，HTML5则是致力于把BOM功能写入正式规范。
BOM包括了一些浏览器窗口操作接口和一些扩展：
- 弹出新浏览器窗口
- 移动、缩放和关闭浏览器窗口
- 提供浏览器详细信息的Navigator对象
- 提供浏览器所加载的页面的详细信息的Location对象
- 提供显示器分辨率详细信息的Screen对象
- 提供对Cookie的支持
- 提供浏览器厂商的自定义对象，例如:XMLHttpRequest、IE的ActiveXObject对象
JavaScript在HTML文档中的使用
1.<script></script>元素
向HTML文档中使用JavaScript的主要方法是使用<script></script>标签，<script></script>标签具有几个属性：
1.async //表示立即下载脚本，但不能妨碍页面中的其他操作，作用域外部引入引入的脚本。
2.charset //引入的脚本的字符集。
3.defer //表示脚本可以延迟到HTML文档完全解析和显示之后在执行脚本，作用域外部引入的脚本
4.src //引入外部脚本的路径。（可用来解决跨域，Jsonp的应用）
5.type //表示脚本的mime类型
2.<script></script>元素在HTML文档中的位置
按照惯例，所有<script></script>标签都应放到<head></head>中,但是为了避免页面呈现的延迟,一般将<script></script>标签放置在<body></body>中.同样也可以用<script></script>标签的defer和async属性解决延迟问题.
JavaScript规范中的基本概念
1.语法
- 区分大小写
- 标识符一般以驼峰式命名
- 注释，//单行 /*多行*/
- 严格模式，ES5引入，在脚本顶行添加"use strict"，局部作用域也可使用
- 语句，由英文分号结尾
- 关键字和保留字，不得用于标识符
- 变量，JavaScript中变量是松散的，即一个变量可以保存任何类型的数据。
2.六种数据类型
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() //返回对象的字符串、数值或布尔表示
4.引用类型数据方法
- 非包装引用类型
//数组方法总结
【数组模仿堆栈结构】
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() //重复字符串
5.JavaScript操作符
此处只例举要点
相等（==）操作符的类型转换
- 如果有一个操作数是布尔值，则比较之前将其转换位数值
- 如果有一个操作数是字符串，另一个是数值，则将字符串转数值
- 如果有一个操作数是对象，另一个不是对象，则调用对象的ValueOf()得到对象的基本类型再作比较
- null与undefined比较时为真
- 如果一个操作数是NaN，则结果位false
- 若两个操作数都是对象，则比较是不是同一个对象
全等（===）不进行类型转换
6.单个内置对象
由ECMAScript实现提供不依赖于宿主环境，在程序运行之前就已经存在了，不会让开发人员显式实例的对象。
（1）Global对象
不属于任何对象的方法和属性都属Global对象的方法和属性，即"兜底儿"对象。
/*由于ECMAScript位标明Global对象，所以浏览器将Global对象作为Window对象的一部分加以实现*/
属性：几乎所有构造函数都为Global的 属性
方法：
isNaN() //是否是NaN
isFinite() //是否有穷
parseInt() //取整
parseFloat() //浮点数取位
encodeURLComponent() //URL编码
encodeURL() //URL编码
decodeURL() //URL解码
decodeURLComponent() //URL解码
encodeURLComponent() 相较于 encodeURL() 更为安全
(2)Math对象
属性
Math.E //常量e的值
Math.PI //圆周率
方法
Math.ceil() //向上舍入
Math.floor() //向下舍入
Math.round() //四舍五入
Math.random() //随机产生[0,1)之间的数值
作用域与内存问题
1.作用域链
当局部作用域中不存在使用的标识符声明，则延作用域链查找
2.垃圾回收
垃圾回收机制：找出不再继续使用的变量，然后释放其占用的内存。
两种垃圾回收策略：
1.标记清除
当变量进入执行环境时（如在一个局部作用域中声明一个变量），就将这个变量标记为‘进入环境’，当变量离开环境时，就标记为‘离开环境’（底层的实现可用翻转一个位）。垃圾收集器会除去环境变量中的变量，以及环境中引用的变量，在此之外的变量则视为准备删除的变量。
2.引用计数
跟踪记录每个变量被引用的次数，当声明一个变量并将一个引用型数据赋值给这个变量时，变量的引用次数为1.如果同一个变量又被赋值给另一个变量，则该变量的引用次数加一，当此变量取得了另一个值，则引用计数减一，当引用计数值为零时，说明这个变量无法访问了。因而占用的内存被收回，当垃圾收集器下一次运行时，会释放引用计数为零的值所占用的空间。
//Web浏览器可用的内存远小于桌面应用程序，为获得更好的页面性能，当有数据不再使用，就应当令其值为null，来释放内存。
*】解除一个值的引用并不是立马回收内存，而是便于垃圾收集器下次运行时将其收回。
面向对象编程
1.理解对象（无序属性的集合）
属性的类型
（1）数据型属性，【由四个描述符用来描述其行为特性】
[[Configurable]] //能否通过delete删除
[[Enumberable]] //能否通过for-in枚举
[[Writable]] //能否修改
[[Value]] //属性的数据值
（2）访问器型属性
1.getter() //获取
2.setter() //设置
通过Object.defineproperty()方法改变默认特性
通过Object.getOwnpropertydescriptor()方法读取默认特性描述
2.创建对象（在面向对象编程中）
- 工厂模式
抽象创建对象的过程，将特定接口（参数）创建对象的细节用函数封装。
- 构造函数模式
自定义构造函数，从而自定义对象的属性和方法，用new关键字来创建对象。
//new操作符经历的过程
1.创建一个新对象
2.将构造函数的作用域赋给新对象，（即this指向了新对象）
3.执行构造函数中的代码，（即为新对象添加属性和方法）
- 原型模式
在ECMAScript中，每创建一个函数都自动拥有一个prototype属性，是一个指针指向一个对象。其作用是共享所有实例可以共享的属性和方法。对于函数本身的prototype指向函数的原型对象。默认情况下prototype会自动获取一个constructor属性，其constructor指向包含prototype的函数（即构造函数本身）。
ES5规定了一个方法Object.getprototype()用来获取对象的原型。可通过实例的[obj].hasOwnPrototype()检测属性或方法属于实例本身还是实例原型。
//原型模式的缺陷
当实例对象原型中的属性或方法是引用型数据类型时，若修改其属性或方法，将会影响实例的原型，以至于影响所有其他实例。
- 构造函数模式和原型模式的组合模式(js中最广泛的模式)
将可共享的属性和方法在原型中定义，在构造函数中定义个性属性和方法。
3.继承
- 原型链继承
将另一个类型的实例对象赋给此原型对象。实现了此原型对象中有一个指针指向另一个类型的原型，以此类推构成原型链。
//存在问题：若存在引用型数据，可能导致重写；另一个问题是不能向父级函数传递参数）
- 借用构造函数继承（对原型继承的优化）
在子类构造函数中调用（借用）父类的构造函数。
//存在问题：很难实现函数复用
- 原型继承和狗在函数继承的组合继承
用原型链继承共享属性和方法，用构造函数继承实例的属性和方法。
函数表达式中的重要知识点
当用function声明函数时，存在函数声明提升，即可在声明之前调用函数。
- 递归函数：函数用函数名调用自身
- 闭包: 有权访问另一个函数作用域中的变量的函数。
闭包是作用域链的一个副作用，闭包函数只能取到包含函数的最后一个值，
闭包可能会导致this指向的不确定，
使用闭包不当时，可能会导致包含函数占用的内存不会回收，导致内存泄漏。
- 函数表达式可以模仿块级作用域，即立即执行函数（IIFE）。
- 特权方法：函数内部的变量一般不可以在外部访问，可利用闭包，通过作用域链访问内部变量（私有属性）。
- 静态私有方法：用立即执行函数（IIFE）模仿块级作用域，在其中创建的不可访问的、不可改变的变量。
拓展：
模块模式: 对单例创建私有变量和特权方法，称作模块模式。
BOM的详细学习
将共有的对象标准化，由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对象（提供页面文档相关信息）
【属性】
Location.hash
Location.host
Location.port
【方法】
Location.assign(URL) //打开URL
Location.replace() //替换URL
- Navigator对象（提供浏览器的版本等相关信息）
【属性】
Navigator.appName
Navigator.appVersion
- Screen对象
提供显示器的信息
- History对象 （历史记录）
【方法】
history.go(num) //前进或后退
拓展：
1.能力检测：用以解决兼容性问题
2.怪癖检测：用以解决为特定的浏览器书写特定脚本
3.用户代理检测：用以检测确定浏览器版本、厂商
DOM的详细学习
DOM由多层次节点（Node）构成
- 12种节点类型
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时深复制
常用的节点类型
1.Document 类型 （Node.DOCUMENT_NODE == 9）
Document类型表示文档，document是Document的实例，表示HTML页面。
Document类型的特性
nodeType == 9
nodeName 为 #document
nodeValue 的值为null
parentNode 的值为null
ownerDocument 的值为null
2.Element 类型 （Node.ELEMENT_NODE == 1 ）
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')
3.Text类型
Text类型的特性
nodeType == 3
nodeName 为 #text
nodeValue 的值为所包含的文本
parentNode 的值可能是Element
1.创建文本节点
document.createTextNode('string')
4.Comment类型（注释节点）
Comment类型的特性
nodeType == 8
nodeName 为 #comment
nodeValue 的值为所注释内容
parentNode 的值可能是Element 或Document
5.DocumentFragment类型（文档片段）
DocumentFragment类型的特性
nodeType == 11
nodeName 为 #document-fragment
nodeValue 的值为null
parentNode 的值为null
1.创建DocumentFragment片段
document.crreateDocumentFragment()
6.Attr类型
Attr类型的特性
nodeType == 11
nodeName 为值的名称
nodeValue 的值为特性值
parentNode 的值为null
DOM扩展
1.获取元素
document.querySelector(‘CSS选择器’) //获取单个元素
document.querySelentAll(‘CSS选择器’) //选择多个元素
2.操作元素属性
classList对象的方法
ele.classList.add(‘value’) //添加类名
ele.classList.contains(‘value’) //是否包含此类名，返回Boolean
ele.classList.remove(‘value’) //移除类名
ele.classList.taggle(‘value’) //有则移除无则添加
3.自定义属性
data-*
获取与设置
value =ele.dataset.[name]
ele.dataset.name=value
4.插入、获取标记
innerHTML(‘string’)
outerHTML()
5.插入、获取文本
innerText(‘string’)
outerText()
DOM2和DOM3级
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 //在在字段获得焦点时触发
未完待续…
【进阶】
321
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
