5.2 プロパティ、メソッド、イベントハンドラ

1. サンプル・プログラム
2. documentオブジェクト
3. 組み込みオブジェクト
4. イベントハンドラ

ダウンロード

JavaScriptは、そのスクリプトが所属しているHTMLファイルをオブジェクトとして扱うことができる。ここでは、「4.2 ユーザー定義関数」で作ったプログラム "monthlyCalendar.html" を例に挙げる。

上図のように、最上位（ルート）が Windowインターフェースで、そこに Documentインターフェースがプロパティとしてぶら下がっており、そこからhtmlプロパディ、bodyプロパティ‥‥のようなツリー構造になっている。

  31:     let now = new Date(document.lastModified);
  32: 

たとえば、document.lastModified はdocumentオブジェクトに含まれるlastModifiedプロパティであり、そのHTMLファイルの最終更新日を値として格納している。

 128:     let year  = parseInt(document.getElementById('year').value, 10);
 129:     let month = parseInt(document.getElementById('month').value, 10);

オブジェクトにはプロパティのほか、メソッドと呼ばれる関数が含まれている。
たとえば、document.getElementById('year').value は、documentオブジェクトからidが 'year' に一致する要素（オブジェクト）を返す関数である。その要素の属性valueをプロパティとして参照したり、代入したりできる。

 204: window.onload = function() {
 205:     //タイトル等をセット
 206:     document.title = TITLE;
 207:     document.getElementById('title').innerHTML = TITLE + '&nbsp;<span style="font-size:small;">' + getLastModified() + '版</span>';
 208:     document.getElementById('reference').innerHTML =`
 209: ※参考サイト&nbsp;<a href="${REFERENCE}">${REFERENCE}</a>
 210: `;
 211: 

オブジェクトにはイベントハンドラがある。何かのイベントが起きたときの振る舞いを関数として書いておき、その関数を登録できる仕組みである。
たとえば、上記の window.onload は、Windowインターフェースがロードされたとき――つまり、このHTMLファイルがブラウザにロードされたときに実行するユーザー定義関数を登録している。ここでは関数名を指定しない無名関数としてイベントハンドラに登録している。

JavaScriptでは、数学定数や関数もオブジェクト Math として提供される。
たとえば、Math.PI は円周率πを表すプロパティである。
また、Math.sqrt は引数の平方根を返すメソッドである。

JavaScriptでよく使う組み込みオブジェクトは次の通り。

オブジェクト	説明
Number	数値にかかわるオブジェクト
String	文字列にかかわるオブジェクト
Boolean	Boolean型にかかわるオブジェクト
Array	配列にかかわるオブジェクト
Math	数学定数や関数にかかわるオブジェクト
Date	日付にかかわるオブジェクト
RegExp	正規表現にかかわるオブジェクト
Function	関数にかかわるオブジェクト
Object	Objectにかかわるオブジェクト
Arguments	引数にかかわるオブジェクト

JavaScriptでよく使うイベントハンドラは次の通り。

イベント	説明
onBlur	ページやフォーム要素からフォーカスが外れた時に発生
onFocus	ページやフォーム要素にフォーカスが当たった時に発生
onChange	フォーム要素の選択、入力内容が変更された時に発生
onSelect	テキストが選択された時に発生
onSubmit	フォームを送信しようとした時に発生
onReset	フォームがリセットされた時に発生
onAbort	画像の読み込みを中断した時に発生
onError	画像の読み込み中にエラーが発生した時に発生
onLoad	ページや画像の読み込みが完了した時に発生
onUnload	ウィンドウを閉じた時、他のページに切り替えた時、ページをリロード（更新）した時に発生
onClick	要素やリンクをクリックした時に発生
onDblClick	要素をダブルクリックした時に発生
onKeyUp	押していたキーをあげた時に発生
onKeyDown	キーを押した時に発生
onKeyPress	キーを押してる時に発生
onMouseOut	マウスが離れたした時に発生
onMouseOver	マウス乗った時に発生
onMouseUp	クリックしたマウスを上げた時に発生
onMouseDown	マウスでクリックした時に発生
onMouseMove	マウスを動かしている時に発生