JavaScript中级笔记(1)

JavaScript中级笔记(1)
2011年09月01日
　　 忙了一段时间，不知道大家对我的JavaScript初级笔记评价怎么样。从今天开始，一起来学习JavaScript的高级部分。在初级笔记中，我讲了一些JavaScript中常用的概念，把JavaScript最重要的DOM操作也讲解了。在中级笔记中，你将学习到 JavaScript的其它重要内容，比如说命名空间，闭包，面向对象，上下文，通用的JavaScript，分离代码等，这些都是很少有书籍提及到的内容。大家对这块的只是都是一知半解，很模糊。相信大家都很期待，下面就开始JavaScript的中级之旅吧。 
　　一.回顾 
　　首先先来回顾下DOM和事件。 
　　1，DOM 
　　DOM在JavaScript中是应用最广泛的，大部分Web开发的编程语言都提供了相关的实现。给了开发者一个统一的接口。 
　　看下面的例子: 
　　  demo   /* 示例操作DOM元素 */ window.onload = function(){ //给Dom元素添加颜色 var li = document.getElementsByTagName("li"); for(var i=0;i    李老师-英语 张老师-数学 刘老师-物理    
　　等待页面所有内容加载完毕后，通过getElementsByTagName()方法获取页面中的li元素，然后循环改变li元素颜色为红色。 
　　再看第二个DOM例子，例子将把第二个li元素从页面中删除。 
　　  demo   /* 示例操作DOM元素 */ window.onload = function(){ //给Dom元素添加颜色 var li = document.getElementsByTagName("li"); for(var i=0;i    李老师-英语 张老师-数学 刘老师-物理   
　　现获取到li元素的父节点ul元素，然后使用removeChild() 方法删除ul元素下 指定的li元素。 
　　当然也可以直接使用 parentNode来直接获取li元素的父节点。代码如下： 
　　window.onload = function(){ //给Dom元素添加颜色 var li = document.getElementsByTagName("li"); for(var i=0;i  demo   /* 示例操作DOM元素 */ window.onload = function(){ //给Dom元素添加颜色 var li = document.getElementsByTagName("li"); for(var i=0;i    李老师-英语 张老师-数学 刘老师-物理    
　　本例中，获取的li元素后，然后循环给元素添加事件，添加了onmouseover和onmouseout事件。当滑入时，改变颜色，滑出时，恢复颜色。 
　　事件是复杂多变的，上例是一个最简单的例子，所以基本上没遇到问题。在以后，我们将遇到 比如 事件冒泡，事件传递 ，取消事件等问题。 
　　3，DOM和事件 
　　在DOM和事件交互的基础上产生了DHTML，它的实质就是JavaScript事件和DOM元素上CSS属性之间的交互。DHTML存在的意思就是组合这两个技术，然后做它的事情。 
　　二，简单的面向对象开发 
　　我们先来感受一下JavaScript面向对象是怎么一个写法。下面代码展示了学校中的课程名和老师的信息。 
　　 /* 示例用一个对象组合表示学校中的课程 ‘Lecture’类 用name和teacher作为参数 */ function Lecture(name,teacher){ this.name=name; this.teacher=teacher; } //‘Lecture’类的一个方法，用于生成一条信息 Lecture.prototype.display=function(){ return this.name + " 是教 "+this.teacher +" 的。" ; } //下面用new来构造一个新的函数，然后调用display方法 var L = new Lecture("李老师","英语"); var L_msg = L.display(); alert(L_msg);  
　　最终结果会输出“李老师 是教 英语 的。” 
　　在此例子的基础上，我们再定义个函数，用来输出所有的课程信息。代码如下所示： 
　　 /* 示例用一个对象组合表示学校中的课程 ‘Lecture’类 用name和teacher作为参数 */ function Lecture(name,teacher){ this.name=name; this.teacher=teacher; } //‘Lecture’类的一个方法，用于生成一条信息 Lecture.prototype.display=function(){ return this.name + " 是教 "+this.teacher +" 的。" ; } //下面用new来构造一个新的函数，然后调用display方法 var L = new Lecture("李老师","英语"); var L_msg = L.display(); //alert(L_msg); //新定义一个'AllLecture'类 //用'lec'作为参数，lec是一个数组 function AllLecture( lec ){ this.lec = lec; } //‘AllLecture’类的一个方法，用于生成所有的课程信息 //需要循环输出‘lec’ AllLecture.prototype.display=function(){ var str = ""; for(var i=0;i
　　最终结果会输出： 
　　本例中， 数组的值都调用了 display()方法。 
　　改进如下： 
　　在 
　　AllLecture.prototype.display=function(){ var str = ""; for(var i=0;i /* 示例用一个对象组合表示学校中的课程 ‘Lecture’类 用name和teacher作为参数 */ function Lecture(name,teacher){ this.name=name; this.teacher=teacher; } //‘Lecture’类的一个方法，用于生成一条信息 Lecture.prototype.display=function(){ return this.name + " 是教 "+this.teacher +" 的。" ; } //下面用new来构造一个新的函数，然后调用display方法 var L = new Lecture("李老师","英语"); var L_msg = L.display(); //alert(L_msg); //新定义一个'AllLecture'类 //用'lec'作为参数，lec是一个数组 function AllLecture( lec ){ this.lec = lec; } //‘AllLecture’类的一个方法，用于生成所有的课程信息 //需要循环输出‘lec’ AllLecture.prototype.display=function(){ var str = ""; for(var i=0;i
　　同样也可以输出跟上例一样的结果。 
　　这是一个简单的面向对象开发的例子，随着JavaScript逐渐被程序员所接受，设计良好的面向对象代码也日益普及。在后面的笔记中，你将会看到更多的面向对象程序代码。