《深入浅出JavaScript》笔记

发表于   |   分类于   |     |   阅读次数

第一章存储数据

JavaScript使用三种基本数据类型text,number,boolean
用const创建常量，常量以全大写字母命名

  • parseInt()和parseFloat()
  • toFix() 四舍五入到小数点后两位
  • isNaN() 检查是否为数字

第二章 探索客户端

  • setTimeout() 单次定时器
  • setInterval() 间隔定时器
  • clearInterval() 清除间隔定时器
  • document.body.clientHeight
  • document.body.clientWidth 客户端窗口宽度客户端窗口只是浏览器窗口里呈现网页的部分，不包含标题栏工具栏
  • onload事件 在页面或图像加载完成后立即发生
  • onresize 浏览器有任何尺寸修改时触发
  • readCookie()、writeCookie()、eraseCookie()

第三章 决策

switch/case

1
2
3
4
5
6
7
8
9
switch(test data){
    case match1: //冒号
    statement;
    break;
    ...
    default:
    statement;
    break;
}

第四章 循环

  • break 立即跳出循环
  • continue 强迫循环跳入下一轮

第五章 函数

函数其实只是“值”引用到函数主体的变量，函数名称也被称为函数引用。

第六章 表单与验证

正则表达式

元字符

  • . 匹配任何字符，换行符除外
  • \s 匹配空格
  • \d 匹配数字
  • ^ 字符串需以模式起始
  • \w 匹配任何字母数字（字母或数字）字符
  • $ 字符串需以模式结束

限定符

  • * 限定符前的子模式必须出现0或多次
  • + 限定符前的子模式必须出现1或多次
  • {n} 限定符前的字模式必须出现n次
  • ? 限定符前的子模式必须出现0或1次
  • ()集合字符或/和元字符，为字模式
  • {min,max}子模式必须出现至少min次，不可多于max次

字符类

[CharacterClass] 字符类是一组匹配单一字符的正则表达式

第七章 利用DOM分割HTML

  • innerHTML 用于获取和设置网页内容
  • nodeValue 存储于节点的值，只限文本与属性节点使用（不含元素）
  • nodeType 节点类型，用代号表示1，2，3….
  • childNode 包含节点下所有子节点的数组，以出现在HTML代码中的顺序而排列
  • firstChild 节点下第一个子节点
  • lastChild 节点下的最后一个子节点

二、改变节点三步骤

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

三、改变元素样式类

  • className 提供对元素样式类的访问
1
alert(document.getElementById("decision1").className);
  • 节点的style特性提供对单一样式特性的访问
1
<span><style:"visibility:hidden"></span>

第八章 为数据带来生命

一、对象

对象在一个储存容易内链接变量与函数
变量称为对象的特性，函数称为对象的方法

二、标准JavaScript对象

  • Date 在Date对象里，时间以毫秒数表达
  • String
  • Array

三、构造函数负责创建对象

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

1
var invitation = new Invitation{"Somebody","Something","Sometime","Somewhere"};

构造函数大部分工作就是创建对象的特性（需要使用关键字this，还有对象的初始值。)
构造函数虽然确立了对象的设计，但实际上并未创建任何事物，直到使用new运算符调用构造函数，才创建了对象。

1
2
3
4
5
function Blog(body,date){
this.body = body;
this.date = date;
}
var blogEntry = new Blog("Got the new cube I ordered...","08/14/2008");
  • toString() 每个对象都具有toString()方法，它试图为对象提供文本字符串版的表达方式。
  • getMonth()切记：月份从0开始
  • getDate()
  • getFullYear()

四、字符串方法

  • indexOf() 寻找字符串是否包含特定子字符串, 字符串索引从0开始，中间的标点或空格算一格，起始位置的引号不算
  • charAt() 寻找特定字符在字符串里的位置,只搜索特定字符
  • toLowerCase()与toUpperCase() 转换字符串为小写或大写的

五、Math方法

  • round() 把浮点数四舍五入为整数
  • floor() 把浮点数无条件舍去为整数
  • ceil() 把浮点数无条件进位为整数
  • rondom() 产生介于0与1间的随机数
  • PI 常量,3.14

第八章 创建自定义对象

一、对象类

是对象的描述，一份描绘对象构成的模板。

二、对象实例

根据模板创建的事物

类就像建筑蓝图，实例则是房子，可以根据类建造很多实例。 方法没有复制到实例的必要性。

三、prototype（原型）对象用于设定隶属于类层的特性和方法，而非属于实例的。

1
2
3
4
5
Blog.prototype.toHTML = function(){
...
}
var blgoEntry1 = new Blog("Not much going on.",...);
blogEntry1.toHTML();

对象命名的唯一原则，只有首写字母大写。

四、类特性也能共享

类特性（class property)与类拥有的实例方法很相似，他们都隶属于类，只有单一一份可供所有实例访问。类特性在类里储存一次，但能被所有实例访问。

1
Blog.prototype.signature = "Puzzler Ruby";

五、类拥有的实例方法

它虽然属于类，但能访问实例特性
类特性的引用方式与一般实例特性一样this.signature

六、prototype对象能扩展内置JavaScript对象

1
2
3
4
5
6
7
8
String.prototype.scramble = function(){
...
};  
//调用  
alert(this.signature.scramble());
Date.prototype.shortFormat = function(){
    return(this.getMonth()+1)+'/'+this.getDate()+"/"+this.getFullYear();
};

七、类方法

为类所有，但无法访问实例特性的方法，但能访问类特性。

1
2
3
4
5
6
7
8
9
//eg.1  
Blog.showSignature = function(){
    alert("This blog created by " + Blog.prototype.signature + ".");
//eg.2  
Blog.blogSorter = function(blog1,blog2){
    return blog2.date - blog1.date;
};  
//调用  
blog.sort(Blog.blogSorter);

当某个自变量未被传给函数、方法或构造函数时，在任何试图使用自变量值的代码里，它的值都是null。

第九章 AJAX

XML没有定义任何标签与属性——它只是一组标签与属性该如何创建与使用的规则。
XHTML中的所有空标签都需要加上空格与反斜线

1
This is just a sentence.<br />

AjaxRequest

自定义AjaxRequest对象提供了使用Ajax，但不直接面对XMLHttpRequest对象的便利方式。

  • getReadyState() 检查请求状态
  • getStatus()
  • getResponseText() 以纯文本的格式取得Ajax响应里的访问。
  • getResponseXML() 以结构XML代码的格式取得Ajax响应里的数据。
  • send(type,url,handler,postDataType,postData)

type:GET或POST。
GET：获取数据，但不改变服务器上的任何事物。
POST：传送数据至服务器，但会造成服务器上的改变。

  • url:服务器的url
  • handler:用于处理响应的回调函数
  • postDataType：被传输的数据类型（只用于POST，GET不需要）
  • postData:被传输的数据（中用于POST，GET不需要） 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
var ajaxReq = new AjaxRequest();
ajaxReq.send("GET","blog.xml",handleRequest);
function loadBlog(){
    document.getElementById("blog").innerHTML="<img src='wait.gif' alt='loading '/>";
    ajaxReq.send('GET','blog.xml',handleRequest);
}
//eg.
Date.prototype.shortFormat = function() {
    return (this.getMonth() + 1) + "/" + this.getDate() + "/" + this.getFullYear();
}
//调用
function initForm() {
    document.getElementById("date").value = (new Date()).shortFormat();
}
坚持原创技术分享，您的支持将鼓励我继续创作！