Hexadezimal zu Dezimal

So funktioniert das Script

Das Script ist eine einzige Funktion mit zwei Gesichtern: rechne() bekommt beim Aufruf mit, in welche Richtung umgerechnet werden soll, und läuft dann entweder in den Hex-Zweig oder in den Dezimal-Zweig. Interessant ist, dass die beiden Richtungen technisch völlig verschieden gelöst sind — die eine Richtung erledigt JavaScript von allein, die andere muss das Script von Hand ausrechnen.

const hex = "0123456789ABCDEF";

Diese Zeichenkette ist das Alphabet des Hexadezimalsystems, und sie ist zugleich eine kleine Nachschlagetabelle: An Position 0 steht die „0“, an Position 10 das „A“, an Position 15 das „F“. Weil man in JavaScript mit charAt(n) das Zeichen an einer bestimmten Stelle einer Zeichenkette holen kann, wird aus dem Zahlenwert 12 so ganz ohne Wenn und Aber das Zeichen „C“.

out = parseInt(inp, 16);

Das ist die Richtung Hex → Dezimal, und sie ist ein Einzeiler. parseInt() nimmt als zweites Argument die Zahlenbasis: Mit der 16 liest die Funktion den Text als Hexadezimalzahl und liefert den gewöhnlichen Zahlenwert zurück, aus "1F" also 31. Ohne diese 16 würde JavaScript den Text als Dezimalzahl lesen und beim ersten Buchstaben abbrechen.

while (inp !== 0) {
  out = hex.charAt(inp % 16) + out;
  inp = inp >> 4;
}

Die Gegenrichtung ist die eigentliche Handarbeit und ein schönes Beispiel für das klassische Verfahren der Basisumrechnung. inp % 16 liefert den Rest der Division durch 16, also den Wert der letzten Hex-Stelle; über charAt wird daraus das passende Zeichen, und es wird vorn an das Ergebnis gehängt, weil die Stellen von hinten nach vorn entstehen. Danach schiebt inp >> 4 die Zahl um vier Bits nach rechts — das ist eine ganzzahlige Division durch 16 und wirft die gerade verarbeitete Stelle weg. Die Schleife läuft, bis nichts mehr übrig ist.

if (isNaN(inp) || inp < 0) {
  meldung.textContent = "Fehlerhafter Eingabewert: …";
  return;
}

Die Prüfung auf NaN („not a number“) stand schon im Original, dort allerdings als alert()-Fenster; heute erscheint der Hinweis in der Ergebnisfläche. Neu ist die Prüfung auf negative Zahlen, und die ist wichtig: Der Schiebe-Operator >> erreicht bei negativen Werten nie die 0, die Schleife würde also ewig weiterlaufen und den Browser blockieren.

feldHex.addEventListener("change", function () { rechne("hex"); });

Damit die Umrechnung auch ohne Knopfdruck startet, hängt an jedem Feld ein change-Ereignis: Es feuert, sobald ihr ein Feld mit geändertem Inhalt verlasst. Weil rechne() ein Argument braucht, wird es in eine kleine namenlose Funktion verpackt — würde man rechne("hex") direkt hinschreiben, liefe die Funktion sofort beim Laden statt beim Ereignis.

Zum Anpassen: Wollt ihr Kleinbuchstaben in der Ausgabe (also ff8800 statt FF8800, wie es bei CSS-Farben üblich ist), schreibt einfach die Zeichenkette hex in Kleinbuchstaben. Und wer eine andere Basis braucht — etwa das Oktalsystem mit acht Ziffern —, ändert die drei Zahlen entsprechend: die Basis in parseInt, die 16 im Rest-Operator und die Schiebeweite (4 Bits entsprechen 16, 3 Bits entsprechen 8).