Index

JavaScriptの基礎知識（6）：オブジェクト篇

　JavaScriptの言語仕様の基礎知識をまとめたページです。ここではオブジェクトについて掲載しています。JavaScriptでは、操作する対象をオブジェクトと呼びます。オブジェクトは、いわばプログラムのための道具で、プロパティとメソッドという要素を持ちます。プロパティはオブジェクトが持つ独自の変数、メソッドはオブジェクトが持つ独自の関数ということができます。

INDEX | (1)記述篇 | (2)変数篇 | (3)演算子篇 | (4)関数篇 | (5)構文篇 | (6)オブジェクト篇 | (7)DOM編

sasaraan programming

Exposition

●組み込みオブジェクト

　JavaScriptには、すでにいくつかのオブジェクトが用意されています。配列を扱うArrayオブジェクト、日付を扱うDateオブジェクト、計算を扱うMathオブジェクトなどです。これらのオブジェクトは、
　var a = Array();
のように、直接組み込んであるオブジェクトを使えるのですが、一つのページで複数作る可能性があるものは、"new"キーワードを使って、次の様にした方が安全です。
　var a = new Array();
　こうすると、インスタンス（Arrayオブジェクトのコピーのようなもの）が作成され、他のArrayオブジェクトをつくっても影響を与えることはありません。
　また、これらのオブジェクトは、それぞれ独自のプロパティとメソッドを持ちます。例えば、Arrayオブジェクトはlengthプロパティを持っています。このプロパティには、そのArrayオブジェクトの要素数が入っています。

var a = new Array("10","20","30","40");
var n = a.length;　　// =4

　また、Arrayオブジェクトは、pushというメソッドを持ちます。例えば、
　a.push("50");
とすると、配列の末尾に"50"という要素が追加されます。
　各オブジェクトには、この様なプロパティやメソッドがいくつも用意されていて、記述者が自由に使えるようになっています。
　一方、ブラウザそのものを扱うwindowオブジェクトや、ブラウザへの表示領域を扱うdocumentオブジェクトなど、実行時にすでに操作対象が存在するものは、そのままオブジェクト名で使用することができます。

window.alert("Hello World !");　　　// ダイアログボックスを表示
document.write("Hello World !");　　// 文字列をブラウザに表示

オブジェクト名	内容
Global members	各オブジェクトに共通して適用されるメンバ。
anchor(s)	アンカー（の配列）を扱います。
Array	配列を扱います。
Date	日付と時刻を扱います。
document	Webページの表示領域を扱います。
event	イベントを扱います。
element(s)	フォーム要素（の配列）を扱います。
elements :: button	フォーム要素のうち、プッシュボタンを扱います。
elements :: checkbox	フォーム要素のうち、チェックボックスを扱います。
elements :: hidden	フォーム要素のうち、隠し要素を扱います。
elements :: option(s)	フォーム要素のうち、選択アイテムを扱います。
elements :: password	フォーム要素のうち、パスワードボックスを扱います。
elements :: radio	フォーム要素のうち、ラジオボタンを扱います。
elements :: reset	フォーム要素のうち、リセットボタンを扱います。
elements :: select	フォーム要素のうち、選択ボックスを扱います。
elements :: submit	フォーム要素のうち、送信ボタンを扱います。
elements :: text	フォーム要素のうち、一行テキストボックスを扱います。
elements :: textarea	フォーム要素のうち、複数行テキストボックスを扱います。
form(s)	フォームを扱います。
frame(s)	フレームを扱います。
Function	関数を扱います。
history	履歴を扱います。
Image(images)	画像を扱います。
link(s)	リンク情報を扱います。
location	URL情報を扱います。
Math	数学上の計算を扱います。
mimeType(s)	MIME情報を扱います。
navigator	Webブラウザの情報を扱います。
Number	数値を扱います。
Plugin(plugins)	プラグインの情報を扱います。
RegExp	正規表現を扱います。
screen	画面を扱います。
String	文字列を扱います。
window	ウィンドウを扱います。

●フォーム階層

　JavaScriptではフォームやボタンなどの要素は親子関係にあります。

　　親オブジェクト　←　－　－　－　→　子オブジェクト
　window-document-forms-elements（button,text,select...）

　また、オブジェクトは、作成した順番に、自動的に添え字（インデックス）が付けられています。

　これらのオブジェクトは次の様にして取得します。

document.forms[0].elements[1].focus()    // アクティブにする

　添え字の代わりに文字列で指定することもできます。この場合は、HTML要素のタグ内のname属性の値を使用して、次の様に記述します。

　<form name="message"... > ...
　var strMail = document.message.action　// 送信先の取得

　添え字はHTMLのデザインを変更すると変わる可能性があるので、name属性を利用する方が柔軟性は高くなります。

●イベント

マウスをクリックした、マウスを動かした、キーボードのキーを押した、など、ユーザーが行った操作をイベントといいます。JavaScriptは、イベントハンドラを利用して、記述したコードをイベントに対応させることができます。以下は主なイベントとイベントハンドラです。

イベント	ハンドラ	発生のタイミング
abort	onabort	読み込みが中止された時
blur	onblur	フォーカスが離れた時
change	onchange	要素の値が変更された時
click	onclick	クリックされた時
error	onerror	エラーが起きた時
focus	onfocus	フォーカスされた時
keydown	onkeydown	キーが押された時
keyup	onkeyup	キーが離された時
load	onload	ページが読み込まれた時
mouseout	onmouseout	領域外にマウスが移動された時
mouseover	onmouseover	領域内にマウスが移動された時
reset	onreset	resetボタンが押された時
resize	onresize	ウインドウのサイズが変更された時
submit	onsubmit	submitボタンが押された時
unload	onunload	ページが閉じられる時

イベントへの対応コードは、ハンドラを利用して次の様に記述します。

<input type="button" onclick="alert('Hello World !');">

　実行結果 :
　""の間は、通常のJavaScriptと同じ記述となります。ただし、""の中には、呼び出す関数名を入れることもできます。この場合、関数はスクリプトの部分か別ファイルに記述します。

<head>
    ...
    <script type="text/javascript"><!--
        function ShowMessage() {
            alert("Hello World !");
        }
    //--></script>
    ...
</head>
<body>
    ...
    <input type="button" onclick="ShowMessaage()" >
    ...
</body>

　さらに、オブジェクトから直接イベントハンドラを利用することも可能です。この時、関数の最後につける（）は記述の必要がありません。

window.document.onkeydown = ShowMessage;    // キーが押されたらメッセージを表示

　イベントハンドラには複数の関数を結びつけることができます。
　onload = "func1(), func2(), func3() "

●クラス

　ユーザーが独自のオブジェクトを定義することができます。関数をつくるときと同じfunctionキーワードを利用して、他の言語の「クラス」と同じような機能を持たせることが可能です。

function Student(code, name) {
    this.Code = code;
    this.Name = name;
}

　"this"はオブジェクトが作成された時に自分自身（インスタンス）を指すキーワードです。これを使って独自のプロパティを設定することができます。
　また、使うときはnewキーワードを使ってインスタンスを作成します。

　var man = new Student(1001, "John Bob");
　var hisname = man.Name;

　prototypeプロパティを使ってメソッド（独自の関数）を定義することもできます。

function Student() {
    this.Rank = "-";
    function _set_rank(point) {        /* メソッドの定義 */
        if (point>80) rank="A";
        else if (point>60) rank="B";
        else    rank="C";
    }
    Student.prototype.SetRank = _set_rank;    // メソッドの登録
}

　なお、追加するメソッドはクラス定義の外側に置くこともできます。