JS概述

JS概述

@(JavaScript)

语言核心

两个重要的数据类型是：

• 对象
• 数组

对象：键值对集合

var book = {
	topic:"Javascript",
	fat:true
};

对象属性的访问

book.topic // Way 1
book["fat"] // Way 2

赋值即创造

这个在其他语言环境中是不常见的，目前只在JS中见过。

book.author = "Flanagan"; // 创建了新的属性
book.contents = {}; // 添加新的空对象作为book对象的属性

数组 : 与其他语言几乎相同

var primes = [1,2,3,4];
primes[2]; // => 3
primes.length; // => 4, 元素个数
primes[4] = 9; // 赋值即创造

强大的动态性

这个标题下，我准备强调的是数组和对象中都可以包含另一个对象或数组。

复习到这里，想到JSON文件格式，和这个特性完美契合。

JS类型的函数

函数可以多次调用。

最普通的定义函数方法：

function plus(x)
{
	return x++;
}

变量型的定义法

var square = function(x)
{
	return x * x;
}; // 注意这里要有分号

square(4); // => 16

在JavaScript世界里，所有事物都是一个Object。

对象身上的函数也叫method。

一般数组对象本身已经定义了一些方法。

var a = [];
a.push(1,2,3); // 添加三个元素
a.reverse(); //翻转数组

为对象添加自定义函数

var points = [{x:0,y:0},{x:1,y:1}];
points.dist = function()
{
	var p1 = this[0];
	var p2 = this[1];
	var a = p2.x - p1.x;
	var b = p2.y - p1.y;
	return Math.sqrt(a * a + b * b);
};
//调用
points.dist(); // 返回两点之间距离

这里有三个点需要单独拿出来说：

• 赋值即创造：points.dist是新加属性
• 函数可以赋予变量
• this关键字表示当前的对象

小总结：JavaScript是面向对象的语言。

但是，这个面向对象与其他主流语言的面向对象有很大的不同。牵涉到JS核心的类和模块相关的知识理解。也需要进一步研究原型链相关的知识。

以最简单的例子来看这种思路：

// 定义一个构造函数初始化一个新的Point对象
function Point(x,y)
{
	this.x = x; // this指代初始化的实例
	this.y = y; // 赋值即创造-->属性
}
var p = new Point(1,1); // 使用new关键字创建实例

原型链这个需要单独拿出来说：

Point.prototype.r = function()
{
	var res = Math.sqrt(this.x * this.x + this.y * this.y);
	return res;
};
p.r(); // 对象实例可以调用方法

这个示例演示的是：通过给构造函数的prototype对象赋值，可以给Point对象定义方法。

客户端JS

通过尖刀标签<script></script>在HTML中引入JS。

<script>
function moveOn()
{
	var answer = confirm("Ready?");
	if(answer) window.location = "http://taobao.com"; //跳转到链接	
}
setTimeout(moveOn,60000); // 1分钟后执行函数
</script>

注意到如何在JS中设定跳转URL的方法：

window.location = "http://...."

另外，之前把这句setTimeout(moveOn,60000);放到了moveOn函数里面，是不对的，这个是在全局环境下监控时间，然后调用函数执行。

通过脚本操纵HTML元素

这是JS里非常核心的内容，即我们常说的DOM操作。

可以做到：

• 为HTML设置属性
• 修改元素内容
• 给HTML文档添加新结点:document.createElement

展示一个例子：

function debug(msg)
{
	var log = document.getElementById("debuglog");
	if(!log) // log为空时
	{
		log = document.createElement("div");
		log.id = "debuglog";
		log.innerHTML = "<h1>Debug log</h1>";
		document.body.appendChild(log); //加到文档末尾
	}
	var pre = document.createElement("pre");
	var text = document.createTextNode(msg);
	pre.appendChild(text);
	log.appendChild(pre); //pre被添加到log
}

通过JS操作CSS

大的范畴仍然是通过JS操作HTML元素属性，而影响显示的属性常常是两个：

• style
• class

// 隐藏元素e
function hide(e,reflow)
{
	if(reflow)
	{
		e.style.display = "none"; 
	}
	else
	{
		e.style.visibility = "hidden"; 
	}
}
function highlight(e)
{
	if(!e.className) e.className = "hilite"; //
	else e.className += "hilite"; //假设CSS中存在这个类名
}

END.