オブジェクト
ステップ15では、JavaScriptを使ってホームページを操作する際に非常に重要な役割を果たすオブジェクトについて学習します。そのほかメソッドやプロパティの概要についても学習します。
15.1 オブジェクトとは…？
これまでは、JavaScriptの基本的な命令について学習してきました。しかし、『これが何の役に立つのだろう？』と疑問に感じていた人も多いでしょう。実は、これまでに学習してきた内容はJavaScriptを利用する上で必要となる最低限の基本でしかありません。JavaScriptの本当の醍醐味は、HTMLにより表示したホームページを自由にコントロールすることです。ただし、これを実現するにはオブジェクトについて学んでおく必要があります。
オブジェクト（object）を日本語に訳すと「物体」「もの」といった意味になります。そして、JavaScriptでは、ホームページ内に表示されている全ての要素をオブジェクトとして管理しています。つまり、ホームページ内にある画像や段落などは、1つひとつ個別の「もの」として扱われるわけです。そればかりか、webブラウザのウインドウ、URL、ページ閲覧の履歴、時間など、ホームページに関連するあらゆる「もの」がオブジェクトとして扱われます。
図15-1 Webブラウザとオブジェクト
15.2 オブジェクトモデル
それでは、さっそくオブジェクトについて詳しく解説していきましょう。JavaScriptでは以下のような階層構造でオブジェクトと管理しています。
図15-2 オブジェクトの階層構造（主なオブジェクトのみ）
これらのオブジェクトは、その1つがHTMLのタグと対応していると考えると分かりやすいでしょう（例外もあります）。たとえば、documentオブジェクトは<body>～</body>、imageオブジェクトは<img>（画像）、formオブジェクトは<form>～</form>に対応していると考えられます。このようにして考えると、オブジェクトが上のような階層構造で管理されている理由も自然と納得できると思います。
15.3 オブジェクトと配列
ここからは、ホームページ内の各要素をオブジェクトで指定する方法について解説します。JavaScriptでは、図15-2に示したオブジェクトの階層構造を「．」（ピリオド）で区切って指定します。しかし、これだけでは、個々のオブジェクトを識別できません。
たとえば、ホームページに３つの画像が配置されている場合、これらは全てimageオブジェクトになります。これでは各画像を識別することは不可能です。そこで、オブジェクト名の後に添字を付け、添字の数値で同じオブジェクトを区別します。
図15-3 オブジェクトと配列
添字は[ ]内に記述し、そのオブジェクト（タグ）がHTMLファイルに記述された順に0、1、2、3、…と付けていきます。これを見ると、オブジェクトは配列の一種であることも理解できると思います。
15.4 オブジェクトとname属性
HTMLタグにname属性で名前を付けた場合は、その名前でオブジェクトを識別することも可能です。たとえば、以下のようにname属性を指定した画像は、「window.document.name属性に指定した名前」でオブジェクトを指定できます。
図15-4 オブジェクトとname属性
15.5 メソッドとは…？
メソッドは、各オブジェクトに対して処理を実行するための命令です。その記述方法は以下のようになり、「．」（ピリオド）の左側に記述したオブジェクトに対して処理が実行されます。
オブジェクト名.メソッド名（値）;
たとえは、これまでに何度か利用してきた「document.write( )」もメソッドの１つとなります。「document.write("<h1>富士山</h1>")」の場合、「document」がオブジェクト名、write( )がメソッド名、"<h1>富士山</h1>"が値となります。そして、これが実行されると、<body>～<body>内に<h1>富士山</h1>が出力され、ホームページに「富士山」という見出し文字が表示されます。
15.5 プロパティについて
最後に、プロパティについて解説しおきましょう。プロパティは、各オブジェクトが保有している固有の設定値となり、以下のようにJavaScriptを記述することにより、その設定値を変更することが可能となります。
オブジェクト名．プロパティ名 ＝ 値
たとえば、オブジェクトの背景色を指定するプロパティbgColorを使って以下のようにJavaScriptを記述すると、ホームページの背景色を「赤色」（#ff0000）に変更できます。
演習
（１）以下のように、ボタンのクリックでホームページの背景色が変化するホームページを作成してみましょう。
背景色の変更
※以下のボタンをクリックすると、背景色を変更できます。
※ここに直接入力できます。↓↓(テキストボックスのサイズは、右下の角をドラッグすると調節できます。)
→STEP14へ
→STEP16へ