JavaScript はオブジェクト指向言語(オブジェクトを配置し、操作できるよう
にプログラムを作成できる言語)です。オブジェクトとは処理を行う対象物
で 、すでに出てきた document や window, history などのことです。こ
のように、あらかじめ定義されたオブジェクトを予約オブジェクトといいます。
また、予約オブジェクトを操作するする命令は、メソッドとプロパティです。
初学者の方には、難しい言葉が出てきて理解しにくいと思いますので、テ
レビを例にとって説明します。
この図では、テレビとかリモコンのような電化製品がオブジェクトになります。
テレビのスイッチを入れたり、チャンネルを変えたりする操作がメソッドです。
また、リモコンのボタンを押しても遠方に引っ越しをした場合、そのままの設
定では同じチャンネルを見ることが出来ません。どこどこの放送局は何番と
いうようにテレビに設定するのがプロパティです。
テレビの(オブジェクト).チャンネルを3(引数)に変える(メソッド)
テレビの(オブジェクト).1チャンネル(プロパティ) = NHK(プロパティの設定値)
のようにオブジェクトとメソッドあるいは、プロパティをピリオド( .)で結びます。
また、プロパティは、オブジェクトの値を設定したり、逆に値を取得することも
できます。上記のように指定すれば設定することになり、
テレビの(オブジェクト).1チャンネル(プロパティ)
のように = NHK を指定しなければ、1チャンネル にどこの放送局が設定
されているかを取得できます。
10.2 フォームオブジェクト [もくじへ] [トップページへ]
===================================================
プログラム例題16
フォームにテキストボックスを3個、コマンドボタンを1個配置し、上2つ
のテキストボックスに入力されたデータを合計して、一番下のテキスト
ボックスに表示せよ。なお、コマンドボタンがクリックされたとき計算処
理するものとする。
=========================================================
<HTML>
<HEAD>
<TITLE>例題16</TITLE>
<SCRIPT LANGUAGE="JavaScript">
<!--
function calc( ) {
var x,y,z;
x = eval(document.MyForm.NumX.value);
y = eval(document.MyForm.NumY.value);
z = x + y;
document.MyForm.NumZ.value
= z;
}
// -->
</SCRIPT>
</HEAD>
<BODY>
<FORM
NAME="MyForm">
<INPUT
TYPE="button" NAME="keisan" VALUE="計算" onClick="calc( )"><BR><BR>
X : <INPUT TYPE="text"
NAME="NumX" size=4><BR>
Y : <INPUT TYPE="text"
NAME="NumY" size=4><BR>
X+Y : <INPUT TYPE="text"
NAME="NumZ" size=4><BR>
</FORM>
</BODY>
</HTML>
7 と 10 を入力したときの実行結果は、次のようになります。
これまで作成したプログラムでは、データ入力をすべて代入文で行っていま
したが、これからはテキストボックスが使えます。
JavaScript でフォーム画面を作成するのは、その元になっている Java のよ
うには簡単ではありません。しかし、基本をしっかり覚えると Java に劣らない
ビジュアルな画面を作成できるでしょう。
<FORM
NAME="MyForm"> @
<INPUT TYPE="button" NAME="keisan"
VALUE="計算"
onClick="calc(
)"><BR><BR> A
X : <INPUT TYPE="text" NAME="NumX"
size=4><BR> B
Y : <INPUT TYPE="text" NAME="NumY"
size=4><BR> C
X+Y : <INPUT TYPE="text" NAME="NumZ"
size=4><BR> D
</FORM>
E
@Eは MyForm という名前のフォームのブロックです。このタグでフォーム
が作られ、このフォームの中にテキストボックスやコマンドボタンを配置できま
す。
Aはコマンドボタンを配置するタグです。TYPE="button" はコマンドボタン、
NAME="keisan" はコマンドボタンの名前、VALUE="計算" はコマンドボタン
上に表示される文字です。また、onClick="calc( )" はコマンドボタンがクリ
ックされた時に calc( ) 関数を実行します。
このようにフォーム上に何か動作を働きかけた時に、処理を実行させる指示
をイベントハンドラといいます。
Bはテキストボックスを配置するタグです。まず X : をフォームに表示します。
TYPE="text" はテキストボックス、NAME="NumX" はテキストボックスの
名前、size=4 はテキストボックスのサイズが半角4文字分ということです。
これまでは <SCRIPT> タグで指定して、JavaScript を書きましたが、各オブ
ジェクトに対応したプログラムを書く場合は、HTML タグの中に並べて書きま
す。
function
calc( ) {
var
x,y,z;
x = eval(document.MyForm.NumX.value);
y = eval(document.MyForm.NumY.value);
z = x +
y;
document.MyForm.NumZ.value
= z;
}
calc( ) という関数プロシージャです。このプログラムではコマンドボタンを、
クリックしたときに実行されます。
x = eval(document.MyForm.NumX.value); では、
documentオブジェクト(=HTML文書)の
MyFormオブジェクト(=フォーム)の中の
NumXオブジェクト(=テキストボックス)の
valueプロパティ (=値)を
数値に変換し(eval 関数)
変数 x に代入
しています。これが、プロパティの取得です。
eval 関数を使っているのは、テキストボックスに入力されたデータは、文字
列として扱われるため、数値に変換する必要があるためです。しかし、逆に
数値をテキストボックスに表示させるときは、文字列に変換しなくてもいいよ
うです。
document.MyForm.NumZ.value = z は、変数 z の値をテキストボックス
に表示します。これが、プロパティの設定です。