JavaScript 高级程序设计之深入系统化

系统性的深入学习

作者 Haojen Ma 日期 2015-10-31
JS
JavaScript 高级程序设计之深入系统化

一章 JS 简介

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

  1. 核心 ECMAScript, 提供ECMA 定义, 提供核心语言功能
  2. 文档对象模型 DOM, 提高访问和操作网页内容的方法和接口
  3. 浏览器对象模型 BOM, 提供与浏览器交互的方法和接口

二章 使用 JS

```js
<script>
	function sayHi(){
		alert(" Hi ! ")
	}
</script>

script 标签内部JS 代码会从上到下依次解释,在解释器对该元素内部的所有代码求值完毕以前, 页面中的其余内容都不会被浏览器加载或显示

浏览器禁用或不支持 script

noscript 用来解决该问题, 该元素可以包含能够出现在 body 元素中的任何 HTML 元素, 除了 script 元素. 以下是触发条件:

  1. 浏览器不支持脚本
  2. 浏览器支持脚本, 但脚本被禁用

三章 基本概念

3.4 5种基本数据类型,一种复杂数据类型:

  1. Undefined
  2. Null
  3. Boolean
  4. Number
  5. String
  6. Object

3.4.1 typeof 操作符

typeof 是操作符而不是函数 用来检测变量的数据类型, 需要注意的是 返回"object" ,代表数据类型可能是对象,或null

3.4.5 Number

浮点数值不能用来作比较, 0.1+0.2的结果不是0.3,而是0.300000000000000000004.

var a=0.1,b=0.2;
if(a+b ==0.3){
	//do something
}

String 类型

数值, 布尔值,对象和字符串值都有 toString() 方法, 但 null和 undefined 值没有这个办法

在不知道要转换的值是不是 null 和 undefined 的情况下,还可以使用转型函数 String(), 该函数可以将任何类型的值转换为字符串. 该函数遵循下列转换规则:

  1. 如果值有 toString() 方法, 则调用该方法并返回相应的结果

  2. 如果值是 null, 则返回 "null"

  3. 如果值是 undefined, 则返回" undefined"

    var x,y=null; String(x+y)

Object 类型

ECMAScript 中的对象其实就是一组数据和功能的集合.对象可以通过执行 new 操作符后跟要创建的对象类型的名称来创建. 而创建 Object 类型的实例并为其添加属性或和方法

var o = new Object();

在 ECMAScript中, 如果不给构造函数传递参数, 则可以省略后面的那一对圆括号.

var o = new Object; // 有效但不推荐省略括号

Object类型所具有的任何属性和方法也同样存在于更具体的对象中. Object 的每个实例都具有一下属性和方法:

  1. constructor(翻译:构造器): 保存着用于创建当前对象的函数
  2. hasOwnProperty(): 用于检查给定的属性在当前对象实例中,(而不是在实例的原型中) 是否存在.
  3. isPrototypeOf(): 用于检查传入的对象是否是另一个对象的原型
  4. propertyIsEnumerable(): 用于检查给定的属性是否能够使用 for- in 语句来枚举
  5. toLocaleString():不解释
  6. toString():返回对象的字符串表示
  7. valueOf(): 返回对象的字符串,数值或布尔值表示,通常与 tostring 方法的返回值相同

在 ECMAScript 中 object 是所有对象的基础, 因此所有对象都具有这些基本的属性和方法.

3.5 操作符

用于操作数据值的操作符

一元操作符

只能操作一个值的操作符叫做一元操作符

  1. a++ 和 a-- (++a和--a) : 递增和递减操作符, 执行前置递增和递减操作时, 变量的值都是在语句被求值以前改变的

    var age =29;
var ageResule = --age+2; //30

由于前置递增递减与执行语句的优先级相等, 因此整个语句会从左至右被求值

	var num1 = 2;
	var num2 =20;
	var num3 =--num1+ num2 // 21
	var num4 = num1+num2 // 21

在这里，num3之所以等于21是因为num1先减去了1才与num2相加。而变量num4也等于21时因为相加的假发操作使用了num1减去1之后的值。

后置递减（加）与前置递减（加）有一个非常重要的区别，即这些操作时在包含它们的语句被请求值之后才执行的，这个区别在某些情况下不是什么问题，例如：

var age =29;
age++;
与
++age
age的结果都是 29

把递增操作符放在变量后并不会改变语句的结构，因为递增是这条语句的唯一操作， 但是当语句中还包含其他操作时，就会有区别了

var num1 = 2;
	var num2 =20;
	var num3 =--num1-- + num2 // 22 //使用了 num1的原始值完成计算后再自减1。
	var num4 = num1+num2 // 21，使用了自减之后的相加

第七章 函数表达式

定义函数的方式有两种：一种是函数声明，另一种就是函数表达式。 函数声明：

function functionName(){
	//函数体
}

函数声明的一个重要特种就是函数声明提升 ， 意思就是在执行代码之前会先读取函数声明。 这就意味着可以把函数声明放在调用它的语句后面

函数表达式：

var functionName = function(){
	//函数体
}

这种形式看起来好像是常规的变量赋值语句，既创建一个函数并将它赋值给变量 functionName，这种情况下创建的函数叫做匿名函数， 因为 function 关键字后面没有标识符，且匿名函数的 name 属性是空字符串。 函数表达式与函数声明最大的不同就是： 函数表达式没有函数声明提升

递归

递归函数就是一个函数通过名字调用自身的情况下构成的

function fn(num){
	if(num<1){
	return 1;
	}else {
		return num * fn(num-1)
	}
}

闭包

闭包是指有权访问另一个函数作用域中的变量的函数。

13章 事件

使用DOM2级方法添加事件处理程序的主要好处是可以添加多个事件处理程序,且会按照顺序触发,但需要注意的是用此方法添加的事件处理程序,只能使用removerEvenListener()来移除,且如果通过 addEvenListener 添加的匿名函数将无法移除

注意: onclick 事件也可以通过键盘上的回车键进行访问

客户端坐标 client 事件和 页面坐标的区别是:通过前者能知道鼠标是在什么视口位置发生的

事件坐标分类:

  1. clientX 和 clientY 坐标
  2. pageX and pageY
  3. screenX and screenY
FEATURED TAGS
JS
FRIENDS