Die Funktion "eval()"

Ein sehr mächtige Funktion ist die in Java-Script schon vorgefertige Funktion eval(). Übrigens: Du hast schon viele andere vorgefertigte Funktionen in Java-Script kennen gelernt. Immer dann, wenn ein Befehl die beiden Rundklammern trägt, ist dies eigentlich eine Funktion! So eben auch eval().

eval() kann rechnen! Versuche es einmal. Gib in das Textfeld eine einfache Rechenaufgabe ein.

Klicke nun doppelt auf das Textfeld. Ich habe hier den Doppelklick als Auslöser der Funktion gewählt, damit nicht durch irgendwelche Zufallsklicks etwas Ungewolltes passiert.

Und nun etwas Komplizierteres, mit Klammern und so. Du musst aber alle Operatoren schreiben, also auch das Mal-Zeichen zwischen Zahl und Klammer, Z. B. 3*(...) und nicht 3(...)!

Zeichen werden mit sogenannten Operatoren verknüpft. Dies hast du schon erfahren. Die Zeichen für die verschiedenartigen Verknüpfungen von numerischen Zeichen = Zahlen kennst du aus dem Matheunterricht. es sind

ZeichenBedeutungBeispiel
+Addition3 + 4
-Subtraktion4 - 3
*Multiplikation4 * 3
/Division4 / 3
=Gliechheitszeichen7 = 3 + 4

Nun der Code:

<input type="Text" value="" onDblClick=alert(eval(value))>

Dies ist das eigentliche Programm. Schön kurz, nicht war!

Allerdings habe ich hier auch völlig auf Funktionen im head verzichtet. Das kannst du bei so kurzen Befehlen auch einmal wagen.
Es macht deine Programmierung aber natürlich unübersichtlich!
Und ich habe auch noch auf das Befehlswort window verzichtet. Das darf man ja, wie du weißt.
eval() ist also auch eine Funktion, die eigentlich window.eval() geschrieben werden müsste.

Hier noch einmal das Programm mit allen "Windows"

<input type="Text" value="" onDblClick=window.alert(window.eval(value))>

Schau'n wir also mal was hier passiert:

1. Da wird also zunächst mit <input> ein Textfeld in Html programmiert, in das der User Text eingeben kann.
<input>

2. Ein Attribut wird hinzugefügt: value=""
<input value="">

3. Der Event-Handler "onDblClick="" wird als Attribut hinzugefügt. Welcher Event-Handler, ist eigentlich egal.
(Erklärung für onDblClick siehe oben)
<input value="" onDblClick="">

4. Mit onDblClick rufen wir die Funktion alert() auf.
<input value="" onDblClick="alert()">

5. In die runden Klammern dieser Funktion setzten wir die Funktion eval().
<input value="" onDblClick="alert(eval())">

6. Und schließlich übergeben wir der Funktion eval() den value, den der User eingibt.
<input value="" onDblClick="alert(eval(value))">

Was passiert nun, wenn der User eine Aufgabe eingegeben hat und doppelt klickt?

Die Funktion eval() liest die Eingabe = value, berechnet diese, übergibt das Ergebnis an alert() und diese Funktion öffnet ein Fenster mit dem Ergebnis.

Weil das zwar schön knapp programmiert, aber eben unübersichtlich ist, hier das Ganze noch einmal, aber mit Funktion im head.

  1. Im body wandeln wir <input onDblClick="">um in <button onDblClick="">Berechne</button>.
    Dies Zeile ruft durch Doppelklick auf den Knopf die Funktion im Head auf.
  2. In den head schreiben wir folgende Funktion:
  3. function Rechnen()
    {
      var berechnung;
      berechnung = prompt('Bitte gib eine Rechenaufgabe ein.','')
      berechnung = eval(berechnung)
      alert(berechnung)
    }

    Das ist alles.

    Aufgabe:

    1. Erstelle ein neues Dokument.
    2. Kopiere diese Funktion in den head und die Button-Zeile in den body.
    3. Versuch geklappt?

    Nun hast du zwar viel mehr Code, aber dafür bleibt deine Programmierung schön übersichtlich.

    Wir könnten auch "schachteln, das heiß, die Befehle ineinander stecken:

    function Rechnen(){alert(eval(prompt('Bitte gib eine Rechenaufgabe ein.','')))}

    Hier ist also prompt in eval in alert geschachtelt. Dieses Vorgehen kennst du auch als Zwiebelprinzip aus Html!

    Dieses Vorgehen nennt man Verschachtelung. Bitte merken.

    Probiere dies in deiner "Versuchsseite" aus.

    Du siehst: Man kann sehr kompakt programmieren, dann wird's schnell unübersichtlich,
    oder man programmiert übersichtlich, jeden Befehl in eine Zeile. Dann verbraucht man viel Platz, aber das sieht der User ja nicht!

    So, nun noch schnell einen Kurztest und dann ab zur näschsten Seite.

    Kurztest:
    Schreib den Eval-Befehl mit seinen Zeichen auf.
    Denk dran: Es ist ein window-Befehl!
    Wie nennt man das "Ineinander-Stecken" von Befehlen?
    (Achte auf Groß-/Kleinschreibung!)