Taschenrechner

So funktioniert das Script

Das Script besteht aus vier Teilen: Es hängt beim Druck auf eine Taste ein Zeichen an die Anzeige an, es zerlegt den so entstandenen Text in Zahlen und Rechenzeichen, es rechnet das Ergebnis aus, und es verbindet zum Schluss alle Tasten mit den passenden Funktionen. Alles steckt in einer sofort ausgeführten Funktion, damit die Namen im Inneren nicht mit anderen Scripts auf derselben Seite kollidieren.

function hinzufuegen(zeichen) {
  meldung.textContent = "";
  anzeige.value = anzeige.value + zeichen;
}

Das ist der ganze Zauber hinter den Zifferntasten: Der Text im Anzeigefeld (anzeige.value) wird um das gedrückte Zeichen verlängert. Nach drei Klicks auf 1, 2 und 3 steht dort also die Zeichenkette "123" — noch keine Zahl, sondern schlichter Text.

const teile = ausdruck.replace(/\s+/g, "").match(/\d+(?:\.\d+)?|[+\-*\/]/g);

Hier wird aus dem Text eine Liste. Das Muster zwischen den Schrägstrichen ist ein regulärer Ausdruck, also eine Suchvorlage für Zeichenketten. replace(/\s+/g, "") wirft zuerst alle Leerzeichen weg. Danach sammelt match alles ein, was entweder eine Zahl mit möglichen Nachkommastellen ist (\d+(?:\.\d+)?) oder eines der vier Rechenzeichen. Aus "12*3+5" wird so die Liste ["12", "*", "3", "+", "5"].

for (let i = 1; i < teile.length - 1; i++) {
  if (teile[i] === "*" || teile[i] === "/") {
    const a = Number(teile[i - 1]);
    const b = Number(teile[i + 1]);
    teile.splice(i - 1, 3, String(teile[i] === "*" ? a * b : a / b));
    i -= 2;
  }
}

Das ist die Punktrechnung. Die Schleife läuft über die Liste und sucht ein * oder /. Findet sie eines, nimmt sie die Zahl davor und die Zahl danach, rechnet, und ersetzt alle drei Einträge durch das Ergebnis. Genau das macht splice(i - 1, 3, …): ab der Stelle i - 1 drei Einträge herausnehmen und einen neuen einsetzen. Aus ["12","*","3","+","5"] wird ["36","+","5"]. Weil die Liste dabei kürzer wird, muss der Zähler mit i -= 2 zurückspringen.

let ergebnis = Number(teile[0]);
for (let i = 1; i < teile.length - 1; i += 2) {
  const b = Number(teile[i + 1]);
  ergebnis = teile[i] === "+" ? ergebnis + b : ergebnis - b;
}

Jetzt stehen in der Liste nur noch Zahlen mit + und - dazwischen. Die zweite Schleife arbeitet sie von links nach rechts ab: Startwert ist die erste Zahl, danach geht es immer im Zweierschritt weiter (Rechenzeichen, Zahl). Das Fragezeichen mit dem Doppelpunkt ist der Bedingungsoperator — eine Kurzschreibweise für „wenn Pluszeichen, dann addieren, sonst subtrahieren“.

Das alte Script benutzte an dieser Stelle eval(), eine Funktion, die beliebigen Text als JavaScript ausführt. Das ist bequem, aber unsauber: eval führt eben alles aus, was im Feld steht, nicht nur Rechnungen. Der kleine Zerleger oben kann dagegen nichts anderes als rechnen.

if (art === "sqrt") anzeige.value = Math.sqrt(x);
if (art === "pow") anzeige.value = x * x;
if (art === "log") anzeige.value = Math.log(x);

Die drei Sondertasten arbeiten mit nur einer Zahl. Math.sqrt zieht die Quadratwurzel, das Quadrat wird schlicht als x * x gerechnet, und Math.log liefert den natürlichen Logarithmus. Wollt ihr stattdessen den Zehnerlogarithmus, schreibt Math.log10(x).

document.querySelectorAll("[data-tr]").forEach(function (knopf) {
  knopf.addEventListener("click", function () {
    hinzufuegen(knopf.getAttribute("data-tr"));
  });
});

Zum Schluss werden die Tasten verdrahtet. Jede Zifferntaste trägt im HTML ein eigenes Attribut data-tr mit dem Zeichen, das sie einfügen soll. querySelectorAll("[data-tr]") holt alle diese Tasten auf einen Schlag, und addEventListener("click", …) hängt an jede den passenden Klick-Handler. So braucht keine einzige Taste im HTML ein onclick-Attribut.

Zum Anpassen: Die Beschriftungen, die Meldungstexte und die Zusatztasten lassen sich leicht ändern. Ersetzt zum Beispiel Math.log durch eine andere Funktion aus dem Math-Vorrat, etwa Math.abs für den Betrag oder Math.round fürs Runden — der Knopf heißt dann natürlich auch besser anders. Für Klammern müsstet ihr den Zerleger erweitern, das ist der schwierigste Teil an einem Taschenrechner.