자바스크립트 중급 노트 1장_자바스크립트 기술

1. 검토
먼저 DOM과 이벤트를 검토해 보겠습니다.
1. DOM
DOM은 JavaScript에서 가장 널리 사용되며 대부분의 웹 개발 프로그래밍 언어는 관련 구현을 제공합니다. 개발자에게 통합된 인터페이스를 제공합니다.
아래 예를 살펴보세요.

<title>데모</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <ul> <li> </li>Li-English 선생님<li> </li>장수학 선생님<li> </li>류물리학 선생님</ul>
[Ctrl A 모두 선택 참고: 외부 J를 도입해야 하는 경우 실행하려면 새로 고쳐야 합니다.

]

기다립니다. 페이지의 모든 콘텐츠를 로드하려면 마지막으로 getElementsByTagName() 메서드를 통해 페이지의 li 요소를 얻은 다음 반복하여 li 요소의 색상을 빨간색으로 변경합니다.
페이지에서 두 번째 li 요소를 삭제하는 두 번째 DOM 예제를 살펴보세요.

<title> </title>데모<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <ul> <li> </li> <li>Li-English 선생님</li> <li>장수학 선생님</li> </ul>류물리학 선생님
[Ctrl A 모두 선택 참고:

외부 J를 도입해야 하는 경우 실행하려면 새로 고쳐야 합니다.
]

지금 li 요소를 가져옵니다. 상위 노드 ul 요소를 가져온 다음, RemoveChild() 메서드를 사용하여 ul 요소 아래에 지정된 li 요소를 삭제합니다.

물론 parentNode를 직접 사용하여 li 요소의 상위 노드를 직접 얻을 수도 있습니다. 코드는 다음과 같습니다. 코드 복사

코드는 다음과 같습니다.


window.onload = function(){
//Dom 요소에 색상 추가
var li = document.getElementsByTagName("li")
for(var i=0;ili[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의 황금 파트너이며(하하, 여기 광고 슬로건이 있습니다), 현대 웹 애플리케이션 형태의 기초를 결정합니다.

아래 예를 살펴보세요. <title> </title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8">데모 <ul> <li> </li> <li> </li>Li-English 선생님<li> </li>장수학 선생님</ul> 류물리학 선생님

[Ctrl A 모두 선택 참고: 외부 J를 도입해야 하는 경우 실행하려면 새로 고쳐야 합니다 ]
本例中，获取的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>
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

最终结果会输出“李老师 是教 英语 的。”
在此例子的基础上，我们再定义个函数，用来输出所有的课程信息。代码如下所示：

<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>
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

最终结果会输出：

本例中， 数组的值都调用了 display()方法。
改进如下：
在

复制代码 代码如下:

AllLecture.prototype.display=function(){
var str = "";
for(var i=0;istr += 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>
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

同样也可以输出跟上例一样的结果。
这是一个简单的面向对象开发的例子，随着JavaScript逐渐被程序员所接受，设计良好的面向对象代码也日益普及。在后面的笔记中，你将会看到更多的面向对象程序代码。
三，小结
本章回顾了DOM和事件，然后通过例子简单的讲解了面向对象的开发。