入力するプログラム

計算機

入力するプログラムの例として計算機を作ってみます。

このプログラムはこちらのJavaScript初心者入門講座を参考にさせていただきました。

入力用フォームはHTMLで作成する必要があります。
HTMLタブを開いて、以下のコードを入力します。

<form name="form1">
   <INPUT TYPE="text" NAME="txtA">+
   <INPUT TYPE="text" NAME="txtB">=
   <INPUT TYPE="text" NAME="txtC">
   <br>
   <INPUT TYPE="button" NAME="btnCalc" value="計算" onclick="Calc()">           
</form>

簡単に役割を説明すると、

フォーム全体の名前が form1
入力用のテキストフィールドの名前がそれぞれ、txtA, txtB, txtC
ボタンの名前は btnCalc、ボタンの表示名は「計算」,ボタンを押したときに動くプログラム（関数）はCalc()

です。

HTMLを書くと、入力画面だけはすぐに作ることができます。

JavaScriptタブを開いてプログラムを入力します。

function Calc() {
}

ボタンを押した時に動くプログラムをCalc()としましたので、Calc()関数を定義します。
function が関数の意味です。
{ } の中にプログラム本体を書きます。

三つの変数を宣言しておきます。

var a;
var b;
var c;

一つ目の txtA から変数aに代入します。

a = document.form1.txtA.value;

. は「の」に読み替えると分かりやすいです。
documentの中にある form1 の txtA の valueを変数aに入れます。
これで、txtAという名前を付けたテキストフィールドの値が a に入ります。

b = document.form1.txtB.value;

もう一つのtxtBも同様な処理をした後に

c = parseInt(a)+parseInt(b);

parseInt() で()の中の文字を数値に変換して、足し算した結果を変数cに代入します。

document.form1.txtC.value=c;

今度は逆に変数cをtxtCに書き込みます。書き込む時は数値から文字に自動的に変換されます。

完成版のプログラムです

肥満度計算機

計算機のプログラムを改造します。jsdo.it環境の場合はForkという機能があり、プログラムの複製をすることが簡単にできます。
計算機プログラムを開いてForkボタンからForkしましょう。

以下の方針でプログラムを書きます

入力した値を数値に変換して変数に格納する

その際、身長はcm単位で入力するが、計算ではm単位なので100で割ってm単位に変換する

BMI指数を計算し結果を変数へ代入する
得られた結果を出力用のテキストボックスへ表示する

HTMLタブを開いて、以下のコードを入力（Forkしたプログラムの修正）します。

<form name="form1">
   身長<INPUT TYPE="text" NAME="txtA">cm<BR>
   体重<INPUT TYPE="text" NAME="txtB">kg<BR>
   BMI<INPUT TYPE="text" NAME="txtC">
   <br>
   <INPUT TYPE="button" NAME="calc" value="計算" onclick="Calc()">           
</form>

計算機で使用したHTMLファイルの一部だけ変更しています。

フォーム全体の名前が form1
入力用のテキストフィールドの名前がそれぞれ、txtA, txtB, txtC
ボタンの名前は btnCalc、ボタンの表示名は「計算」,ボタンを押したときに動くプログラム（関数）はCalc()

JavaScriptタブを開いて、以下のコードを入力（Forkしたプログラムの修正）します。

a=parseFloat(document.form1.txtA.value)/100;
b=parseFloat(document.form1.txtB.value);

計算機プログラムではテキストフィールドから変数に文字列のまま格納しましたが、今回はここで数値に変換します。
変数aは身長を入れるための変数です。身長はcm単位で入力しますが、BMI指数の計算ではm単位なので、単位変換のため100で割っています。
変数bは体重を入れるための変数です。kg単位で入力するので、そのまま数値に変換します。
parseFloat()は、文字列から小数値に変換する命令です。

BMI指数を計算する式は
体重÷(身長)²
です。

べき乗をかけ算に直して

c = b/(a*a);

これで完成です。

割り勘計算機

まずは基本的な機能で2人の割り勘を計算するプログラムを作ります。
計算機とほぼ同じプログラムですから、計算機をForkすると簡単です。

土台になるHTMLは以下の用に作成します。計算機から一部分だけ変更しています。

   <form name="form1">
     一人目<INPUT TYPE="text" NAME="txtA">円<BR>
     二人目<INPUT TYPE="text" NAME="txtB">円<BR>
     合計<INPUT TYPE="text" NAME="txtSum">円
     <br>
     <INPUT TYPE="button" NAME="calc" value="計算" onclick="Calc()">    
   </form>

計算機からの変更点は名称とNAMEが txtC → txtSum です。

フォーム全体の名前が form1
入力用のテキストフィールドの名前がそれぞれ、txtA, txtB, txtSum
ボタンの名前は btnCalc、ボタンの表示名は「計算」,ボタンを押したときに動くプログラム（関数）はCalc()

これで表示できる土台が出来上がりました。
続いてプログラムですが、以下のような方針で作成します。

合計値から数値として変数に代入する
合計値を2で割った値をそれぞれ2つの変数へ代入する。
2つの変数の内容を表示用ボックスに出力する

新しい変数sumを宣言します。

var sum;

テキストボックスの名前が違いますが、やっていることは計算機と同じです。文字列なので、parseFloat()で小数値に変換しています。

sum=parseFloat(document.form1.txtSum.value);

得られた合計値を2で割って、それぞれの変数に代入します。

a = sum/2;
b = sum/2;

最後に表示用のテキストボックスに入れて終了します。

document.form1.txtA.value=a;
document.form1.txtB.value=b;

完成したプログラムは以下のようになります。

完成はしましたが、割り勘計算としては致命的な問題点があります。
それは、奇数の端数が出ると割り切れないので小数点が出る事です。
お金は1円単位でしか割れないので、その辺も考慮して計算方式を変更します。

考え方は以下のようにします。

割り切れない場合は1円未満を切り捨てして一人目の金額にする。
二人目の金額は合計から一人目の金額をマイナスした残りにする。

一人目は割り算して切り捨てします。Math.floor()は切り捨てをする命令です。

a = Math.floor(sum/2);

残りの金額は、合計の金額から一人目の金額をマイナスした残りです。

b = sum-a;

完成したプログラムを以下に示します。

練習

以下の練習課題を作成してみよう。

割り勘計算機をさらに改良して3人の割り勘計算をできるようにしましょう。
- もちろん、端数に小数が付かないように工夫してください。
単位変換計算機を作成してください。自分でHTMLのフォームも作成します。
- cm → m , km → m , mg → g , kg → g 等

「入力するプログラム」をウィキ内検索

最終更新：2012年11月13日 10:23

添付ファイル

JavaScriptで学ぶアルゴリズム講座

メニュー

リンク