Taschenrechner 4

So funktioniert das Script

Das Script besteht aus einer Anzeige (einem schreibgeschützten Eingabefeld) und vielen Tasten, die alle nur drei Dinge tun: Zeichen an die Anzeige anhängen, den zusammengetippten Ausdruck ausrechnen oder eine Mathematikfunktion auf den angezeigten Wert anwenden. Dazu kommt der Auf- und Zuklappmechanismus für die Zusatzfunktionen. Alles steckt in einer sofort ausgeführten Funktion, damit keine Variablennamen mit anderen Scripts auf der Seite kollidieren.

function tippen(zeichen) {
  anzeige.value += zeichen;
}

Die Zifferntasten bauen die Rechenaufgabe als Text zusammen: += hängt das übergebene Zeichen hinten an den Inhalt der Anzeige an. Klickt ihr nacheinander auf 1, 2 und +, steht dort "12+". Damit man nicht in die Anzeige hineintippen kann, trägt das Feld das Attribut readonly.

document.querySelectorAll("#tr4-tasten [data-taste]").forEach(function (knopf) {
  knopf.addEventListener("click", function () {
    tippen(knopf.dataset.taste);
  });
});

Statt jeder Taste einzeln einen Klick-Handler zu geben, tragen die einfachen Tasten ein data-taste-Attribut im HTML — dort steht das Zeichen, das sie einfügen sollen. querySelectorAll sammelt alle diese Tasten ein, und die Schleife verbindet jede mit tippen(). Über knopf.dataset.taste liest JavaScript den Wert des Attributs aus. So bekommt die Kommataste übrigens ihren Trick: Sie zeigt ein Komma, ihr data-taste ist aber ein Punkt, weil JavaScript nur den Punkt als Dezimaltrenner versteht.

function rechnen() {
  try {
    anzeige.value = eval(anzeige.value);
  } catch (fehler) {
    anzeige.value = "Fehler";
  }
}

Das Herzstück: eval() nimmt den zusammengetippten Text — etwa "(2+3)*4" — und führt ihn als JavaScript-Ausdruck aus. Punkt-vor-Strich und Klammern gibt es damit gratis, denn JavaScript rechnet nach denselben Regeln. Weil eval() bei einem unvollständigen Ausdruck wie "2+" einen Fehler wirft, ist der Aufruf in try … catch verpackt: Statt dass das Script abbricht, erscheint dann „Fehler“ in der Anzeige. Generell gilt: eval() führt beliebigen Code aus und sollte nie mit fremden Eingaben gefüttert werden — hier ist es unkritisch, weil die Anzeige schreibgeschützt ist und nur die eigenen Tasten Zeichen einfügen.

function anwenden(funktion) {
  anzeige.value = funktion(Number(anzeige.value));
}

Die wissenschaftlichen Tasten nutzen alle dieselbe Hilfsfunktion: anwenden() macht aus dem Anzeigetext mit Number() eine Zahl, ruft die übergebene Funktion damit auf und schreibt das Ergebnis zurück. Das Besondere: In JavaScript kann man Funktionen wie Math.cos oder Math.sqrt selbst als Argument übergeben — so genügt eine Zeile pro Taste. PI und RAND funktionieren anders: Sie hängen mit tippen() eine Zahl (die Kreiszahl bzw. eine Zufallszahl zwischen 0 und 100) an den Ausdruck an, statt ihn zu ersetzen.

mehrKnopf.addEventListener("click", function () {
  extra.hidden = !extra.hidden;
  mehrKnopf.textContent = extra.hidden ? "Mehr Funktionen …" : "Funktionen schließen";
});

Der Klappmechanismus kommt ohne CSS-Tricks aus: Das HTML-Attribut hidden blendet den Extrabereich aus, und !extra.hidden kehrt den Zustand bei jedem Klick um. Der Fragezeichen-Doppelpunkt-Ausdruck (der sogenannte Bedingungsoperator) wählt je nach Zustand die passende Knopfbeschriftung.

Zum Anpassen: Neue Einfügetasten braucht ihr nur im HTML zu ergänzen — ein <button data-taste="…"> innerhalb des Tastenfelds genügt, das Script findet ihn automatisch. Sollen die Zusatzfunktionen von Anfang an sichtbar sein, entfernt einfach das hidden-Attribut am Extrabereich.