GO BACK

JavaScript教室　その６

「ウィンドウとブラウザの利用」

■ URLを新しいウィンドウに開く

　基本的なGUIオブジェクトを覚えてしまえば、あとは少しずつ実践でプログラミングを覚えていくだけです。

　たとえば、SELECTを使って、よく出かけるURLをポップアップで選んですぐに開けるようなプログラムを作ってみましょう。

<SCRIPT LANGUAGE="JavaScript">
<!--

function MyFunc () {
	num = document.MyFrm.MyST.selectedIndex
	MyURL = document.MyFrm.MyST[num].value
	if (MyURL == "") {
		MyURL = prompt ("URLを入力して下さい。","http://www.apple.com")
	}
	if (MyURL != null) {
		open (MyURL)
	}
}

//-->
</SCRIPT>

<HTML>
	<HEAD></HEAD>
	<BODY>
		<p>移動用ポップアップ</p>
		<FORM NAME="MyFrm">
			<SELECT NAME="MyST">
				<OPTION VALUE="http://www.apple.co.jp">日本のアップル
				<OPTION VALUE="http://www.apple.com">米国のアップル
				<OPTION VALUE="http://www.microsoft.co.jp">マイクロソフト
				<OPTION VALUE="">-
				<OPTION VALUE="">その他のサイト
			</SELECT>
			<INPUT TYPE="button" NAME="Btn" VALUE="Webサイトを開く" onClick="MyFunc ()">
		</FORM>
	</BODY>
</HTML>

　例えば、NetScape社のホームページを見ると、ソフトを選択してボタンをクリックするとそのダウンロードページへ移動するような仕掛けがされてますが、その基本原理はこれなのです。わかってしまえば単純ですね。

　このSELECTでは、OPTIONに半角のマイナスを表示している項目（４項目目）がありますが、これはメニューの仕切り線を表示させるために行なっていることです。が－－実際にやってみると、バージョンによって仕切り線が表示されたり、そのままマイナス記号が表示されてしまったりするようです。動作しないときのことを考えて、VALUEをからっぽにしておくなど認識のための処理をしておくとよいでしょう。

■ドキュメントとウィンドウ

　さて、今のプログラムでは新しいウィンドウを開いてWeb画面を呼び出していましたが、そのまま現在開いているウィンドウで指定のURLに移動するにはどうすればいいでしょう？

　プログラムを見ると、URLを開くところでは、

open (MyURL)

という命令が書かれていますね。この部分を、

window.location = MyURL

このように書き換えてください。これで、ウィンドウ内に直接Web画面が現われるようになります。

　この「window.location」というのは、windowオブジェクトのlocationプロパティを示しています。－－今まで、オブジェクトの指定などは「document.…」と書いていましたね？　documentとwindowはどう違うのでしょう？

　documentは、読み込まれて表示されているHTMLのドキュメントのことを示します。そしてwindowは表示されているウインドうそのものを示すものなのです。

　今まで特に説明していませんでしたが、ドキュメントもウィンドウもやはりオブジェクトの一つなのです。ですから、これらをJavaScriptで操作することも可能です。

　例えば、「HTMLをダイレクトに出力して表示をする」ということをやってみましょう。JavaScriptでは、「write」という命令を使ってドキュメントに直接テキストを書き出すことができます。ドキュメントはHTMLのテキストで画面を表示しますから、HTMLのプログラムをテキストとしてドキュメントに出力すれば、画面をプログラムで作成することもできるのです。

<SCRIPT LANGUAGE="JavaScript">
<!--

function MyFunc () {
	HeadStr = "<HTML><HEAD></HEAD><BODY>"
	BodyStr = "<H2>これはJavaScriptで自動生成されたドキュメントです。</H2>"
	FootStr = "</BODY></HTML>"
	document.write (HeadStr + BodyStr + FootStr)
}

//-->
</SCRIPT>

<HTML>
	<HEAD></HEAD>
	<BODY>
		<p>画面自動作成</p>
		<FORM NAME="MyFrm">
			<INPUT TYPE="button" NAME="Btn" VALUE="ドキュメント自動生成" onClick="MyFunc ()">
		</FORM>
	</BODY>
</HTML>

　これがそのサンプルです。これを実行するとボタンが１つ作成されます。これをクリックすると、画面に「これはJavaScriptで自動生成されたドキュメントです。」という表示が新たに作成されます。

　プログラムを見ると、「document.write (…)」という命令でドキュメントにHTMLを書き出しているのがわかりますね。このようにすれば、現在開いているドキュメントの表示を変えてしまうことができるのです。

　では、新しいウィンドウを開いて、そちらに表示をさせる場合はどうなるでしょう？

function MyFunc () {
	HeadStr = "<HTML><HEAD></HEAD><BODY>"
	BodyStr = "<H2>これはJavaScriptで自動生成されたドキュメントです。</H2>"
	FootStr = "</BODY></HTML>"
	NewWin = open ()
	NewWin.document.write (HeadStr + BodyStr + FootStr)
}

　JavaScriptの部分をこのように書き換えれば、新しいウィンドウに表示を作ります。プログラムを見ると、

	NewWin = open ()
	NewWin.document.write (HeadStr + BodyStr + FootStr)

このようになっていますね。最初のopenは、新しいウィンドウを開くと同時に、その開いたウィンドウを変数NewWinに収めています。こうすることで、新しく開いたウィンドウを操作するときは、NewWinに対して命令を送れば実行されるようになるのです。

　そして次の行では、「NewWin.document.write…」として新しいウィンドウのドキュメントにプログラムをwriteしています。

　全てのドキュメントはウィンドウに表示されますことを考えればわかる通り、documentはwindowに含まれるオブジェクトなのです。通常は、JavaScriptでオブジェクトを指定するときは全てｻれが動いているウィンドウについて実行されると判断されるので、単に「document.オブジェクト名」という形ですんだのですが、この例のように、別のウィンドウのオブジェクトを操作するときは、「ウィンドウ.ドキュメント.…」というように、どのウィンドウのドキュメントを操作するのかはっきり指定してやらなければいけないのです。

■ブラウザの情報について

　ウィンドウなどよりもっと上のオブジェクトというのもあります。それは、軌道しているブラウザ自身です。JavaScriptでは、ブラウザ自身を「navigator」というオブジェクトとしてプログラム内よりアクセスすることが可能です。

　例えば、こんなプログラムを実行してみましょう。

<SCRIPT LANGUAGE="JavaScript">
<!--

function MyFunc () {
	NewWin = open ()
	NewWin.document.write ("<HTML><HEAD></HEAD><BODY>")
	NewWin.document.write("<H2><p>ブラウザの情報</H2>")
	NewWin.document.write ("ブラウザ名：　" + navigator.appName + "<BR>")
	NewWin.document.write ("バージョン：　" + navigator.appVersion + "<BR>")
	j = navigator.plugins.length
	NewWin.document.write ("プラグイン：" + j + "個<BR>")
	for (i = 0;i<j;i++) {
		NewWin.document.write (navigator.plugins[i].name + ",")
	}
}

//-->
</SCRIPT>

<HTML>
	<HEAD></HEAD>
	<BODY>
		<p>アプリケーションについて</p>
		<FORM NAME="MyFrm">
			<INPUT TYPE="button" NAME="Btn" VALUE="ブラウザ情報" onClick="MyFunc ()">
		</FORM>
	</BODY>
</HTML>

　これをブラウザで動かし、ボタンをクリックすると、使っているブラウザの名前、バージョン、インストールされているプラグインのリストが新しいウィンドウに表示されます。ここでは、以下の３つのブラウザプロパティを利用しています。

navigator.appName－－ブラウザの名前を示すもの

navigator.appVersion－－ブラウザのバージョンを示すもの

navigator.plugins－－ブラウザにインストールされているプラグインの配列

　最後のものは配列データなので、利用法が少々わかりにくいかも知れません。プログラムのMyFunc ()部分のポイントを簡単に説明すると、このようになります。

NewWin = open ()

まず新しいウィンドウを開き、それを変数に収めます。

NewWin.document.write (……)

その後に続くwrite文は、ブラウザの情報を書いている部分です。

j = navigator.plugins.length

これはプラグイン配列の項目数を変数にいれています。lengthは配列の個数を示すプロパティです。

NewWin.document.write ("プラグイン：" + j + "個<BR>")

プラグインの数を画面に書き出しています。最後の<BR>は改行ですね。

for (i = 0;i<j;i++) {

配列は０より始まります。ですから繰り返し文も０から（個数－１）までとなります。

NewWin.document.write (navigator.plugins[i].name + ",")

プラグインの配列のnameプロパティを出力しています。navigator.plugins[i].nameは、i番目の項目のnameプロパティを示しています。プラグイン配列の各項目にはこのようにnameプロパティが設定されており、これでプラグインの名前が得られるのです。

　このようにして、ブラウザの情報を取り出していたわけです。配列などは慣れないうちは扱い方が難しいですが、他のものは比較的簡単に使えますね。

　ブラウザは、基本的に値を取り出すだけで、書き換えることはできません。情報を得るためだけに用意されているものと考えるべきでしょう。

GO BACK

JavaScript教室 その６

■ URLを新しいウィンドウに開く

■ドキュメントとウィンドウ

■ブラウザの情報について

GO HOME

JavaScript教室　その６