深入浅出JavaScript(中文版)_

创建变量，使用关键字var; 创建常量，使用关键字const;

大驼峰用于对象，小驼峰用于变量和函数。

在试图相加数字时意外做了字符串相连，是种常见的JavaScript错误。如果想做数字相加，请确定先把字符串转换为数字了，再应用加法。

parseInt()：把字符串传给函数，函数就把字符串转换为整数。

parseFloat()：把字符串传给函数，函数就把字符串转换为(十进制)浮点数。

制作（单次）定时器的JavaScript内置函数被称为setTimeout(). 函数需要的两项信息，分别是时间延迟(time delay)与定时器停止时欲运行的程序代码。提供者两项信息时没有顺序问题。

间隔定时器的设定大致与单次定时器的设计相去不远，只不过改为调用setInterval()函数。设定间隔定时器，即可于每次间隔延迟到期时反复运行程序代码；

客户端窗口的宽度（document.body.clientWidth）和高度（document.body.clientHeight），以及“整体”浏览器窗口的高度与宽度，两者的区分也相当重要。客户端窗口只是浏览器窗口里呈现网页的部分，也就是说，客户端窗口不包含标题栏与工具栏。

调整浏览器窗口尺寸将触发onresize事件。

cookie延长脚本的生命周期

有时候，我们真的需要不会消失的数据。但JavaScript变量的生命却如昙花一现，于浏览器关闭或网页更新的弹指间消逝无踪。浏览器的cookie提供了持久地存储数据，让数据比脚本生命周期更长的方式。

唯一可靠的cookie支持检查途径只有navigator.cookieEnable特性。

onblur() 事件会在对象失去焦点时发生。onblur()事件极度适合触发数据验证;

<input> autofocus属性：文本输入字段被设置为当页面加载时获得焦点;

访问表单的数据

每个表单域都有一个form对象，可被传给任何验证表单数据的函数。

<input id="zipcode" name="zipcode" type="text" onclick="showIt(this.form)" />

form对象厉害的地方，在于它也是个数组，负责存储表单中所有域。但它的数组元素并非利用数值索引存储，而是使用域独有、于name属性设定的标识符。

function showIt(theForm) {alert(theForm["zipcode"].value);
}

传入参数的构造：

document.getElementById("message_help");

错误方法:

var temp = "'" + this.name + "_help" + "'";
document.getElementById(temp);

正确方法：

var temp = this.name + "_help";
document.getElementById(temp);

注意是不用加 ' ' 的。

通过在每个表单域后面添加一个span元素来提醒用户，比alert()提醒的体验会更好~

解开正则表达式的面纱

1. 创建正则表达式，有点像创建字符串，只不过正则表达式出现在一对斜线（//）里，而不是出现在一对引号里。正则表达式单纯设计用于匹配文本字符串内的字符模式，所以只能应用在字符串上。

2. 正则表达式元字符(metacharacter)

. : 匹配任何字符，换行符除外；
\d : 匹配任何数字字符；
\w : 匹配任何字母数字（字母或数字）字符；
\s : 匹配空格（空格包括space、tab、换行符等）；
^ : 模式的起始；
$ : 模式的结束；
| : 匹配一连串可选择的子模式
[] : 匹配可选字符

3. 正则表达式限定符(quantifier)

限定符前为子模式(sub-pattern)，限定符即应用在子模式，并控制子模式出现在模式里的次数;

* : 限定符前的子模式必须出现0或多次;
+ : 限定符前的子模式必须出现1或多次;
? : 限定符前的子模式必须出现0或1次;
{n} : 限定符前的子模式必须出现恰好n次;
{n,m} : 限定符前的子模式必须出现至少n次，至多m次;
() : 集合字符或/和元字符，成为子模式;

4. 不是元字符的任何文字将于正则表达式里“照样匹配”。也就是所，/howard/可找出任何包含“howard”的字符串；

利用正则表达式验证数据

JavaScript里的正则表达式由RegExp对象表示，RegExp对象的test()方法用于检查字符串是否包含正则表达式模式。

var regex = /^\d{5}$/;
if (!regex.test(inputField.value))// The ZIP code is invalid !

利用特性攀爬DOM树

nodeValue: 存储于节点的值，只限于文本与属性节点使用（不含元素节点）;
childNodes: 包含节点下所有子节点(文本和属性节点)的数组 ;
nodeType: 节点类型(数字代号) ;
firstChild: 节点下的第一个子节点 ;
lastChild: 节点下的最后一个子节点 ;

特别注意：网页上包围元素节点的空格被解释为空文本；

<body><p>linxd</p>
</body>

DOM树如下所示：（DOM树只包含元素节点和文本节点，不包含属性节点）

因此，执行下列JS代码:

    var test = document.getElementsByTagName("body")[0].childNodes;alert(test.length);for (var i=0; i<test.length; i++) {alert(test[i].nodeValue);}

可以看到：包含三个子节点，从左到右分别是文本节点("")、元素节点(p)、文本节点(""); 他们的nodeValue值分别是""、null、"";

执行下面的JS代码：

var test = document.getElementsByTagName("body")[0].childNodes[1].childNodes;alert(test.length);for (var i=0; i<test.length; i++) {alert(test[i].nodeValue);}

可以看到，此时只有一个子节点，即文本节点("linxd")，他的nodeValue值为"linxd";

因此，有时候为了防止找到文本节点，我们会用firstElementChild和lastElementChild，这种情况是很常见的。

改变节点文本的（安全）三步骤

移除所有子节点 (removeChild);
根据新内容创建新的文本节点 (createTextNode);
把新创建的文本子节点附加在节点下 (appendChild);

构造你的自定义对象

使用new运算符，以构造函数创建对象。

var invitation = new Invitation("Somebody", "Something", "Sometime", "Somewhere");

构造函数用于创建对象的属性(this)和初始值；

function Invitation(who, what, when, where) {this.who = who;this.what = what;this.when = when;this.where = where;
}

日期专用的JavaScript对象

var now = new Date();
var blogDate = new Date("08/14/2008");

Date对象需以new运算符创建;

toString()方法提供对象的字符串表现方式;

自定义数组排序

Array对象的sort()方法+compare(x,y)函数;

nums.sort(compare);

JavaScript不能以中括号([])访问字符串内的某个字符，要访问字符串内的某个字符需用charAt()方法；

String对象的indexOf()方法在字符串内搜索另一个字符串，返回搜索目标的索引位置。

在类层，使用prototype

prototype对象让方法可存储在类内，以免实例不必要地一直复制程序代码。

Blog.prototype.toHTML = function() {...};

1. 实例特性和方法在构造函数里面创建(this)；

2. 使用prototype创建的类特性和方法，类方法可以访问实例特性(this)；

3. 不使用prototype对象，仅使用类名和对象符号(点号)把方法指派给类，这样创建的类方法无法访问实例特性。

Blog.showSignature = function() {alert("This blog created by " + Blog.prototype.signature + ".");
}

4. 实例透过类名访问类方法；

Blog.showSignature();

为YouCube添加图像

在遇到可选参数时，把它们放在参数列表的尾端。

在网页表头中运行的JavaScript代码无法访问网页内容;网页元素要到onload事件触发的前一刻才完成创建。

万用HTML: XML

XML是种为任何格式的数据设计格式的标记语言。xml文件的扩展名为.xml ;

援助Ajax的JavaScript: XMLHttpRequest

JavaScript内置一个称为XMLHttpRequest的对象，用于发起Ajax请求并处理Ajax响应。这个对象非常复杂，包含许多通力合作也支持Ajax的方法与特性。

1. open()和send()方法合作准备Ajax请求，而后发送到服务器。

open(): 准备请求，指定请求的类型、URL及其他细节。
send(): 传送请求，交给服务器处理。

2. abort()方法只用来需要取消Ajax请求的时候。

3. readyState和status两个特性用于判断Ajax请求是否以合格的相应结束。

readyState: 请求的状态代码: 0(初始化)、1(开启)、2(已传送)、3(接收中)、4(已载入)。
status: HTTP的请求状态代码，例如404（找不到文件）或200（OK）;

4. onreadystatechange：请求状态改变时会被调用的函数引用，处理相应的地方

5. responseText和responseXML两个特性存储服务器返回的Ajax相应数据。

responseText: 由服务器返回的相应数据，格式为纯文本字符串；
responseXML: 由服务器返回的响应数据，格式为XML节点树构成的对象。

XMLHttpRequest对象要在数种浏览器上运作，需要这些代码：

var request = null;
if (window.XMLHttpRequest) {try {request = new XMLHttpRequest();} catch(e) {request = null;}
// Now try the ActiveX (IE) Version
} else if (window.ActiveXObject) {try {request = new ActiveXObject("Msxm12.XMLHTTP");// Try the older ActiveX object for older versions of IE} catch(e) {try {request = new ActiveXObject("Microsoft.XMLHttp");} catch(e) {request = null;}}
}

请求跑在服务器运动场

1. 调用AjaxRequest对象的send()方法后，有个Ajax请求被传送到服务器，网页则先行处理网页事务，同时服务器也在处理请求。这就是Ajax的“异步”发光发热的地方。如果请求需要同步，网页只好先行冻结、无法动作，直到服务器返回响应。

2. GET和POST的主要区别，在于服务器是否经历(源自数据的)状态改变，例如存储数据至数据库。倘若如此，则是POST; 否则，即为GET。

转载于:https://www.cnblogs.com/linxd/p/4398687.html