Taschenrechner 3

So funktioniert das Script

Das Script besteht aus einer Anzeige (einem Textfeld), einem Tastenfeld aus 32 Knöpfen und der Logik dahinter: Zifferntasten bauen die Eingabe zusammen, Funktionstasten rechnen sofort, und „=" wertet den kompletten Ausdruck aus. Statt für jede Taste eine eigene Funktion zu schreiben (so machte es das Original mit über einem Dutzend fast identischer Funktionen), arbeitet die modernisierte Fassung mit einer Funktionstabelle und einem einzigen Klick-Listener für das ganze Tastenfeld.

function berechne() {
  try {
    anzeige.value = eval(anzeige.value);
    ende = true;
  } catch (e) {
    fehler();
  }
}

Das Herzstück: eval() nimmt den Text aus der Anzeige — etwa "(3+4)*2" — und führt ihn als JavaScript-Ausdruck aus. So bekommt der Rechner Punkt-vor-Strich und Klammerrechnung geschenkt, ohne selbst einen Formelparser zu brauchen. Der try/catch-Block fängt den Fehler ab, wenn in der Anzeige kein gültiger Ausdruck steht (z. B. "3++"): Statt dass das Script abstürzt, springt es in den catch-Zweig und zeigt „Fehlerhafte Eingabe" an — in der Ergebnisfläche statt wie früher per alert()-Fenster. Ein Hinweis am Rande: eval() ist hier unbedenklich, weil nur ausgewertet wird, was der Besucher selbst eintippt — fremde Daten sollte man der Funktion aber nie anvertrauen.

const mathTasten = {
  wurzel: Math.sqrt,
  betrag: Math.abs,
  rund: Math.round,
  …
};

function anwenden(funktion) {
  try {
    anzeige.value = funktion(eval(anzeige.value));
    ende = true;
  } catch (e) {
    fehler();
  }
}

In JavaScript sind Funktionen ganz normale Werte — man kann sie in einem Objekt ablegen wie Zahlen oder Texte. mathTasten ordnet jedem Tastennamen die passende Math-Funktion zu: wurzel zeigt auf Math.sqrt, sin auf Math.sin und so weiter. Die Funktion anwenden() wertet erst die Anzeige aus und schickt das Ergebnis dann durch die übergebene Funktion. Elf fast identische Original-Funktionen schrumpfen so auf eine Tabelle plus eine gemeinsame Funktion zusammen.

function save(zeichen) {
  let eingabe = anzeige.value;
  if (zeichen === "pi") {
    zeichen = Math.PI;
  }
  if (eingabe == 0 || ende) {
    eingabe = zeichen;
    ende = false;
  } else {
    eingabe = eingabe + zeichen;
  }
  anzeige.value = eingabe;
}

save() verarbeitet die Ziffern-, Punkt- und Klammertasten. Die Variable ende merkt sich, ob gerade ein Ergebnis in der Anzeige steht: Direkt nach „=" ersetzt die nächste Ziffer das Ergebnis, statt hinten angehängt zu werden — genau wie bei einem echten Taschenrechner. Zeigt die Anzeige nur 0, wird ebenfalls ersetzt; der lose Vergleich eingabe == 0 (zwei Gleichheitszeichen!) stammt aus dem Original und ist hier Absicht, denn er behandelt den Anzeige-Text "0" wie die Zahl 0. Die π-Taste wird vorher abgefangen und in ihren Zahlenwert Math.PI übersetzt.

document.getElementById("tr3-tasten").addEventListener("click", function (e) {
  const taste = e.target.closest("button");
  if (!taste) {
    return;
  }
  const aktion = taste.dataset.aktion;
  …
});

Statt 32 einzelner onclick-Attribute gibt es einen einzigen Listener auf dem Tastenfeld — das nennt man Event-Delegation. Klickt jemand irgendwo hinein, sucht e.target.closest("button") den angeklickten Knopf, und aus dessen data-aktion-Attribut liest taste.dataset.aktion ab, was zu tun ist. Eine kleine Verteiler-Kette entscheidet dann: Steht die Aktion in mathTasten, wird die Funktion angewendet; „gleich", „loeschen" und „ln" haben Sonderbehandlungen; die vier Rechenzeichen werden an die Anzeige angehängt; alles Übrige (Ziffern, Punkt, Klammern, π) geht an save().

Eine Kuriosität haben wir bewusst aus dem Original übernommen: Die ln-Taste gibt nicht den Logarithmus der Anzeige aus, sondern die Konstante Math.LN2, also ln(2) ≈ 0,693 — den echten natürlichen Logarithmus liefert die log-Taste über Math.log. Wer das ändern möchte, löscht einfach den ln-Sonderfall aus dem Listener und trägt ln: Math.log in die Tabelle mathTasten ein.

Überhaupt ist die Funktionstabelle die beste Stelle zum Basteln: Eine Quadrat-Taste etwa braucht nur einen neuen Knopf <button type="button" data-aktion="quadrat">x²</button> und den Eintrag quadrat: function (x) { return x * x; } in mathTasten — mehr nicht.