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

一、第三章 基本概念：

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 退出循环，但是会从循环的顶部继续执行

---

二、第五章 引用类型

所有对象都有 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函数后，也可以保证函数的正常调用    

---

三、第八章 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)则表示这是用户打开窗口后的第一个页面

---

四、第十章 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来操作这个节点树，进而改变底层文档的外观和结构。

---

五、第十一章 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.dataset.appid  

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

---

六、十三章 事件

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

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

---

七、第二十一章 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协议，而是一种自定义协议