JavaScript——学习笔记（二）

JavaScript  console对象

console.log
该方法用于在console窗口输出信息，它可以接收多个参数，将他们的结果链接起来输出
该方法在输出的结尾自动添加换行符
该方法支持格式占位符，用后面的参数来替换格式占位符再输出
console.log支持以下占位符：
%s 字符串
%d 整数 如果给定的值是浮点数，向下取整
%i 整数 如果给定的值是浮点数，向下取整
%f 浮点数
%o 对象 显示该对象的值
%c css格式字符串 例如：‘color: red; background: yellow; font-size: 24px;’用来对输出的内容进行渲染
console.info 和 console.debug
console.info 和 console.debug 都是console.log的别名，用法完全一样。info输出的信息前面加一个蓝色的图标。
console.warn 和 console.error
warn方法输出信息时，在最前面加一个黄色三角，表示警告
error方法输出信息时，在前面加一个红色的叉，表示出错，同时会显示错误发生的堆栈
console.table
对于某些复合数据，可以转化为表格显示
var languages = [
{ name: "JavaScript", fileExtension: ".js" },
{ name: "TypeScript", fileExtension: ".ts" },
{ name: "CoffeeScript", fileExtension: ".coffee" }
];
console.table(languages);
复合数据转化为表格显示的条件是，必须拥有主键。对于数组来说，主键就是数字键，对于对象来说，主键就是他的最外层键。
console.count()
用于计数，输出被调用的次数
可接受一个字符串的参数，作为标签，对执行的次数进行分类
console.dir 和 console.dirxml
用于输出DOM元素
console.assert(exp,string)
assert方法接收两个参数，第一个参数是表达式，第二个参数是字符串，只有当第一个参数为false，才会输出第二个参数，否则不会有任何结果。
console.time() console.timeEnd()
这两个方法用于计时，可以算出一个操作所花费的准确时间。
接收一个字符串参数，来定义计时器的名称
console.group console.groupEnd console.groupCollapsed
用于将显示的信息分组，分在一组的信息，可以用鼠标折叠、展开
console.trace console.clear
trace方法显示当前执行的代码在堆栈中的调用路径
clear方法用于清除当前控制台的所有输出

JavaScript 面向对象

JavaScript使用构造函数作为对象的模板
var Vehicle = function () {
this.price = 1000;
};
构造函数的特点：
函数体内部使用this关键字，代表了所要生成的对象实例
生成对象时，必须用new命令，调用Vehicle函数
为了与普通函数区别，构造函数名字的第一个字母通常大写。
this 关键字
如果一个函数在全局环境（没有使用new）中运行，那么this就是指顶层对象（浏览器中为window对象）
可近似认为，this是所有函数运行时的一个隐藏参数，指向函数的运行环境
构造函数中的this，指的是实例对象
绑定this的方法
JavaScript提供了call、apply、bind三个方法，来切换/固定this的指向。
function.prototype.call
函数实例的call方法，可以指定函数内部this的指向（即函数执行时所在的作用域），然后在指定的作用域中，调用该函数。
call方法的参数，应该是一个对象。如果参数为空、null、undefined，则默认传入全局对象。
call可以接受多个参数，第一个参数就是this所要指向的那个对象。后面的参数则是函数调用时所需的参数。
function.prototype.apply
apply方法的作用与call方法类似，也是改变this的指向，然后再调用该函数，
区别就是，它接受一个数组作为函数执行时的参数。

JavaScript prototype对象

构造函数
JavaScript通过构造函数生成新的对象。实例的属性和方法，可以定义在构造函数内部。
JavaScript的每个对象都继承另一个对象。除了null，它没有自己的原型对象，Object的原型对象是null
原型对象上的所有属性和方法。都能被派生对象共享
原型对象的作用就是定义所有实例对象共享的属性和方法
原型链
作用，读取对象的某个属性时，JavaScript引擎现寻找对象本身的属性，找不到就到它的原型去找，还找不到，就到原型的原型去找，直到最顶层的Object.prototype还是找不到，就返回undefined
constructor属性
prototype对象有一个constructor属性，默认指向prototype对象所在的构造函数
instanceof 运算符
表示指定的对象是否为某个构造函数的实例，返回布尔值
由于instanceof对整个原型链上的对象都有效，因此同一个实例对象，可能是多个构造函数的实例
instanceof运算符只能用于对象，不适用原始类型的值（比如说string 和number）
Object.getPrototypeOf()
该方法返回一个对象的原型
Object.setPrototypeOf()
该方法可以为现有对象设置原型，返回一个新对象。接收两个参数，一个是现有对象，一个是原型对象
Object.create()
用于从原型对象生成新的对象，可以代替new命令
他接受一个对象做为参数，返回一个新的对象，后者完全继承新者的属性
isPrototypeOf()
用来判断一个对象是否是另一个对象的原型

JavaScript 事件模型

addEventListener() 绑定事件的监听函数
该方法接收三个参数：
type:事件的名称
listener：监听函数。事件发生时，会调用该监听函数
useCapture:表示监听函数是否在捕获阶段触发
实例：
function hello(){
console.log("hello");
}
var button=document.getElementById('btn');
button.addEventListener('click',hello,false)
以上为button元素，绑定click事件的监听函数hello
可以为当前对象的同一个事件添加多个监听函数，函数按照添加顺序触发
removeEventListener（）
移除添加的事件的监听函数。参数与addEventListener一致
dispatchEvent（）
在当前节点上触发指定事件，从而触发监听函数的执行
该方法的参数是一个Event对象的实例
var event=new Event('click');
button.dispatchEvent(event);
监听函数
监听函数是事件发生时，程序要执行的函数。
用来为事件绑定监听函数的三种方式：
1 HTML标签的on-属性
允许在元素标签的属性中，直接定义事件的监听代码
2 Element节点的事件属性
element节点对象有事件属性，同样可以指定监听函数
3 使用addEventListener方法
Element节点、document节点、window对象的该方法，可以定义事件的监听函数
事件的传播分为三个阶段
捕获阶段：从window对象传导到目标节点
目标阶段; 在目标节点上触发
冒泡阶段： 从目标节点传导回window对象
stopPropagation会阻止监听函数的向上（向父级节点）传播，但是出现在函数中event.stopPropagation，只会阻止当前的监听函数
不能阻止其他绑定的监听函数的触发。这时候可以用stopImmediatePropagation方法，阻止所有绑定在节点该事件上的所有监听函数。
event对象
事件发生后，会生成一个事件对象，做为参数传给监听函数
event对象本身就是一个构造函数，可以用来生成新的实例。
event构造函数接收两个参数：第一个参数是字符串 ，表示事件的名称，第二个参数是对象，表示事件的对象配置
第二个参数包含两个属性：bubbles：布尔值，表示事件对象是否冒泡 ；cancleable：布尔值，表示事件是否可取消
event.eventPhase
该属性返回一个整数值，表示事件目前所处的节点。
0：表示事件目前没有发生
1：表示目前正处于捕获阶段
2：事件到达目标节点
3：事件处于冒泡节点
event.preventDefault
preventDefault方法取消浏览器对当前事件的默认行为，方法生效的前提是cancelable属性为true
使用了preventDefault方法，该事件的默认行为就不会执行。
event.currentTarget
返回事件当前所在节点，即当前正在执行的监听函数所绑定的那个节点
event.target
返回触发事件的那个节点

JavaScript 事件种类

鼠标事件
鼠标单击 click 定义：用户在同一个位置完成一次mousedown动作和mouseup动作，他们的触发顺序是：mousedown、mouseup、mouseclick
mouseup：事件在释放按下的鼠标键时触发
mousedown：事件在按下鼠标键时触发
mousemove：事件当鼠标在一个节点内部移动时触发
mouseover和mouseenter事件，都是鼠标进入一个节点时触发。区别，mouseenter事件只触发一次
mouseout和mouseleave事件，都是鼠标离开一个节点时触发，区别，mouseout事件会冒泡，子节点的mouseout事件会冒泡到父节点，进而触发父节点的mouseout事件。
contextmenu事件在一个节点上点击鼠标右键时触发
wheel事件是与鼠标滚轮相关的事件，用户滚动鼠标的滚轮就触发这个时间。该事件继承MouseEvent、UIEvent、Event的属性
还有自己的几个属性：
deltaX：返回一个数值，表示滚动的水平滚动量
deltaY：返回一个数值，表示滚动的垂直滚动量
deltaZ：返回一个数值，表示滚动的Z轴滚动量
deltaMode：返回一个数值，表示滚动的单位。0表示像素，1表示行，2表示页
键盘事件
主要有三个事件：keydown keypress keyup
keydown：按下键盘时触发的事件
keypress：只要按下的键并非ctrl 、alt、shift和meta（windows键），就接着触发keypress事件
keyup：松开键盘时触发的事件
键盘事件使用keyboardEvent对象表示，该对象继承UIEvent、MouseEvent对象
该事件包含两个属性：
key属性返回一个字符串，表示按下的键名；
charCode属性返回一个数值，表示keypress事件按键的Unicode值
进度事件
进度事件用来描述一个事件进展的过程。ProgressEvent构造函数，用来生成进度事件的实例
拖拉事件
指的是，用户在某个对象上按下鼠标键不放，拖到它的另一个位置，然后释放鼠标，将该对象放在那里
在HTML网页中，除了element节点默认不可拖拉，其他（图片、链接、选中的文字）都是可以直接拖拉的。
让element元素可拖拉，可以将该节点的draggable属性设置为true。

JavaScript CSS操作

CSS负责页面的视觉效果
JavaScript 负责与用户的行为互动
元素节点对象的style对象，有一个cssText属性，可以读写和删除整个样式
var divStyle=document.querySelector('div').style;
divStyle.cssText="background-color:yellow;"+'border:1px solid black'
style对象有三个方法来读写行内CSS规则
setProperty（propertyName,value）:设置某个CSS属性
getProperty（propertyName）获取某个CSS属性
removeProperty（propertyName）删除某个CSS属性
修改某个节点的样式：
var divStyle = document.querySelector('div').style; //获得某个节点元素的style对象
divStyle.setProperty("background-color","red")
divStyle.backgroundColor="red"
divStyle.cssText="background-color:red;"
window.getComputedStyle()
行内样式具有最高的优先级，改变行内样式，通常会立即反映出来。但是 网页元素最终的样式是综合各种规则计算出来的。
window.getComputedStyle方法，就是用来返回这个规则，接收一个DOM节点对象做为参数，返回一个包含该节点最终样式信息的对象
例如: window.getComputedStyle(document.querySelector('div')).backgroundColor
或者 window.getComputedStyle(document.querySelector('div')).getPropertyValue("background-color")

JavaScript AJAX

AJAX通过原生的XMLHttpRequest对象发出HTTP请求，得到服务器返回的数据后，再进行处理。
AJAX可以是同步请求也可以是异步请求。大多情况，指异步请求，因为同步的AJAX请求对浏览器有“堵塞效应”
XMLHttpRequest对象用来在浏览器和服务器之间传递数据
一旦拿到服务器返回的数据，AJAX不会刷新整个网页，而只是更新相关部分
需注意：AJAX只能向同源网址（协议、域名 、端口都相同）发出HTTP请求，如果发出跨源请求，就会报错
XMLHttpRequest可以报送各种数据，包括字符串和二进制，而且不仅支持HTTP协议 还支持file和FTP协议
open
XMLHttpRequest的open方式用于指定HTTP动词、请求的网址和是否同步
一共接受五个参数
void open(
string method,
string url,
optional boolean async,
optional string user,
optional string password
);
method：表示HTTP动词，比如 get post put delete head
url：表示请求发送的网址
async：表示请求是否为异步，默认为true
user：表示用于认证的用户名
password：表示用于认证的密码
open方法向指定url发出请求，send方法送出实际的数据
send
用于发送http请求，该方法的参数就是发送的数据
发送带参数的实例
ajax.open('GET'
, 'http://www.example.com/somepage.php?id=' + encodeURIComponent(id)
, true
);
// 等同于
var data = 'id=' + encodeURIComponent(id));
ajax.open('GET', 'http://www.example.com/somepage.php', true);
ajax.send(data);
需要注意的是？：所有XMLHttpRequest的监听事件，都必须在send（）方法调用之前设定
send还可以接受formData类型
formData类型可以用于构造表单数据
var formData =new FormData();
formData.append('username','张三')
var xhr=new XMLHttpRequest（）；
xhr.open("post","/register");
xhr.send(formData)

formData也可以将现有表单构造生成
<form id='registration' name='registration' action='/register'>
<input type='text' name='username' value='张三'>
<input type='email' name='email' value='[e-mail]'>
<input type='number' name='birthDate' value='1940'>
<input type='submit' onclick='return sendForm(this.form);'>
</form>
function sendForm（form）{
var formData=new FormData(form);
var xhr=new XMLHttpRequest（）；
xhr.open("post","/register");
xhr.send(formData)
}
XMLHttpRequest实例属性
readyState
用一个整数和一个常量，表示XMLHttpRequest请求当前所处的状态
0，对应UNSENT,表示XMLHttpRequest实例已经生成，但是open（）方法还未调用
1，对应OPENED，表示send（）方法还没有被调用
2，对应HEADERS-RECEIVED,表示send（）方法已经执行，并且头信息和状态码已经收到。
3，对应LOADING，表示正在接受服务器端传来的body部分的数据
4，对应DONE，表示服务器数据已经完全接受，或者本次接受已经失败
onreadystatechange
该属性指向一个回调函数，当readystatechange事件发生的时候，这个回调函数就会调用，并且XMLHttpRequest
实例的readyState属性也会发生变化
response
属性只读，返回接收到的数据体，类型由responseType属性的值决定
如果请求没有成功或者数据不完整，该属性就会等于null
responseType
指定服务器返回数据的类型
“”，字符串
“arraybuffer”:ArrayBuffer对象
“blob”:Blob对象 适合读取二进制数据，比如图片文件
“document”：Document对象，适合返回XML文档的情况
“json”JSON对象
“text”字符串，适合大多数情况，直接处理文本比较方便
responseText
返回从服务器接收到的字符串
如果返回的数据格式是json，就可以使用responseText属性
var data=ajax.responseText;
data=JSON.parse(data);
responseXML
返回服务器接受到的Document对象,返回的数据会被直接解析为DOM对象
var data=ajax.responseXML;
var chapters=data.getElementsByTagName("chapter");
status
属性只读，表示本次请求所得到的HTTP状态码，是一个整数，通信成功返回200
200, OK，访问正常
301, Moved Permanently，永久移动
302, Move temporarily，暂时移动
304, Not Modified，未修改
307, Temporary Redirect，暂时重定向
401, Unauthorized，未授权
403, Forbidden，禁止访问
404, Not Found，未发现指定网址
500, Internal Server Error，服务器发生错误
statusText
属性只读，返回一个字符串，表示服务器发送状态的提示，包含整个状态信息。例如“200 OK”
timeout
属性等于一个整数，表示多少毫秒之后，如果仍未得到结果，就自动终止。如果该属性等于0，就表示没有时间限制。
事件监听接口
对如下事件可指定监听接口
onloadstart 请求发出
onprogress 正在发送和加载数据
onabort 请求被中止，比如用户调用了abort()方法
onerror 请求失败
onload 请求成功完成
ontimeout 用户指定的时限到期，请求还未完成
onloadend 请求完成，不管成果或失败
withCredentials
该属性是一个bool值，表示跨域请求时，用户信息是否会包含在请求中。如果需要跨域AJAX发送cookie，需要打开withCredentials=true
为了让这属性生效，服务器需要显示的返回Access-Control-Allow-Credential这个信息
Access-Control-Allow-Credential：true
getAllResponseHeaders（）
返回服务器发来的所有HTTP头信息，格式为字符串
getResposneHeader（"FIELDNAME"）
返回http头信息指定的字段的值

JavaScript Document节点

document节点是文档的根节点，每张网页都有自己的document 节点
内部节点属性：
document.doctype 是一个对象，包含当前文档类型
document.firstChild 返回文档第一个节点，通常就是对文档类型的声明
document.documentElement 返回当前文档的根节点，通常是<html>节点
document.defaultView 返回document对象所在的window对象
document.head 返回当前文档的head节点
document.body 返回当前文档的body节点
document.activeElement 返回当前文档中获得焦点的那个元素
节点集合属性
document.links 设定了href的a和area元素集合
document.forms 表单元素集合
document.images <img>元素集合
document.embeds 嵌入对象集合 即embed标签
上面四个属性返回的都是HTMLCollection对象
如果以上四种元素有id或是name属性，就可以在上面的四个属性引用
<form name="myForm"> // html代码
document.myForm===document.forms.myForm
document.scripts返回当前文档的所有脚本
document.styleSheets 属性返回一个类似数组的对象，代表当前网页的所有样式表
document.URL 返回一个字符串，表示当前文档的网址
document.domain返回当前文档的域名
document.lastModified 返回当前文档最后修改的时间戳，格式为字符串
如果需要比较，需将其转化为日期格式 Date.parse(document.lastModify)
document.location返回location对象，提供当前文档的URL信息
document.title 当前文档的标题 可修改
document.characterSet 属性返回渲染当前文档的字符集，如UTF-8
document.readyState 返回当前文档的状态 （loading、interactive、complete）
document.compatMode 属性返回浏览器处理文档的模式（backCompat 向后兼容模式 CSS1Compat 严格模式）
document.cookie 属性用来操作浏览器的Cookie
读写相关方法
document.open() 用于新建一个文档，提供write方法写入，等于清除当前文档，重新写入内容
document.close（） 用于关闭open方法新建的文档
document.write 用于向当前文档写入内容，只要没有close，它写入的内容会追加在已有内容后面
查找节点的方法
document.querySelector（） 只返回第一个匹配的
document.querySelectorAll（） 返回所有匹配的
该方法接收CSS选择器作为参数，返回匹配该选择器的元素节点。
document.getElementsByTagName()
该方法返回所有指定HTML标签的元素，返回一个HTMLCollection对象
document.getElementsByClassName()
返回所有class名字符合指定条件的元素
document.getElementsByName()
选择拥有name属性的HTML元素，返回一个类似数组的对象
document.getElementById()
返回匹配指定id属性的元素节点
document.elementFromPoint()
返回位于页面指定位置最上层的Element子节点
生成节点的方法
document.createElement()
该方法用来生成网页元素节点
var newDiv=document.createElement('div');
document.createTextNode()
该方法用来生成文本节点
var newContent=document.createTextNode("hello")
newDiv.appendChild(newContent)
document.createAttribute()
该方法生成一个新的属性对象节点，并返回
var a=document.createAttribute("my_attr")
a.value="newval"
var node=document.getElementById("div")
node.setAttributeNode(a)


参考：http://javascript.ruanyifeng.com/bom/engine.html