JavaScript-Funktionen (Funktionen, Eigene Funktion erstellen)
Funktionen
Bisher haben wir den gesamten Code untereinander geschrieben. Mit Funktionen können wir aus diesem starren Ablauf ausbrechen. Funktionen speichern, wie der Name schon sagt, Funktionalität, sprich Programmieranweisungen. Erst wenn die Funktion aufgerufen wird, werden die Anweisungen in der Funktion ausgeführt. In Funktionen können einzelene Programmschritte ausgelagert oder komplette Programme eingebunden werden.
Eigene Funktion erstellen
Eine eigene Funktion definieren wir mit dem Schlüsselbgriff function. Wichtigstes Element dabei ist der Funktionsname. Die allgemeine Syntax lautet:
function Name(Parameter1, Parameter2) {
Anweisungsblock;
return Wert;
}
Einer Funktion lassen sich Parameter durch Kommata voneinander getrennt übergeben. Parameter sind Variablen oder Werte, mit denen die Funktion arbeitet.
Mit return wird ein Wert zurückgeliefert, der dann außerhalb der Funktion weiterverwendet werden kann. Dies ist allerdings optional. Programmteile außerhalb einer Funktion haben keinen Zugriff auf die Variablen innerhalb der Funktion. Diese Variablen sind lokal - außerhalb der Funktion definierte Variablen sind global. Diese können auch innerhalb von Funktionen eingesetzt werden.
Um eine Funktion aufzurufen, verwenden wir den Funktionsnamen und Werte für die Parameter:
Name(Wert_Parameter1, Wert_Parameter2);
Besitzt die Funktion eine Rückgabe mit return, müssen wir den zurückgegebenen Wert speichern. Dazu kommt eine Variable mit beliebigen Namen zum Einsatz:
var NameXY = Name(Wert_Parameter1, Wert_Parameter2);
Möchten wir mehr als einen Wert aus einer Funktion zurückgeben, müssen wir diese in ein Array packen. Alternativ vewenden wir globale Variablen, deren Wert wir innerhalb der Funktion ändern. Dies widerspricht allerdings dem eigentlichen Sinn von Funktionen, nämlich der Funktionalität völlig unabhängig vom Rest des Skriptes zur Verfügung zu stehen.
Nun ein Beispiel bei dem wir eine Funktion schreiben, die eine Zahl verdoppelt. In der HTML-Seite wird eine Zahl mit einem Link versehen. Wenn der Nutzer die Zahl anklickt, erhält er eine Meldung mit der verdoppelten Zahl. Funktion in den <head>-Bereich der Html-Seite und der Link in den <body>-Bereich.
function verdoppeln(x) {
x *= 2;
alert(x);
}
<p><a href="javascript: verdoppeln(10)">10<a/></p>
Der Link ruft im href-Attribut die JavaScript-Funktion auf. In dem Aufruf wird zuerst mit javascript: festgelegt, dass es sich um ein JavaScript handelt. Darauffolgend wird in der Funktion der Parameter 10 übergeben. Die Funktion verwendet diesen als Wert für x.