javascript

JavaScript 编程手册

JavaScript 是一门专为网页交互而设计的脚本语言,由下列三个不同的部分组成:

  • 核心(ECMAScript),提供核心语言功能;
  • 文档对象模型(DOM),提供访问和操作网页内容的方法和接口;
  • 浏览器对象模型(BOM),提供与浏览器交互的方法和接口;

JavaScript 是一门宿主语言,功能主要取决于宿主环境。要想学好它,至少要掌握 3 套 API:

  • 标准的 JavaScript API;
  • 浏览器 API;
  • Node.js API;

推荐书籍

  • 《JavaScript DOM 编程艺术》
  • 《JavaScript 高级编程》
  • 《Web 开发权威指南》

学习 JavaScript 的开发环境

  1. 打开 Google Chrome;
  2. 用快捷键 Option + Command + i 呼出 Developer’s Panel;
  3. 选择 Source 标签;
  4. 在左侧边栏选择 Snippets 标签;
  5. 创建 .js 文件,比如,test.js;
  6. 在中间的代码书写区域编写代码;
  7. 使用 Command + Enter 执行代码……

有了这样的运行环境,就可以开始学习了……

学什么?怎么学?先从最经典的教材开始呗,

  1. 硬着头皮一章一章地读完,
  2. 每个代码示例都要自己动手敲,直到获得正确结果;
  3. 读不懂的地方先放下,接着读下去;
  4. 反复回头重新阅读读不懂的地方,实在搞不定再放在一边;
  5. 把这本书反复阅读很多遍……
  6. 不断整理其中的重要概念,以及重要概念之间的必要联系……

教材的地址在这里:http://eloquentjavascript.net/

注意:“通读”是做工程师必须的能力。你不一定要全部能够理解(对任何人来说,最初都不可能做到),但你必须对整个文档有一个整体的认识。这就好像读书的时候,你能做到虽然不能完全读懂,但确实能够完整读完 —— 之后再多读几遍么!古人说的是对的:读书千遍其义自见。还有就是,若是从一开始就没有“通读”的意识,后面不知道会吃多大的亏,而且吃了多少亏自己都完全不知道…… 这很可怕。

闭包

今天被问到了一个闭包的问题,简单记录下:

var position = 'outter';

function getPosition() {
    return function() {
        var position = 'inner';
        return this.position;
    }
}

console.log(getPosition()());// outter

1/3 - ECMAScript

  • 语法
  • 类型
  • 控制语句
  • 关键字
  • 保留字
  • 操作符
  • 对象

2/3 - DOM(Document Object Model)

借助 DOM 提供的 API ,开发人员可以退轻松自如地删除、添加、替换和修改任何节点。

  • DOM Level 1,由两个模块组成:DOM Core 和 DOM HTML。主要目标是映射文档结构。
  • DOM Level 2
    • DOM Views:
    • DOM Events:定义了事件和事件处理的接口;
    • DOM Style:定义了基于 CSS 为元素应用样式的接口;
    • DOM Traversal and Range:
  • DOM Level 3
    • DOM Load and Save
    • DOM Validation

3/3 - BOM(Browser Object Model)

常用代码片段及技巧

分号:加 还是 不加,这是个哲学问题

虽然语句结尾的分号不是必需的,但我们建议任何时候都不要省略它。因为

  • 加上分号可以避免很多错误(例如不完整的输入);
  • 可以放心地通过删除多余空格来压缩 ECMAScript 代码(代码行结尾处没有分号会导致压缩错误);
  • 在某些情况下增进代码的性能,因为解析器就不必花时间推测应该在哪里插入分号了;

undefined 和 null

undefined 和 null 都用来表示没有“值”。

  • 用来保存【字面量】的变量没有“值”时,其值 undefined,这通常是自动的。
  • 用来保存【对象】的变量没有“值”时,其值 null,这是人工设置的。
  1. Step1. 声明(定义),默认值为 undefined
  2. Step2. 初始化,更改变量的默认值
function giveMeLife(obj) {
	if(obj === null){
		var random = Math.random().toString();
		var age = random.substring(random.length-2);
		return {age: parseInt(age, 10)};
	} else {
		obj.age = '生命只有一次';
	}
}

var name; // a 的默认值为 undefined
console.log(name);

name = 'no name one';
console.log(name);

var baby = null;

var person = giveMeLife(baby);
console.log(person);

giveMeLife(person);
console.log(person);

使用未声明的变量会报错 Uncaught ReferenceError: c is not defined(…)

NaN

var Month=13;

if (Month < 1 || Month > 12)
{
   Month = Number.NaN;
}

提示:请使用 isNaN() 全局函数来判断一个值是否是 NaN 值。

循环语句

for 比 while 更具有灵活性。例如将 for 循环转换成 while 循环:

var count = 10;
var i = 0;
for(; i < count; ){
	alert(i);
	i++;
}

相比于 while 循环,for 循环只是把与循环有关的代码都集中在了一个位置而已。

判断 Object 或 Array 是否为空

  • 数组: if(arrayValue.length)
  • 对象: if(Object.getOwnPropertyNames(objectValue).length)
console.log(Object.getOwnPropertyNames({}).length);// 0
console.log(Object.getOwnPropertyNames([]).length);// 1 存在属性 length
[]

计算金额时的浮点精度解决方案

关于浮点数值计算会产生误差的问题。这是使用基于 IEEE754 数值的浮点计算通病,ECMAScript 并非独此一家,其他使用相同数值格式的语言也存在这个问题。

精度损失只在小数点后。
因为:计算金额通常只要精确到分,即小数点后两位。
所以:只要先将计算的数字放大100倍,最后在缩小100倍。

var a = 0.1;
var b = 0.2;
var c = a + b;
var d = (100 * a + 100 * b)/100;
console.log(c);// 0.30000000000000004
console.log(d);// 0.3

// 进一步对二元计算进行封装
// 加法 0.1 + 0.2 = 0.30000000000000004
function add(a, b) {// 放大 100 倍
	a *= 100;
	b *= 100;
	return (a + b)/100;
}
// 减法 0.3 - 0.1 = 0.19999999999999998
function sub(a, b) {// 放大 100 倍
	a *= 100;
	b *= 100;
	return (a - b)/100;
}
// 乘法 0.1 * 0.2 = 0.020000000000000004
function mul(a, b) {// 放大 10000 倍
	a *= 100;
	b *= 100;
	return (a * b)/10000;
}
// 除法 0.3 / 3 = 0.09999999999999999
function div(a, b) {//
	a *= 100;
	b *= 100;
	return (a / b);
}

console.log(add(0.1,0.2));// 0.3
console.log(sub(0.3,0.1));// 0.2
console.log(mul(0.1,0.2));// 0.02
console.log(div(0.3,3));// 0.1

// 更进一步可以动态指定精确度

限制随机

var a = [100,200,300];
var b = Math.floor(Math.random()*3);
console.log(a[b]);

事件

JavaScript 于 HTML 之间的交互是通过事件实现的。

  • HTML 事件处理程序;
  • DOM 0 级事件处理程序;
  • DOM 2 级事件处理程序;
  1. HTML 事件处理程序
<input type="button" value="clicke me" onclick="alert('hello');"

代码段

删除确认

<a href="url_to_delete" onclick="return confirm('Are you sure you want to delete this item?');">Delete</a>

Ajax