関数と変数
用意された定義済みのオブジェクトは、プロパティ （属性）と呼ばれる関数（メソッド）と変数（メンバ変数）を持っていて、プログラムの中で使用することができます。
例えば次のようにして document オブジェクトを使用すると、
<SCRIPT LANGUAGE="JavaScript">
document.write("Hello,JavaScript !")
</SCRIPT>
次のように表示されます。
オブジェクトの階層
オブジェクトの階層図
※現在のJavascriptは上記よりもオブジェクト数が増えています。
JavaScriptの動作環境には、組み込みオブジェクトがあらかじめ用意されています。オブジェクトは上記のように階層関係があり、下の階層のオブジェクトは上の階層のオブジェクトのプロパティになっています。
これらのオブジェクトの特定のプロパティを参照するには、その祖先をから名前を指定しなければなりません。
例えば、link オブジェクトを使用する場合、
document.write("URL：",document.links[0].pathname)
上記のように link オブジェクトの上の階層にある document オブジェクトから記述します。
捕捉）本来は document の上の階層にある window オブジェクトから記述するのですが、windowオブジェクトは特別に省略が許されています。
documentオブジェクト
上記で例にあげたdocumentですが、なかなか面白い特徴があります。たとえばdocumentオブジェクトを使用した次のようなプログラムの場合、
<SCRIPT LANGUAGE="JavaScript">
document.write("<B>Hello,JavaScript!</B>")
</SCRIPT>
下のように表示されます。
documentオブジェクトはHTML文書のBODY要素に対応しているので、その結果は特に指定することなくBODY内に表示されます。ここで注目したいのは、JavaScript内でそのままHTMLタグの<B>を使用している点です。このようなことからもJavaScriptとHTMLの密接な関係を感じ取ることができます。
この他にも、JavaScriptにはHTMLの部品にアクセスするためのオブジェクトが用意されていています。formオブジェクトの下にあるbuttonやcheckbox
などはその名前の通りボタンやチェックボックスにアクセスすることができます。
オブジェクトの中には、HTML文書に対応していないオブジェクトも幾つかあって、navigatorやwindowオブジェクトは、ブラウザそのものに直接結びついていますし、Mathやstringなどは、プログラミング言語としての基本的な関数です。
HTMLに埋め込む
ブラウザはHTMLファイルを読み込んで、その命令通りにレイアウトを定義していきます。定義する順番は上から順番に行われていくので、一度定義されてしまえばいつでもそれを参照することができます。
例えば次のようなフォームですが、
<FORM NAME="statform">
<input type = "text" name = "username" size = 20>
<FORM NAME="statform">
上記の FORM の名前や text フィールドの名前を呼び出したり、VALUE の値を変更することができます。ただし、既に定義されて実行されたプロパティ値を変更することができません。
<TITLE>My JavaScript Page</TITLE>
TITLEタグで指定したタイトル名が、すでにブラウザのタイトルバーに表示された後では、あとでこれを変更することができません。
document.title = "The New Improved JavaScript Page"
上記のようなスクリプトはタイトルバーに表示されたタイトル名を変更できないばかりか、エラーを引き起こします。
JavaScriptの呼び出し
JavaScriptは通常<SCRIPT>タグに囲まれたブロックに記述しますが、実は、そればかりでなく、各オブジェクトで発生するイベントをフックするための拡張がHTMLタグに含まれます。典型的な例を挙げると、以下のようなフォームのボタンに対応したものがあります。
<FORM NAME="myform">
<INPUT TYPE="button" NAME="button1" VALUE="ボタン"
onClick="formName(this.form)">
...
</FORM>
ボタンをクリックすると、onClickという属性が formName 関数を呼び出します。formName 関数の引数は(this.form)フォーム全体の情報を渡すので、formName 関数は自由にフォームにアクセスすることができます。
例えば NAME 属性で button1 と名付けたボタンにアクセスしたいときは
document.myform.button1
というように指定します。また、ボタン上に表示された文字にアクセスしたい場合は
document.myform.button1.value
というように指定します。
オブジェクトの名前を直接指定する以外に、配列を使用してアクセスする方法があります。フォームの一番最初にあるオブジェクトが form[0]、二番目に位置するのが form[1]として配列に格納されます。ですから、上記の例だとform[0]がボタンになります。ボタンの下にチェックボックスを置くとしたら、チェックボックスは form[1] になります。
