javascript 高级程序设计 英文 javascript高级程序设计下载

网盘地址 提取码：vh81

笔记

第二章

2.1script标签

• <script>元素属性：async、charset、defer、language、src、type
  async和defer只对外部脚本有效，language已废弃，type默认为“text/javascript”
• defer属性可以让脚本在文档完全呈现之后再执行，且按照指定的顺序执行
• 设置了async的脚本文件不一定按照书写顺序执行，所以文件间应该互不依赖；异步脚本会在页面的load事件前执行，但可能会在DOMContentLoaded事件触发前或后执行。支持异步脚本的浏览器有Firefox3.6，Safari5和Chrome。
• 内嵌时，代码中任何地方不能出现"</script">字符串，否则会认为是结束，可以将字符串分隔两部分解决，如：alert<\/script>

2.3文档模式

• 混杂模式和标准模式：两种模式主要影响CSS内容的呈现，某些情况也会影响到JavaScript的解释执行

2.4noscript标签

• 浏览器不支持脚本或禁用脚本

第三章

3.1语法

• 标识符：字母，下划线或美元开头，其他可以字母，下划线，美元或数字；字母也可以包含拓展的ASCII或Unicode字母字符，但不推荐
• 严格模式：”use strict“

3.4数据类型

• typeof：undefined、boolean、string、number、object、function
  safari5及之前版本和chrome7及之前版本对正则表达式用typeof会返回function，其他返回object
• typeof对未初始化和未声明变量都返回undefined
• undefined的值派生自null
• Boolean()
• 浮点值的内存空间是整数的两倍，所以ECMAscript会在不失时机地把浮点数转化为整数
• Number.MAX_VALUE ，Number.MIN_VALUE ，Number.NEGATIVE_INFINITY ，Number.POSITIVE_INFINITY ，Infinity ，isFinite()
• NaN：任何操作返回NaN，与任何值不等，包括自身
• isNaN()：适用对象，首先调用valueOf()，测试返回值是否可以转化为数值，如果不行，就基于返回值调用toString()方法，再测试返回值
• Number()任何数据类型，parseInt(),parseFloat()适用字符串；一元加操作符与Number()函数相同，可区分十六进制数转化为十进制，空字符串为0，parseInt()空字符串为NaN，可传入第二个参数表示几进制；parseFloat()只解析十进制，如果是整数的数，会返回整数，可识别”3.125e7“
• 字符串：
  1、特点：不可变，每次改变都会销毁原来返回新的
  2、toString()，字符串也有这个方法，但是null和undefined没有，可以穿参数，参数为基数，默认为10
  3、String()，如果有toString方法，调用它，没有，如果是null，返回”null“，是undefined，返回”undefined"
• object
  1、属性和方法：Constructor；hasOwnProperty检查属性是否在当前对象中，参数要以字符串形式传入；isPrototypeOf检查传入对象是否是另一个对象的原型；propertyIsEnumerable，检查给定属性能否用for-in语句枚举，参数必须以字符串形式传入
  ；toLocaleString()，返回对象的字符串表述，该字符串与执行环境的地区对应；toString()返回对象的字符串表示；valueOf()返回对象的字符串、数值或布尔表示，通常与toString()返回值相同
• ++，–除了可以作用在数字上，也可以作用在其他数据类型上，P57，需要先设定变量赋值为其他数据类型，然后再++或–，字符串时，字符串需要就是数值字符串
• 一元加减操作符作用在非数值类型字符串
• 位操作符，NaN和Infinity进行操作时都会被当成0，作用于非数值类型，会先Number()转换
  1、按位非~：操作数负值减一，比普通表达式快，因为是最底层操作
  2、按位与& 3、按位或| 4、按位异或^ 5、左移<<，不会影响符号位 6、有符号右移>>，符号位填充空缺 7、无符号右移>>>
• 逻辑
  1、逻辑非 2、逻辑与，在操作数不是布尔值的情况下返回值就不一定是布尔值
• 乘法，除法，求模
• 加操作符：“sad”+10+5 -> sad105
• 关系操作符P69
• 逗号操作符
• for-in循环对象如果为null或undefined就不会执行循坏体
• lable标签
• with语句，严格模式下不允许使用，大量使用会导致性能下降
• switch语句如果缺少break，就会继续执行下一条case，default不用break，case的值不一定要常量，可以是变量或表达式，switch在进行比较时使用的是全等操作
• return可以不带返回值，返回的是undefined
• arguments与命名参数值保持同步

第四章

• 不能给基本类型的值添加属性，如：var name="tom" ;tom.age=12 //undefined
• 任何在内部应用call方法的对象在用typeof时返回function，不同浏览器对正则返回有所差别，确定值是哪种引用类型用instanceof
• 延长作用域：try-catch，with
• 垃圾收集：标记清除，引用计数（循环引用），性能问题（垃圾回收时间间隔）

第五章

数组

• 通过对象字面量定义对象时，实际上不会调用object的构造函数
• new Array()传入负数报错，也可不加new，在使用字面量表示法时不会调用Array构造函数，var arr = [1,2,]在不同浏览器中会有不同的项
• 数组的length属性可以改变数组长度
• 检测数组：
  instanceof问题：如果网页包含多个框架就存在多个全局执行环境，导致错误。
  isArray检测：IE9+,firefox4+,Safari5+,opera10.5+和chrome
• 转换数组：toString()返回字符串，valueOf()返回数组
• join()不传入值或undefined，用逗号分隔，IE7及更早会用"undefined“分隔，如果数组某项为null或undefined，使用join，toString，valueOf，toLocaleString会以空字符表示
• 栈方法：push()返回长度，pop()返回弹出项
• 队列方法：shift()返回第一项，unshift()返回长度，IE8及以下对unshift返回值有所不同
• 重排序方法：
  1、sort()方法：每项toString()再进行比较，就算本来是数字；接受一个比较函数做参数，如果第一个参数应在第二个参数前就返回负数，相等0，之后正数；返回排序后数组，比较函数的参数为数组的两个值P132
  2、reverse()，返回排序后数组
• 操作方法：
  1、concat()：先创建副本再操作，不影响原数组
  2、slice()：不影响原数组，不包含结束位置的项，结束位置小于初始位置返回空数组，参数为负数加上长度slice(-2,-1)等于slice(3,4)
  3、splice()返回从原数组中删除的项
• 位置方法：indexOf(),lastIndexOf()，使用全等查找，没找到返回-1，找到返回位置；支持浏览器IE9+,Firefox2+，Safari3+，Opera9.5+和Chrome
• 迭代方法：（val，index，arr）=>{}
  1、every()，函数对每一项都返回true，那就返回true
  2、filter()，返回该函数返回true的项组成的数组
  3、forEach()，对数组每项运行函数，没有返回值
  4、map()，对函数每项运行函数，返回结果数组
  5、some()，任意一项返回true，返回true
  以上方法都不会修改数组中的包含的值，支持浏览器IE9+,Firefox2+，Safari3+，Opera9.5+和Chrome
• 缩小方法：迭代所有项，返回一个值
  1、reduce()，第一个值，当前值，当前下标，数组
  2、reduceRight()最后一项开始迭代
  支持浏览器IE9+,Firefox3+，Safari4+，Opera10.5+和Chrome

Date类型

1、Date.parse，Date.UTC；将表示日期的字符串传给构造函数也会调用Date.parse；UTC接受年月日…，其中月份基于0开始，只有年和月是必须的，构造函数传入第一个参数是数值时，会调用Date.UTC，但是日期和时间是基于本地时区创建的

2、Date.now()，支持浏览器IE9+,Firefox3+，Safari3+，Opera10.5+和Chrome，不支持的浏览器用+new Date()也可达到同样的目的

3、继承的方法，toLocaleString()，toString()，不同浏览器显示格式不同，valueOf()返回毫秒数，可以用比较操作符(大于或小于)来比较日期

4、日期格式化方法：toDateString，toTimeString，toLocaleDateString，toLocaleTimeString，toUTCString

5、日期方法

RegExp类型：

1、var exp = / pattern / flags 2、flags：g全局，i不区分大小写，m多行模式

3、元字符需要转义，传入RegExp构造函数的两个值需要为字符串

4、实例属性：global，ignoreCase，lastIndex，multiline，source

5、实例方法

exec()，接受要应用的字符串，返回数组，包含额外两个属性，index和input，数组第一项是匹配字符串，其他为捕获的字符串，全局模式的设置与否会改变多次测试的结果P126

test()，

toString和toLocaleString方法都会返回正则表达式的字面量，valueOf返回正则表达式本身

6、构造函数属性，Opera不支持短属性名，短属性名需要用方括号访问，九个用于存储捕获组的属性RegExp.$1等

Function类型

1、函数是对象，函数名是指针

var sum = new Function("num1","num2","return num1+num2; )；//不推荐，会导致两次解析

2、没有重载
3、alert(sum(10,10));function sum(n1,n2){return n1+n2};可以正常显示20
4、函数内部属性：arguments，this，caller，arguments.callee。当全局环境中调用，caller的值为null，严格模式下callee和caller会有错误
5、函数属性和方法：length函数希望接受的命名参数的个数
6、严格模式下this值在未指定环境下调用，不会转为window，是undefined
7、call()，apply()，bind()，bind支持的浏览器IE9+,Firefox4+，Safari5.1+，Opera12+和Chrome
8、toLocaleString，toString，valueOf返回函数代码，格式不一定

基本包装类型

• Boolean，Number，String
• 读取模式访问字符串：创建String类型的实例，调用方法，销毁实例
• 对基本包装类型调用typeof返回object
• Object’构造函数会根据传入的值的类型返回相应基本包装类型的实例

var obj = new Object("new one");
alert("obj instanceOf String")      //true

• Boolean重写了valueOf()方法，返回基本类型true或false，重写toString()方法，返回”true“或”false“
• Number重写了valueOf，toString和toLocaleString方法，valueOf返回数值，其他两个返回字符串，toString可传入表示基数的参数
• toFixed，按照指定的小数位返回数值的字符串表示，会四舍五入，IE8在传入0时会有问题
• toExponential，返回指数表示法，传入小数位参数
• toPrecision，返回合适的表达，可传入参数表示所有数字的位数(不包括指数部分)，会根据数值选择调用 toFixed或toExponential
• charAt，charCodeAt；IE8及其他浏览器支持[]方法索引字符
• 字符操作方法：concat，slice，substr，substring，对原字符串都无影响。
• slice和substring第二个参数指向最后一个字符后的一个位置，substr指定返回的字符个数；传入负数，slice加上字符串长度，substr会把第一个加长度，第二个变零，subtring会把第二个变0，IE9前substr传入负值存在问题
• substring(3,0)会被自动转化为substring(0,3)
• indexOf,lastIndexOf，两者都接受第二个值，表示从哪里开始
• trim，IE9+,firefox3.5+,safari5+,opera10.5+,chrome；trimLeft和trimRight，firefox3.5+,safari5+,chrome8+
• toLowerCase,toLocaleLowerCase,toUpperCase,toLocaleUpperCase
• 模式匹配：match，本质与正则的exce相同，接受一个正则对象或正则表达式
  search，参数同上，找到返回下标，不然返回-1
  replace，第一个参数是正则或字符串，如果字符串，只替换一个，替换所有需要正则且g，如果第二个参数是字符串，可以为特殊字符，$&等；第二个参数也可以为函数
• split返回数组，第一个参数可以是字符串或正则，第二个表示数组大小；不同浏览器在正则有捕获组或未匹配项是会有不同
• localeCompare，formCharCode
• HTML方法

Global对象

1、URL编码方法，encodeURI,encodeURIComponent,decodeURI,decodeURIComponent
2、eval方法，参数为要执行语句的字符串，eval中创建的变量和函数都不会提升；严格模式下会有一些限制
3、可用如下获取Globle对象

var gl = function(){return this;}()

Math对象

1、selectFrom，接受两个值，应该返回的最大最小值

第六章

属性类型

• 数据类型：Configurable，Enumberable，Writable，Value
  1、修改属性特征，需要object.defineProperty()

var person={};Object.defineProperty(person,"name",{
writable:false,
value:"tom"
});

2、一旦configurable设置为false，不可变回去，修改writable之外的属性都会导致错误
3、如果使用object.defineProperty方法不指定值，前三者默认都为false；不要在IE8上用

• 访问器属性：getter和setter
  1、四个特性：Configurable，Enumerable，Get，Set
  2、访问器属性不能直接定义，也要用Object.defineProperty
  3、只指定getter不能写，只有setter返回undefined，严格模式报错
  4、IE9+,firefox4+,safari5+,opera12+和chrome
• 修改多个属性：Object.defineProperties，IE9+,firefox4+,safari5+,opera12+和chrome
• Object.getOwnPropertyDescriptor，IE9+,firefox4+,safari5+,opera12+和chrome

创建对象

• 工厂模式
• 构造函数
• 原型模型
  
  1、isPrototypeOf，Object.getPrototypeOf(IE9+,firefox3.5+,safari5+,opera12+和chrome)

Person.prototype.isPrototypeOf(person1)         //true
Object.getPrototypeOf(person1) == Person.prototype         //true

2、hasOwnProperty检测属性是否存在于实例中，getOwnPropertyDescriptor
3、in：无论属性实在实例中还是原型中都返回true
4、hasPrototypeProperty()
5、for-in循环能够访问原型和实例中的属性，所有开发人员定义的属性都是可枚举的-只有在IE8及更早的版本前例外，IE早期版本进行for-in循环存在bug
6、Object.keys()接受一个对象返回包含所有可枚举属性的字符串数组
7、Object.getOwnPropertyNames()返回所有实例属性，不论是否可枚举，支持67的浏览器IE9+,firefox4+,safari5+opera12+和chrome
8、

function Person(){}  Person.prototype={...} var tom = new Person();
alert(tom instanceOf Person) //true
* Person.prototype={constructor:Person,...}

通过星号代码重设constructor会导致他的Enumberable被设置为true，默认原生应该不可枚举，所以可以用Object.defineProperty()

• 组合使用构造函数模式和原型模式
• 动态原型模型
• 寄生构造函数模式
• 稳妥构造函数模式

继承

• 确定原型和实例的关系
  instanceof，isPrototypeOf：只要是原型链中出现过的都为true
• 借用构造函数
• 组合继承（最常用）
• Object.creat()：IE9+,firefox4+,safari5+,opera12+和chrome
• 寄生式继承
• 寄生组合式继承

第七章

• name属性，访问函数指定的名字，firefox，safari，chrome，opera才有
• 函数声明提升 P195

递归

• 严格非严格模式下：arguments.callee，命名函数f()

闭包

• P201访问作用域中的this和arguments
• P202this？
• 内存泄漏
• 模仿块级作用域：立即执行函数
• 私有变量，静态私有变量
• 模块模式，增强的模块模式

第八章

window对象

• window对象是JavaScript访问浏览器窗口的一个接口，优势EMCAScript规定的Global对象
• 全局变量不能用delete删除，直接在window对象上定义的属性可以，IE<9时两者都会报错；用var添加window属性会把Configurable设置为false，所以不能用delete删。 Window Mobile平台的IE浏览器不允许window.property = value

var new = old              //报错，old未定义
var new = window.old            //new未undefined

• 除非最高层窗口是用window.open()打开的，不然window的name值不会包含任何值
• 窗口关系及框架：top，self，window，frames，parent
  使用框架：浏览器存在多个Global对象每个框架有自己的构造函数，跨框架instanceOf会被影响P216
• 窗口位置
  跨浏览器获得窗口的左边和上边的位置，但不同浏览器返回值不同

var left = (typeof window.screenLeft = "number")?window.screenLeft : window.screenX;
var top = (typeof window.screenTop = "number")?window.screenTop : window.screenY;

moveTo，moveBy可以精确移动，但是可能被禁用，Opera和IE7(及更高版本）默认禁用，且不适宜框架，只能对最外层window用

• 窗口大小：innerWidth,innerHeight,outerWidth,outerHeight；IE9+和其他浏览器
  1、Chrome中inner和outer返回值相同，都是视口大小而非浏览器大小
  2、IE9+,safari,firefox中，out返回浏览器本身尺寸（无论是最外层window还是框架内访问）
  3、Opera中out表示页面视图容器大小，inner表示页面视图区大小（减去边框宽度）
  4、所有浏览器，document.documentElement.clientWidth和height保存页面视口信息，IE6混杂模式不同
  5、document.compatMode确定页面是否处于标准模式
  6、移动设备又不同，IE也特殊
  7、resizeTo和resizeBy可改变窗口宽高，但可能被禁用，Opera和IE7+默认禁用
• 导航和打开窗口
  1、window.open接收四个参数
  2、如果第二个参数不是一个已经存在的框架或窗口，根据第三个参数创建新窗口或标签页，默认全部设置。不打开窗口的情况下，会忽略第三个参数。第三个参数是逗号分隔的字符串，不允许出现空格
  
  3、window.open()返回一个新窗口引用，可以通过它操作窗口：resizeTo，移动，关闭，弹出窗口最外层window对象有opener属性存储原始窗口
  4、标签页之间的联系，opener=null
• 弹出窗口安全限制
• 大多数浏览器内置弹出窗口屏蔽程序，window.open()返回null，工具屏蔽会报错，可以将window.open封装在try-catch中
• 间歇调用和超时调用
  1、超时调用都是在全局作用域下执行的，this指向window，严格模式下为undefined
  2、setTimeout，setInterval
• alert，confirm，prompt；window.find(),window.print()查找和打印对话框，异步显示，不会计入对话框计数器；chrome、IE9和Firefox4如果莫脚本执行过程会打开多个对话框，第二个开始会有复选框供用户阻止后续对话框

location对象

1、window.location和document.location引用的是同一个对象

2、location.assign(URL字符串)，打开新URL并在有历史记录；window.locatinotallow="URL"和location.href="URL"也会调用assign方法

3、location.hash、search、hostname、pathname、port也可改变URL；IE8,firefox1，safari2+，opera9+和chrome会生成新历史记录，IE早期版本不同

4、replace不会生成新纪录，用户不能回到前个界面

5、reload，传入一个参数true会强制从服务器加载而非缓存，reload调用之后的代码可能不会执行，最好把它放在代码最后一行

navigator 对象

• 上表中属性一般用来检测浏览器类型
• 检查插件：非IE浏览器，可以用plugins数组达到目的，数组每项属性有：name，description，filename，length
  1、每个插件本身也是个MineType对象的数组，每个MineType对象又有四个属性
  2、IE需要使用ActiveXObject，需要知道插件的COM标识符
  3、每个插件分别创建检测函数，plugins集合有refresh方法，是否应该重载页面
• 处理注册程序，firefox

screen对象

history对象

• history.go，传入数值跳转页数，传入字符串，跳转到包含该字符串的最近的历史记录URL,如果没有，什么也不做；history.back，history.forword
• history.length，历史记录长度，等于0表示当前页面是打开的第一个页面

第九章

能力检测

• typeof检测
• 能力检测不是浏览器检测
• 怪癖检测
• 用户代理检测，电子欺骗
• 识别呈现引擎，识别浏览器，识别平台，识别移动设备，识别游戏系统P261

第十章

层次节点

• nodeType于Node.ELEMENT_NODE在IE中无效，与数字比较适用于所有浏览器，共有12种类型
• 对于元素结点，nadeName有，nodeValue为null，使用这两个值前应该先检查一下节点的类型
• 每个节点都有childNodes属性，它保存着一个NodeList对象，是个类数组，DOM结构的变化能够自动反映在NodeList中
  1、可用方括号或item()方法访问
  2、Array.prototype.slice()可以将arguments和NodeList转化为数组

var arr = Array.prototype.slice.call(node.childNodes,0)     //IE8及之前版本无效

对于IE需要手动枚举所有成员
3、hasChildNodes方法
4、ownerDocument表示指向整个文档的文档节点

• 操作节点
  1、appenChild()返回新增节点，如果传入节点已经存在，那么就转移他的位置
  2、insertBefore如果参照null，那就跟appenChild执行相同操作，返回插入的节点
  3、replaceChild(new,old)
  4、removeChild()返回被移除的节点
  5、cloneNode()，传入参数表示是否深拷贝
  deep.childNodes.length在IE9前不一样，cloneNode不会负值JavaScript属性，但是IE会
  6、normallize()，处理文本节点
• Document类型
  1、document对象是HTMLDocument的一个实例，表示整个HTML页面，是window对象的一个属性
  2、document.documentElement是html节点，也可document.childNodes[0]或firstChild获取
  3、document.body，document.doctype
  
  
  4、文档节点是只读的，而且只能有一个元素子节点（该子节点通常早已存在）
• 文档信息：URL，domain和referrer，只能给domain设置一定的值，设置跨域，松散到紧绷出错
• 查找元素
  1、IE8及低版本不区分id大小写
  2、IE7及低版本利用id查找时，如果有表单元素name属性和id一样且先出现，回取到表单元素
  3、HTMLCollection对象：可以用方括号或item()和length，还有nameItem索引元素；方括号传入数值会调用item()，传入字符串会调用nameItem
  4、IE会将注释实现为节点
  5、getElementByTagName可以不区分大小写
  6、getElementByName，只有HTMLDocument类型才有
• 特殊集合
  1、document.anchors，带有name的a
  2、document.forms，document.images
  3、document.links，带有href的a
• DOM一致性检测：hasFeature()
• 文档写入
• Element类型
  1、nodeName和tagName返回值相同，输出的是大写
  2、HTML元素：id，title，lang，dir，className
  3、取得特性：getAttribute(),setAttribute(),removeAttribute()，类用class不是className
  4、IE会为自定义特性创建属性
  5、style通过属性获得的是对象，通过getAttribute()获得的是字符串；事件处理函数通过属性获得的是JavaScript函数，通过getAttribute()获得的是字符串
  6、IE7及之前通过getAttribute()获得的和属性获得的一样，setAttribute()设置class和style和事件处理没有效果
  7、div.color = "red”； alert(div.getAttribute("color)) //null，IE除外 8、IE6及以前版本不支持removeAttribute()
• attribute属性：遍历元素特性
• 创建元素
  1、IE7及更早版本创建元素存在问题P288
  2、creatElement两种参数
  3、元素也支持getElementByTagName
• Text类型
  1、appendData(text),deleteData(offset,count),insertData(offset,text),replaceData(offset,count,text),splitText(offset),substringData(offset,count)
  2、length属性，且nodeValue.length和data.length保存有同样的值
  3、修改文本节点时字符串会经过HTML编码
  4、创建文本节点，document.creatTextNode
  5、规范文本节点：相邻文本节点合并，父文本节点调用normalize()方法
  6、分割文本节点：splitText()传入开始位置，返回新节点
• comment类型
  1、与文本节点类似，除splitText的方法
  2、document.creatComment
  3、如果要访问注释节点，确保他们是html后代
• CDATASection类型，只针对XML文档
• DocumentType类型，只有firefox，opera，safari，chrome4支持
  不能动态创建，只能通过解析文档代码创建
• DocumentFragment类型：文档片段
• Attr类型

DOM操作技术

• 动态脚本
  1、IE不允许访问scipt子节点，如appendChild，可以用script.text指定JavaScript代码
• 动态样式
  获取headvar head = document.getElementByTagName("head")[0],IE不允许访问style子节点,style.styleSheet.cssText=“CSS样式”，慎用这个属性
• 操作表格
  
  < tr >元素添加的属性和方法：cells，deleteCell()，inserCell()
• NodeList，和NamedNodeMap，HTMLCollection都是动态的

DOM的拓展

选择符API

• querySelector()和querySelectorAll()，接收参数为CSS选择符，可以通过Document或Element类型实例调用，支持浏览器IE8+,firefox3.0，safari3.1，opera10+和chrome
• querySelectorAll()返回一个NodeList实例，带有所有属性和方法的NodeList，底层实现类似于一组元素的快照，而非不断对文档进行搜索的动态查询，可以用方括号和item()取得每个元素
• matchesSelector()，元素调用它，传入CSS选择符，如果元素与选择符匹配就返回true，不同浏览器支持不同，最好编写个包装函数

元素遍历

• 元素间空格，IE9及之前版本不会返回文本节点，其他浏览器都会
• childElementCount，firstElementChild，lastElementChild，previousElementSibling，nextElementSibling
• IE9+,Firefox3.5.safari4，opera10+和chrome

HTML5

• getElementByClassName：返回的是NodeList，所以也有性能问题，IE9+,Firefox3+，safari3.1，opera9.5+和chrome
• classList
  1、DOMTokenList实例，length，【】，item()方法
  2、add(),contains(),remove(),toggle()
  3、firefox3.6+和chrome
• 焦点管理
  1、document.activeElement指向获得焦点的元素
  2、文档加载时为null，刚加载完为body
  3、document.hasFocus()，文档是否获得了焦点
  4、IE4+,Firefox3+,safari4+,opera8+和chrome
• HTMLDocument的变化
  1、readyState：loading，complete
  2、IE4+,Firefox3.6，safari，chrome和opera9+
• 兼容模式
  1、document.compatMode：CSS1Compat，BACKCompat
  2、Firefox，safari3.1+，IE,chrome，opera
• head属性
  实现document.head的有safari5+和chrome

var head = document.head || doument.getElementByTagName("head")[0]

• 字符集属性
  1、document.charset，所有浏览器
  2、document.defaultCharset，IE,safari,chrome
• 自定义数据属性
  1、data-开头
  2、元素的dataset属性里访问，DOMStringMap实例，属性名没有data-
  3、Firefox6+,chrome
• 插入标记
  1、innerHTML，插入script元素不会执行脚本，IE8-在一定情况下会执行，不同浏览器返回文本格式不同
  2、大多数浏览器支持直观方式通过innerHTML插入style元素，IE8-需要一定条件
  3、不支持innerHTML元素：

<col> <colgroup> <frameset> <hea> <html> <style> <table> <tbody>
 <thead> <tfoot>  <tr>

4、IE8-,title也没innerHTML
5、Firefox在XHTML文档中设置innerHTML有严格要求
6、window.toStaticHTML()方法
7、outerHTML,不同浏览器返回格式不同，IE4+,safari4+,opera8+和chrome。Firefox7及之前版本都不支持
8、insert’AdjacentHTML(),第一个参数：“beforebegin”，“afterbegin”，”beforeend“，”afterend“，第二个参数为html字符串，Firefox8+及其他浏览器
9、内存与性能：删除某个元素带有事件处理程序或引用了一个JavaScript对象作为属性，使用上述三个方法前最好手动删除被替换元素事件处理程序和JavaScript对象属性；innerHTML,outerHTML会创建HTML解析器，所以快，但是过多会影响性能

• scrollIntoView()，可传入true或false，为元素设置焦点也会导致浏览器滚动并显示出元素，IE,Firefox，safari，opera

专有拓展

• 文档模式：页面的文档模式决定了可以使用什么功能（IE)
  要强制以某种模式渲染页面，可以使用HTTP头部信息X-UA-Compatible或等价meta标签

<meta http-equiv="X-UA-Compatible" content-"IE=IEVersion">

document.documentMode返回页面的文档模式

• children
  1、Firefox3.5，safari3，opera8，chrome，IE9
• contains(),IE,firefox9+,safari,opera,chrome；compareDocumentPosition()，返回掩码，IE9+,Firefox，safari，opera9.5+,chrome
• innerText,IE4 +，safari3+，opera8+,chrome；outerText,（忽略行内样式和脚本）,IE4 +，safari3+，opera8+,chrome；textContent（返回行内样式和脚本）IE9+,Firefox，safari3+，opera10+,chrome
• 滚动
  1、scrollIntoView，scrollIntoViewIfNeeded(bool)，作用对象为元素容器，safari和chrome
  2、scrollByLines()，scrollByPages()，影响元素自身，safari和chrome

第十二章

• XML命名空间

样式

• HTML元素在JavaScript中有一个style属性，一般浏览器cssFloat，IE浏览器styleFloat
• CSSValue包含cssText和cssValueType，cssText与getPropertyValue返回值相同，cssValueType为值类型
• 计算样式：getComputedStyle()，返回值的表示格式因浏览器而异，所有计算的样式都是只读
  1、IE不支持，但是有currentStyle
  2、不同浏览器CSS默认属性可能不同
• 操作样式表
  1、CSSStyleSheet
  
  insertRule(rule,index)，指定位置插入rule字符串，IE不支持，但支持类似的addRule()方法
  2、不同浏览器document.styleSheets返回的样式表也不同
  3、也可通过< link > 或< style >元素获取CSSStyleSheet对象

function getStyleSheet(element){
 return element.sheet || element.styleSheet;       //IE支持stylesheet
 }
 var link = document.getElementByTagName("link")[0];
 var sheet = getStyleSheet(link);

• CSS规则，CSSRule是基类型，CSSStyleRule类型最常见
• cssText包含选择符文本花括号等，只读；style.cssText只包含样式信息，可以被重写
• 创建规则：insertRule()，两个参数：规则文本和插入位置，样式表调用；IE8-用addRule()，三个参数
• 删除规则：deleteRule()，参数为删除规则的位置，IE用removeRule()
• 元素大小：
  1、偏移量：offsetHeight,offsetWidth,offsetLeft,offsetTop；offsetParent不一定和parentNode相等，td的offsetParent是table，因为table是DOM中距td最近的一个具有大小的元素，所有这些变量为只读，每次访问需要重新计算，要避免，可以存在局部变量中。表格和内嵌框架布局的页面得到的值可能有偏差，因为不同浏览器实现这些元素的方式不同。
  2、客户区大小，client-----。滚动条占用空间不算。与偏移量一样，只读，每次计算。
  3、滚动大小：scroll-----。
  4、不同浏览器scroll和client可能不一致
  5、确定元素大小：IE,Firefox3+,safafri4+,opera9.5+,chrome。getBoundingClientRect()，返回一个矩形对象，包含元素在页面中相对于视口的位置。IE8-会把（2，2)作为起点坐标

遍历

• NodeIterator类型：document.creatNodeIterator()
  1、四个参数：root搜索起点；whatToShow访问哪些节点的数字代码；filter，NodeList对象，表示应该接受还是拒绝某种特定的节点的函数；entityReferenceExpansion，HTML中无用。
  2、whatToShow：掩码，通过一个或多个过滤器确定访问哪些节点
  3、NodeFilter对象，accept-Node方法
  4、NodeIterator类型两个主要方法：nextNode()，previousNode()
• TreeWalker
  1、方法：nextNode()，previousNode()，parentNode()，firstChild()，lastChild()，nextSibling()，previousSibling()
  2、创建：document.creatTreeWalker
  3、参数：和NodeIterator相同
  4、currentNode，表示上一次遍历返回的节点
  5、IE没有对应的类型和方法

范围

• DOM中的范围
  1、document.creatRange()
  2、属性和方法：startContainer，startOffset，endContainer，endOffset，commonAncestorContainer
  3、selectNode()，selectNodeContents()，两者都接受一个DOM节点，用该节点信息填充范围
  4、精细控制范围：setStartBefore，setStartAfter，setEndBefore，setEndAfter
  5、复杂选择：setStart(),setEnd()
• 操作范围中的内容
  1、创建范围时，内部为范围创建文档片段
  2、删除：deleteContents()，extractContents()，后者会返回删除的内容
  3、克隆：cloneContents()
  4、插入：insertNode()向范围内插入节点，surroundContens()
  5、折叠DOM范围：collapse()，传入一个布尔值，可以判断两节点是否紧密相连
• 比较范围
  1、compareBoundaryPoints(比较方式，比较范围)
• 复制范围：cloneRange()
• 清理DOM范围

range.detach();range=null;

• IE8-的范围

事件

事件流

• 事件冒泡，事件捕获；IE8-不支持DOM事件流

事件处理程序

• HTML事件处理程序
  1、“DOM2级事件”，addEventListener()，removeEventListener()；参数：接收事件，处理函数，布尔值，IE9+和其他浏览器，运行在所属元素作用域，按添加顺序触发
  2、addEventListener()添加的匿名函数无法用removeEventListener()删除
  以下方式可以删除

var handle = function(){};
element.addEventListener("click",handle,false);
element.removeEventListener("click",handle,false)

• IE事件处理函数：attachEvent()，detachEvent()，只支持冒泡，要加on，程序在全局作用域中执行，this指向window，按添加的反序触发
• 跨浏览器的事件处理程序

事件对象

• 对象属性和方法
  
  
  1、this始终指向currentTarget的值
  2、cancelable属性设置为true才可以用preventDefault()来取消其默认行为
  3、IE中的事件对象：event=window.event，如果是用attachEvent添加，会有event传入函数，this不一定，用event.srcElement比较保险
  4、跨浏览器的事件对象

事件类型

• UI事件
  1、load：资源加载完后，event.target会被设置为document，IE不会为他设置srcElement
  ；Image对象，无法将其添加到DOM树；script；link
  2、unload：切换界面发生，利用此事件最多是清楚引用，避免内存泄露；event对象只包含target属性，IE8-提供srcElement
  3、resize：target=document，IE8-无；Firefox会在停止调整才触发，其他浏览器一直触发，频繁指向会影响性能
  4、scroll
• 焦点事件
  1、与document.hasFocus()和document.activeElement配合使用
  2、属性：blur、focus、focusin(只冒泡)、focusout
• 鼠标与滚轮事件
  1、click、dbclick、mousedown、mouseenter(不冒泡)、mouseleave(不冒泡)、mousemove、mouseout、mouseover，mouseup
  2、IE8-在双击事件会有bug
  3、clientX，clientY,pageX,pageY；IE8-不支持page，可用滚动区算出来；screenX，screenY
  4、修改键：属性：shift，ctrl，alt，meta，都是布尔值；IE8-不支持meta
  5、相关元素：relatedTarget；IE8-提供不一样的属性
  6、鼠标按钮：button属性
  7、如果按下或释放的不是主鼠标按钮，Opera不会触发mousedown或mouseup事件
  8、更多信息事件：detail
  9、鼠标滚轮事件：mousewheel(除firefox)，可设置任何元素，冒泡到document(IE8-)，window(其他)；属性：wheelDelta，前滚正数，后滚负数，opera早期版本相反；Firefox是DOMMouseScroll，可设置任何元素，冒泡window，信息在detail属性中，反向
  10、触摸设备：实现特别
  11、无障碍性问题
• 键盘与文本事件
  1、keydown，keypress，keyup，前两者按住不放会重复触发
  2、非字符键没有keypress
  3、一样有修改键
  4、键码：keyCode属性；分号键各浏览器返回值不一定相同
  5、charCode，只有keypress有，ASCII码，不同浏览器实现不同
  6、String.fromCharCode()，返回字符
  7、DOM3级变化：key，char，keyIdentifier，location；不推荐
  8、textInput事件：属性(IE9+,safari和chrome)：data，inputMethod(IE)
  9、设备中的键盘按键
• 复合事件
• 变动事件
  1、删除节点：DOMNodeRemove，DOMNodeRemoveFromDocument，DOMSubtreeModified
  2、插入节点：DOMNodeInserted，DOMNodeInsertedIntoDocument，DOMSubtreeModified
• HTML5事件
  1、contextmenu：鼠标事件，事件对象含有光标位置信息，通常用来显示自定义菜单，click来隐藏菜单
  2、beforeunload：询问是否离开，P409
  3、DOMContentLoaded：形成完整DOM树后就触发，IE9+,Firefox，safari3.1，chrome，opera9+；
  4、readystatechange：IE,Firefox4+,opera
  5、pageshow和pagehide：Firefox和opera的“往返缓存”特性；pageshow事件的目标为document，但是必须挂载到window上；event包含persisted布尔属性，页面是否保存在bfcache中；pagehide和pageshow差不多；onunload页面自动不会bfcache；Firefox，safari5+,chrome,opera；IE9-不支持
  6、hashchange：添加给window，属性：oldURL,newURL；浏览器支持不同，最好还是用location
• 设备事件
  1、orientationchange事件；Mozorientation；deviceorientation事件，devicemotion
• 触摸与手势事件
  1、触摸事件：touchstart，touchmove，touchend，touchcancel，touches，targetTouches，changeTouches；Touch对象
  2、手势事件

内存和性能

• 事件委托：click，mousedown，mouseup，keydown，keyup和keypress。虽然mouseover和mouseout事件也冒泡，但是不好处理
• 移除事件处理程序：事件处理程序中删除元素也可以阻止冒泡，元素存在文档中是冒泡的前提；情况一：纯粹DOM操作删除带有事件处理程序的元素，情况二：innerHTML替换页面，情况三：卸载页面

模拟事件

• creatEvent()创建event对象，传入类型字符串
• dispatchEvent()，传入event对象
• 创建对象；初始化对象；触发事件
• 自定义DOM事件：createEvent(“CustomEvent”)；返回对象有initCustomEvent方法接收四个参数
• IE中的事件模拟：document.createEventObject

第十四章

表单的基础知识

• HTMLFormElement类型，独有的属性和方法
  1、acceptCharset，action，elements，enctype，length，method，name，reset()，submit()，target
  2、document.forms可以获取所有表单，再通过索引或name取得特定表单
  3、图像按钮：<input type="image" src="...." >，submit的input或button，三者都会提交表单；除了textarea，表单控件有焦点时，按回车会提交表单，如果没有提交按钮按回车不会提交表单；提交表单前触发submit事件，可以阻止默认行为取消表单提交
  4、表单submit()方法提交不会触发submit事件
• 重置表单：触发reset事件，可以reset()方法触发，且会触发reset事件
• 表单字段
  1、elements属性，可以按照name和位置访问
  2、name访问多个单选按钮会返回NodeList
  3、除了fielset元素，所有表单元素都有同一组属性：disable，form，name，readOnly，tabIndex，type，value，除了form属性都可以动态修改，select的type属性是只读的
• 公有的方法
  1、blur(),focus()，如果字段被隐藏，focus()会报错
  2、autofocus属性
• 表单字段事件
  1、blur，change，focus ；blur(),focus()会触发事件

文本框脚本

• text和textarea
• 处理文本框的值最好不要用DOM方法。对value属性做的修改，不一定会反应在 DOM中
• textarea不能设置对大字符数
• 选择：select()，获取焦点并选中所有文本，触发select事件；取得选中文本，表单元素属性，selectionStart和selectionEnd；IE有自己的document.selection对象
  1、选择部分文本：setSelectionRange，接收第一个和最后一个字符索引，调用后要立即给文本框设置焦点才能看到选择的文字，IE8有自己的方法
• 过滤输入
  1、屏蔽字符：keypress事件
  2、操作剪切板：copy，cut，paste，beforecopy，beforecut，beforepaste
• 自动切换焦点，keyup时检测value长度
• HTML5约束验证API
  1、必填字段，对于空着的字段，不同浏览器有不同的处理
  2、其他输入类型，email或url
  3、数值范围，max，min，step
  4、输入模式，pattern
  5、检测有效性：表单字段和表单都有checkValidity()方法，判断依据为前面的约束；validity对象，每个属性返回布尔
  
  6、禁用验证：nocalidate；表单按钮不验证表单：formnovalidate

选择框脚本

• selection，option元素
• 属性和方法：
  1、add(new,old)，old前加新option
  2、multiple：布尔值，是否多项选择，等价于HTML中的multiple特性
  3、options：所有option的HTMLCollection
  4、remove(index)：移除给定位置选项
  5、size：选择框中可见行数，等价于HTML的size
  6、selectedIndex
• 不推荐用DOM技术修改option元素的文本或值；将表单元素作为DOM节点，实际交互方式根据浏览器会有不同，select的change事件触发条件不用失去焦点，其他表单字段要

var value = select.options[0].getAttribute("value");       //不推荐
var value = select.option[0].value                       //推荐

• 选择选项，selectedIndex，只有一项，selected属性，可以多项
• 添加选项：DOM方法，Option构造函数(文本，值)，都appendChild到元素中，IE8-会出现问题；add()方法，新选项和新选项后的选项
• 移除选项：DOM方法，removeChild；选择框方法，remove(index)，会重置每一项的index；设置为null
• 移动和重排选项：appendChild，重置每项index；重排也用DOM方法

表单序列化

富文本编辑

• 本质：iframe，设置designMode属性(页面加载完才能设置)
• contenteditable属性，不需要iframe
• 操作富文本：document.execCommand()，三个参数；queryCommandEnable()；queryCommandState
• 富文本选区：getSelection，返回Selection对象
• 表单与富文本

第十五章

基本用法

• 设置宽高和后备信息；获取元素——>getContext(“2d”)，检查存不存在这个方法
• toDataURL()可以导出canvas元素上绘制的图像，接收图像的MIME类型格式，如果图像源来自不同域，会报错

2D上下文

• 填充和描边：fillStyle，strokeStyle
• 绘制矩形：fillRect()、strokeRect()、clearRect()，都接收xy坐标，宽高，单位都是px
• stroke：lineWidth线条宽，llineCap线条末端形状，lineJoin相交方式
• 绘制路径
  1、beginPath()
  2、arc(),arcTo(),bezierCurveTo(),lineTo(),moveTo(),quadraticCurveTo(),rect()
  3、closePath(),fill(),stroke(),clip()
  4、isPointInPath(),判断xy坐标点是否在路径上
• 绘制文本
  1、fillText，strokeText，参数：文本字符串，xy坐标，最大像素宽度
  2、属性：font，textAlign，textBaseline；textAlign和textBaseline会影响xy坐标点
  3、辅助确定文本大小：measureText()，传入文字字符串，返回TextMtrics对象，有width属性
• 变换
  1、rotate，scale，translate，transform，setTransform
  2、save()保存绘图上下文设置和变换，restore()
• 绘制图像
  1、drawImage()，HTMLimg元素，xy开始坐标，目标宽高；九个参数类型；也可以传入canvas作为第一个参数
  2、canvas对象可以用toDataURL()
• 阴影
  1、属性：shadowColor，shadowOffsetX，shadowOffsetY，shadowBlur
  2、浏览器支持不同
• 渐变
  1、CanvasGradient实例
  2、creatLinearGradient()，参数：开始坐标，结束坐标，返回CanvasGradient实例
  3、addColorStop()指定色标，参数：色标位置，CSS颜色值。色标位置是0到1
  4、fillStyle，strokeStyle可以设置为CanvasGradient实例
  5、径向渐变：creatRadialGradient()，接收六个值
• 模式
  1、creatPattern()，HTMLimg元素和一个如何重复的字符串，第一个参数也可以是video或canvas
• 图像数据
  1、getImageData()，接收坐标和宽高，返回ImageData对象，有三个属性：width，height，data
  2、putImageData
• 合成
  1、属性：globalAlpha，globalCompositionOperation
  2、不同浏览器有差异

WebGL

1、3D上下文

• 类型化数组
  1、ArrayBuffer类型：new创建，分配字节，属性：byteLength包含的字节数
  2、视图：ArrayBuffer创建数组缓冲器视图，最常见视图DataView对象：参数：ArrayBuffer实例，偏移量，字节数；属性：byteOffset，byteLength；读取写入DataView：选择相应的getter和setter
  3、类型化视图，也成为类型化数组，参数和DataView一样
• WebGL上下文
  1、先检查支不支持
  2、getContext传入第二个参数可以设置上下文选项
  3、常量，命名方法，准备绘图，视口与坐标，缓冲区，错误，着色器，编写着色器，编写着色器程序，为着色器传入值，调试着色器和程序，绘图，纹理，读取像素
• 支持：Firefox4+，chrome；safari5.1，但是默认禁用。
  1、浏览器支持，计算机升级显示驱动程序

第十六章

跨文档消息传递（XDM）

• 核心：postMessage()方法，参数：消息，消息接收方的域

var frame = document.getElementById("myFrame").contentWindow;        
//所有支持XDM的浏览器也支持contentWindow
frame.postMessage("secret","http://www.wrox.com");

1、收到消息触发message事件(异步)，event中传来三个参数：data，origin，source
2、IE8+,Firefox3.5+，safari4+，opera，chrome和IOS版safari，Android版webkit

原生拖放

• 拖放事件：dragstart，drag，dragend；drag会持续触发
  1、某个元素拖动到有效的放置目标时，dragenter，dragover，dragleave或drop；dragover持续触发
• 自定义放置目标
  1、重写dropenter和dropover的默认行为将元素变为可放置目标
  2、Firefox的drop事件触发默认行为，也需要关闭
• dataTransfer对象
  1、getData(),setData()；getData()参数：表示保存数据类型的字符串，“text”或“URL",setData第一个参数也是这个
  2、dataTransfer对象中的数据只能在drop事件处理函数中被读取
  3、Firefox5-映射存在问题，需要兼容
  4、IE10-不支持MIME类型名，会抛出错误
• dropEffect和effectAllowed
  1、dataTransfer对象的两个属性
  2、dropEffect：none，move，copy，link；被拖动元素能够执行哪种行为；必须在dragenter事件处理程序中进行设置；只有和effectAllowed搭配才有用
  3、effectAllowed，允许拖动元素的哪种dropEffect；uninitialized，none，copy，link，move，copyLink，copyMove，linkMove，all；必须在dragstart事件处理程序中设置
  4、Firefox5-会有bug
• 可拖动
  1、draggable
  2、IE10+,Firefox4+，safari5+和chrome。opera11.5-不支持，Firefox需要另加事件，IE9,safari4-需要特别设置
• 其他成员
  1、addElement()，clearData()，setDragImage(),types

媒体元素

• video，audio
  1、src，poster，controls，source，type，codecs
• 属性
  
• 事件
  
• 自定义媒体播放器
  1、play()，pause()
• 检测编辑器的支持情况
  1、canPlayType()，接收格式/编解码器字符串，返回”maybe“，”probably“，”“。
• Audio类型
  1、具有原生构造函数，和Image类似，但是不必加入到文档中，创建实例，传入音频源文件即可

历史状态管理

• history.pushState()，参数：状态对象，新状态的标题，可选的相对URL
  1、执行后会将新的状态信息加入历史状态栈，浏览器地址栏也会变成新的相对URL，但是浏览器不会真的向浏览器发送请求，虽然location.href也会返回地址栏中的地址。
  2、第一个参数应该尽可能提供初始化页面状态所需的信息
  3、pushState()会触发window的popstate事件，事件对象state是当前状态
  4、更新当前状态：replaceState，参数和pushState()前两个参数相同，不会创造历史，只是重写当前状态
  5、支持状态管理浏览器：Firefox4+，safari5+,opera11.5+和chrome。safari和chrome中两者不能包含DOM元素，Firefox支持

第十七章

浏览器报告的错误

• IE,firebug，safari，opera，chrome

错误处理

• try-catch语句
  不同浏览器中error存储着不同的信息，message是共有的

try{
   somefunction();
   }catch(error){
   	alert(error.message)
   	}

• finally子句
  1、无论如何会执行，try-catch中有return语句也会
• 错误类型
  1、Error：基类型
  2、EvalError：没有把eval当函数调用
  3、RangeError：数值超出范围错误
  4、ReferenceError：找不到对象
  5、SyntaxError：错误的语法传入eval（)
  6、TypeError：变量类型不符合要求，访问不存在方法
  7、URIError：URI格式不正确
  8、要想确定类型，可以在catch中用instanceof判断
• 抛出错误：throw
  1、抛出错误后会立即停止执行代码，可以throw任何类型的值

throw 123;
throw new Error("error happen")    //两者都可

2、可以通过原型链继承自定义错误类型

• 错误事件error
  1、opera和safari不支持
  2、不会创建event，但是有message，url，line
  3、事件处理程序中return false阻止浏览器默认报错
  4、图像也支持error事件，且有event
• 错误处理的策略
• 常见的错误类型
  1、类型转换错误，数据类型错误，通信错误
  2、类型转化错误：比较操作符，控制流语句
  3、数据类型的错误
  4、通信错误：将数据发送给服务器前没有encodeURIComponent()编码查询字符串
• 区分致命错误和非致命错误
• 把错误记录到服务器

调试技术

• 将消息记录到控制台
• 将消息记录到当前页面
• 抛出错误
• assert()函数

IE常见错误

• 操作终止、无效字符、未找到成员：event
• 未知运行错误：innerHTML,outerHTML,块元素插入行内元素，访问表格任意部分的任意属性
• 语法错误，系统无法找到指定资源

第二十章

语法

• 简单值：与JavaScript相同，不支持undefined；对象，数组；不支持变量，函数和对象实例
• 简单值：必须双引号

解析与序列化

• JSON对象
  1、方法：stringify()，parse()
• 序列化选项
  1、除了要序列化的JavaScript对象外还可以有两个参数。
  2、第一个是过滤器，数组或函数，返回undefined则忽略属性
  3、第二个是选项，表示是否保留缩进
  4、JSON.stringify顺序：如果存在toJSON()方法且取得值有效，就调用，否则默认顺序执行；如果有过滤器，对上一步结果过滤；对上一步序列化；如果有第三个参数，进行格式化
• 解析选项
  1、也可以传入个还原函数，和过滤器差不多，返回undefined表示删除属性
  2、日期字符转化为Data时常用还原函数
• IE8+,firefox3.5,safari.4+,opera10.5,chrome

第二十一章

XMLHttpRequest对象

• XHR用法
  1、xhr.open(“get”,”url",false)，url可以是相对也可以是绝对，只能向同一个域中相同端口和协议的URL发送请求
  2、xhr.send()，接收一个参数，作为请求主题发送的数据，没有就传null
  3、收到响应后，响应数据会自动填充XHR对象属性：responseText，responseXML，status，statusText
  4、readyState改变触发readyStateChange事件，且事件处理函数中尽量不用this用xhr实例，因为作用域问题导致某些浏览器失败
  5、接收到响应前还可以用abort()方法取消请求
  6、终止引用后应该对XHR解引用，因为内存关系，不推荐重用XHR对象
• HTTP头部信息
  1、发送xhr请求还会发送头部信息：Accept，Accept-Charset，Accept-Encoding，Accept-Language，Connection，Cookie，Host，Referer，User-Agent
  2、在open后send前设置头部信息，setRequestHeader()方法
  3、getResponseHeader()，传入字段取得值，getAllResponseHeaders()取得所有头部信息的字符串
• GET请求
  1、open()方法URL末尾查询字符串必须经过encodeURIComponent
• POST请求
  1、模仿表单提交，Content-Type头部信息设置为application/x-www-form-urlencoded，serialize()序列化表单元素，通过send发送出去

XMLHTTPRequest2级

• FormData
  1、append()方法传入键值对或new FormData()内传入表单元素
  2、不必设置请求头直接send(FormData)
• 超时设定
  1、XHR对象timeout属性，超时后触发timeout事件
• overrideMimeType()方法，send之前，重写响应的MIME类型
• 进度事件
  1、loadstart
  2、progress，接收响应期间不断出发；属性：lengthComputable，position，totalSize。lengthComputable表示进度信息是否可用布尔值，position已经接收字节数，totalSize根据Content-Length响应头部确定预期字节数
  3、error
  4、abort，因为abort()方法而停止
  5、load，接收到完整响应数据
  6、loadend，通信完成或触发error，abort或load事件

跨资源共享

• 请求添加Origin头部，包含请求页面的源信息，如果服务器认可，就在Access-Control-Allow-Origin头部返回相同的源信息，公共资源返回“*”
• IE对CORS的实现，XDR
• 其他浏览器对CORS的实现
  1、不能setRequestHeader()设置自定义头部
  2、不能接受发送cookie
  3、getAllResponseHeaders()方法总会返回空字符串
  4、open传入绝对URL
• Preflighted Requests
  1、透明服务器验证机制支持使用自定义头部、GET或POST之外的方法，以及不同类型的主体内容
• 带凭据的请求
  1、默认跨域请求不提供凭据，设置withCredentials属性为true，可以指定某个请求应该发送凭据
  2、如果服务器接收，HTTP头部相应，Access-Control-Allow-Credentials：true，如果服务器响应没有包含这个头部就不会把响应交给JavaScript（responseText是空字符串，status为0，调用error事件处理程序）。
• 跨浏览器的CORS：XMLHTTPRequest和XDomainRequest

其他跨域技术

• 图像Ping：跟踪用户点击页面或动态广告曝光次数
• JSONP
  1、两部分：回调函数和数据
  2、回调函数：响应到来页面应该调用的函数；数据：传入回调函数中的JSON数据
  3、通过查询字符串指定JSONP服务的回调函数，通过动态script元素来使用
• Comet：长轮询和短轮询；HTTP流
• 服务器发送事件：SSE围绕只读Comet交互推出的API或者模式
• Web Sockets
  1、WebSocket对象
  2、发送和接收：只能发送纯文本数据

安全

• CSRF(跨站点请求伪造)
  1、SSL，验证码
• 其他安全
  1、POST而非GET
  2、检查URL是否可信
  3、基于cookie验证

第二十二章

高级函数

• 安全的类型检测
• 作用域安全的构造函数
• 惰性载入函数
• 函数绑定
• 函数柯里化

防止篡改对象

• 不可拓展对象：Object.preventExtensions(),Object.isExtensible
• 密封的对象：Object.seal()，Object.isSeal()
• 冻结的对象：Object.freeze，Object.isFrozen()

高级定时器

• 重复的定时器：链式调用
• Yielding Processes：数组分块
• 函数节流

自定义事件

拖放

• 修缮拖动功能
• 添加自定义事件

第二十三章

离线检测

• navigator.onLine，不同浏览器实现存在差异
• onine，offline事件

应用缓存

• CACHE MAINFEST
• 要将文件与页面关联起来需要在html中manifest属性指定这个文件的路径
• API核心：applicationCache对象，status属性，表示当前应用缓存状态
• 事件：checking,error,noupdate,downloading,progress,updateready,cached
• 方法：update(),swapCache()

数据存储

• cookie
  1、限制
  2、cookie的构成：名词，值，域，路径，失效时间，安全标志
  3、JavaScript中的cookie：document.cookie,
  4、子cookie
  5、关于cookie的思考
• IE用户数据
• Web存储机制
  1、sessionStorage和globalStorage，window对象属性存在
  2、storage类型：只能存储字符串clear(),getItem(name),key(index),removeItem(name),setItem(name,value)
  3、sessionStorage对象，保持到浏览器关闭，Storage实例，IE8可以begin()commit()强制写入
  4、globalStorage，不是Storage对象，具体的globalStorage才是，需要指定哪些域可以访问的数据，如globalStorage[“wrox.com”].name,P660
  5、localStorage对象，是Storage实例
  6、storage事件：对Storage对象任何修改都会触发；event属性：domain，key，newValue，oldValue
  7、限制
• IndexDB
  1、操作是完全异步进行的，所以大多数以请求方式进行，每次操作都需要注册onerror或onsuccess事件处理程序，以确保适当的处理结果
  2、浏览器提供前缀

var indexedDB = window.indexedDB || window.msIndexedDB || window.mozIndexDB ||
window.webkitIndexDB

3、数据库，indexedDB就是数据库，使用对象保存数据，而不是表
打开：indexDB.open()，返回IDBRequest对象，添加onerror和onsuccess事件处理程序
成功：event.target都指向request对象，event.target.result中有数据库实例对象
错误：event.target.errorCode保存错误码
版本：成功后的实例对象调用setVersion()方法，传入字符串指定版本，方法返回请求对象，需要指定成功失败事件处理程序
4、对象存储空间：如果传入版本和数据库版本不同，需要创建新的存储空间
add(),put()返回请求对象，保存并指定事件处理程序

var store = database.creatObjectStore("user",{key:"username"});

5、事务：读取修改数据都要用事务

var transaction = database.transaction();

参数：要访问的对象存储空间，如果有多个，可以字符串数组；第二个参数，IDBTransaction
6、取得事务索引后objectStore()传入存储空间名称，就可以访问特定空间，add(),put(),clear(),delete(),get()，他们返回新的请求，需要指定事件处理程序，事务也有事件处理程序，error和complete
7、游标查询：指向结果集的指针，openCourse()，返回请求对象添加事件处理程序；update()可以用指定对象更新当前游标的value；默认游标只会发起一次请求，想再发起，调用continue(),advance()
8、键范围，IDBKeyRange
9、设定游标方向
10、索引，creatIndex()
11、并发问题
12、限制

第二十四章

可维护性

性能

• 注意作用域
  1、避免全局查找
  2、避免with
• 选择正确的方法
  1、避免不必要的属性查找
  2、优化循环
  3、避免双重解释
  4、原生方法较快，switch语句快，位运算符快
• 最小化语句数
  1、多变量声明
  2、插入迭代值
  3、使用数组和对象字面量
• 优化DOM交互

部署

第二十五章

requestAnimama