電卓・計算フォーム JavaScript

サイト内検索

カスタム検索

計算フォームを作りたい！『JavaScript編』

電卓・計算フォーム JavaScript

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

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

　早速見てみましょう。

のようになっていて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](式)を計算して代入するという指定です。

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

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

ウェブ造ホームページの作り方・ウェブサイト作成制作

2004-2012

電卓・計算フォーム JavaScript

JavaScript電卓・計算

電卓・計算フォーム JavaScript

電卓・計算フォーム JavaScript

ウェブ造 ホームページの作り方・ウェブサイト作成制作

ウェブ造ホームページの作り方・ウェブサイト作成制作