JavaScript中级笔记(1)--转cssrain.cn

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[i].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[i].style.color = "red";
 }

 //删除第二个li元素
 var ul = document.getElementsByTagName("ul")[0]; //索引从0开始
 ul.removeChild( li[1] ); //索引从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[i].style.color = "red";
 }

  //删除第二个li元素
  //var ul = document.getElementsByTagName("ul")[0]; //索引从0开始
  //ul.removeChild( li[1] ); //索引从0开始
  li[1].parentNode.removeChild( li[1] ); //索引从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[i].style.color = "red";
  li[i].onmouseover = function(){
   this.style.color = "blue";
  }
  li[i].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[i] + "/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[i] + "/n";
     }
     return str;
    }

    中的this.lec[i] 处,统一调用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[i] + "/n";
  str += this.lec[i].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逐渐被程序员所接受,设计良好的面向对象代码也日益普及。在后面的笔记中,你将会看到更多的面向对象程序代码。
 
 
    
三,小结

    本章回顾了DOM和事件,然后通过例子简单的讲解了面向对象的开发。
  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值