n進数変換フォーム JavaScript

n進数変換フォーム JavaScript

　JavaScriptでn進数変換フォームを作る方法です。

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

<!-- JavaScriptソースサンプル --> <form name="num_form"> [数値を入れて下さい]<br> <input type="text" name="res_input" size="30"> <p></p> <input type="button" name="b2" value="2進数" onClick="change_num(2)"> <input type="button" name="b8" value="8進数" onClick="change_num(8)"> <input type="button" name="b10" value="10進数" onClick="change_num(10)"> <input type="button" name="b12" value="12進数" onClick="change_num(12)"> <input type="button" name="b16" value="16進数" onClick="change_num(16)"> <p></p> [変換結果]<br> <input type="text" name="output" size="50"> <br><input type="button" value="結果のみクリア" onClick="clear_result()"> <input type="reset" value="全てクリア" onReset="focus_chg()"> </form>

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

　それとやはり[form]の[input]の[type]属性で[button](<input type="button">)を用意していて[input]タグの[value]属性に設定したラベル文字に[2進数][8進数][10進数][12進数][16進数]を設定しています。

　[form]の[input]の[type]属性に[reset]オプションを設定(<input type="reset">)するだけで入力内容を全てリセットしてくれるので結果的に「全てクリア」した状態になる為、[value]属性に[全てクリア]というラベル文字を設定しています。

　もうひとつ結果だけをクリアできるボタンも用意しています。

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

onClick="change_num()"

onClickは、イベントハンドラで 　(Windowsの場合)マウスの左ボタンがクリックされた時の処理を設定するものです。 change_num()は、実際の処理を行う関数ですが、自作関数ですから関数名はお好きな名前でOKです。 関数名は全て同じで()内に入っている数値が「引数」(ひきすう)としてchange_num()に渡されます。

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

function clear_result(){     document.num_form.output.value=""; }

　関数 clear_result() は、[document]の[num_form]という名前のフォームの[output]というフォームを構成するオブジェクトの[value]を空にする為のものです。

function change_num(num){     val=parseInt("document.num_form.res_input.value",num);     val=eval(document.num_form.res_input.value);     document.num_form.output.value=val.toString(num); }

　関数 change_num() で入力された式を文字列を数値に変換したり、n進数に変換したりして[ document ]の[ num_form ]という名前の[ output ]という名前のフォームを構成するオブジェクトの[ value ]に数値計算、文字列の式としての評価や文字列変換に利用される[ parseInt() ][ eval() ][ toString() ]関数で同じく[ document ]の[ unes_form ]という名前の[ res_input ]という名前のフォームを構成するオブジェクトの[ value ]を変換して代入するという指定しています。

　[ val ]とイコール記号で結ばれていますが、実は、単なる代入文ではなく、JavaScriptにおいてパターンがいくつかあるFunctionオブジェクトのインスタンス生成式の1つである2行は、以下のように書き換えることも可能です。

function change_num(num){     val=parseInt(eval(document.num_form.res_input.value),num);     document.num_form.output.value=val.toString(num); }

　これら3行または2行に含まれる各メソッドは、JavaScript固有の標準組み込みメソッドであり、その機能概要は、下記の通りです。

【Globalオブジェクトのメソッド】 parseInt()     第1引数に対象文字列、第2引数に基数( n 進数の n )を取り、n 進数に変換後、整数値に変換 eval()     文字列式を評価し、結果を返す 【Function.prototypeオブジェクトのメソッド】 toString()     (ドットの前の)オブジェクトを文字列に変換     但し、引数を1つ取る場合、それは基数、オブジェクトの値は数字としてその基数表現の文字列を返す

　要するに小数点数表現や指数関数表現、2進数や16進数など10進数ではない数値などを文字列として扱い、数値と文字列間の変換を行うことで柔軟な計算ができるようになっています。

　次はマウスの操作状態によって変化をつけるボタンを作ってみましょう。

マウスの状態によって処理したい！『JavaScript』

関連リンク

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