be a geek-从零开始学编程:无处不在的Javascript 4

开始之前

打个小广告:女朋友写的中文女生与程序员的故事: 《时光太窄,指缝太宽》

面向对象

开始之前先我们简化上面的代码，

	Person.future=function dream(){
		future;
	}

看上去比上面的简单多了，不过我们还可以简化为下面的代码。。。

	var Person=function(){
		this.name="phodal";
		this.weight=50;
		this.height=166;
		this.future=function dream(){
			return "future";
		};
	};
	var person=new Person();
	document.write(person.name+"
");
	document.write(typeof person+"
");
	document.write(typeof person.future+"
");
	document.write(person.future()+"
");

只是在这个时候Person是一个函数，但是我们声明的person却变成了一个对象一个Javascript函数也是一个对象，并且，所有的对象从技术上讲也只不过是函数。这里的+"
"是HTML中的元素，称之为DOM，在这里起的是换行的作用，我们会在稍后介绍它，这里我们先关心下this。this关键字表示函数的所有者或作用域，也就是这里的Person。

上面的方法显得有点不可取，换句话说和一开始的

    document.write(3*4);    

一样，不具有灵活性，因此在我们完成功能之后，我们需要对其进行优化，这就是程序设计的真谛——解决完实际问题后，我们需要开始真正的设计，而不是解决问题时的编程。

	var Person=function(name,weight,height){
		this.name=name;
		this.weight=weight;
		this.height=height;	
		this.future=function(){
			return "future";
		};
	};
	var phodal=new Person("phodal",50,166);
	document.write(phodal.name+"
");
	document.write(phodal.weight+"
");
	document.write(phodal.height+"
");
	document.write(phodal.future()+"
");

于是，产生了这样一个可重用的Javascript对象,this关键字确立了属性的所有者。

其他

Javascript还有一个很强大的特性，也就是原型继承，不过这里我们先不考虑这些部分，用尽量少的代码及关键字来实际我们所要表达的核心功能，这才是这里的核心，其他的东西我们可以从其他书本上学到。


所谓的继承，

	var Chinese=function(){
		this.country="China";
	}


	var Person=function(name,weight,height){
		this.name=name;
		this.weight=weight;
		this.height=height;	
		this.futrue=function(){
			return "future";
		}
	}
	Chinese.prototype=new Person();




	var phodal=new Chinese("phodal",50,166);
	document.write(phodal.country);

完整的Javascript应该由下列三个部分组成:

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

 
我们在上面讲的都是ECMAScript，也就是语法相关的，但是JS真正强大的，或者说我们最需要的可能就是对DOM的操作，这也就是为什么jQuery等库可以流行的原因之一，而核心语言功能才是真正在哪里都适用的，至于BOM真正用到的机会很少，因为没有好的统一的标准。

一个简单的DOM示例,

	
	
	
	
	
		
		
Red
	
		
	

我们需要修改一下helloworld.html添加

	
Red

同时还需要将script标签移到body下面，如果没有意外的话我们会看到页面上用红色的字体显示Red，修改app.js。

	var para=document.getElementById("para");
	para.style.color="blue";

接着，字体就变成了蓝色，有了DOM我们就可以对页面进行操作，可以说我们看到的绝大部分的页面效果都是通过DOM操作实现的。

美妙之处

这里说到的Javascript仅仅只是其中的一小小部分，忽略掉的东西很多，只关心的是如何去设计一个实用的app，作为一门编程语言，他还有其他强大的内制函数，要学好需要一本有价值的参考书。这里提到的只是其中的不到20%的东西，其他的80%或者更多会在你解决问题的时候出现。

1. 我们可以创建一个对象或者说函数，它可以包含基本值、对象或者函数。
2. 我们可以用Javascript修改页面的属性，虽然只是简单的示例。
3. 我们还可以去解决实际的编程问题。