５．フォームを使ってみよう

[Index] [Next] [Prev]

フォームを使うとデーター入力ができたり文字等の表示もできます。 今回は消費税の計算をさせてみます。

[実行結果]

円の消費税は 円です。

[プログラム]


<script type="text/javascript" charset="Shift_JIS">

function Excise(){
   Result=document.Form1.Text1.value*0.05;         // Form1 の中の Text1 の値に0.05をかけ 変数Result に代入
   document.Form1.Text2.value=Math.floor(Result);  // Form1 の中の Text2 に 変数Result を出力
}

</script>


<form name="Form1">
   <input type="text" size="10" name="Text1">円の消費税は
   <input type="text" size="10" name="Text2">円です。

   <input type="button" value="計算" onclick="Excise()">
</form>

[解説]

JavaScriptではフォームで入力だけでなく表示することができます。 あとフォームではリアルタイムに処理を行うことができますがそれは次でやってみます。

今回重要なのはform・inputタグに名前がついている事です。 ただし名前を付けるのは form と input type="text" となっているやつだけです。

<form name="Form1">
<input type="text" size="10" name="Text1">
<input type="text" size="10" name="Text2">
このサンプルでは form には｢Form1｣、入力してもらうinputには｢Text1｣ 、出力するinputには｢Text2｣、 という名前(name)を付けました。

今回も関数を使って処理をしていきます。 まずは関数の中の Result=document.Form1.Text1.value*0.05;
では Form1 の中の Text1 内に入っているデーターに 0.05 をかけて 変数Result に入れています。

document.Form1.Text1.value*0.05;
というのは Form1 の中の Text1 内に入っているデーターに 0.05 をかけることです。

document.Form1.Text2.value=Math.floor(Result);
は 変数Result を Form1 の中の Text2 内に出力しています。 Math.floor(Result) がついていますがこれはMath.floor()の()内の少数第１位を繰り下げなさいというメソッドです。 Mathは見たまんま数学関係のオブジェクトです。

[Mathの一部]

Math.ceil()	切り上げ	Math.ceil(100.5) = 101
Math.floor()	切り捨て	Math.floor(100.5) = 100
Math.round()	四捨五入	Math.round(100.5) = 101
Math.abs()	絶対値	Math.abs(-100.5) = 100.5

他には乱数や三角関数などがありますがここでは省略します。

<input type="button" value="計算" onclick="Excise()">
で関数を呼び出して実行しています。 正確にはonclick="Excise()"で関数を呼び出し実行しています。 onclick では関数を呼び出すだけでなくJavaScriptを書いて実行することができます。 また onclick は他のタグでも使えるようになっていますが古いブラウザだと動かない可能性があります。

[例]

テスト

で、押すと警告ダイアログがでてきましたが
alert(message)
で出すことができます。 これは警告、注意等を行うダイアログですが実際にはその目的で使われることは少ないです。

ちなみわざわざ 変数Result を使わなくとも
document.Form1.Text2.value=Math.floor(document.Form1.Text1.value*0.05)
とやっても動きます。 説明しやすいようにわざと分けて行いました。

© 2000-2003 Tsukimi / HobbySpace