JavaScript 中級ノート 第 1 章_JavaScript スキル

1. 確認します
まず、DOM とイベントを確認します。
1. DOM
DOM は JavaScript で最も広く使用されており、ほとんどの Web 開発プログラミング言語が関連する実装を提供しています。開発者に統一されたインターフェイスを提供します。
以下の例を見てください:

<title>デモ</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <ul> <li> </li>リー英語先生<li> </li>張数学教師<li> </li>リュー先生 - 物理学</ul>
[Ctrl A すべて選択 注: 外部 Js を導入する必要がある場合は、更新して実行する必要があります

]

お待ちくださいページのすべてのコンテンツが読み込まれるようにします。 最後に、getElementsByTagName() メソッドを通じてページ内の li 要素を取得し、ループして li 要素の色を赤に変更します。
2 番目の DOM 例を見てください。これはページから 2 番目の li 要素を削除します。

<title> </title>デモ<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <ul> <li> </li> <li>リー英語先生</li> <li>張数学教師</li> </ul>リュー先生 - 物理学
[Ctrl A すべて選択 注:

外部 Js を導入する必要がある場合は、更新して
を実行する必要があります]

今すぐ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";
}
//2 番目の li 要素を削除
//var ul = document.getElementsByTagName("ul")[0] / /インデックスは 0 から始まります
//ul.removeChild( li[1] ); // インデックスは 0 から始まります
li[1].parentNode.removeChild( li[1] ); 、parentNode を直接使用します li 要素の親ノードを取得します
}

2. イベント

イベントは、アプリケーション内のすべてのユーザー操作をバインドする接着剤です。 DOM とイベントは JavaScript の黄金のパートナーであり (笑、これは宣伝文句です)、これらは最新の Web アプリケーションの形式の基礎を決定します。
以下の例を見てください:

<title> </title>デモ<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <ul> <li> </li> <li>リー英語先生</li> <li>張数学教師</li> </ul>リュー先生 - 物理学
[Ctrl A すべて選択 注:

外部 Js を導入する必要がある場合は、 を実行するために更新する必要があります]
本例中，获取的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和事件，然后通过例子简单的讲解了面向对象的开发。