GO BACK

JavaScript教室　その５

「イベントとダイアログボックス」



■onClick以外のイベントについて

　今まで、JavaScriptのスクリプトは全て「onClick」というもので設定してきました。このonClickというのは、HTMLに用意されているイベントの一つです。クリックしたときに、これで設定されたルーチンを呼び出すわけです。

　こうしたイベントは、実は他にもいくつかあります。それらについて説明しておきましょう。


●onLoad

HTMLで読み込まれた情報のレイアウトが完了した際に自動的に発生します。これは、<BODY>タグのオプションとして設定しておくのが一般的です。簡単な例をあげましょう。

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

function LoadNow () {
	alert ("ロードしました！")
}

//-->
</SCRIPT>

<HTML>
	<HEAD></HEAD>
	<BODY onLoad="LoadNow ()">
		<p>ロードのテストです。</p>
	</BODY>
</HTML>
　このようにすると、ロードし終わったところでLoadNow ()というルーチンが自動的に呼び出され、画面に「ロードしました！」というアラートが表示されます。

●onUnLoad

これは他のページへ移動するなどの操作で現在のページが消去される時に発生します。これもonLoadと同様に、<BODY>タグのオプションとして設定します。


●onChange

テキスト関連オブジェクトでテキストが書き換えられた時、または選択リストで別の項目を選択した時に発生します。通常は、選択リストで多用されます。これは、onClickと同様に、そのオブジェクトの定義部分でオプションとして設定します。これも簡単なサンプルをあげましょう。

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

function changeNow () {
	X = document.MyFrm.MySt.selectedIndex
	alert ("あなたは" + (X + 1) + "番目を選びました。")
}

//-->
</SCRIPT>

<HTML>
	<HEAD></HEAD>
	<BODY>
		<p>選択リストのテストです。</p>
		<FORM NAME="MyFrm">
			<SELECT NAME="MySt" onChange="changeNow ()">
				<OPTION>AAA
				<OPTION>BBB
				<OPTION>CCC
			</SELECT>
		</FORM>
	</BODY>
</HTML>
　これは、選択リストを変更すると「あなたは○○番目を選びました」と画面に表示されるサンプルです。項目を変更しないとメッセージは現われません。


●onFocus，onBlur

それぞれ、テキスト関連のオブジェクトなどで、クリックしてインサーションポイントが表示された時と、選択がはずれた時に発生するイベントです。テキストの入力をする前と入力後に何かをしたいときに最適なイベントでしょう。これも例を上げておきます。

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

function startNow () {
	lastStr = document.MyFrm.MyTxt.value
}

function endNow () {
	document.MyFrm.MyTxt.value = lastStr
}

//-->
</SCRIPT>

<HTML>
	<HEAD></HEAD>
	<BODY>
		<p>テキスト書き換えのテストです。</p>
		<FORM NAME="MyFrm">
			<TEXTAREA NAME="MyTxt" COLS="50" ROWS="2" onFocus="startNow ()" onBlur="endNow ()">
			これは書き換えても元に戻ります。
			</TEXTAREA>
		</FORM>
	</BODY>
</HTML>
　これは、書き換えても後で自動的に表示が元に戻るテキストエリアです。onFocusでテキストエリアのvalueを調べてグローバル変数に入れ、onBlurでそれをvalueに戻します。


※グローバル変数について

通常、変数は関数内で定義しますが、このように関数ルーチンを定義する前に変数を作成しておくと、それは全ての関数から呼び出せるようになります。このような変数を「グローバル変数」と呼びます。これは非常に重要ですのでよく覚えておいてください。


　他にもイベントはありますが、とりあえずこの程度覚えておけば、オブジェクトにさまざまな動作を割り付けられるようになるでしょう。



■ダイアログボックスの種類

　HTMLオブジェクトとともに、ユーザーインターフェイス構築に多用されるものがあります。それはダイアログボックスです。今まで、プログラムの結果を表示するのに、「alert」という命令を多用していましたね。あれもダイアログボックスの一つです。

　この他にもダイアログボックスはいくつかあります。それらについても説明しておきましょう。


●confirm (《テキスト》)

「はい」「いいえ」という２つの選択肢をもったダイアログボックスです。《テキスト》で、ダイアログボックスに表示するテキストを設定できます。「はい」を選ぶとtrueが、「いいえ」を選ぶとfalseが返されます。


●prompt (《テキスト》,《デフォルトの値》)

テキスト入力可能なフィールドを１つもったダイアログボックスを表示します。《テキスト》で表示されるテキストを設定し、《デフォルトの値》ではフィールドにデフォルトで表示される値を設定しておきます。結果は、入力された文字列となります。ダイアログにはキャンセルボタンがvりますが、これでキャンセルしたときはnull（空の値）が返されます。


　では、この２つのダイアログボックスを使ったサンプルを作ってみましょう。

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

function MyFunc () {
	flg = confirm ("移動しますか？")
	if (flg == true) {
		ad = prompt ("URLを入力して下さい。","http://www.apple.com")
		if (ad != null) {
			open (ad)
		}
	} else {
		alert ("では、移動しません。")
	}
}

//-->
</SCRIPT>

<HTML>
	<HEAD></HEAD>
	<BODY>
		<p>ダイアログボックスのテストです。</p>
		<FORM NAME="MyFrm">
			<INPUT TYPE="button" NAME="Btn" VALUE="Webサイトを開く" onClick="MyFunc ()">
		</FORM>
	</BODY>
</HTML>
　これは、入力したURLのサイトを新しいウィンドウで表示するボタンです。ボタンをクリックすると、画面に「移動しますか？」というダイアログボックスが現われます。これで「いえ」を選ぶと移動しません。「はい」を選ぶと、URL入力のダイアログボックスが現われ、そこにURLを入力してOKすれば新たにウィンドウが開きます。

　では、プログラムを見てみましょう。

function MyFunc () {
	flg = confirm ("移動しますか？")
	if (flg == true) {
		ad = prompt ("URLを入力して下さい。","http://www.apple.com")
		if (ad != null) {
			open (ad)
		}
	} else {
		alert ("では、移動しません。")
	}
}
　まず、最初に flg = confirm ("移動しますか？") を実行しています。これで、「はい」か「いいえ」を選んでもらい、実行の確認をしているのです。次のif文で、flgがtrueであれば（つまり「はい」を選んだら）、ad = prompt ("URLを入力して下さい。","http://www.apple.com") を実行してURLの入力を促しています。そしてその後で入力された値がnullかどうか調べ、nullでなければそのURLを開いているのです。

　URLを開くのに、「open ()」という命令を使っています。これは、URLを新しいウィンドウで開く命令です。非常に重宝しますからついでに覚えておいてください。

　このように、alert/confirm/promptの３つを組み合わせると、ユーザーとのやりとりが非常にしやすくなります。インターフェイスの基本として覚えておきましょう。


GO NEXT

GO HOME