【JavaScript】2進数・16進数と10進数の変換ツールを作成する

【JavaScript】2進数・16進数と10進数の変換ツールを作成する

JavaScriptを使って、10進数から2進数・16進数、2進数・16進数から10進数に変換する簡単なツールを作りました。

フォームに数を代入して、変換した数字を表示させるものです。

toString()やparseInt()を使うことで変換が可能ですが、getElementByIdやaddEventListenerを使ってどのようにブラウザ上で表示させるかについて、簡単に説明もしています。

計算のたしかめにもよかったらお使いください。

スポンサーリンク

【JavaScript】2進数・16進数と10進数の変換ツール

MochoによるPixabayからの画像

フォームに数字を入力すると、他のN進数に変換されます。整数のみ、小数には対応していません。

10進数から2進数、16進数に変換

10進数をフォームに入力し、変換ボタンを押すと、2進数と16進数が表示されます。

10進数:変換


2進数:

16進数:

2進数、16進数から10進数に変換

2進数、あるいは16進数のフォームに数を入力し、変換ボタンを押すと10進数が表示されます。

2進数:変換

16進数:変換


10進数:

スポンサーリンク

JavaScriptとHTMLのコードを確認

JavaScriptと、HTMLのコードを確認していきます。

10進数から2進数、16進数に変換

10進数の数を2進数、16進数にするために、下のように書きました。
まずHTML。こちらはシンプルです。(今回ボタンはCSSで設定してしまいましたがお好みで。)

JavaScript。

まず下の部分ですが、

変換ボタンのidに「btn_str」という名前がつけてあります。それを取得して変数に入れて、その変数をクリックすると次の処理が行われると書いています。

10進数のフォームに入力した値をdecとし、

2進数のフォームのid名にnum2、16進数のフォームにnum16とつけています(HTML参照)。

const target1 = document.getElementById(‘num2’);」で、num2をtarget1という変数にしています。num16も同様にtarget2と設定してます。

「target1.value = dec.toString(2);」では、decの値(10進数のフォームに入力した値)をtoString()を使って2進数や16進数に変換したものを、target1とtarget2の値(value)として表示させています。

(「target1.value」なら「target1のテキストボックスの値」ということです)

2進数、16進数から10進数に変換

2進数、16進数から10進数に変換させるツールでは、次のように書きました。

まずHTML。

JavaScript。

「const btn_bin = document.getElementById(‘btn_bin’);」で2進数を10進数にする変換ボタンを「btn_bin」としています。そして、

で「btn_bin」がクリックされたら次の処理を行うと指定しています。

「const bin」でbinに2進数のフォームに入力した値を代入しています。

「const target3 = document.getElementById(‘num010’);」で10進数のフォームをtarget3とし、「target3.value = parseInt(bin,2);」でtarget3の値に「parseInt(bin,2)」、つまり2進数のbinの値を10進数に変換したものを表示させますよ、と書いています。

16進数も同様に書いています。

▼ toString()やparseInt()の使い方を知りたい方はコチラの記事を。

テキストに表示させるなら?

今回はテキストボックスに表示させるため、「変数.value = 変数.toString(2);」や「変数.value = parseInt(変数,2);」のような書き方をしました。

フォーム(テキストボックス)ではなくてふつうのテキストで表示させたいという場合は、innerHTMLやtextCntentを使います。

16進数を10進数に変換させるサンプルを作ってみます。

HTMLでは<input type=”text”>(テキストボックス)の代わりに<span>や<div>タグを使って表示させたいところにid名をつけます。

JavaScriptでは下のように書きます。

上と違うのは変数と、「変数.value」の代わりに「変数.textContent」が入ったところです。

以下サンプルです。

16進数:変換
10進数:

まとめ

今回はtoString()やparseInt()の値をテキストボックスに表示させるため、変数.valueを使いました。valueの代わりにtextContentなどを使えばテキスト表示ができます。

IT・プログラミングカテゴリの最新記事