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