Javascript Funktionen – Wir lesen ein und geben aus

09.01.2017 10:31 Uhr

Javascript Funktionen bemächtigen uns, deutlich mehr zu machen als nur Werte im Quellcode zusammenzurechnen. Wir können Werte vom Benutzer entgegennehmen und wieder ausgeben. Außerdem werden wir in der Lage sein, eigene Javascript Funktionen zu schreiben, die spezielle Aufgaben übernehmen werden.

Einfache Addition zweier Variablen

Schauen wir uns nochmal ein Programm an, dessen Funktionsweise bereits aus der letzten Kursstunde klar sein müsste.

var zahl1 = 3;
var zahl2 = 4;

var ergebnis;
ergebnis = zahl1 + zahl2;

alert( ergebnis );

Texte werden zu Zahlen umgewandelt

Neben Variablen haben wir bereits den Befehl „alert“ kennengelernt, der uns den Wert einer Variablen in einer Box ausgibt. Wir lernen jetzt einen neuen Befehl kennen. „parseInt“ wandelt für uns Texte in Zahlen um, sofern dies möglich ist.

var text1 = "33undtext";
var text2 = "44undtext"

var zahl1 = parseInt(text1);
var zahl2 = parseInt(text2);

var ergebnis;
ergebnis = zahl1 + zahl2;

alert( ergebnis );

„parseInt“ wandelt für uns den Text „33undtext“ in die Zahl 33, „44undtext“ entsprechend in die Zahl 44, so dass die Ausgabe 77 beträgt. Dazu muss und klar werden, dass Javascript Befehle oder besser Javascript Funktionen eine Eigenschaft haben, die für uns Elementar ist: Sie haben einen „Rückgabewert“. Dies bedeutet, dass wir einer Javascript Funktion nicht nur einen Wert als „Parameter“ in den Klammern übergeben, sondern auch, dass der gesamte Javascript Befehl nach seiner Ausführung einen eigenen Wert annimmt, den wir benutzen können wie den Wert selbst! (Bitte machen Sie sich diesen Satz und seine Bedeutung wirklich klar!) Dies galt ja bereits für Variablen genauso. Für gewöhnlich ist dieser Wert das Ergebnis einer Umrechnung bzw. Analyse wie bei parseInt, oder aber eine Erfolgsmeldung.

Werte vom Benutzer entgegennehmen

Es gibt einen weiteren Befehl aus dem großen Pool der Javascript Funktionen, den wir jetzt kennenlernen. Statt die Eingabe unserer Rechenoperation immer im Quelltext zu ändern, wollen wir die Werte vom Benutzer eingeben lassen. Dazu gibt es den Befehl „prompt“. Dieser öffnet eine Box ähnlich „alert“, allerdings kann der Benutzer hier einen Wert eintragen.

Der Befehl kann zwei Parameter verarbeiten. Der erste Parameter ist die Beschriftung der Box, damit der Benutzer weiß, was er eigentlich eintragen soll. Der zweite Parameter ist der Wert, der bereits in der Box vorausgefüllt ist, quasi der Standardwert.

var text1 = prompt("Dein erster Wert:", "gib hier etwas ein");
var text2 = "prompt("Dein zweiter Wert:", "gib hier auch etwas ein");

var zahl1 = parseInt(text1);
var zahl2 = parseInt(text2);

var ergebnis;
ergebnis = zahl1 + zahl2;

alert( ergebnis );

Wie bereits „parseInt“ hat auch „prompt“ einen Rückgabewert. Dieser ist genau der eingegebene Text des Benutzers, der in unserem Beispiel in die Variablen text1 bzw. text2 kopiert wird. Danach wird der Text von den Javascript Funktionen parseInt(text1) und parseInt(text2) in Zahlen umgewandelt, danach addiert und per „alert“ ausgegeben.

Javascript Funktionen selber schreiben

Nachdem wir nun gelernt haben, wie Funktionen ablaufen und was ihre Bestandteile sind, können wir auch eigene Funktionen erstellen. Als Beispiel bauen wir eine Funktion, die zwei Texte entgegen nimmt, in Zahlen umwandelt, addiert und als Rückgabewert das Ergebnis beider Zahlen hat.

function addiere( param1, param2 ) {
    var zahl1 = parseInt(text1);
    var zahl2 = parseInt(text2);

    var ergebnis;
    ergebnis = zahl1 + zahl2;
    return ergebnis;
}

var text1 = prompt("Dein erster Wert:", "gib hier etwas ein");
var text2 = "prompt("Dein zweiter Wert:", "gib hier auch etwas ein")"
var ausgabe = addiere( text1, text2 );
alert( ausgabe );

Mit „function“ leiten wir die Erstellung unserer neuen Funktion ein, danach folgt der Name unserer Funktion, den wir später im Programm nutzen können. Innerhalb der Klammern folgt nun eine Liste an Parametern, die an die Funktion übergeben werden müssen. Innerhalb der Funktion können Sie diese Parameter wie Variablen nutzen.

In den geschweiften Klammern folgen nun die Befehle, die beim Aufruf Ihrer neuen Funktion ausgeführt werden. Auch hier können Sie wieder neue Variablen erzeugen, um zum Beispiel Zwischenergebnisse zu speichern. Mit „return“ beenden Sie die Funktion und geben den Wert, der nach „return“ folgt, als Rückgabewert an ihr Programm zurück, in diesem Fall den Inhalt der Variable „ergebnis“.

Wichtig ist, dass die Funktion im Laufe ihrer Erzeugung nicht ausgeführt wird. Sie wird lediglich bereit gestellt und kann danach aufgerufen werden. Wird Ihre Javascript Funktion aufgerufen, werden die Parameter in die Parameterliste der Funktion kopiert. Bitte beachten Sie, dass die Parameter und auch alle innerhalb der Funktion erzeugten Variablen nur innerhalb der Funktion gültig sind und nach Rückgabe eines Werts per „return“ gelöscht werden. Sie haben auf diese Werte vom Hauptprogramm aus keinen Zugriff.

Schlagwörter: ,