首页 > 代码库 > 《Javascript高级程序设计第3版》精华总结
《Javascript高级程序设计第3版》精华总结
一、JavaScript简介
1.1 javascript简史
1.2 javascript实现
+ javascript是一种专为网页交互而设计的一种脚本语言，javascript由三大部分组成：
ECMAScript，提供核心语言功能；
DOM，提供访问和操作网页页面的方法和接口；
BOM，提供与浏览器交互的方法和接口。
1.3 javascript的版本
二、在HTML中使用JavaScript
2.1 <script>元素
+ 使用<script>元素向html页面中插入javascript
+ <script>元素中定义的6个属性：
async，表示立即下载脚本，但不妨碍页面的其他操作，比如下载其他资源或等待加载其他脚本；
defer，表示脚本可以延迟到文档完全被解析和显示之后再执行；
charset，表示通过src属性指定的代码的字符集（大多数浏览器会忽略这个值，所以很少用）；
src，表示包含要执行代码的外部文件；
type，表示编写代码使用的脚本语言的内容类型（或称为MIME类型）；
language，已废弃，原来表示编写代码使用的脚本语言。
+ 延迟脚本加载的方式汇总：
* 动态生成script元素，插入dom中， 然后callback()
1 function loadScript(url, callback){ 2 var script = document.createElement_x("script") 3 script.type = "text/javascript"; 4 if (script.readyState){ //IE 5 script.onreadystatechange = function(){ 6 if (script.readyState == "loaded" || 7 script.readyState == "complete"){ 8 script.onreadystatechange = null; 9 callback();10 }11 };12 } else { //Others: Firefox, Safari, Chrome, and Opera13 script.onload = function(){14 callback();15 };16 }17 script.src =http://www.mamicode.com/ url;18 document.body.appendChild(script);19 }
* 为<script>标签定义defer属性（HTML4.01定义的该属性），脚本会等页面解析完毕之后再运行，HTML5规定defer
只适合外部脚本文件，IE4~IE7还支持对嵌入脚本的defer属性，支持HTML5的浏览器会忽略给嵌入脚本设置的defer。
（定义了defer的脚本，不一定会按顺序执行，所以最好只包含一个延迟脚本）
+ 异步加载脚本：
为<script>标签定义async属性（HTML5定义的该属性），脚本会立即下载，不会阻塞页面加载，也就是在加载脚本的时候
会异步加载页面的其他内容(标记了async的脚本同样也不保证按照指定它们的先后顺序执行)
+ HTML和XHTML的区别：
XHTML是将HTML作为XML的应用而重新定义的一个标准，XHTML比HTML的书写要求更严格。
补充：XHTML的要求，标签不能重叠，可以嵌套；标签和属性名必须小写；标签都要有始有终；每个属性都要有属性值，
并且属性值要在双引号中；标签中不用name,用id。
2.2 嵌入代码与外部文件
+ 外部文件的好处： 可维护性、可缓存、适应未来
2.3 文档模型
+ 标准（严格）模式和混杂模式： 严格模式的排版和js运作模式是以浏览器支持的最高标准运行，在混杂模式中，
页面以宽松的向后兼容的方式显示，模拟老式浏览器的行为以防止站点无法工作。当页面中DOCTYPE不存在或格
式错误会导致页面以混杂模式呈现。
2.4 <noscript>元素
+ 在不支持脚本的浏览器中显示的替换内容
三、基本概念
3.1 语法
3.1.1 区分大小写
3.1.2 标识符
3.1.3 注释
3.1.4 严格模式
ECMAScript 5添加的第二种运行模式，严格模式的目的：
+ 消除javascript中的不合理、不严谨之处，减少怪异行为；
+ 消除javascript中的不安全之处；
+ 提高编译效率；
+ 为未来新版本的javascript做好铺垫。
3.1.5 语句
3.2 关键字和保留字
3.3 变量
3.4 数据类型
+ 基本数据类型： null、undefined、string、number、boolean、symbol（ES6）；
+ 复杂数据类型： object 。
+ undefined，声明了变量但是未初始化；null，表示空对象指针，声明了变量，变量的值为空；
+ undefined派生自null，所以null == undefined 为true。
+ NaN与任何值都不相等包括其自身，通过isNaN()函数判断一个值是否为数值；
isNaN在接收一个参数之后，会尝试先将这个值转化为数字，不是数字的值会先直接转化为数值，不能转化为数字的值，
函数最后返回true，反之返回为false。
+ 把非数值转化成数值的方式：Number()、parseInt()、parseFloat(),Number()可以用于任何数据类型，
后面两种只能将字符串转 化为数值；
+ Number("")//0,Number("hello")//NaN,Number(null)//0,Number(undefined)//NaN,
Number("0001")//1，Number（"123"）//123。
+ parseInt(value,[进制参数])，不能转化字符串中为非数字的字符。可以将8、16进制的数转化为10进制的数。
使用parseInt()方法时最好指定第二个参数，多数情况下要解析的是十进制数，所以一般将10作为第二个参数。
parseInt（"hello"）//NaN
parseInt（""）//NaN
parseInt("1234hello")//1234
parseInt（"123.12"）//123
+ parseFloat(value),只解析十进制数，所以没有用第二个参数指定基数的用法。
转化十六进制，结果始终为0；
parseFloat("0xA")//0
parseFloat（"123blue"）//123
parseFloat("22")//22
parseFloat("22.5")//22.5
parseFloat("22.45.5")//22.45
parseFloat("0909.5")//909.5
+ 字符串可以由单引号和双引号表示；
+ 任何字符串的长度可以由length属性取值；
+ 将一个值转化成字符串： 1、通过toString()方法将一个值转化为字符串，每个字符串都有toString()方法，null和undefined
没有toString()方法；
2、通过转型函数String()（例如：String(100)）,如果值有toString()方法，则调用该方法返回结果；
如果为值为null则返回"null",如果值为undefined，则返回结果"undefined"；
3、最快捷的方式，用加号操作符将要转化的值与一个空字符串("")加在一起。
+ object的每个实例都具有的方法：
constructor，保存着用于创建当前对象的函数；
hasOwnProperty（propertyName），判断给定属性在当前对象实例中是否存在；
isPrototypeOf（object），判断传入的对象是否是当前对象的原型；
propertyIsEnumerable(propertyName),判断给定的属性是否能够使用for-in语句枚举；
toLocalString(),返回对象字符串，字符串与执行环境的地区对应；
toString(),返回对象字符串；
valueOf(),返回对象字符串、数值、布尔值，通常与toString()方法返回值相同。
3.5 操作符
3.6 语句
3.7 函数
+ 函数会执行完函数中的return语句之后停止并立即退出；
+ 为了方便代码调试，函数要没有都有return，要么都没有return；
+ 可以通过arguments对象访问参数数组，非严格模式下，arguments的值永远与对应命名参数的值保持同步；
+ 没有传递值的命名参数会自动被赋值为undefined， 为arguments的元素设置的值不会反映到命名参数中；
+ javascript中所有参数传递的都是值，不可能通过引用传递参数。
四、变量、作用域和内存问题
javascript中的作用域：http://www.cnblogs.com/yy95/p/5933090.html
4.1 基本类型和引用类型的值
4.1.1 动态的属性
4.1.2 复制变量值
4.1.3 传递参数
4.1.4 检测类型
4.2 执行环境及作用域
4.2.1 延长作用域链
4.2.2 没有块级作用域
4.3 垃圾收集
4.3.1 标记清除
4.3.2 引用计数
4.3.3 性能问题
4.3.4 管理内存
五、引用类型
5.1 Object类型
5.2 Array类型
数组-常用几种总结
+ 添加元素到数组末尾-push()
+ 删除数组末尾元素-pop()
+ 添加元素到数组的最前面-unshift(value)
+ 删除数组最前面元素-shift()（返回取得的值）
注：通过push()和pop()操作数组，数组表现形式如同栈一样，是先进后出的形式；通过unshift()和shift()操作数组，
表现形式如同队 列一样，是先进先出的形式。
+ indexOf(value)（不存在返回-1）—查找某个元素的索引
+ slice()— 复制或裁剪一个数组。可以为slice设置参数指定从哪里开始裁剪数组，参数个数0个、1个或2个（数间隔的方式裁剪，
或含头不含尾来记忆）
如果slice()方法中有一个参数为负数，则用数组长度加上该数来确定相应的位置；如果结束位置小于起始位置，则返回空数组。
+ splice()— 删除/替换数组中的（指定位置）任意数量的项，给指定位置插入任意数量的项。参数至少2个，第一个参数代表元素下标，
第二个代表元素个数，后面的参数代表要插入的值，可以插入1个或多个；当第二个参数不为0时代表要删除元素，个数代表要删除的元
素个数。
+ join(连接的方式)-连接一个数组并转化成一个字符串
5.3 Date类型
+ Date类型对象上的方法
补充： javascript的时间用毫秒计时，故计算两个时间的差值，可以直接将两个日期对象相减，最后得到的是毫秒数，
然后再将毫秒数转化成日期。
5.4 RegExp类型
5.5 Function类型
+ 函数内部的两个特殊的对象：arguments和this，arguments对象上的callee属性指向拥有这个arguments对象的函数；
+ 每个函数都包含非继承而来的方法： apply(对象，数组或arguments对象)和call(对象，value，value...),用于在特定的作
用域中调用函数(即改变函数作用域)。好处：对象与方法解耦。
window.color = ‘red‘;
var o = { color: "blue" };
function sayColor() {
alert(this.color);
}
sayColor();//red
sayColor.call(this);//red
sayColor.call(window);//red
sayColor.call(o);//blue
5.6 基本包装类型
* 每当读取一个基本类型值时，后台都会创建一个对应的基本包装类型的对象。所以尽管基本数据类型不是对象，
它们仍然也有自己的方法。
* 引用类型与基本包装类型的主要区别：对象的生命周期不同。使用new操作符创建的引用类型的实例，在执行流离
开当前作用域之前都一直保存在内存中；而自动创建的基本包装类型的对象，则只存在于一行代码的执行瞬间，然
后立即被销毁。
5.6.1 Boolean类型
* 布尔表达式中的所有对象都会被转换为true，所以 new Boolean(false) && true 等于true，new出来的都是对象。
5.6.2 Number类型
* 使用new调用基本包装类型的对象和直接调用同名的转型函数的区别：
var value = "http://www.mamicode.com/16";
var number = Number(value);//转型函数
alert（typeof number）;//"number"
var obj = new Number(value);//构造函数
alert(typeof obj);//"object"
* toFixed() 方法按照指定的小数位返回数值的字符串
var num = 10;
alert( num.toFixed(2) );//"10.00"
var num2 = "10.005";
alert( num.toFixed(2) );//"10.01"
toExponential() 方法返回指数表示法
toPrecision() 方法可能返回固定（fixed）大小格式，也可能返回指数（exponential）格式
var num = 99；
alert（num.toPrecision(1)）//"1e+2"
alert（num.toPrecision(2)）//"99"
alert（num.toPrecision(3)）//"99.0"
5.6.3 String类型
常用方法总结：
* 获取字符串的某个位置的元素/字符编码-chatAt()/chatCodeAt();
* 拼接字符串-concat(value,value...),可以接受多个字符串参数；
* 创建新字符串（裁剪字符串，含头不含尾）-slice()、substr()、substring():
-三者只有一个参数时，裁剪字符串表现一样；
-两个参数时，substr()的第二个参数代表裁下来的字符总个数，不是和其他两个一样代表结束字符的位置；
-参数为负数的情况，slice()将传入的负值与字符串的长度相加(同数组中的slice())；substr()将第一个参数上的负数
与字符串的长 度相加，第二个负的参数转化成0；substring将所有的负参数转化成0。
* 获取字符串中某个字符的下标-indexOf(value，[下标])从前往后搜索/lastIndexOf(value，[下标])从后往前搜索；
有第二个参数(可省略)时代表从指定下标位置开始搜索value(字符)，indexOf仍然是从后搜索，lastIndex仍然向前搜索;
* 除去字符串中首尾空格-trim();
* 字符串大小写转换方法-toLocaleUpperCase()/toUpperCase() toLocalLowerCase()/toLowerCase();
* 字符串的模式匹配方法-字符串.match(pattern)返回数组；
-字符串.search(pattern)返回字符串中第一个匹配项的索引；
-字符串.replace(字符串或正则，"参数")，替换第一个匹配的字符串（第一个参数为字符串时）
或所有匹配的 字符串（第一个参数为正则时）（replace的第二个参数还可以是一个函数）。
* 比较两个字符串再字母表中排列的顺序-字符串1.localeCompare(字符串2)，字符串1在字符串2之前返回小于0的数，
之后就返回大于0的数，等同就返回0。
5.7 单体类型
5.7.1 Globle对象
所有全局作用域中定义的属性和函数，都是Global对象的属性，Globle不属于任何其他对象的属性和方法。
5.7.2 Math对象
+ 常用的几种方法：
Math.ceil() 向上舍入
Math.floor() 向下舍入
Math.round() 四舍五入
例子：Math.ceil(25.9)//26 Math.floor(25.9)//25 Math.round(25.9)//26
Math.ceil(25.5)//26 Math.floor(25.5)//25 Math.round(25.5)//26
Math.ceil(25.1)//26 Math.floor(25.1)//25 Math.round(25.1)//25
Math.max(value,value2,...) 求最大值
Math.min(value,value2...)求最小值
Math.random() 生成随机数
六、面向对象的程序设计
理解javascript中的原型模式：http://www.cnblogs.com/yy95/p/5751136.html
JavaScript中的继承（原型链）
JavaScript中的继承模式总结：http://www.cnblogs.com/yy95/p/5784211.html
七、函数表达式
javascript中的闭包：http://www.cnblogs.com/yy95/p/5950953.html
八、BOM
js之浏览器对象模型（BOM）：www.cnblogs.com/yy95/p/5645250.html
九、客户端检测
十、DOM
+ 节点类型
Node类型、Document类型、Element类型、Text类型、Comment类型、CDATASection类型、
DocumentType类型、 DocumentFragment类型、Attr类型。所有的节点类型都继承Node类型。
+ DOM的结构
节点与节点之间的关系：节点通过parentNode属性访问父节点，childNodes属性访问所有的子节点，nextSibling/previousSibling访问
同一列表的其他节点，父节点可以通过firstChild、lastChild分别访问它第一个子节点和最后一个子节点。
+ 对DOM的添加、删除、插入、创建、查找
创建：
document.createDocumentFragment() 文本片段
document.createElement() 元素
document.createTextNode() 文本节点
添加、删除、插入：
appendChild(node)
replaceChild(newnode,node) //用newnode替换文档中存在的node
removeChild(node)//移除文档中的node
insertBefore(newnode,node)//没有第二个参数时作用和appendchild一样，有第二个参数时就是将newnode插到node前面。
查找：
getElementById()
getElementsByTagName()
getElementsByName()
十一、DOM扩展
十二、DOM2和DOM3
十三、 事件
再次理解javascript中的事件
十四、表单脚本
十五、使用Canvas绘图
十六、HTML5脚本编程
十七、错误处理与调试
十八、Javascript与XML
十九、E4X
二十、JSON
json是一种轻量级的数据格式；
使用json的原因： 数据格式简单，易于读写，格式都是压缩的，占用带宽小；
易于解析，客户端javascript可以直接通过eval()进行json数据的读取；
json格式数据能直接为服务器端代码所用，易于维护。
二十一、Ajax与Comet
+ ajax全称是异步javascript和xml，它是一种无需刷新页面就可以从服务器获取数据的技术；它的核心是XMLHttpRequest对象，
即异步请求对象。
+ ajax的请求过程： 1.创建XHR对象；2.调用open方法连接服务器；3.调用send发送请求；4.获取响应的数据。
+ readystatechange事件监听响应状态变化，readyState变化都会触发readystatechange事件，
readyState检测响应是否已经接受完成，状态取值如下：
0：未初始化，尚未调用open();
1: 启动，已经调用open(),尚未调用send();
2: 发送, 已经调用send(),尚未接受到响应；
3: 接受，已经接受到部分数据；
4: 完成，已经接受全部响应数据，可以在客户端使用了。
status检测服务器是否已经成功处理请求，属性值（或称http状态码）如下：
to be continued
《Javascript高级程序设计第3版》精华总结