创建变量,使用关键字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。