3. GUI部品
今回は、ボタンとかテキストボックスといった、
初めからブラウザに用意されているGUIの部品の一般的な扱い方を学びます。
これらをページに貼り付けるには次のように書きます。
<BODY>
...
<FORM>
<INPUT TYPE=objecttype
NAME=objectname
VALUE=objectvalue
ONCLICK=expression
>
...
</FORM>
...
</BODY>
TYPE="
objecttype" で、オブジェクトのタイプを指定します。
例えば、
objecttype を
button
とすればボタンに、
text
とすればテキストボックスになります。
INPUT タグのその他のオプションは本当のオプションで、無くてもかまいません。
また、他にもオプションはあります。それらはオブジェクトのタイプに依りますが、
それらはおいおい説明していきます。
特に、ONCLICK などのイベントが起きたときに処理する命令を指定するオプションは、
ONCLICK="test()"
などとして、JavaScript
などのスクリプトを走らせることができます。
オブジェクトは名前を付けることによって、
JavaScript から直接アクセスすることができます。
document.formname.objectname
例えば、次のようになります。
<HTML><HEAD>
<SCRIPT LANGUAGE="JavaScript">
function hanyaan() {
//テキストボックスに文字列を入れる
document.frmhanyaan.txthanyaan.value = "はにゃ〜〜〜ん";
}
</SCRIPT>
</HEAD>
<BODY>
...
<FORM NAME="frmhanyaan">
<INPUT TYPE="button" VALUE="押してね☆" ONCLICK="hanyaan()">
<INPUT TYPE="text" NAME="txthanyaan" VALUE="" SIZE=20>
</FORM>
...
</BODY></HTML>
上のボタンを押すとONCLICKで指定されたJavaScriptのサブルーチンhanyaanが動いて、
frmhanyaanという名前のフォームのtxthanyaanという名前のテキストボックスの値が
"はにゃ〜〜〜ん" になります。
この他にもオブジェクトへのアクセス方法は色々あります
（
1. オブジェクトの参照(1)）。
document.forms["frmhanyaan"].elements["txthanyaan"].value
= "はにゃ〜〜〜ん";
document.forms[0].elements[1].value = "はにゃ〜〜〜ん";
もっとも、普通はフォームは直接名前で指定せずに、
次のようにオブジェクトを参照することが多いようです。
<HTML><HEAD>
<SCRIPT LANGUAGE="JavaScript">
function hanyaan(form) {
//テキストボックスに文字列を入れる
form.txthanyaan.value = "はにゃ〜〜〜ん";
}
</SCRIPT>
</HEAD>
<BODY>
...
<FORM NAME="frmhanyaan">
<INPUT TYPE="button" VALUE="押してね☆"
ONCLICK="hanyaan(this.form)">
<INPUT TYPE="text" NAME="txthanyaan" SIZE=20>
</FORM>
...
</BODY></HTML>
hanyaanの引数の this.form の
this は、
自分自身（ここでは、そのボタン）を参照しています。
this.form で自分の所属するフォームを参照していてこれが引数になります。
ページがロードされたときに実行するスクリプト、
あるいは他のフォームを制御するスクリプトで直接名前を指定しましょう。