深入浅出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树只包含元素节点和文本节点,不包含属性节点)

 深入浅出JavaScript(中文版)__莫里森 初读笔记

 

因此,执行下列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";

 

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

 

改变节点文本的(安全)三步骤

  1. 移除所有子节点 (removeChild);
  2. 根据新内容创建新的文本节点 (createTextNode);
  3. 把新创建的文本子节点附加在节点下 (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;
    }
  }
}

深入浅出JavaScript(中文版)__莫里森 初读笔记

 

 

 

请求跑在服务器运动场

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

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