JavaScriptで書いてみよう！
（Navigatorオブジェクト）

ここではNavigatorオブシェクトについて説明します。




Navigatorオブジェクトの階層

    ブラウザでドキュメントをロードすると、HTMLまたは他の情報から適切に値の代入されたプロパティを持つJavaScriptのオブジェクトが作成されます。これらのオブジェクトはHTMLのページを反映した階層を持ちます。以下はこの階層を図解したものです。
    Navigatorオブジェクト階層図
    この階層において、オブジェクトの子孫はオブジェクトのプロパティになります。例えば、form1という名前のフォームはdocumentのプロパティであり、document.form1により参照されます。
    すべてのページは以下のオブジェクトを持ちます。

    ・navigator: 現在使用されているブラウザの名前、バージョン、クライアントまたはクライアントにインストールされているプラグインによりサポートされるMIMEタイプを持ちます。
    ・window: top-levelのオブジェクト。ウィンドウ全体に適用させるプロパティを持ちます。フレームのあるドキュメントはチャイルドウィンドウ毎にwindowオブジェクトがあります。
    ・document: 現在のドキュメントに基づくプロパティを持ちます。タイトル、背景色、前景色、リンク、フォームなど。
    ・location: 現在のURLに基づくプロパティを持ちます。
    ・history: これまでに要求されたURLの履歴を持ちます。

    内容により、ドキュメントは他のオブジェクトを持つかも知れません。例として、ドキュメントのそれぞれのフォーム（FORMタグにより定義される）は対応するFormオブジェクトを持ちます。
    プロパティへの参照は、オブジェクトの名前と先祖を指定しなければなりません。一般的に、オブジェクトは対応するHTMLタグのNAME属性から名前を得ます。
    例：
document.myform.text1.value
//テキストフィールドへの参照
document.imageForm.aircraft.src='f15e.gif'
//フォーム上の画像への参照
document.aircraft.src='f15e.gif'
//フォーム上にない画像への参照


ドキュメントプロパティ：ひとつの例

    省略


JavaScriptの反映とHTMLのレイアウト

    JavaScriptオブジェクトのプロパティ値はHTMLドキュメントの内容に基づいていますが、反映として参照される場合もあります。なぜなら、プロパティ値はHTMLに反映するからです。JavaScriptの反映を理解するには、ブラウザがいかにレイアウトを行なうかを理解する必要があります。
    一般的にレイアウトはブラウザの中で逐次的に起ります。ブラウザはHTMLファイルの先頭から始め、指示により画面に出力しながら、最後のほうへ進みます。このようなトップダウンの振る舞いにより、JavaScriptは既に読み込まれた場所にのみ反映されます。
    以下のようなテキスト入力要素を持つフォームを定義したとします。
    例：
<FORM NAME="statform">
<INPUT TYPE = "text" name = "userName" size = 20>
<INPUT TYPE = "text" name = "Age" size = 3>
    フォーム要素はJavaScriptオブジェクトとして反映され、フォームが定義された後で参照することができます。
    例えば、以下の記述はフォームが定義された後に記述しなければなりません。フォームよりも前に記述するとエラーとなります。
    例：
<SCRIPT>
document.write(document.statform.userName.value)
document.write(document.statform.Age.value)
</SCRIPT>
    同様に、一度行われたレイアウトについて、プロパティに値を設定しても値または見かけには影響しません。例えば、既に表示されているタイトルについて、プロパティの値を変更してもタイトルは変わりません。
    ただし、フォーム要素の値は例外であり、動的に変更することができます。例えば、テキストフィールドの値を後で変えることができます。
    イベントハンドラを使用すれば、他のいくつかのプロパティもレイアウト後に動的に変えることができます。背景色など。


主要なNavigatorオブジェクト

    windowオブジェクトとFrameオブジェクト

    windowオブジェクトはブラウザで他のすべてのオブジェクトの親となるオブジェクトです。アプリケーションでは複数のwindowオブジェクトを作成することができます。Frameオブジェクトは、FRAMESETドキュメントのFRAMEタグで定義されます。Frameオブジェクトはwindowオブジェクトと同じプロパティとメソッドを持ち、それらの表示される方法が違うだけです。
    windowオブジェクトは沢山の有用なメソッドを持っています。以下は例です。

    ・openまたはclose: ブラウザのウィンドウをオープンまたはクローズします。
    ・alert: 警告ダイアログを表示します。
    ・confirm: 確認ダイアログを表示します。
    ・prompt: プロンプトダイアログを表示します。
    ・blur and focus: フォーカスを移動させます。
    ・scrollTo: ウィンドウをスクロールさせます。
    ・setInterval: 一定の時間毎に式を評価します。
    ・setTimeout: 一定の時間後に式を評価します。

    windowは設定可能ないくつかのプロパティを持っています。location、statusなど。
    ブラウザを別のURLに移動するにはlocationを設定します。 
    例：
location = "http://www.infonia.ne.jp/~aaaa/index.html"
    ステータスバーにメッセージを表示するには、statusプロパティを設定します。

    documentオブジェクト

    writeメソッド、writelnメソッドはHTMLを生成するので、documentオブジェクトは最も有用なNavigatorオブジェクトの一つです。ページはdocumentオブジェクトをひとつのみ持ちます。
    documentオブジェクトは背景色、前景色、リンクの色を反映するいくつかのプロパティを持っています。 bgColor、fgColor、linkColor、alinkColor、vlinkColorなど。他の有用なプロパティにはlastModified、最後にドキュメントが更新された日付、referrer、クライアントの直前のURLなどです。cookieプロパティによりクッキーを使用できます。
    documentオブジェクトは、そのページのすべてのAnchor、Applet、Area、Form、Image、Layer、Link、Pluginオブジェクトの祖先です。
    Fileメニューのコマンドにより、生成したHTMLをプリントまたはセーブすることができます。

    Formオブジェクト

    ドキュメントのそれぞのフォームはFormオブジェクトを生成します。ドキュメントは一つよりも多くのフォームを持つことができるので、Fromオブジェクトはformsと呼ばれる配列に格納されます。最初のフォーム（ページの最初の）はforms[0]、二番目はforms[1]です。さらに、名前による参照もできます。
    例：
document.forms[0]
    同様にフォームの要素、テキストフィールド、ラジオボタンなども要素配列に格納されます。最初のフォームの最初の要素は以下のように参照できます。
    例：
document.forms[0].elements[0]
    this.formは現在のフォームを意味します。これは、イベントハンドラでフォームの他の要素のプロパティを参照する場合に便利です。
    例：
<FORM NAME="myForm">
Form name:<INPUT TYPE="text" NAME="text1" VALUE="Beluga">
<P>
<INPUT NAME="button1" TYPE="button" VALUE="Show Form Name"
   onClick="this.form.text1.value=this.form.name">
</FORM>

    locationオブジェクト

    locationオブジェクトは現在のURLを基にしたプロパティを持ちます。例えば、hostnameプロパティはそのドキュメントをホスティングしているサーバとドメインの名前を持っています。
    locationオブジェクトは二つのメソッドを持っています。

    ・現在のドキュメントをリロードします。
    ・指定したURLをロードします。

    historyオブジェクト

    historyオブジェクトはクライアントが訪問したURLの履歴を文字列として持っています。historyオブジェクトのcurrent、next、previousプロパティにより、現在の、次の、前の履歴にアクセスできます。履歴配列を使用することにより、別の履歴にもアクセスできます。この配列はURLを順番に持っています。
    メソッドを使用すれば、その履歴に行くこともできます。
    例：
history.go(-2)//履歴を2つ溯る
history.go(0)//現在のページをリロード

    navigatorオブジェクト

    navigatorオブジェクトはブラウザのベンダ、バージョンの情報を持っています。例えば、appNameプロパティはブラウザの名前、appVersionプロパティはブラウザのバージョンを持っています。


writeメソッドを使う

    省略


Navigatorオブジェクト配列

    いくつかのNavigatorオブジェクトのプロパティはそれ自体が配列です。これらの配列は値がいくつあるかわからない場合に情報を格納するために使用されます。以下の表はどのオブジェクトがどのフロパティを持つかを示しています。

    オブジェクトプロパティ説明
    documentanchorsNAME属性のある<A>タグをソース順序により反映。
    applets<APPLET>タグをソース順序により反映。
    embeds<EMBED>タグをソース順序により反映。
    forms<FORM>タグをソース順序により反映。
    images<IMG>タグをソース順序により反映。（Image()コンストラクタにより作成されたイメージは配列には含まれない。）
    links<AREA HREF="...">タグ、<A HREF="">タグ、linkメソッドにより作成されたLinkオブジェクトをソース順序により反映。
    Functionarguments関数への引数を反映。
    Formelementsフォームの要素（Checkbox、Radio、Textオブジェクトなど）をソース順序により反映。
    navigatormimeTypesクライアントでサポートされるMIMEタイプを反映。
    pluginsクライアントにインストールされているプラグインをソース順序により反映。
    selectoptionsSelectオブジェクトのオプション（<OPTION>タグ）をソース順序により反映。
    windowframesウィンドウの<FRAMESET>タグに含まれるすべての<FRAME>タグをソース順序により反映。
    historyウィンドウの履歴を反映。

    配列は順序の数またはそれらの名前（定義されていれば）によって位置づけ可能です。
    例：
document.forms[1]
document.forms["myForm"]
document.myForm


ホームページへ戻る