Dieses HTML-Dokument kann heruntergeladen und lokal im Browser geöffnet werden. Die Ausführung von JavaScript muss erlaubt sein.
<!DOCTYPE html> <html lang="de"> <head> <meta http-equiv="Content-Type" content="text/html"; charset="utf-8"> <script type="text/javascript"> var myNumber = 0; var b0 = b1 = b2 = b3 = b4 = 0; var d0 = d1 = 0; var h0 = h1 = 0; function increment() { if (myNumber < 17) { myNumber++; } else { alert("Die größte Zahl ist bereits erreicht."); } update_numbers(); } function decrement() { if (myNumber > 0) { myNumber--; } else { alert("Die kleinste Zahl ist bereits erreicht."); } update_numbers(); } function calculate_numbers() { // bin numbers (myNumber % 2 == 0) ? b0 = 0 : b0 = 1; ((Math.floor(myNumber / 2)) % 2 == 0) ? b1 = 0 : b1 = 1; ((Math.floor(myNumber / 4)) % 2 == 0) ? b2 = 0 : b2 = 1; ((Math.floor(myNumber / 8)) % 2 == 0) ? b3 = 0 : b3 = 1; ((Math.floor(myNumber / 16)) % 2 == 0) ? b4 = 0 : b4 = 1; // dec numbers if (myNumber < 10) { d0 = myNumber; d1 = 0; } else { d0 = myNumber - 10; d1 = 1; } // hex numbers if (myNumber < 10) { h0 = myNumber; h1 = 0; } else if (myNumber < 16) { var chars = ["A", "B", "C", "D", "E", "F"]; h0 = chars[myNumber - 10]; h1 = 0; } else { h0 = myNumber - 16; h1 = 1; } } function update_numbers() { calculate_numbers(); // bin document.getElementById("bin-p0").innerHTML = b0; document.getElementById("bin-p1").innerHTML = b1; document.getElementById("bin-p2").innerHTML = b2; document.getElementById("bin-p3").innerHTML = b3; document.getElementById("bin-p4").innerHTML = b4; // dec document.getElementById("dec-p0").innerHTML = d0; document.getElementById("dec-p1").innerHTML = d1; // hex document.getElementById("hex-p0").innerHTML = h0; document.getElementById("hex-p1").innerHTML = h1; } </script> <style type="text/css"> body { font-family: sans-serif; text-align: center; } div#einleitung { text-align: left; padding: 1em; } div#numbers { margin: 1em auto; } div.number { display: inline-block; margin: 0.2em; padding: 0.2em; font-size: 6em; } div.bin { background-color: lightblue; } div.dec { background-color: lightgreen; } div.hex { background-color: lightcoral; } div.block { display: inline-block; margin: 1em; padding: 1em; background-color: lightgray; } button.myButton { font-size: 2em; padding: 0.5em; } </style> </head> <body onload="update_numbers()"> <h1>Zählen mit binären, dezimalen und hexadezimalen Zahlen</h1> <div id="einleitung"> <p> Unser gebräuchliches System der Dezimalzahlen ist ein Stellenwertsystem. Jede Stelle einer Zahl gibt an, wie oft der Wert der Stelle multipliziert werden muss, bevor er mit den anderen Stellen addiert wird um den Wert der Gesamtzahl anzugeben. <br /> Im Dezimalsystem hat jede Stelle die Wertigkeit <b>10<sup>n</sup></b>, wobei <b>n</b> von rechts mit 0 beginnend dem Index der Stelle entspricht. </p> <p> Die Zahl 567 lässt sich daher ausführlich als <b>5 * 10<sup>2</sup> + 6 * 10<sup>1</sup> + 7 * 10<sup>0</sup></b> schreiben.<br /> Weil 10<sup>2</sup> = 100, 10<sup>1</sup> = 10 und 10<sup>0</sup> = 1 entspechen, ergibt sich <b>500 + 60 + 7 = 567</b>. </p> <p> Nach dem gleichen Prinzip funktionieren auch das Binärsystem und das Hexadezimalsystem. Der Unterschied liegt nur darin, dass es nicht 10 Ziffern (0-9) sondern nur 2 Ziffern (0-1) oder 16 Ziffern (0-F) gibt.<br /> Die Formeln für die Wertigkeiten der Stellen lauten dann analog <b>2<sup>n</sup></b> und <b>16<sup>n</sup></b>. </p> <p> Bei jedem dieser Zahlensysteme kann der Wert einer Stelle so lange inkrementiert werden, bis dort die größtmögliche Ziffer steht. Beim nächsten Schritt spring diese Stelle wieder auf 0 und die höherwertige Stelle wird dafür um 1 inkrementiert.<br /> Dieses Verhalten ist vom Kilometerzähler allgemein bekannt.<br /> In der unten dargestellten Anzeige kann man von dezimal 0 bis 17 und zurück zählen und dabei beobachten, wie sich </p> </div> <div id="numbers"> <div id="bin-numbers" class="block"> <div id="bin-p4" class="number bin"> </div> <div id="bin-p3" class="number bin"> </div> <div id="bin-p2" class="number bin"> </div> <div id="bin-p1" class="number bin"> </div> <div id="bin-p0" class="number bin"> </div> </div> <div id="dec-numbers" class="block"> <div id="dec-p1" class="number dec"> </div> <div id="dec-p0" class="number dec"> </div> </div> <div id="hex-numbers" class="block"> <div id="hex-p1" class="number hex"> </div> <div id="hex-p0" class="number hex"> </div> </div> </div> <div id="controls"> <button onclick="decrement()" class="myButton">dekrementieren (--)</button> <button onclick="increment()" class="myButton">inkrementieren (++)</button> </div> </body> </html>