Web Agent - [JavaScript]JavaScriptを使ってみる

JavaScriptを使ってみる

ドキュメント

画面に文字を出力してみる
JavaScriptでは、document オブジェクトでドキュメントを管理します。
画面上に文字を表示させるには document オブジェクトの write メソッドを使用します。
	document.write("Hello World");// HelloWorld と出力
また、複数の文字列を表示させる場合、,（カンマ）または+（プラス）を使用します。
	var str1 = "Hello";
	var str2 = "World";
	document.write(str1, str2);	// HelloWorld と出力
document.writeでは内部にHTMLタグを使用することもできます。
	// フォントサイズ5で HelloWorld と出力
	document.write("<FONT SIZE=5>Hello World</FONT>");	
文字色を変えてみる
ドキュメントの文字色を変更するには、documentオブジェクトのfgColorプロパティを変更します。
	document.fgColor = #FF0000;	// ドキュメントを赤に設定
	document.write("Hello World");
背景色を変えてみる
ドキュメントの背景色を変更するには、documentオブジェクトのbgColorプロパティを変更します。
	document.bgColor = #00FFFF;	// ドキュメント背景色を水色に設定
	document.write("Hello World");
Cookieを設定・参照する
Cookieのデータは document オブジェクトを通して設定・参照することができます。
	document.cookie = "count=10;expires=Fri, 31-Dec-1999 00:00:00;path=/";
詳しい説明はCookieのページを参照してみてください。

フォームとコントロール

コントロールの値を設定・参照する
HTMLタグで指定したコントロールは、すべて<FORM>～</FORM>に記述されます。ドキュメント内にあるすべてのフォームは document.forms[index] で表現され、フォーム内のすべてのコントロールは forms[index].elements[index] で表現されます。

indexは一番最初に出現したものから 0 で始まります。
	// ドキュメントの１番目のフォームの２番目のコントロールの値を参照
	document.forms[0].elements[1].value;
また、フォーム、コントロールともにNAMEアトリビュートで名前を付けておくことで、名前から参照することができます。
<FORM NAME="form1">
<INPUT TYPE="text" NAME="txt1" VALUE="Hello World">
</FORM>

document.form1.txt1.value;	// Hello World
テキストボックスのデータ
テキストボックスのデータは value プロパティで設定・参照することができます。
	<FORM NAME="user_form">
	<INPUT TYPE="text" NAME="txt" VALUE="abcde">
	</FORM>

	document.user_form.txt.value;	// "abcde"
選択ボックスのデータ
選択ボックスのデータは value プロパティで設定・参照することができます。
	<FORM NAME="user_form">
	<SELECT NAME="sel">
	<OPTION VALUE="1">項目１
	<OPTION VALUE="2">項目２
	</FORM>

	document.user_form.sel.value;
チェックボックスのデータ

ラジオボタンのデータ

別フレームにあるコントロールの値を設定・参照する
別フレームにあるコントロールの値を取得するには、「どのフレーム？」を指定する必要があります。

フレームの指定は、documentオブジェクトの前に、parent.frames を指定します。
	// 一番最初に出現するフレームのコントロールを指定
	parent.frames[0].document.forms[0].elements[0].value;

	// "frame1" のコントロールを参照
	parent.frame1.document.forms[0].elements[0].value;
別ウィンドウにあるコントロールの値を設定・参照する

イベント駆動

画面が読み込まれたときスクリプトを実行する
HTMLが読み込まれるときにスクリプトを起動させる場合、<BODY> に onLoad を記述します。
	<HEAD>
	<SCRIPT LANGUAGE="JavaScript">
	
	</SCRIPT>
	</HEAD>

	<BODY BGCOLOR="#FFFFFF" TEXT="#000000" onLoad="test_script()">
Submitボタンをクリックしたときスクリプトを実行する
Submitボタンが押されたときは、<FORM> に onSubmit を記述します。
	<SCRIPT LANGUAGE="JavaScript">
	
	</SCRIPT>

	<FORM ACTION="./cgi-bin/test.cgi" onSubmit="test_script()">
	<INPUT TYPE="submit" VALUE="押してね">
	</FORM>

ウィンドウ

警告ボックスを表示する
警告ボックス（Windowsではメッセージボックスと呼んでいる）は、ちょっとしたメッセージを表示するとき等に使用します。
警告ボックスは、alert()を使用します。
	window.alert("警告です！！");
一つ前のページに戻る。一つ先のページ
ブラウザには「戻る」、「進む」という機能があります。これはブラウザが保持している履歴を参照する機能で、JavaScriptでは window.history オブジェクトで参照することができます。

hidtoryオブジェクトの go() メソッドで「進む」、back() メソッドで「戻る」となります。
	window.history.go();	// 進む
	window.history.back();	// 戻る
新しいウィンドウを開く
現在オープンしているブラウザ画面のほかに、新しいウィンドウをオープンすることができます。新しいウィンドウをオープンしたい場合、window.open() を使用します。
	window.open("", "New Window", "");
第一引数はウィンドウのURLで、表示したいHTMLファイルのパスや、URLを記述します。省略した場合、空のウィンドウが作成されます。

第二引数はウィンドウの名前です。省略することができます。

第三引数はウィンドウの表示設定で、ウィンドウの大きさなどを指定することができます。これも省略可能です。
別のURLにジャンプする
別のURLにジャンプしたい場合、window.location オブジェクトの href プロパティにURLをセットすることで、目的のURLに移動することができます。
	window.location.href = "http://www1.freeweb.ne.jp/~seablue/";