Kleiner JavaScript Kurs

Exkurs Grundlagen Digitaltechnik


Analog - Digital

Ist in Arbeit


Zahlensysteme

Am gebräuchlichsten ist für uns im Alltag das Dezimalsystem. Wir verwenden dabei die Ziffern 0 - 9 (10 Ziffern). Bei Zahlen größer 9 wird links eine Stelle eingefügt. Die "Wertigkeit" der einzelnen Stellen von rechts nach links: Einer, Zehner, Hunderter, usw..
Computer (Digitaltechnik) arbeiten mit nur 2 Zuständen (1/0, an/aus, High/Low, 5 Volt/ 0 Volt 1 Bit) im Dualsystem. Wir können also nur 2 Ziffern (0, 1) verwenden. Schon um die Zahl 2 abzubilden benötigen wir rechts eine weitere Stelle (10), für die 4 eine weitere (100).
Da Dualzahlen in der Praxis unübersichtlich sind, fasst man häufig 4 oder 8 Bits zusammen. Mit 4 Bits kann man bis zur Dezimalzahl 15 (1111) zählen. Um diese 4 Bit mit einer Stelle darstellen zu können benötigt man ein Zahlensystem mit 15 "Ziffern", das Hexadezimalsystem. Die 15 "Ziffern" sind: 0,1,2,3,4,5,6,7,8,9,a,b,c,d,e,f.
Probier es doch mal aus:

Zahlensysteme

Dezimal(0 - 9)
Hexadezimal(0 - f)
Dual(0 - 1)



<!DOCTYPE html>
<html lang="de">
    <head>
        <meta charset="utf-8">
        <title>Zahlensysteme</title>                
    </head>
                        
    <body>
		<h1>Zahlensysteme</h1>
        <input type="range" id="regler" min="0" max="255" value="0">
        <h2><table>
          <tr><td>Dezimal(0 - 9)</td><td id="dezimal" style="text-align:right" width=100></td></tr>
          <tr><td>Hexadezimal(0 - f)</td><td id="hexadezimal" style="text-align:right"></td></tr>
          <tr><td>Dual(0 - 1)</td><td id="dual" style="text-align:right"></td></tr>
      	</table></h2>
    </body>
        <script>
  			var dezimal=document.getElementById("dezimal");
            var hexadezimal=document.getElementById("hexadezimal");
          	var dual=document.getElementById("dual");
            var regler=document.getElementById("regler");
            regler.addEventListener("change", anzeigen);
            function anzeigen(){
              var dezimalzahl=parseInt(regler.value);
              dezimal.innerHTML=dezimalzahl;
              var hexzahl=dezimalzahl.toString(16);
              hexadezimal.innerHTML=hexzahl;
              var binzahl=dezimalzahl.toString(2);
              dual.innerHTML=binzahl;
            }
  		</script>
</html>

Digitale Grundschaltungen

And/Und, Or/Oder, Not/Nicht, XOr/ExklusivOder
Zum Ausprobieren:

{ "width":800, "height":400, "showToolbox":true, "toolbox":[ {"type":"DC", "label":"DC 5V"}, {"type":"LED"}, {"type":"Toggle","label":"Schalter"}, {"type":"AND", "label":"AND (&)"}, {"type":"OR", "label":"OR (>=1)"}, {"type":"NOT", "label":"NOT (!=)"}, {"type":"NAND"}, {"type":"NOR"}, {"type":"XOR"}, {"type":"OSC", "label":"Oscillator 1Hz"}, {"type":"7seg"}, {"type":"4bit7seg"}, {"type":"RS-FF"}, {"type":"JK-FF"}, {"type":"8bitCounter"}, {"type":"HalfAdder"}, {"type":"FullAdder"}, {"type":"4bitAdder"}, {"type":"2to4BinaryDecoder"}, {"type":"3to8BinaryDecoder"}, {"type":"4to16BinaryDecoder"}], "devices":[ ], "connectors":[ ] }
SimcirJS, Copyright (c) 2014 Kazuhiko Arase, URL: http://www.d-project.com/, Licensed under the MIT license: http://www.opensource.org/licenses/mit-license.php

Farben

Farbmischung, RGB (rot/grün/blau)

Farbmischer

R (rot/red) 00
G (green/grün) 00
B (blue/blau) 00


<!DOCTYPE html>
<html lang="de">
    <head>
        <meta charset="utf-8">
        <title>RGB Farbmischer</title>                
    </head>
                        
    <body>
        <h1>RGB Farbmischer</h1>
		<table>
          <tr><td>R (rot/red)</td>
               <td><input type="range" id="R" min="0" max="255" value="0"></td>
               <td id="RH">00</td></tr>
          <tr><td>G (green/grün)</td>
               <td><input type="range" id="G" min="0" max="255" value="0"></td>
               <td id="GH">00</td></tr>
          <tr><td>B (blue/blau)</td>
               <td><input type="range" id="B" min="0" max="255" value="0"></td>
               <td id="BH">00</td></tr>
      </table>
      <canvas id="myCanvas" width="300" height="300" ></canvas>
    </body>
    <script>
  		var sliderRed=document.getElementById("R");
        var sliderGreen=document.getElementById("G");
        var sliderBlue=document.getElementById("B");
        var hexRed=document.getElementById("RH");
        var hexGreen=document.getElementById("GH");
        var hexBlue=document.getElementById("BH");
        sliderRed.addEventListener("change", farbmischer);
        sliderGreen.addEventListener("change", farbmischer);
        sliderBlue.addEventListener("change", farbmischer);
        var canvas=document.getElementById("myCanvas");
        var ctx=canvas.getContext("2d");
        var breite=canvas.width;
        var hoehe=canvas.height;
        function farbmischer(){
          hexzahlR=parseInt(sliderRed.value).toString(16);
          if(hexzahlR.length==1){
            hexzahlR="0" + hexzahlR;
          }
          hexRed.innerHTML=hexzahlR;
          hexzahlG=parseInt(sliderGreen.value).toString(16);
          if(hexzahlG.length==1){
            hexzahlG="0" + hexzahlG;
          }
          hexGreen.innerHTML=hexzahlG;
          hexzahlB=parseInt(sliderBlue.value).toString(16);
          if(hexzahlB.length==1){
            hexzahlB="0" + hexzahlB;
          }
          hexBlue.innerHTML=hexzahlB;
          farbe="#" + hexzahlR + hexzahlG + hexzahlB
          kreisZeichnen(farbe);
        }
        function kreisZeichnen(farbe){
          ctx.fillStyle=farbe;
          ctx.beginPath();
          ctx.arc(breite/2, hoehe/2, breite/2, 0, Math.PI*2);
          ctx.fill();
        }
        kreisZeichnen("#000000");
  	</script>
</html>