参考ページ

文字列を数値に変換して算術演算する(テキストフィールド利用)

キー入力データは文字が並んだ文字列です。よって数値として演算するなら数値への変換が必要です。
javascriptでは、整数用のparseIntと、実数用のparseFloat関数が使われます。

文字列を整数の値へ変換するparseInt関数

var v;             
var data = 50;   
v = 30 + data;   
の実行で、変数vに記憶されるのは、
30とdataに記憶される50を加算した80になります。

var v;             
var data = "50";
v = 30 + data;   
の実行で、変数vに記憶されるのは、
30とdataに記憶される"50"をつなげた3050になります。
この30やdataは、 +の演算対象で、+のオペランド(operand)と呼びます。
そして、+のオペランドの一方が文字列の場合、文字列とした連結処理になる規則があるのです。

例えば次のようなフォームがあるとします。(ソースも示します。nameの設定に注目してください)

<form name="form2">
<input  type="text" value="50" name="text2" size="10">
</form>

そして、次のコードがあるとします。
var v;             
var data;          
data = document.form2.text2.value; //これで、テキストフィールド内容を取得
v = 30 + data;   

この実行で、dataに"50"が記憶されます。
このように、入力の情報は、文字列なので、dataに記憶される文字列の"50"が、+によって 30と連結され、 3050がvに記憶されます。

ここで、算術加算の演算させて 80をvに記憶させたい場合、dataの文字列"50"を数値の50に変換する必要があります。
その場合は parseIntと呼ばれる関数を、次のように使います。

var v;             
var data;          
data = document.form2.text2.value; //これで、テキストフィールド内容を取得
v = 30 + parseInt( data );

これで、dataに記憶されるデータが"50"の文字列が、parseIntによって数値の50に変換され、 計算結果の80がvに記憶されます。


(変換できない文字列を与えるとエラーが起きます)
この parseIntも alert と同じで 関数と呼ばれる命令の種類です。 これらは、カッコの中に与える情報を書いて、 その情報で目的の処理を実行するようになっています。
そして この与える情報は、引数(argument)と呼びます。
また、parseIntは文字列を数値した値を得ていますが、このように得られる情報は 戻り値(return value)と呼ばれます。
ここでは文字列型と数値型の違いを示しましたが、種類はたくさんあります。 このデータの種類を調べる場合、typeof 演算子を使います。 この演算子は型情報を文字列で返します。 typeof 演算子が返す文字列は、"number"、"string"、"boolean"、"object"、"function"、"undefined" の 6 つです。

文字列を数値に変換して演算する練習

テキストフィールドなどのキー入力データは文字列なので、数値として演算するなら数値への変換が必要で、 そのparseInt関数などの練習です。

= のボタンで、2つのテキストフィールドに入力した数の 加算値を下のテキストフィールドに表示します。
各テキストフィールドは3のサイズにし、 の名前のフォーム内で 順番に の名前を付けてください。(formはdivの内側に配置してください)
タグ属性はtype value name size onclickの順番で必要なものだけ使います
関数定義の前に、左のテキストデータ記憶用に で変数を用意して、 右のテキストデータ記憶用に で変数を用意してください。
(""の初期値にしてください) そして関数の名前は、にしてください。
関数では、左フィールドの内容を変数に記憶し、それを数値に変換します。
次に右フィールドの内容を変数に記憶し、それを数値に変換します。
そして次のように、変数で加算した値で 下のテキストフィールドに設定します。