Informatik :: JavaScript :: Taschenrechner (TR)

Taschenrechner (TR)

Für "einfache" Berechnungen, d.h. Audrücke, die nur die Grundrechenoperationen (+-*/) und Klammern enthalten, stellt JavaScript mit der Methode eval("String") eine sehr mächtige Funktion zur Verfügung. So liefert z.B. eval("3*(2-8)/9") den Wert -2
Um diese Funktion für den TR zu nutzen, benötigt man z.B. ein einzeiliges Eingabefeld in einem Formular. Nennen wir das Eingabefeld "eingabe" und das Formular "tr", so können wir mit document.tr.eingabe auf dieses Eingabefeld zugreifen.

Um etwas in das Eingabefeld zu schreiben, benötigen wir: document.tr.eingabe.value=Wert

Um dagegen das Eingabefeld zu lesen, benötigen wir: Variable=document.tr.eingabe.value

Im folgenden Beispiel kann in das linke Eingabefeld ein mathematischer Ausdruck eingegeben werden. Beim Klick auf den Button " = " wird eine Funktion rechne() aufgerufen, die den eingegebene String der Methode eval() übergibt und anschließend das Ergebnis in das rechte Textfeld (nennen wir es "ausgabe") schreibt.

Wir hätten jetzt schon einen primitiven TR, der die Grundrechenarten beherrscht. Aber wir wollen natürlich noch etwas mehr.
Wie wäre es zunächst mit ein paar Tasten? Zum Beispiel für die einzelnen Ziffern, den Dezimalpunkt, eine öffnende und schließende Klammer und die Tasten für die 4 Grundrechenarten.
Um die Tasten schön übersichtlich anzuordnen, eignet sich dafür natürlich eine Tabelle. Die einzelnen Button tragen als Beschriftung das jeweilige Zeichen und rufen beim Klick eine Funktion auf (nennen wir sie schreibe()), der das jeweilige Zeichen als String übergeben wird. Von der Funktion schreibe() erwarten wir, dass sie das jeweilige Zeichen in das Eingabefeld schreibt.

Jetzt sieht unser TR schon etwas wissenschaftlicher aus. Aber wir wollen noch etwas mehr.
Wie wärs mit einem Button, der das letzte eingegebene Zeichen löscht und einen Button, der das ganze "Display" (also Ein- und Ausgabefeld) löscht?
Beginnen wir mit dem letzten und erinnern wir uns, dass es bereits einen Button in HTML gibt, der alle Formulardaten zurücksetzt.
Etwas schwieriger gestaltet sich das Löschen des letzten Zeichens. Hier benötigen wir eine Funktion (nennen wir sie loesche()), die auf den String aus dem Eingabefeld die Methode substr(anfang,laenge) anwendet. Siehe hierzu in der Objektreferenz nach.

Aufgabe 1:


Erstelle zunächst das Fomular "tr" wie abgebildet.

Aufgabe 2:

Stelle die Funktionalität wie im Beispiel 3 her!

Aufgabe 3:

Ergänze die entsprechenden Funktionen für die restlichen Tasten!

Hinweis:

Beachte, dass bei einigen Funktionen der Definitionsbereich eingeschränkt ist.
Falls ein Wert eingegeben wird, der nicht zum Definitionsbereich der Funktion gehört, soll ein entsprechendes Meldungsfenster erscheinen.