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:

Folgende Bibliotheken werden verwendet:

adilek/jirtdan is licensed under the MIT License
URL: http://jirtdan.org/, Licensed under the MIT license:
https://github.com/adilek/jirtdan/blob/master/LICENSE
Raphaël—JavaScript SVG Library

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>