《JavaScript高级程序设计》读书笔记

1、第三章 基本概念：

1.理解参数
1.1 能够向函数中传递任意数量的参数，而且能够经过arguments对象来访问这些参数。
1.2 arguments对象只是相似数组，它经过length来肯定传进来多少参数
1.3 arguments它的值永远与对应的参数名的值保持同步
eg:function add(num1,num2){arguments
arguments[1] =10;//修改了arguments[1]的值，对应的num2也会保持同步（他们的内存空间是独立的）
}
2.with语句
做用：将代码的做用域设置到一个特定的对象中
with(location){
 var  url= href;//
var  hostName = hostName;
}
在with代码内部 每一个变量都被认为是局部变量。若是局部环境中找不到该变量定义，那么就会到location对象下面找是否有同名的属性
3.break continue
break当即退出循环，执行循环以后的代码
continue 退出循环，可是会从循环的顶部继续执行

---

2、第五章 引用类型

全部对象都有 toLocalesString() toString() valueOf() 方法 
alert()要接收字符串参数，因此它会在后台调用 toString()方法   

var color = ['red','blue','green'];
console.log(color.toString());//red,blue,green 返回数组中每一个值得字符串形式拼接而成的一个以逗号分隔的字符串
color.valueOf();   //返回数组自己
toLocaleString()方法 常常返回与上面2种方法同样的值，可是不一样点在于，为了取得每一项的值，调用的是每一项的toLocaleSrting()而不是toString()；
使用toString()检测对象类型Section
能够经过toString() 来获取每一个对象的类型。为了每一个对象都能经过 Object.prototype.toString() 来检测，须要以 Function.prototype.call() 或者 Function.prototype.apply() 的形式来调用，传递要检查的对象做为第一个参数，称为thisArg。

var toString = Object.prototype.toString;

toString.call(new Date); // [object Date]
toString.call(new String); // [object String]
toString.call(Math); // [object Math]

//Since JavaScript 1.8.5
toString.call(undefined); // [object Undefined]
toString.call(null); // [object Null]                      
  5.5 function类型     
函数内部有2个特殊对象 arguments 和this                
arguments保存着函数中传入的全部参数 这个对象还有个callee的属性，指向拥有这个arguments对象的函数。      
eg:
function test(num) {
    if(num<=1){
        return 1
    }else {
        return num*test(num-1);
    }
}
//这个函数的执行与函数名牢牢耦合在一块儿，为了消除这种耦合，能够像下面这样写
function test(num) {
    if(num<=1){
        return 1
    }else {
        return num*arguments.callee(num-1);
    }

var test1 = test;
test = function () {
    return 0;
}
test1(5)//120
test(5)//0
//这样重写了test函数后，也能够保证函数的正常调用

---

3、第八章 window对象 BOM的核心

BOM的核心对象是window,它表示的是一个浏览器实例。在浏览器中，window有双重角色，既是js访问浏览器的一个接口，又是js规定的    
gloabal对象.
8.1窗口关系及框架
若是页面包含框架，则每一个框架都包含本身的window对象，而且保存在frames集合中。window.frames
每一个window对象都有一个name属性，即框架名称。
top对象始终指向最外层的框架，也就是浏览器窗口
与top相对的是 parent ,它始终指向当前框架的直接上层框架
8.1.5 导航和打开窗口
window.open()方法 既能够导航到一个特定url，也能够打开一个浏览器窗口
它能够接受四个参数：要加载的url,窗口目标，一个特性字符串，一个表示新页面是否取代浏览器历史记录中当前加载页面的布尔值。一般只传第一个参数，最后一个只在不打开新窗口的状况下使用。
eg:
var wroxWin = window.open("http://www.baidu.com","wroxWindow","height=400,width=200");
wroxWin.resizeTo(500,500);//调整大小
wroxWin.moveTo(100,100)//移动位置
wroxWin.close()//关闭新打开的窗口
能够经过try catch  以及判断 wroxWin == null 来判断是否 受到弹窗屏蔽程序影响
8.2 location对象 
location.href = ''跳转到指定页面
location.replace 实现导航到一个新的 url地址，替换掉当前页面在浏览器中的历史记录
8.3navigator 
它有一个公共属性 userAgent
history.go(1) 等同于 history.forword()
history.go(-1)等同于 history.back()
if(history.length ==1)则表示这是用户打开窗口后的第一个页面

---

4、第十章 DOM

document 三个与网页请求有关的属性
1.URL 即地址栏中显示的URL
2.domain 即页面域名 
3.referrer 保存着连接到当前页面的那个页面的URL
三个属性中，只有domain是能够设置的，因为安全方面的限制，不能将这个属性设置成URL中不包含的域
//假设页面来自p2p.wrox.com
document.domain = 'wrox.com' //成功
document.domain = 'nczel.net'//失败
因为跨域的安全限制，来自不一样子域的页面没法经过js通性，而经过将每一个页面的document.domain设置成相同值，这些页面就能够互相访问对方的js对象了
Node类型：
每一个节点都有一个childNodes属性，其中保存着一个NodeList对象，NodeList是一种类数组对象，用于保存一组有序的节点。
NodeList的独特之处在于，它是基于DOM结构动态执行查询的结果，所以DOM结构的变化，可以自动地反应在NodeList对象中。它是有生命有呼吸的对象，而不是第一次访问，某个瞬间拍摄下来的一张快照。
对于arguments对象和NodeList对象，均可以使用Array.prototype.slice(),将其转换成数组。
eg：
var arrayOfNodes = Array.prototype.slice.call(someNode.childNodes,0)
NodeList对象都是动态的，这就意味着每次访问NodeList对象，都会运行一次查询。
DOM是语言中立的api,用于访问和操做HTML和XML文档。DOM 1级将HTML 和 XML文档形象地看作一个层次化的节点树，可使用js来操做这个节点树，进而改变底层文档的外观和结构。

---

5、第十一章 DOM扩展

1.Selector Api 定义了2个方法，querySelector() querySelectorAll()
eg:document.querySelector("body")
返回匹配的第一个元素，没有则返回null
可以调用的类型为Document 和 Element 类型 

eg:var ems = document.getElementById("myDiv").querySelectorAll("em");
返回全部匹配的元素，返回的值是带有属性和方法的NodeList ,底层实现相似于 一组元素的快照，而非不断的动态查询,没有则返回null
可以调用的类型为Document 和 Element  DocumentFrament 类型
3.Element Traversal Api定义了额外的属性，能方便地从一个元素跳到另外一个元素 
3.HTML5 
classList: add() contains()//是否存在  remove() toggle() 用于操做元素的类名
eg:div.classList.remove("user")；原来是使用div.className 返回为字符串

焦点管理：document.activeElement 这个属性始终会引用dom中当前得到焦点的元素 文档加载期间为null
document.hasFocus()检测文档是否得到了焦点
document.readyState 有2个属性值 loading //正在加载文档  complete //已经加载完文档
html5 元素 上添加 data- 属性 能够经过 div.dataset来访问
eg <div data-appid></div>   //获取div.dataset.appid  

scollIntoView()   scollIntoViewIfNeed() 以前的笔记中有详细介绍

---

6、十三章 事件

事件流：捕获 目标元素 冒泡 document html body div的顺序
addEventListener 接收三个参数 事件名，函数，布尔值 true表示捕获阶段调用处理程序 false表示冒泡阶段调用处理程序

html5事件
1.contextmenu 即经过鼠标右键点出上下文菜单
2.beforeunload 事件
3.hasChange事件 Url的参数列表发生变化时调用
4.readystatechange事件 uninitialized 未初始化 loading loaded interactive交互 complete 完成

---

7、第二十一章 ajax

ajax  的核心对象 XHRHttpRequest
XHRHttpRequest 经常使用方法和属性
onreadyStateChange：监听当前http的状态函数，当请求状态发生变化时，就会调用该函数
open： xhr.open('get','http://www.baidu.com',true);// 三个参数 方法 地址 是否异步
send:接收一个参数做为请求主体发送的数据，若不须要则传null  send(null)
abort:终止链接 xhr.abort()
error:在请求错误时使用
responseText： 做为响应主体被返回的文本
status ： 响应的http状态
statusText： http状态说明
readyState:当前http状态变化值0-4
0:未初始化，还没定调用open
1:启动  已调用open方法可是没调用send方法
2:发送  请求被接收 send()方法完成，可是还没有接收到响应
3:接收 已经接收到部分响应数据
4.完成 请求处理完成，响应就绪
status:请求处理完以后，http的响应码
200：请求数据返回成功
404：没有发现查询的url

只有当get的时候,才会存在缓存问题   (IE上比较严重)
解决缓存问题:     getTime()取得时间戳(毫秒)
超时设定 timeout属性 表示请求在等待多少毫秒后就终止 xhr.timeout = 0 ;即用不过期
eg:
var xhr = new XMLHttpRequest();
//链接服务器
xhr.open('get','http://www.baidu.com',true);// 三个参数 方法 地址 是否异步
//发送请求
xhr.send(null);
xhr.onreadystatechange = function () {
    if(xhr.readyState == 4){
        if(xhr.status == '200'){
            console.log(xhr.responseText);
        }else {
            alert(xhr.status);
        }
    }
}
跨域问题：
CORS ,图像ping和JSONP都是利用其src属性实现跨域
comet（服务器向页面推送数据的技术）是对ajax的进一步扩展 
实现的手段主要有两个：长轮询和HTTP流 ，因此浏览器都支持长轮询 部分支持HTTP流
SSE (server-send Events 服务器发送事件) 是一种实现comet交互的浏览器API,既支持长轮询，也支持HTTP流
websSockts 是一种持久的与服务器进行全双工双向通讯的信道，不使用http协议，而是一种自定义协议