JavaScript

オブジェクト、メソッド、プロパティとは

　JavaScriptでプログラムを作成する際によく出てくる「オブジェクト」、「メソッド」、「プロパティ」について調べてみました。

　初めて「オブジェクト」、「メソッド」、「プロパティ」という言葉を聞いて、「なにこれ？？」と思う方も多いと思います。しかし、この3つは JavaScriptの基本構造そのものを表していると言っても良いくらいに大切なモノです。プログラムと言うのは「何かをどうする」と言った形で命令を繰り返していきます。ここで言う“何か”とは操作する対象であり、“どうする”とは操作方法です。

　つまり、「操作方法と操作対象」を覚えることで、プログラムが書けることになります。この操作対象がオブジェクトに当たります。極端に言うと、この理屈と構造が理解できてしまえば JavaScriptの基本の半分を理解できたことになります。

オブジェクトとは

　ページを単純に解釈すると、HTMLタグで定義されたモノが部品として並んでいます。主要部品である文字、画像、リンクアンカー、フォーム等で構成されています。これらの部品を操作できるようにしようとして JavaScriptが生まれたと考えてください。実際、現在の DOM（Document Object Model）時代になる前、IE4が出るまでは操作可能だったのはフォーム、画像、アンカー、URLアドレスバーのロケーションくらいです。あとはプログラム言語が必ず持つ、計算や文字操作、日付などのコアだけでした。

　Netscapeがやっと Layerという一時しのぎの方法を廃止して DOMを採用してからは、HTML内にある全てのパーツを主要2ブラウザでオブジェクトとして操作できる時代に入りました。

　現在の JavaScriptには下記のように様々なオブジェクトが存在します。JavaScriptも C++のようにオブジェクト指向を継承しており、ドキュメントやフォーム、ウィンドウなどをオブジェクト（物）として扱います。オブジェクトはそれぞれ様々な処理ができたり、様々な情報を持っていたりします。これらのオブジェクトを使うことによって、より複雑なプログラムを組むことができるようになります。

主なｵﾌﾞｼﾞｪｸﾄの種類
Array 配列
Date 日付、時刻
document 文書
form フォーム
frame フレーム
Function 関数
history 履歴
image 画像
links リンク
location URL
Math 数学関数
navigator ブラウザ情報
Number 数値
String 文字列

　数学関数「Math」は複雑な計算が得意であったり、文字列処理を得意とする「String」、日付や時刻の情報を持っている「Date」のようにオブジェクトはそれぞれできる処理や違う情報を持っています。

プロパティとは

　HTMLタグでは、タグにその内容や詳細としてアトリビュート（属性）をつけます。img要素なら src、width、height等、a要素なら href、targetなどです。このアトリビュートのうち利用する必要のあるものを JavaScriptではプロパティとして用意しています。


オブジェクト名 . プロパティ名

　プロパティはオブジェクトの情報を参照したり設定することができます。

navigator.appName
アプリケーション名
navigator.appVersion
ブラウザのバージョン
document.bgColor
ページの背景色
document.fgColor
ページの文字色
document.fileCreateDate
ファイル作成日
document.title
ページのタイトル
screen.width
モニタの横幅
screen.height
モニタの縦幅

　navigatorオブジェクトにはアプリケーション名やバージョン、OSの名前などの情報が入っています。下記はブラウザ名を表示するサンプルプログラムです。


<!DOCTYPE html>

<html lang="ja">
	<head>
		<meta charset="utf-8">
		<title>navigator オブジェクトのプロパティのサンプル</title>
	
		<script>
			alert("ブラウザは " + navigator.appName + "です。");
		</script>
	</head>

	<body>
		<h1>JavaScript</h1>
		
		<h2>navigator オブジェクトのプロパティのサンプル</h2>
		
		<p>ページを読み込むと、アラートでブラウザ名を表示します。</p>
	</body>
</html>
サンプルを表示した時のアラートの画像

　ここのサンプルでは、navigatorオブジェクトの appNameプロパティを使って、ブラウザ名を表示しています。

メソッドとは


オブジェクト名.メソッド名(パラメータ)

　メソッドはオブジェクトへの命令です。BASICで言えば、PRINTやら INPUTみたいなものです。オブジェクトと組み合わせて使います。

　その中でも、Dateオブジェクトについては、他のメソッドのように「h = Date.getHours()」のような使い方はできないので注意してください。配列を作成する「Array()」と同じように新たにオブジェクトを生成してやらなくてはいけません。下記は現在の時刻を表示するサンプルプログラムです。


<!DOCTYPE html>

<html lang="ja">
	<head>
		<meta charset="utf-8">
		<title>Date オブジェクトのサンプル</title>

		<script>
			// Date オブジェクトを生成
			dt = new Date();
			
			// 時間を得るメソッド
			h  = dt.getHours();
			
			// 分を得るメソッド
			m  = dt.getMinutes();
			
			// 秒を得るメソッド
			s  = dt.getSeconds();
			
			// 表示
			alert( h + "時" + m + "分" + s + "秒" );
		</script>
	</head>
	
	<body>
		<h1>JavaScript</h1>
		
		<h2>Date オブジェクトのサンプル</h2>
		
		<p>ページを読み込むと、アラートで現在の時刻を表示します。</p>
	</body>
</html>
サンプルを表示した時のアラートの画像

　このサンプルでは、Dateオブジェクトを生成した時点での時間が、変数 dt に代入されます。変数 dt に代入されたオブジェクトに対し、getHours() （時間を得るメソッド）、getMinutes() （分を得るメソッド）、getSeconds() （秒を得るメソッド）を使って、それぞれの変数へ代入した後、alert()を使って表示しています。

　また、リアルタイムに時刻取得を行おうとする場合は、その都度 Dateオブジェクトを生成し直す必要があります。