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+"<br>");
	document.write(typeof person+"<br>");
	document.write(typeof person.future+"<br>");
	document.write(person.future()+"<br>");

只是在这个时候Person是一个函数,但是我们声明的person却变成了一个对象<strong>一个Javascript函数也是一个对象,并且,所有的对象从技术上讲也只不过是函数。</strong>这里的+"<br>"是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+"<br>");
	document.write(phodal.weight+"<br>");
	document.write(phodal.height+"<br>");
	document.write(phodal.future()+"<br>");
于是,产生了这样一个可重用的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示例,
	<!DOCTYPE html>
	<html>
	<head>
	</head>
	<body>
		<noscript>
			disable Javascript
		</noscript>
		<p id="para" style="color:red">Red</p>
	</body>
		<script type="text/javascript" src="app.js"></script>
	</html>

我们需要修改一下helloworld.html添加
	<p id="para" style="color:red">Red</p>
同时还需要将script标签移到body下面,如果没有意外的话我们会看到页面上用红色的字体显示Red,修改app.js。
	var para=document.getElementById("para");
	para.style.color="blue";
接着,字体就变成了蓝色,有了DOM我们就可以对页面进行操作,可以说我们看到的绝大部分的页面效果都是通过DOM操作实现的。

美妙之处

这里说到的Javascript仅仅只是其中的一小小部分,忽略掉的东西很多,只关心的是如何去设计一个实用的app,作为一门编程语言,他还有其他强大的内制函数,要学好需要一本有价值的参考书。这里提到的只是其中的不到20%的东西,其他的80%或者更多会在你解决问题的时候出现。
  1. 我们可以创建一个对象或者说函数,它可以包含基本值、对象或者函数。
  2. 我们可以用Javascript修改页面的属性,虽然只是简单的示例。
  3. 我们还可以去解决实际的编程问题。

be a geek-从零开始学编程:无处不在的Javascript 4,布布扣,bubuko.com

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

上一篇:JS对文本框值的判断


下一篇:javascript 数组操作