半加算器説明図

X,Yに0,1を入れてC,Sがどうなるかを考えます

□ をクリックすると、空白⇨0⇨1⇨空白と変化します。自動ではありません。

1+1は答えが２桁になってしまいます。実際の回路では次の桁の計算にこれを加えます。これを桁上げ (Carry) といいます。いまは１桁分の足し算の回路をつくるので、その桁の答え S と、Carryの C とに分けて考えます。

X,Yに0,1を入れる組み合わせは次の表に示すように4つです。この回路でS,Cが正しく計算されることを確認してください。

X + Y =	C	S
0 + 0 =	0	0
0 + 1 =	0	1
1 + 0 =	0	1
1 + 1 =	1	0

X,Yに0,1を入れてC,Sがどうなるかを考えます
制作意図
解説
プログラム
説明図
html
css

制作意図▲

X,Y に 0, 1 をそれぞれ入れて、C,S に正しい値が出るようになっているか確認する道具です。半加算器を紹介してそこで終わりという扱いに疑問を感じながら、授業で説明するための道具として作りました。AND, OR, NOT などの動作を使っての応用の位置づけだったのかもしれませんが、全加算器まで説明しないとキャリーの意味が飲み込めないような印象を持っています。

練習問題にして採点システムを取り付けてもいいのですが、問題が4パターンしかないのでこの形にしました。

解説▲

図をタイル状に切り分けてtableに並べています。□の部分は30×65で、空白、0、1、と3枚の図を入れ替えています。さらに□の位置が上、中、下と3セットあります。正方形の図を使ってvertical-alignで配置すると拡大縮小したときにずれが大きいのでこのような方法にしました。

最近のブラウザは表示を画像と文字を一緒に拡大できますので、プロジェクターで使用するとプレゼンテーションソフトよりも便利です。

プログラム▲

引数kokoにはthisが入ってきます。これでクリックした場所がわかります。

空白⇨0⇨1⇨空白の変更はtop,middle,bottomの3セットあります。9個のうちどれかひとつだけが該当し、変更されます。

thisで場所がわかるので、idも不要です(cssのために一つ入っています)。現在の状態はファイル名で判断するので、これだけです。

<script>
function changeimg(koko){
   var img = koko.getAttribute("src");
   if (  img=="images/halftop9.png" ) {
      koko.src = "images/halftop0.png";
   }else if ( img=="images/halftop0.png" ) {
      koko.src = "images/halftop1.png";
   }else if ( img=="images/halftop1.png" ) {
      koko.src = "images/halftop9.png";
   }
   else if ( img=="images/halfbtm9.png" ) {
      koko.src = "images/halfbtm0.png";
   }else if ( img=="images/halfbtm0.png" ) {
      koko.src = "images/halfbtm1.png";
   }else if ( img=="images/halfbtm1.png" ) {
      koko.src = "images/halfbtm9.png";
   }
   else if ( img=="images/halfmid9.png" ) {
      koko.src = "images/halfmid0.png";
   }else if ( img=="images/halfmid0.png" ) {
      koko.src = "images/halfmid1.png";
   }else if ( img=="images/halfmid1.png" ) {
      koko.src = "images/halfmid9.png";
   }
}
</script>

説明図▲

タイルの状況です。セルの枠線を表示している分、高さが出て、配線にずれが出ています。

html▲

イベントハンドラに書いたthisがポイントです。

<table id="hadder">
<tr>
<td><img src="images/halftopcX.png"></td>
<td><img src="images/halftop9.png" onclick="changeimg(this)"></td>
<td rowspan="3"><img src="images/halfadder1.png"></td>
<td><img src="images/halfmid9.png" onclick="changeimg(this)"></td>
<td rowspan="3"><img src="images/halfadder2.png"></td>
<td class="m"><img src="img/halfa2ln.png"></td>
<td rowspan="3"><img src="images/halfadder3.png"></td>
<td><img src="images/halfmid9.png" onclick="changeimg(this)"></td>
<td><img src="images/halfmidcC.png"></td>
</tr>
<tr>
<td><img src="images/halfspc.png"></td>
<td><img src="images/halfspc.png"></td>
<td><img src="images/halfspc.png"></td>
<td><img src="images/halfmid9.png" onclick="changeimg(this)"></td>
<td><img src="images/halfspc.png"></td>
<td><img src="images/halfspc.png"></td>
</tr>
<tr>
<td><img src="images/halfbtmcY.png"></td>
<td><img src="images/halfbtm9.png" onclick="changeimg(this)"></td>
<td><img src="images/halfmid9.png" onclick="changeimg(this)"></td>
<td class="t"><img src="img/halfa2ln.png"></td>
<td><img src="images/halftop9.png" onclick="changeimg(this)"></td>
<td><img src="images/halftopcS.png"></td>
</tr>
</table>

css▲

imgのvertical-align:bottom;は必須です。デフォルトがbaselineなので、画像の下部にypなどのbaselineから下に出る部分を確保するために隙間を空けてしまいます。

tdのvertical-alignはtdの内側にぴったりな画像なので意味がありませんが、モバイルのために縮小された場合、微妙な差が生じるのを試行錯誤的に調整したものです。

img{
  max-width: 100%;
}
#hadder{
  border-collapse:collapse;
  border-spacing: 0px;  border:none;
  padding:0;
  margin:1% 2% 2% 2%;
}
#hadder td{
  border:none;
  padding:0;
}
#hadder td img{
  padding:0 0 0 0;
  margin:0;
  vertical-align:bottom;
}
#hadder td:first-child{
  width:auto;
  padding-right:4px;
}
#hadder td:last-child{
  width:auto;
  padding-left:4px;
}
td.t{
  vertical-align:top;
}
td.m{
  vertical-align:middle;
}
td.b{
  vertical-align:bottom;
}