开始之前
打个小广告:女朋友写的中文女生与程序员的故事:《时光太窄,指缝太宽》
面向对象
开始之前先我们简化上面的代码,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%或者更多会在你解决问题的时候出现。- 我们可以创建一个对象或者说函数,它可以包含基本值、对象或者函数。
- 我们可以用Javascript修改页面的属性,虽然只是简单的示例。
- 我们还可以去解决实际的编程问题。