電卓・計算フォーム JavaScript

電卓・計算フォーム JavaScript

　JavaScriptで加減乗除[+,-,*,/]及び剰余[%]の計算フォームを作る方法です。

[加減乗除・剰余] [計算結果]

　これは一体どのようにして行っているのでしょうか？

　早速見てみましょう。

<form name="num_form"> [加減乗除・剰余] <p><input type="text" name="res_input" size="30"></p> <p><input type="button" value="計算" onClick="calc(0)"></p> [計算結果] <p><input type="text" name="output" size="50"></p> <p><input type="reset" value="クリア"></p> </form>

のようになっていてformタグを使ってformと計算前と計算後の[<input type="text">]を用意してそれぞれ[name=""]で名前を付けています。

　それとやはり[form]の[input]の[type]属性で[button](<input type="button">)を用意していて[input]属性の[value=""]に設定した文字列[計算]というラベル文字を設定しています。

　入力と結果をクリアするのに[form]の[input]の[type]属性で[reset](<input type="reset">)を用意していて[input]属性の[value=""]に設定した文字列[クリア]というラベル文字を設定しています。

　ここでのポイントは[button]に割り当てられているイベント

onClick="calc()"

です。

onClickは、HTML/XHTMLで定義されているイベントハンドラ 　(Windowsの場合)マウスの左ボタンがクリックされた時の処理を設定するものです。 calc()は、実際の処理を行う関数で関数名はお好きな名前でOKです。

　それではJavaScript外部ファイルの記述を見てみましょう。

function calc(){     document.num_form.output.value=eval(document.num_form.res_input.value); }

　この中の

eval()

が、入力された式を計算する際に利用されるJavaScript固有の組み込み関数で、[document]の[num_form]という名前の[output]という名前のフォームを構成するオブジェクトの[value]に数値計算に利用される[eval()]関数で同じく[document]の[unes_form]という名前の[res_input]という名前のフォームを構成するオブジェクトの[value](式)を計算して代入するという指定です。

　尚、eval()メソッドは、Globalオブジェクトに属する式を評価して結果を返す為のメソッドですが、同じく、Globalオブジェクトの他のメソッドやMathオブジェクトの組み込みメソッドや組み込み値といったいわゆる数学関数を利用することもできます。

　次は、同じようにformを使ってn進数変換フォームを作ってみましょう。

n進数変換フォームを作りたい！『JavaScript』

関連リンク

• 正引きIT用語で選んでみるメニュー
• 逆引き一覧メニュー
• ホームページ作成メニュー
• ウェブ開発メニュー