n進数変換フォーム JavaScript

サイト内検索

カスタム検索

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

n進数変換フォーム JavaScript

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

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

<form name="num_form">
[数値を入れて下さい]<br>(小数点以下は切り捨てになります)<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 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);
}
function clear_result(){
    document.num_form.output.value="";
}

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

　この中の

parseInt()
    (10進数の)整数に変換
eval()
    数式を数値に変換
toString()
    ()内引数をnとしてn進数に変換

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

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

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

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

2004-2012

n進数変換フォーム JavaScript

n進数変換フォーム

n進数変換フォーム JavaScript

n進数変換フォーム JavaScript

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

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