Javascript权威指南——读书笔记

1、JavaScript核心语法

一、字符串中接受RegExp参数的方法

（1）text.search(pattern)返回首次匹配成功的位置

（2）text.match(pattern)返回匹配组成的数组

（3）text.replace(pattern, '#')返回新字符串

（4）text.split(pattern)

二、字符串不是对象为何会有属性？

只要引用了字符串的属性，JavaScript就会将字符串值经过String()构造函数建立临时对象（包装对象），这个对象继承了字符串的方法，并被用来处理属性的引用。一旦属性引用结束，这个新建立的对象就会销毁。数字和布尔值同理。

字符串、数字和布尔值都是只读的，不等同于对象，其包装对象只是一种实现细节，能够经过String()、Number()、Boolean()显示建立包装对象

三、类型转换：

（1）显示类型转换最简单的方法是使用Boolean()、Number()、String()或Object()函数，还可使用toString()，注意：null和undefined没有toString()方法。

（2）还能够经过运算符进行类型转换，x + '' //等价于String(x)　　+x //等价于Number(x)，也能够写成x-0　　!!x //等价于Boolean(x)

（3）Number类定义的toString()方法能够接收转换基数做为可选参数，n.toString(2) //转换为2进制　　n.toString(8) //转换为8进制　　n.toString(16) //转换为16进制

（4）处理财务或科学数据的时候，在作数字到字符串的转换过程当中，你指望本身控制输出中小数点位置和有效数字位数，或者决定是否须要指数计数法，可能会用到toFixed()、toExponential()和toPrecision()函数

（5）用Number()将字符串转换为数字时，字符串不能出现非数字字符，但parseInt()和parseFloat()能够处理这种状况，parseInt()可接收第二个参数，这个参数指定数字转换的基数

（6）对象转为原始值（字符串或数字），全部的对象继承了两个转换方法：toString()和valueOf()

　　a.对象转为字符串过程：a.1 若是对象具备toString()方法，则调用这个方法，返回一个原始值　　a.2 若是对象没有toString()方法或者这个方法并不返回一个原始值，则调用valueOf()方法，若是返回的是原始值，则将返回的原始值转换为字符串（若是自己不是字符串的话）　　a.3 不然，JavaScript没法从toString()或valueOf()得到一个原始值，所以这时它将抛出一个类型错误异常　　ex：自定义的普通对象（{}）没有toString()和valueOf()方法，调用这两个方法将会抛出类型错误异常

　　b.对象转为数字过程：b.1 若是对象具备valueOf()方法，而且返回的是原始值，则将返回的原始值转为数字（若是自己不是数字的话）　　b.2 不然，若是对象具备toString()方法，返回一个原始值，并将其转换为数字返回　　b.3 不然，JavaScript抛出一个类型错误异常　　ex：[] == 0 // true 空数组首先调用valueOf()方法，但返回的不是原始值而是空数组这个对象自己，因此继续调用toString()方法，返回一个原始值空字符串，空字符串转换为数字0，结果为true

四、表达式

　　表达式是JavaScript中的一个短语，JavaScript解释器会将其计算出一个结果，常量和变量名都是简单的一种表达式，复杂表达式由简单表达式组成，经常使用方法是使用运算符（arr[1]、fn(1)都属于复杂表达式）

（1）原始表达式：表达式的最小单位，再也不包含其余表达式，原始表达式包含常量或直接量、变量和关键字

（2）数组和对象的初始化表达式：数组直接量或对象直接量，它们不是原始表达式，由于它们所包含的成员都是子表达式（[[1,2,3], [4,5,6]], {a: {b: 1}}）

（3）函数定义表达式：函数直接量，function (x) {return x*x}

（4）属性访问表达式：两种语法，expression.identifier和expression[expression]，使用属性访问表达式的时候，'.'和'[]'前面的表达式会首先计算，若是结果是null或undefined，则会抛出类型异常错误，若是结果不是对象（或数组），JavaScript会将其转换为对象。若是命名的属性不存在，表达式的值就是undefined

（5）调用表达式：是一种调用函数或方法的语法表示，fn(0)、Math.max(1, 2)、a.sort()

（6）对象建立表达式：建立一个对象并调用一个函数（构造函数）初始化新对象的属性，new Object()，不须要传参的话圆括号能够省略，new Object

五、运算符

（1）一元运算符、赋值和三元运算符都具备从右至左的结合性

（2）运算符的反作用：赋值运算符会有反作用（若是给一个变量或属性赋值，那么使用这个变量或属性的表达式的值都会受到影响），'++'和'--'类型，由于它们包含隐形的赋值，delete运算符一样具备反作用，删除一个属性就像给这个属性赋值undefined。ex: var a = 1; b = (a++) + a // 3 这里初学者可能会计算成2，a++产生的反作用影响了后面的a

（3）JavaScript中全部的数字都是浮点型的，除法运算的结果也是浮点型，'%'运算的结果符号和第一个操做数的符号一致（-5 % 2 = -1）

（4）'+'号的转换规则优先考虑字符串链接（一个操做数是字符串，另外一个操做数将会转为字符串），若是两个操做数都不是字符串的话，则进行算数加法运算。当加号和字符串和数字一块儿使用时，须要考虑加法的结合性对运算顺序的影响，ex：1 + 2 + 'bind' // '3bind'　　1 + (2 + 'bind') // '12bind'

（5）'=='类型转换：

　　对象转换原始值规则：对象经过toString()或valueOf()转换为原始值，JavaScript的核心内置类首先尝试使用valueOf()，再尝试使用toString()，除了日期类，日期类只使用toString()转换。那些不是JavaScript语言核心中的对象则经过各自的实现中定义的方法转换为原始值（{}=>Object()=>Object().toString()=>'[object Object]'）

　　'1' == true // true (true => 1, '1' => 1)

（6）加号运算符和比较运算符

　　加号运算符更偏心字符串，若是其中一个操做数是字符串的话，则进行字符串链接；比较运算符更偏心数字，只有在两个操做数都是字符串的状况下，才进行字符串链接。

　　'1' + 2 // '12'　　'11' < 2 // false

（7）in运算符

　　in运算符但愿左操做数是一个字符串或能够转换成字符串，右操做数是一个对象

　　var object = {x: 1, y: 2}　　'x' in object // true　　'toString' in object // true（对象继承了toString()方法）

　　var arr = [7, 8, 9]　　'0' in arr // true　　1 in arr // true（数字转换为字符串）　　3 in arr // false（没有索引为3的元素）

（8）instanceOf运算符

　　instanceOf运算符但愿左操做数是一个对象，右操做数是类（类是经过初始化它们的构造函数来定义的）。若是左操做数不是对象，将返回false；右操做数不是函数，则抛出类型错误异常。instanceOf的原理是原型链，经过原型链查找对象是否存在

　　var d = new Date()　　d instanceOf Date // true　　d instanceOf Object // true

（9）'&&'和'||'

　　常见用途：a. 有条件地执行代码 (a==b) && stop　　b. 提供默认值 function fn(p) {p = p || {}}

（10）delete运算符

　　var arr = [1,2,3]　　delete arr[2]　　2 in a // false　　arr.length // 3（delete不会改变数组长度，[1, 2, empty]）

（11）逗号运算符

　　逗号运算符是二元运算符，经常使用场景是在for循环中

　　for (var i = 0, j = 10; i < j; i++, j--) {console.log(i + j)}

六、语句

　　表达式是计算出一个值，语句是用来执行以使某件事发生。JavaScript程序是一系列可执行语句的集合

（1）表达式语句

　　具备反作用的表达式（赋值或函数调用）。++、--、delete、alert()

（2）复合语句和空语句

　　复合语句：　　　　　　　　　　空语句：for (i = 0; i < a.length; a[i++] = 0) ;　　使用空语句最好加上注释说明：for (i = 0; i < a.length; a[i++] = 0) /* empty */ ;

　　{

　　　var i = 1;

　　　console.log(i)　

　　}

（3）声明语句（var和function）

　　声明语句用来建立变量或函数。函数定义表达式，使用var，只有变量声明提早了，变量的初始化代码仍在原来的位置；而函数声明，函数名称和函数体均提早，能够在函数声明以前调用它

（4）条件语句

　　若是在函数中使用switch语句，能够用return代替break来停止switch语句。case关键字后能够跟任意表达式。对每一个case的匹配操做是'==='比较。

（5）循环

　　JavaScript有四种循环语句：while、do/while、for、for/in。

　　for循环中三个表达式均可以省略，可是两个分号必不可少。若是省略text表达式，则是死循环。死循环的两种写法：while(true)、for(;;)

　　for (variable in object)用来更方便地遍历对象属性成员，若是object表达式为null或undefined，JavaScript解释器会跳过循环并执行后续的代码，若是表达式是一个原始值，这个原始值将会转换为与之对应的包装对象

（6）跳转

　　标签语句：identifier: statement

　　mainloop: while(token !== null) {

　　　　continue mainloop

　　}

　　当但愿用break跳出非就近的循环体或switch语句时，能够用到带标签的break语句，跳出标签指定的语句

　　注意：对于一条带标签的函数定义语句来讲，不能从函数内部经过标签跳转到函数外部

　　包含continue的while和for的表现行为不一样，for会首先执行increment表达式再执行test表达式，而while直接执行test表达式

（7）throw语句

　　在JavaScript中，当产生运行时错误或使用throw语句时就会显示抛出异常。使用try/catch/finally能够捕获异常

　　throw expression;

　　JavaScript抛出异常时一般采用Error类型和其子类型：if (x < 0) {throw new Error('x不能是负数')}，当抛出异常时，会当即中止当前正在执行的逻辑，并跳转至就近的异常处理程序，若是抛出异常的代码块没有一条相关联的catch从句，解释器会向更高层的代码块寻找，若是没有找到任何异常处理程序，JavaScript将把异常看成程序错误来处理，并报告给用户

　　try从句定义了须要处理异常的代码块，当try从句某处发生了异常时，调用catch代码块内的逻辑，无论try中是否发生异常，finally代码块内的逻辑总会执行；无论try中是否有break、continue或return语句，finally中代码始终会执行，利用这点能够作到while循环模拟包含continue的for循环，但当循环体body中有break时状况又不一样了，因此使用while来彻底模拟for是不可能的

　　try{}　　catch(e){}　　finally{}

（8）with语句

　　with语句用于临时扩展做用域链。

　　with(object)

　　statement

　　这条语句将object添加到做用域链的头部，而后执行statement，最后把做用域链恢复到原始状态

　　应用场景：在对象嵌套层次很深的时候会使用with语句简化代码编写

　　document.forms[0].address.value

　　with(document.forms[0]) {

　　　　name.value = ''

　　　　address.value = ''

　　}　　

　　不用with的等价代码能够这样写：var f = document.forms[0]　　f.address.value = ''

　　只有在查找标识符的时候才会用到做用域链，建立新变量的时候不会用它

　　with(0) x=1;　　若是对象o没有x属性，那么这段代码和不使用with的代码x=1是同样的

　　尽量避免使用with语句，由于with语句运行起来比较慢

七、对象

　　对象的属性名是字符串。对象分为：内置对象（数组、函数、日期、正则表达式）、宿主对象（HTMLElement）、自定义对象。属性分为：自有属性和继承属性。属性有3个属性特性：可写（是否能够设置该属性的值）、可枚举（是否能够经过for/in循环返回该属性）、可配置（是否能够删除或修改该属性）。对象有3个对象特性：对象的原型、对象的类、对象的扩展标记（指明了是否能够向该对象添加属性）

（1）建立对象

　　能够经过对象直接量、关键字new和Object.create()建立

　　var o  = {}　　var o = new Object()

　　Object.create()第一个参数是这个对象的原型，第二个可选参数用以对对象的属性进一步描述。var o1 = Object.create({x: 1, y: 2}) // o1继承了x和y属性　　var o2 = Object.create(null) // o2不继承任何属性和方法（包括toString()等）　　var o3 = Object.create(Object.prototype)

（2）删除属性

　　delete只能删除自有属性，不能删除继承属性。delete只是断开属性和宿主对象的联系。a = {p: {x: 1}};b = a.p;delete a.p; 执行以后b.x的值依然是1，已删除的属性的引用仍然存在，可能会形成内存泄漏。

（3）检测属性

　　in：若是对象的自有属性或继承属性中包含这个属性，返回true

　　对象的hasOwnProperty()方法：检测给定的名字是不是对象的自有属性，是则返回true

　　对象的propertyIsEnumerable()方法：检测给定的名字是自有属性且这个属性的可枚举性为true时，返回true

（5）枚举属性

　　for/in：遍历对象中全部可枚举的属性，包括自有属性和继承属性

　　Object.keys()：返回一个数组，这个数组由对象中的可枚举的自有属性组成

　　Object.getOwnPropertyNames(): 返回一个数组，这个数组由对象中的全部自有属性组成（既包括可枚举，也包括不可枚举）

（6）属性getter和setter

　　属性值为getter和setter的属性叫存取器属性

　　var o = {

　　　　data_prop: value, // 普通的数据属性

　　　　get accessor_prop() {/*函数体*/},

　　　　set accessor_prop(value) {/*函数体*/}　　//accessor_prop就是存取器属性，同时具备getter和setter方法，是读/写属性

　　}

（7）属性的特性

　　es5提供了查询和设置这些特性的API。这些API对库的开发者很是重要。由于能够经过这些API给原型对象添加方法，并设置为不可枚举，这让它们看起来更像内置方法；能够经过API给对象定义不能修改或删除的属性，借此锁定这个对象。

　　属性描述符对象：数据属性的描述符对象的属性有value、writable、enumerable、configurable；存取器属性的描述符对象的属性有get、set、enumerable、configurable

　　获取对象上某个属性的描述符：Object.getOwnPropertyDescriptors({x: 1}, 'x') // {x: {value: 1, writable: true, enumerable: true, configurable: true}}　　对于继承和不存在的属性返回undefined

　　设置属性的特性或者让新建属性具备某种特性：var o = {};Object.defineProperty(o, 'x', {value: 1, writable: true, enumerable: false, configurable: true})　　//添加一个不可枚举的属性x

　　Object.defineProperty(o, 'x', {writable: false}) //让属性x变为只读

　　Object.defineProperty(o, 'x', {get function() {return 0;}}) // o.x => 0 将数据属性修改成存取器属性

　　若是要同时建立或修改多个属性：Object.defineProperties({}, {x: {value: 1, writable: true, enumerable: true, configurable: true}, y: {value: 1, writable: true, enumerable: true, configurable: true}})

（8）对象的三个属性

　　原型属性：对象的原型属性是用来继承属性的。isPrototypeOf()方法用来检测一个对象是不是另外一个对象的原型（或处于原型链中）var p = {x: 1};var o = Object.create(p);p.isPrototypeOf(o) // true

　　类属性：对象的类属性是一个字符串，用以表示对象的类型信息。默认的toString()方法能够返回类属性信息。[object class]

　　可扩展性：对象的可扩展性表示是否能够给对象添加新属性。可扩展属性的目的是将对象锁定，以免外界干扰。

　　　　Object.isExtensible()判断该对象是不是可扩展的。Object.preventExtensions()将对象转换为不可扩展的，一旦对象转为不可扩展的，就没法再将其转为可扩展的，该方法只影响对象自己的可扩展性，若是给不可扩展的对象的原型添加属性，这个不可扩展的对象一样会继承这些属性。

　　　　Object.seal()既能够将对象设为不可扩展的，还能够将对象的自有属性设为不可配置的，也就是说不能添加新属性、已有的属性也不能删除或配置，不过已有的可写属性依然可配置。对于已经封闭（sealed）起来的对象是不能解封的，可使用Object.isSealed()来检测对象是否封闭。

　　　　Object.freeze()将更严格地锁定对象，除了将对象设置为不可扩展和将其属性设为不可配置以外，还能够将它自有的全部数据属性设置为只读（若是对象的存取器属性具备setter方法，存取器属性将不受影响，仍能够给属性赋值调用它们），可使用Object.isFrozen()来检测对象是否冻结。

（9）序列化对象

　　对象序列化是指将对象的状态转换为字符串，也能够将字符串还原为对象。JSON.stringify()和JSON.parse()，接受第二个可选参数

　　JSON语法是JavaScript的子集，但它并不能表达JavaScript里的全部值。

　　NaN、Infinity、-Infinity的序列化结果是null。日期对象的序列化结果是ISO格式的日期字符串，但JSON.parse()依然保留它的字符串形态，而不会将它还原为原始日期对象。函数、undefined、RegExp、Error对象不能序列化和还原，对于这些不能序列化的属性，在序列化后的字符串中会将这个属性省略掉

（10）对象方法

　　toString()：没有参数，返回调用这个方法的对象值的字符串。var s = {x: 1}.toString() // "[object Object]"　　不少类都带有自定义的toString()，好比数组转换为字符串获得的是一组带逗号的数组元素的字符串

　　toLocaleString()：这个方法返回一个表示这个对象的本地化字符串。Object中默认的toLocaleString()并不作任何本地化操做，它仅调用toString()并返回对应值。Date和Number类对toLocaleString()方法作了定制，能够用它对数字、日期、时间作本地化的转换。Array类的toLocaleString()，每一个数组元素会调用toLocaleString()转换为字符串，而不是调用各自的toString()

　　toJSON()：Object.prototype实际并无toJSON()方法，但JSON.stringify()会调用toJSON()方法

　　valueOf(): 当JavaScript须要将对象转为某种原始值而非字符串时会调用它，尤为是转换为数字的时候。有些内置类自定义了valueOf方法，好比Date.valueOf()

八、数组

（1）建立数组

　　直接量或调用构造函数Array()

（2）数组元素的读和写

　　数组是对象的特殊形式，使用方括号访问数组元素，JavaScript将指定的数字索引值转换为字符串（1变成'1'），而后将其做为属性名使用。数组的特别之处在于，当使用小于2³²的非负整数做为属性名时数组会自动维护其length属性值。

　　全部的索引都是属性名，但只有0～2³²-2之间的整数属性名才是索引。若是名字不是非负整数，它就只能看成常规的对象属性，而非数组索引。数组索引仅仅是对象属性名的一种特殊类型。

（3）稀疏数组

　　稀疏数组是包含从0开始的不连续索引的数组。若是数组是稀疏的，length属性值大于元素的个数。var a = new Array(5) // 数组没有元素，但length为5　　var a = [];a[1000]=0; // 赋值添加一个元素，但length为1001。若是用delete从数组中删除一个元素，它就变成稀疏数组。

（4）数组遍历

　　for、for/in、forEach

（5）数组方法

　　join()：不改变原数组

　　slice()：不改变原数组，var a = [1,2,3,4,5]; a.slice(-3, -2); // [3]

　　concat()：不改变原数组，concat不会扁平化数组的数组。var a = [1, 2, 3]; a.concat(4, [5, [6, 7]]) //返回[1,2,3,4,5,[6,7]]

　　toString()、toLocaleString()：不改变原数组

　　reverse()：改变原数组

　　sort()：改变原数组。不带参数调用时，数组元素以字母表顺序排序，若是数组包含undefined元素，它们会被排到数组的尾部。用数值大小排序，给sort()函数传递比较函数，该函数决定了它的两个参数在排好序的数组中的前后顺序，第一个参数在前返回小于0的数值，第一个参数在后返回大于0的数值，两个参数相等返回0。a.sort(function(a, b) {return a - b}) //从小到大　　a.sort(function(a, b) {return b - a}) // 从大到小

　　splice()：改变原数组。返回一个由删除元素组成的数组，var a = [1, 2, 3, 4, 5]; a.splice(2, 0, [1, 2]) // 返回[]，a为[1, 2, [1, 2], 3, 4, 5]　　区别于concat，splice会插入数组自己而不是数组的元素

　　push、pop、unshift、shift：改变原数组

　　ES5新方法（都不改变原数组）：

　　forEach()：forEach没法提早停止遍历，也就是说，没法像for循环那样使用break语句。若是要提早停止，必须把forEach放在一个try块中，并能抛出异常。

　　map()：将调用数组的每一个元素传递给指定的函数，并返回一个数组，它包含该函数的返回值

　　filter()：filter返回的数组元素是调用数组的一个子集，传递的函数是用来逻辑断定的，该函数返回true或false，返回值为true或能转化为true的值会被添加到返回值的数组中。filter会跳过稀疏数组中缺乏的元素，返回的数组老是稠密的，能够用来压缩稀疏数组的空缺。 var newArr = arr.filter(() => {return true})

　　every()、some()：数组的逻辑断定，返回true或false。every()是当数组中的全部元素调用断定函数都返回true时，才返回true；some()是当数组中至少有一个元素调用断定函数返回true，它就返回true。空数组调用every()返回true，调用some()返回false。一旦some或every确认该返回什么值它们就会中止遍历数组元素

　　reduce()、reduceRight()：

　　　　使用指定的函数将数组元素进行组合，生成单个值。reduce()第一个参数是执行化简操做的函数，第二个可选参数是一个传递给函数的初始值。若是有初始值，调用函数的第一个参数是初始值，若是没有则数组的第一个元素做为初始值。　　var sum = arr.reduce((x, y) => {return x+y}, 0)。在空数组中，不带初始值参数调用reduce会致使类型错误。若是调用reduce只有一个值，reduce只是简单地返回那个值而不会调用化简函数。

　　　　reduceRight()是从右向左处理数组

　　indexOf()、lastIndexOf()：第二个参数是可选的，它指定数组中的一个索引，从那里开始搜索。应用场景：用第二个参数查找除了第一个之外匹配的索引

（6）数组类型

　　判断是否为数组：Array.isArray()，instanceof只能用于简单的情形，还能够经过检测对象的类属性判断

var isArray = Function.isArray || function(o) {
    return typeof o === 'object' &&
         Object.prototype.toString.call(o) === '[object Array]'   
}       

（7）类数组对象

　　把拥有length属性和对应非负整数属性的对象看做类数组。{'0': 'a', '1': 'b', '2': 'c', 'length': 3}。

　　可使用Function.call方法间接地调用数组方法，Array.prototype.join.call(a, '+') // 'a+b+c'

（8）做为数组的字符串

　　字符串的行为相似与只读的数组，用方括号访问代替了charAt()调用，更简洁、可读、高效

九、函数

　　形参在函数体内像局部变量同样工做

（1）函数声明语句不能出如今循环、条件、try/catch/finally、with语句中，可是函数定义表达式能够出如今JavaScript代码的任何地方

（2）函数调用：4种方式，做为函数、做为方法、做为构造函数、经过它们的call()和apply()方法间接调用

（3）当调用函数的时候传入的实参比形参要少的时候，剩下的形参将设置为undefined，所以应当给省略的参数赋一个合理的默认值；当调用函数的时候传入的实参超过了形参个数时，没办法得到未命名值的引用，arguments对象解决了这个问题，arguments是一个类数组对象

（4）callee和caller属性：callee指代当前正在执行的函数，caller指代调用当前正在执行的函数的函数。应用：匿名函数中经过arguments.callee来递归调用自身

（5）当函数须要一个静态变量来在调用时保持某个值不变，最方便的方式就是给函数定义属性，而不是定义全局变量。uniqueInteger.counter = 0; function uniqueInteger() {return uniqueInteger.counter++}

 （6）闭包：函数定义时的做用域链到函数执行时依然有效。若是一个函数定义了嵌套函数，并将它做为返回值返回或存储在某处的属性里，这时就会有一个外部引用指向这个嵌套的函数。它就不会被当作垃圾回收，而且它指向的变量绑定对象也不会被看成垃圾回收。

（7）Function()构造函数建立的函数，函数体的代码老是在全局做用域中执行

 

2、DOM

一、检测浏览器类型和版本的方法是使用Navigator对象

二、不严格的同源策略：

（1）同源策略给那些使用多个子域名的大站点带来了一些问题。例如：home.example.com、developer.example.com，能够设置document.domain属性为相同的值，document.domain = example.com，这样文档就有了同源性，能够互相读取属性

（2）跨域资源共享（Cross-Origin Resource Sharing）。用新的”Origin：“请求头和新的Access-Control-Allow-Origin响应头来扩展HTTP

（3）跨文档消息：容许来自一个文档的脚本能够传递文本消息到另外一个文档里的脚本，而无论脚本的来源是否不一样。调用window.postMessage()能够异步传递消息事件到窗口的文档里

三、window对象

（1）计时器：setTimeout()、setInterval()

（2）浏览器定位和导航

　　window.location属性引用的是Location对象，表示该窗口中当前显示的文档的URL。

　　Location对象的href属性是一个字符串，包含URL的完整文本。其余属性：protocol、host、hostname、port、pathname、Search，分别表示URL的各个部分，被称为URL分解属性

　　hash属性返回URL中的片断标识符部分，search返回的是包含问号及其以后的URL

　　location对象的assign()方法可使窗口载入并显示你指定的URL中的文档，replace()方法也相似，但它在载入新文档以前会从浏览器历史中把当前文档删除。reload()方法可让浏览器从新载入当前文档

（3）浏览历史

　　window对象的history属性引用的是该窗口的History对象，History对象的length属性表示浏览历史列表中的元素数量

　　History对象的back()和forward()方法与浏览器的后退和前进按钮同样，go()方法接受一个整数参数，能够在历史列表中向前（正参数）或向后（负参数）跳过任意多个页

　　若是窗口包含多个子窗口（好比iframe），子窗口的浏览历史会按时间顺序穿插在主窗口的历史中，这意味这在主窗口调用history.back()可能会致使其中一个子窗口后退，但主窗口不变

（4）浏览器和屏幕信息

　　Window对象的Navigator属性引用的是包含浏览器厂商和版本信息的Navigator对象。

　　Navigator对象有4个属性用于提供关于运行中的浏览器的版本信息，而且可使用这些属性进行浏览器嗅探：appName、appVersion、userAgent（这个属性包含绝大部分信息，所以浏览器嗅探代码一般用它）、platform，其余属性：onLine，表示浏览器当前是否链接到网络

　　Window对象的screen属性引用的是Screen对象，它提供有关窗口显示的大小和可用的颜色数量的信息。能够用screen对象来肯定web应用是否运行在一个小屏幕的设备上

（5）对话框

　　alert()：向用户显示一条消息并等待用户关闭

　　confirm()：显示一条消息，要求用户点击肯定或取消，并返回一个布尔值

　　prompt()：也显示一条消息，等待用户输入字符串，并返回那个字符串

（6）Window对象的onerror属性是一个事件处理程序，当未捕获的异常传播到调用栈上时就会调用它，并把错误消息输出到浏览器的JavaScript控制台上。onerror处理程序时早期JavaScript的遗物，那时没有try/catch异常处理语句。

（7）多窗口和窗体

　　window.open()和window.close()

　　窗体能够用parent属性引用包含它的窗口或窗体的window对象：parent.history.back()，top属性引用的都是指向包含它的顶级窗口

　　iframe元素有contentWindow属性，引用该窗体的Window对象：document.getElementById('f1').contentWindow，也能够反向操做，从表示窗体的Window对象来获取该窗体的iframe元素，用window对象的frameElement属性，顶级窗口的window对象的frameElement属性为null

　　一般不须要用getElementById和contentWindow获取子窗体的引用，window对象有一个frames属性，它引用自身包含的窗口或窗体的子窗体，frames属性引用的是类数组对象，引用第一个子窗体frames[0]，引用第二个子窗体的第三个子窗体frames[1].frames[2]，窗体里运行的代码能够用parent.frames[1]引用兄弟窗体，注意frames数组里的元素是window对象，而不是iframe元素。若是指定了name或id属性，还能够用名字索引，frames['f1']

 四、脚本化文档

（1）文档坐标和视口坐标

　　文档坐标 = 视口坐标 + 滚动偏移量

　　视口是实际显示文档内容的浏览器的一部分，它不包括浏览器外壳（菜单、工具条、标签页），当为鼠标事件注册事件处理程序函数的时候，报告的鼠标指针的坐标是在视口坐标系中的。

　　浏览器窗口滚动条位置：

　　　　pageXOffset和pageYOffset

　　　　正常状况下能够经过查询文档的根节点获取：document.documentElement.scorllLeft和document.documentElement.scrollTop

　　　　怪异模式下：document.body.scrollLeft和document.body.scrollTop

　　视口尺寸：

　　　　window.innerWidth（chrome下测试包含滚动条宽度）和window.innerHeight

　　　　正常状况下：document.documentElement.clientWidth（chrome下测试不包括滚动条宽度）和document.documentElement.clientHeight

　　　　怪异模式下：document.body.clientWidth和document.body.clientHeight

（2）查询元素的几何尺寸

　　调用该元素的getBoundingClientRect()方法，返回一个对象，其中left和top属性表示元素的左上角的X和Y坐标，返回的是在视口坐标中的位置，返回的坐标包含元素的边框和内边距，但不包含元素的外边距。

　　内联元素可能会由多个矩形组成，若是想查询内联元素每一个独立的矩形，调用getClientRects()方法来得到一个只读的类数组对象，它的每一个元素相似于getBoundingClientRect()返回的矩形对象。

　　这两个方法返回的对象并非实时的，在用户滚动或改变浏览器窗口大小时不会更新它们。

（3）判断元素在某点

　　断定在视口的指定位置有什么元素，能够用Document对象的elementFromPoint()方法来断定，传递X和Y坐标（视口坐标），返回在指定位置的一个元素。典型的案例时将鼠标指针的坐标传递给它来断定鼠标在哪一个元素上，可是鼠标事件对象已经在target属性中包含了这些信息，所以这个方法不经常使用。

（4）滚动

　　设置scrollLeft和scrollTop属性实现滚动

　　还能够window.scorllTo()、window.scroll()接受一个点的X和Y坐标（文档坐标），并做为滚动条的偏移量设置它们。

　　滚动让最后一页在视口可见

　　var a = document.documentElement.offsetHeight

　　var b = window.innerHeight

　　window.scrollTo(0, a-b)

　　window.scrollBy()能够实现滚动，但它的参数是相对的，是在当前滚动条的偏移量增长

　　若是想滚动到文档中某个元素可见：

　　　　能够利用getBoundingClientRect()计算元素的位置，并转换为文档坐标，而后用scrollTo()达到目的。

　　　　还能够在须要显示的元素上调用scrollIntoView()方法，默认状况下将元素的上边缘放在或尽可能接近视口的上边缘，若是只传递false做为参数，它将元素的下边缘放在或接近视口的下边缘。

　　scrollIntoView()的行为与设置window.location.hash为一个命名锚点的名字后浏览器产生的行为相似

（5）关于元素尺寸、位置和溢出的更多信息

　　元素的只读属性offsetWidth和offsetHeight以css像素返回它的屏幕尺寸，返回的尺寸包含元素的边框和内边距，除去了外边距。

　　全部元素拥有offsetLeft和offsetTop属性返回元素的X和Y坐标。对于大部分元素，这些值是文档坐标，并直接指定元素的位置。但对于已定位元素的后代元素和一些其余元素（如表格单元），这些属性返回的坐标是相对于祖先元素的而非文档。offsetParent属性指定这些属性所相对的父元素，若是offsetParent为null，这些属性都是文档坐标

　　offsetWidth　　clientWidth　　scrollWidth

　　offsetHeight　  clientHeight　   scrollHeight

　　offsetLeft　　   clientLeft　　   scrollLeft

　　offsetTop　　   clientTop　　　scrollTop

　　offsetParent

　　

　　clientWidth、clientHeight相似offsetWidth、offsetHeight，不一样的是它们不包括边框大小，只包含内容和它的内边距，同时若是浏览器在内边距和边框之间添加了滚动条，其返回值中也不包含滚动条。注意，相似i、code、span这些内联元素，总返回0

　　clientLeft、clientTop没什么用，返回元素的内边距的外边缘和它的边框的外边缘之间的水平距离和垂直距离，一般这些值就等于左边和上边的边框宽度，可是若是元素有滚动条，而且滚动条放置在左侧或顶部，clientLeft和clientTop也就包含了滚动条高度。对于内联元素，clientLeft和clientTop老是为0

　　scrollWidth和scrollHeight是元素的内容区域加上它的内边距再加上任何溢出内容的尺寸。当没有溢出时，这些属性和clientWidth、clientHeight是相等的。

　　scrollLeft和scrollTop指定元素的滚动条的位置

（6）HTML表单

　　选取表单和表单元素

　　getElementById()、querySelectorAll('#form input[type="radio"]')、querySelectorAll('#form input[type="radio"][name="method"]')

　　name=“address”属性的表单还能够用以下方式选取：

　　　　window.address // 不推荐　　document.address // 仅当表单有name属性时可用　　document.forms.address // 显式访问有name或id的表单　　document.forms[n] // 不推荐

　　Form对象自己的行为相似于多个表单元素组成的HTML Collection集合，也能够用name或数字序号访问：若是name为address的表单的第一个元素的name时street，document.forms.address[0]　　document.forms.address.street

　　若是要明确地选择一个表单元素，能够索引表单对象的elements属性：document.forms.address.elements[0]　　document.forms.address.elements.street

　　javascript的Form对象支持两个方法：submit()和reset()

　　Form元素有一个onsubmit事件处理程序和onreset事件处理程序，表单提交前调用onsubmit，返回false可以取消提交动做，onsubmit只能经过点击提交按钮触发，调用submit()方法不会触发onsubmit，onreset事件同理

（7）其余文档特性

　　查询选取的文本：window.getSelection().toString()、document.selection.createRange().text（IE特有的技术）

　　window对象的getSelection()方法没法返回input和textarea内部选中的文本，IE的document.selection属性能够返回文档中任意地方选中的文本

　　在文本输入域获取选取的文本可使用以下代码：elt.value.substring(elt.selectionStart, elt.selectionEnd)

五、脚本化CSS

（1）z-index只对兄弟元素（例如：同一个容器的子元素）应用堆叠效果。可使用定位实现相似text-shadow的效果。当想以百分比形式为元素设置整体尺寸，又想以像素单位指定边框和内边距时，可使用边框盒模型。边框盒模型的一个可选方案是使用盒子尺寸的计算值calc()。visibility和display属性对绝对和固定定位的元素的影响是等价的，由于这些元素都不是文档布局的一部分，在隐藏和显示定位元素时通常首选visibility

（2）js中的css属性：当一个css属性在js中对应的名字是保留字时，要在其前面加上css前缀，如e.style.cssFloat

（3）查询元素的内联样式：e.style.cssText

（4）查询计算出的样式：window或document对象的getComputedStyle()方法，第一个参数是元素，第二个参数是null或空字符串，也能够是命名css伪对象的字符串，计算属性是只读的。window.getComputedStyle(e, '').fontSize

六、事件处理

（1）addEventListener()注册的事件处理程序，事件目标做为它的this值；attachEvent()注册的事件处理程序，它的this是window对象

（2）经过对象属性或HTML属性注册的事件处理程序的返回值才有意义，返回false是阻止这个事件的默认操做；经过addEventListener()或attachEvent()注册事件处理程序必须调用preventDefault()方法或设置事件对象的returnValue属性

（3）调用顺序：设置对象属性或HTML属性注册的处理程序优先调用，addEventListener()注册的处理程序按顺序调用；attachEvent()可能按任何顺序调用

（4）出了mouseenter和mouseleave外的鼠标事件都能冒泡

六、脚本化HTTP

　　var request = new XMLHttpRequest()

（1）指定请求：request.open('GET', url)　　request.setRequestHeader('Content-Type', 'text/plain')设置请求头　　request.send(null)

（2）取得响应：status、statusText　　getResponseHeader()和getAllResponseHeaders()能查询响应头　　responseText 响应主体

（3）编码请求主体：

　　表单编码的请求：对每一个表单元素的名字和值执行URL编码，使用=号把编码后的名字和值分开，并使用'&'符号分开名/值对，如：find=pizza&name=0123，当以post方法提交这种表单数据时，必须设置请求头的Content-Type为application/x-www-form-urlencoded

　　JSON编码的请求：resquest.setRequestHeader('Content-Type': 'application/json')　　resquest.send(JSON.stringify(data))

　　上传文件：<input type="file">元素有一个files属性，它是File对象中的类数组对象，input.files[0]能够获取单个文件。文件类型是更通用的二进制大对象（Blob）类型中的一个子类型

　　multipart/form-data请求：当html表单同时包含文件上传元素和其余元素时，浏览器不能使用普通的表单编码而必须使用'multipart/form-data'的content-type来用post提交表单。使用FormData容易实现多部分请求主体，按需屡次调用这个对象的append()方法把个体部分（字符串、File或Blob对象）添加到请求中，最后把FormData对象传递给send()中

（4）HTTP进度事件

　　当调用send()时，触发loadstart事件；当正在加载服务器的响应时，触发progress事件，若是请求快速完成，可能不会触发progress事件；当事件完成，会触发load事件。一个完成的请求不必定是成功的请求，如load事件处理程序应该检查status肯定是200而不是404

　　HTTP请求没法完成有3种状况：超时，触发timeout事件；请求停止，触发abort事件；太多重定向的网络错误会阻止请求完成，触发error事件

　　对于任何请求，浏览器将只会触发load、timeout、abort和error中的一个

　　除了type和timestamp这样经常使用的Event对象属性外，progress事件对象还有3个有用的属性：loaded属性是目前传输的字节数值，total属性是‘Content-Length’头传输的数据的总体长度（单位是字节），若是不知道内容长度则为0，若是知道内容长度，lengthComputable属性为true，不然为false

　　上传进度事件：XMLHttpRequest对象有一个upload属性，upload属性值是个对象，x.onprogress监控下载进度，x.upload.onprogress监控上传进度

　　停止请求和超时：XMLHttpRequest对象的abort()方法来取消正在进行的HTTP请求。调用abort()方法会触发abort事件。

（5）使用script元素做为ajax传输的技术叫作JSONP，不受同源策略的影响

七、客户端存储

　　客户端存储遵循同源策略，它为咱们提供了一种通讯机制，例如在一个页面上填写的表单数据能够在另外一个页面上显示

（1）localStorage和sessionStorage

　　二者的区别在于存储的有效期和做用域的不一样

　　localStorage存储的数据是永久性的，sessionStorage存储的数据当窗口或标签页被关闭后就被删除了，注意：一些浏览器具有了从新打开最近的关闭的标签页随后恢复上一次浏览的会话功能，所以这些标签页以及与之相关的sessionStorage的有效期可能会更加长点

　　与localStorage同样，sessionStorage的做用域也被限定在文档源中，所以非同源文档没法共享sessionStorage，此外sessionStorage还被限定在窗口中，若是同源的文档渲染在不一样的标签页中，它们拥有的是各自的sessionStorage，没法共享，这里值得窗口是顶级窗口，若是浏览器包含两个iframe，它们所包含的文档是同源的，那么这二者之间是能够共享sessionStorage

（2）存储api

　　setItem(name, value)、getItem(name)、removeItem(name)、clear()、length、key()

（3）存储事件（storage）

　　存储在localStorage和sessionStorage上的数据发生改变时，浏览器会在其余对该数据可见的窗口对象上触发存储事件（在对数据进行改变的窗口对象是不会触发的）

（4）Cookie

　　cookie的有效期只能持续在浏览器的会话期间，一旦用户关闭浏览器，cookie的数据就丢失了。延长cookie的有效期能够经过max-age属性（单位是秒）

　　cookie的做用域是经过文档源和文档路径肯定的，可是做用域经过path和domain是可配置的。

　　cookie的secure属性，是一个布尔类型的属性，cookie默认是不安全的形式传递的，一旦cookie被标识为安全的，那就只能当浏览器和服务器经过HTTPS或其余安全协议链接的时候才能传递它