JavaScriptオブジェクト概観
１ JavaScriptのオブジェクト概観
JavaScriptは「オブジェクト志向」が強い言語だそうです。
従いまして、JavaScriptでプログラムを作制するには、JavaScriptのオブジェクトについて知らなければ
なりません。JavaScriptのオブジェクトの階層は、おおよそ以下のようになります。
Window − （Frames） − Document −− Links
｜
− Forms −− textarea,
checkbox, radio, submit
｜
button, radio, options
− Anchors
｜
− Images
少々やっかいなのは、HTML文のタグがオブジェクトになるという点でしょうか。
ほとんどのタグがオブジェクトとなることができ、JavaScriptから参照できます。
例えば、<body>................</body> は、JavaScriptのdocument
オブジェクトで参照されます。
また、画像を指定するタグ <img...................> は imagesオブジェクトで参照されます。
一例をあげておきます。
<img src="a.jpg"> というタグでa.jpg という画像が表示されているとします。
そこに別の画像 b.jpg を表示さｓたい場合は
window.document.images(0).src="b.jpg";
とすれば、b.jpgが新たに表示されます。
<body bgColor="#FFFFFF">というタグで背景色が白になっているところで
背景を緑にしたい場合は、以下のように記述します。
window.document.bgColor="green";
では、HTML文の中での、実際の記述の仕方をあげておきます。
ウィンドウをクリックするたびに、背景が赤と緑、猫がしろねこと黒ねこにかわります。
<< 実例（クリックで背景と画像を変える）
>>
| <HTML> <HEAD></HEAD> <BODY bgColor="red" onClick="change()"> <SCRIPT Language="JavaScript"> <!-- var f=0; function change() { if (f==0) { f=1; window.document.myImage.src="catbl.gif"; window.document.bgColor="green"; } else { f=0; window.document.myImage.src="catwh.gif"; window.document.bgColor="red"; }} // --> </SCRIPT> <br><hr> ウィンドウをクリックするたびに、背景とねこがかわります <img src="catwh.gif" name="myImage"> <br><hr> </BODY> </HTML> |
背景 赤 、 クリックで change() 関数の呼び出し 変数 ｆ ＝０ の時 背景 緑、 猫 白ねこ ＝１ の時 背景 赤、 猫 黒ねこ image オブジェクトとして<img> タグの中で name で定義したmyImage を使用 Ｎａｍｅ 属性で、この<Ｉｍｇ> タグの名前を myImage に設定 |
と、書いたところで、オブジェクト志向の言語のプログラミングの経験がないと、なんのことかピンと
来ないかもしれません。わからなくてもとりあえず構わないでしょう。いろいろJavaScriptと格闘して
いるうちに、そういうことか、と自然に理解できるでしょう。
２ イベント
たいていのオブジェクトには関連つけられているイベントハンドラがあります。
代表的なイベントハンドラは下記のようです。
| onChange | フォームのオブジェクトの内容が変化した時 |
| onClick | クリックした時 |
| onMouseOver | マウスがオブジェクトに重なった時 |
| onMouseOut | マウスがオブジェクトからはずれた時 |
| onLoad | ページが読み込まれた時 |
オブジェクト（HTML文のタグ）にイベントハンドラを記述することにより、イベント発生時にJavaScriptの
関数を呼び出すことができます。
例えば、画像（a.jpg）上にマウスをのせると、new() というJavaScriptを実行するようにしたい場合
<img src="a.jpg" onMouseOver ="new(
)">
と記述します。
１ オブジェクト概観 であげた実例では、<BODY> タグにonClick イベントハンドラを記述し、
画面をクリックするとJavaScript の関数 Change() を呼び出すようにしています。もう一度確認して
みて下さい。
３ メソッド、プロパティ
各オブジェクトには、当然のことながらいろいろな、メソッド、プロパティがあります。
これらの詳細については、各オブジェクトの説明のところで、とりあげます。