Taschenrechner 2

So funktioniert das Script

Das Script hat vier Aufgaben: Es hängt beim Klick auf eine Taste ein Zeichen an die Anzeige an, es rechnet den Text in der Anzeige aus, es zeigt das Ergebnis wieder in der Anzeige an, und es verbindet all das mit den Knöpfen. Der ganze Code steckt in einer sofort ausgeführten Funktion, damit die Variablennamen nicht mit anderen Scripts auf derselben Seite kollidieren.

const erlaubt = /^[0-9+\-*\/(). ]+$/;

Das ist ein regulärer Ausdruck — ein Muster, gegen das man Text prüfen kann. In den eckigen Klammern steht, welche Zeichen erlaubt sind: Ziffern, die vier Rechenzeichen, Klammern, Punkt und Leerzeichen. Das ^ am Anfang und das $ am Ende bedeuten „von der ersten bis zur letzten Stelle", das + heißt „mindestens ein Zeichen". Alles andere — Buchstaben zum Beispiel — fällt durch die Prüfung.

function auswerten() {
  const ausdruck = anzeige.value.trim();
  if (!erlaubt.test(ausdruck)) {
    return NaN;
  }
  try {
    return Function("return (" + ausdruck + ")")();
  } catch (fehler) {
    return NaN;
  }
}

Hier wird gerechnet. test() prüft die Anzeige gegen das Muster von oben; passt sie nicht, liefert die Funktion NaN zurück („not a number"). Erst danach wird aus dem Text eine Rechnung: Function("return (…)") baut aus der Zeichenkette eine kleine Funktion, die anschließend mit den runden Klammern dahinter sofort aufgerufen wird. Das Original benutzte an dieser Stelle eval(); das Muster davor sorgt dafür, dass wirklich nur Rechenzeichen im Ausdruck landen und nicht irgendein fremder Code. Der try…catch-Block fängt kaputte Ausdrücke ab — bei 2++ etwa entsteht ein Fehler, der das Script sonst anhalten würde; so wird stattdessen ruhig NaN zurückgegeben.

function zeigen(wert) {
  anzeige.value = Number.isFinite(wert) ? Number(wert.toPrecision(12)) : "Fehler";
}

Number.isFinite() ist wahr, wenn tatsächlich eine brauchbare Zahl herausgekommen ist — bei NaN und bei einer Division durch null ist es falsch, und in der Anzeige steht dann „Fehler". Das ?…:… dazwischen ist die Kurzform einer if-Abfrage: vor dem Fragezeichen die Bedingung, dahinter der Wert für „wahr", nach dem Doppelpunkt der für „falsch". toPrecision(12) schneidet die typischen Rundungsreste des Computers ab, sodass aus 0.30000000000000004 wieder 0.3 wird.

function hinzufuegen(zeichen) {
  if (anzeige.value === "Fehler") {
    anzeige.value = "";
  }
  anzeige.value += zeichen;
}

Das Anhängen selbst ist die einfachste Stelle des Scripts: += hängt an den Text in der Anzeige ein weiteres Zeichen an. Stand dort vorher „Fehler", wird die Anzeige zuerst geleert, damit man nicht auf einer Fehlermeldung weiterrechnet.

rechner.querySelectorAll("[data-tr-zeichen]").forEach(function (knopf) {
  knopf.addEventListener("click", function () {
    hinzufuegen(knopf.dataset.trZeichen);
  });
});

Statt an jeden Knopf ein onclick-Attribut zu schreiben, tragen die Tasten im HTML ein data-tr-zeichen-Attribut mit dem Zeichen, das sie einfügen sollen. querySelectorAll sammelt alle Knöpfe mit diesem Attribut ein, und forEach geht sie einzeln durch und hängt jedem einen Klick-Empfänger an. Über knopf.dataset.trZeichen kommt man an den Wert des Attributs heran — aus dem Bindestrich-Namen data-tr-zeichen wird in JavaScript dataset.trZeichen.

if (funktion === "sqrt") {
  zeigen(Math.sqrt(x));
}

Die Sondertasten arbeiten alle nach demselben Schema: erst den Ausdruck in der Anzeige ausrechnen, dann eine Funktion aus dem eingebauten Math-Objekt darauf anwenden. Math.sqrt() ist die Quadratwurzel, Math.log() der natürliche Logarithmus; das Quadrieren kommt ohne Math aus und multipliziert den Wert einfach mit sich selbst.

Zum Anpassen: Weitere Tasten braucht ihr nur im HTML zu ergänzen — ein <button> mit data-tr-zeichen="%" etwa fügt ein Prozentzeichen ein; dann muss dieses Zeichen aber auch in das erlaubte Muster oben aufgenommen werden. Möchtet ihr den Zehnerlogarithmus statt des natürlichen, ersetzt Math.log(x) durch Math.log10(x). Und wer die Scherztaste „nuss" nicht mag, löscht deren <button>-Zeile ersatzlos.