2進法の繰り上がり

[+1]ボタンで両方共に1増えます。2進法では1の次、10進法では9の次に繰り上がりが起こります。

どの位でも +1 したときに0になる桁があればそこで繰り上がりが起こっています。

[-1]で減り、[clear]で0になります。

2進法、10進法の名前はこの繰り上がりの数から来ていますが、2進法は2個の数字で、10進法は10個の数字で数を表す書き方と考えることもできます。

制作意図

1から12ぐらいまでの対応表を見比べることで十分理解できるとも思いますが、自分で指を動かすことで印象に残るのではないかと作成しました。

どんどん数を増やし続ける者もかならず現れますが、256ぐらいで表の枠が広がり、はみ出させることができないとわかると、だいたい諦めます。特に理由はありませんが65535まで(16bit)以上は増えないようにしてあります。

説明の順番上、マイナスの数にはならないようになっています。

マイナスの数は補数で表現すると言ってしまいがちですが、それはコンピュータの都合であって、2進法だけを純粋に考えるなら10進法と同様にマイナスの記号をつける方がふさわしいと思います。

プログラムなど

グローバル変数としてznum=0と初期化しておきます。表の中にはあらかじめ0を記入することで、あえて初期化をしない作りにしています。

ボタンに応じ、incnum(), decnum(), clrnum()の各関数を呼び出してznumの値を変化させます。この後共通のdisp()関数を呼び出して所定の場所に記入します。.toString(2)は2進法であわわした数に変換するもので、.toString(10)と使い分けるだけで簡単に両方の数を記入できます。

javascript

<script>
var znum = 0;
function incnum(){
   if (65535>znum){
      znum += 1;
      disp();
   }
}
function decnum(){
   if (znum>0){
      znum -= 1;
      disp();
   }
}
function clrnum(){
   znum = 0;
   disp();
}
function disp(){
   var tgt = document.getElementById("js2");
   tgt.firstChild.nodeValue = znum.toString(2);
   tgt = document.getElementById("js10");
   tgt.firstChild.nodeValue = znum.toString(10);
}
</script>

firstChild.nodeValueを使う方法だと、htmlのタグに何か文字を入れておく必要がありますが、知っていれば特に面倒ではありません。これを選択したのは、当時どのブラウザでも動いたからです。

html

<table class="reg">
<tr>
<th>2進法</th>
<th>10進法</th>
</tr>
<tr>
<td id="js2">0</td>
<td id="js10">0</td>
</tr>
<tr>
<td class="incdec" colspan="2">
<button type="button" onclick="incnum()">+1</button>
<button type="button" onclick="decnum()">-1</button>
<button type="button" onclick="clrnum()">clear</button>
</td>
</tr>
</table>

css

.reg{ border:none; }
#js2, #js10{
  font-size:200%;
  padding:8px;
  width:4em;
  text-align :right;
  border:solid 1px #999;
}
td.incdec{
  padding-top:0.8em;
  text-align :center;
  border:none;
}
button{
  cursor:pointer;
}