2進数・16進数・10進数

HOME
JavaScript入門
2進数・16進数・10進数

このページでは10進数の数字を2進数や16進数に変換する方法について考えます。また変換した数値を10進数に戻す方法も扱います。

これは数学や科学の分野でしか使わないように感じるかもしれません。しかしゲームのフラグを記録したり、暗号化するのに用いることもできます。記述も簡単なので、いろいろと工夫して使ってみましょう。　

n進数への変換

では、以下のスクリプトをHTMLのBODY内に記入してみましょう。

<form name="math">
<input type="text" name="" value="255">：元の数字<br>
<input type="text" name="" value="">：2進数<br>
<input type="text" name="" value="">：16進数<br>
<input type="button" value="変換" onclick="sinsu()"><br>
</form>


<script>

function sinsu(){

  //「元の数字」欄の文字を数字に変換
  var suji = parseInt(document.math.elements[0].value);

  //2進数に変換して2番目のテキストボックスに表示
  document.math.elements[1].value = suji.toString(2);
  
  //16進数に変換して3番目のテキストボックスに表示
  document.math.elements[2].value = suji.toString(16);
}
</script>

＜サンプル＞

上記スクリプトの解説です。最初に、1番目のテキストボックスに記入された数値（実際には文字列）を、 parseInt()を使って数値に変換し、変数sujiに代入しています。

続いて2進数・16進数に変換し、2番目と3番目のテキストボックスに表示します。上記スクリプトを見ると分かるように、toString()がn進数に変換する命令文です。括弧内に基数を記入します（基数は2～36まで使えるようです）。 toString()の前に、数値もしくは数値が入った変数を記入し、ピリオドで繋げます。

数値.toString(基数）: 数値をn進数に変換する

10進数に戻す

さて、2進数や16進数の数値を10進数に戻すにはどうすればよいでしょうか？ 2進数の数字を10進数に戻す方法を見てみましょう。以下のスクリプトをHTMLのBODY内に記入してみてください。

<form name="math2">
<input type="text" value="11111111">：2進数<br>
<input type="text" value="">：10進数<br>
<input type="button" value="10進数に変換" onclick="jusinsu()">
</form>

<script>

function jusinsu(){
 
  //最初のテキストボックスの文字列を変数suji2に格納
  var suji2 = document.math2.elements[0].value;
  
  //10進数にして2番目のテキストボックスに表示
  document.math2.elements[1].value = parseInt(suji2,2);

}

</script>

＜サンプル＞

10進数に戻すには、parseInt()を使います。括弧内の最初の要素にn進数の文字列を、 2番目に基数を記入します。

parseInt(n進数文字列,基数): n進数の数値を10進数に変換する

たとえばアドベンチャーゲームなどでは、沢山のフラグを立てます。フラグとは誰々に会ったか会っていないか、あるアイテムを持っているか持っていないか等々、様々な要素のことで、これによって物語を分岐させます。このフラグを0と1の数値で記録していけば、保存する時に各フラグを文字として結び付けることで2進数の数値文字列ができます。これを10進数、さらにn進数等に変換しておけば、記録データを覗かれても意味が分かりにくくなるでしょう。

前へ次へ