忙了一段时间，不知道大家对我的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逐渐被程序员所接受，设计良好的面向对象代码也日益普及。在后面的笔记中，你将会看到更多的面向对象程序代码。
分享到：
相关推荐
JavaScript中的作用域和上下文对象是理解这门语言的关键概念，尤其对于中高级开发者来说更是如此。作用域决定了变量的可见性和生命周期，而上下文对象则关乎函数执行时的环境。 首先，我们要明白JavaScript的作用域...
### JavaScript中级知识点详解 #### 一、回顾：DOM与事件 **1. DOM (文档对象模型)** DOM 是一种标准的编程接口，用于处理 HTML 和 XML 文档。它定义了如何通过编程方式访问文档结构、内容以及样式。在 Web 开发...
JavaScript 中级笔记第五章面向对象的基础主要涵盖了对象的创建、使用、公共方法、私有方法以及特权方法等核心概念。面向对象编程是JavaScript中的重要特性，理解和掌握这些知识点对于提升编程能力至关重要。 1. **...
在JavaScript的中级学习中，掌握闭包的概念是理解高级编程技巧的基础。闭包的特性包括能够记忆并访问函数定义时所在的词法作用域。 在给出的文件内容中，闭包被描述为“内层的函数可以引用存在于包围它的函数内的...
Java中级笔记涵盖了多个关键的Web开发技术，包括Servlet、JSP、分页和Ajax。这些技术在构建动态、交互式的Web应用程序中起着至关重要的作用。 1. **Servlet**：Servlet是Java EE平台中的核心组件，它是一个Java类，...
1，引用 引用是一个指向对象实际位置的指针。看下面的使用引用的例子： [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行] 本例中，两个对象都指向同一个对象，当修改某一个对象的属性内容时，则会影响另一个。 我们...
这个名为"JavaScript 基础和中级 代码汇总.zip"的压缩包文件显然是一个JavaScript学习者或开发者积累的实践代码集合，旨在帮助理解和巩固从基础到中级的JavaScript知识。 首先，我们来看看JavaScript的基础部分。...
#### Java EE中级部分 - **Servlets**：处理HTTP请求的基本组件。 - **JSP (JavaServer Pages)**：动态网页技术，与HTML结合展示动态内容。 - **MVC (Model-View-Controller)**：设计模式，用于分离数据模型、用户...
JavaWeb笔记.pdf提供了JavaWeb开发的详细知识点，涵盖了基础知识、高级技术、开发框架、安全、性能优化、项目实践、开发工具、面试常见问题等方面，非常适合JavaWeb开发初学者和中级开发者阅读。
JavaScript是一种广泛使用的编程语言，尤其在网络开发中占据核心地位。它是一种动态类型的、解释型的、弱类型的脚本语言，主要用于客户端的网页交互，但也可以在服务器端通过Node.js环境运行。JavaScript的主要特点...
### Java学习笔记知识点详解 #### Java 平台与开发概述 - **Java平台分类：** - **J2SE（Java SE）:** 标准版，适用于桌面应用程序开发。 - **J2EE（Java EE）:** 企业版，专为Web应用和服务端应用程序设计。 -...
常见的编程语言可以分为编译型语言（如C++、Java等）和解释型语言（如Python、JavaScript等）。了解它们之间的区别及适用场景有助于软件设计师在项目初期做出更合理的选型。 #### 语言处理工具 语言处理工具主要...
本笔记将详细探讨HTML的中级知识，旨在帮助开发者提升技能水平。 1. **语义化标签** 随着HTML5的引入，一系列语义化标签如, , , , 和等被引入，它们有助于提高页面结构的可读性和可访问性。了解并正确使用这些标签...
中级JS笔记 高级JS注释 现在使用JavaScript 互动课程：关闭或关闭 学习AngularJS-这样的列表，但重点是AngularJS。 网站/博客 特定JavaScript NodeHispano 费内特 它们包括JavaScript，但不是特定的 ...
布局永久链接默认/高级JavaScript教学大纲如果您是老师或对课程的设计感兴趣，请参阅...先决条件 （）或同等学历了解JavaScript中的变量，数据类型，控制流和基本功能用法精通HTML的中级知识，至少具有CSS的基础知识jQu