JavaScript Funktion

Funktionen sind abgeschlossene Scriptteile, die bei ihrem Aufruf einen Anweisungsblock ausführen. Im Gegensatz zu Anweisungen, die direkt in einem HTML-Dokument notiert sind, werden Funktionen erst dann ausgeführt, wenn sie explizit aufgerufen werden – siehe auch die Beispiele zum Einbetten von JavaScript Code in HTML. Sie bieten eine Möglichkeit, zusammenhängende Anweisungen, die eine bestimmte Aktion durchführen und die mehrfach benötigt werden, mit einem einfachen Aufruf zu starten.

Eine Funktionsdefinition wird mit dem reservierten Wort function eingeleitet, auf den der Name der Funktion folgt. Funktionsnamen dürfen ausschließlich die Buchstaben a-z (Achtung: es wird zwischen Groß- und Kleinnschreibung unterschiedem), sowie die Ziffern 0-9 enthalten. Dabei ist darauf zu achten, dass ein solcher Funktionsname grundsätzlich keine Leerzeichen enthalten darf. Auch die unter JavaScript reservierten Wörter sind für die Namensgebung von Funktionen tabu. Unter den Sonderzeichen ist einzig und allein das Unterstreicherzeichen erlaubt. Das erste Zeichen bei einem Funktionsnamen muss dabei stets ein Buchstabe sein.

Auf den Funktionsnamen folgt eine geklammerte Liste der zu übergebenen Parameter – die Parameter sind jeweils durch Kommata getrennt –, die von der Funktion erwartet werden. Werden keine Parameter benötigt, so wird eine leere Klammer angegeben. Bis dahin wurde lediglich der Funktionskopf definiert. Der von der Funktion auszuführende Anweisungsblock wird nun direkt dahinter – wie bei Anweisungsblöcken üblich – in geschweiften Klammern notiert. Soll die Funktion einen Rückgabewert liefern, so muss an der Stelle bzw. den Stellen an denen der Rückgabewert feststeht mit dem reservierten Word return die Rückgabe des entsprechenden Wertes eingeleitet werden. Eine Funktionsdefinition hat also folgende Form:

		function Name_der_Funktion ([Parameter1[,Parameter2...]]) {
			Anweisungsblock
			[return Ausdruck;]
		}
	

Beachten Sie bitte auch unsere Ausführungen zu Funktionen unter PHP. Auch hier finden Sie zahlreiche Beispiele zu deren Verwendung.

JavaScript Function Beispiel 1: Definition und Aufruf von Funktionen mit und ohne Parameter

Das folgende Beispiel enthält einige Funktionsdefinitionen von Funktionen ohne Rückgabewert. Im HTML-Teil des Beispiels werden die Funktionen durch Anklicken des entsprechenden Links – s. a. href – aufgerufen. Beim ersten Link wird die Funktion setTestfeldTextColorRed ohne Parameter aufgerufen. Die Funktion benötigt keine Parameter, da alle Informationen innerhalb der Funktion fest verdrahtet sind – die Element-ID des zu manipulierenden HTML-Elements und auch die einzustellende Textfarbe für das Element.

Mit dem zweiten Aufruf wird die Funktion setTextColor samt den von dieser Funktion erwarteten Parameter aufgerufen. Über den ersten Parameter der Funktion wird das zu manipulierende HTML-Element mittels seiner ID ausgewählt (s. getElementById). Im zweiten Parameter wird die entsprechende Textfarbe angegeben, die für das Element gesetzt werden soll.

Der dritte Link ruft die Funktion setTextColor mit nur einem Parameter auf. Da der zweite Parameter fehlt, wird dieser Parameter beim Aufruf der Funktion mit dem Wert undefined gesetzt. Durch den Ausdruck color || 'black' wird die Textfarbe auf black gesetzt, wenn kein Parameter für color übergeben wurde. Zur Anpassung von Formatierungen per JavaScript beachten Sie bitte unsere Beispiele zur dynamischen Anpassung von Stylesheets unter CSS.

<span id="testfeld">Inhalt des Testfeldes</span><br>
<a href="javascript:setTestfeldTextColorRed ()" title="">Farbe auf rot setzen</a><br>
<a href="javascript:setTextColor ('testfeld', 'blue')" title="">Farbe auf blau setzen</a><br>
<a href="javascript:setTextColor ('testfeld')" title="">Farbe auf schwarz setzen</a><br>
<script language="javascript" type="text/javascript">
<!-- // JavaScript-Bereich für ältere Browser auskommentieren
// Funktion ohne Parameter und Rückgabewert
// Durch die Funktion wird das HTML-Element mit der ID testfeld über
// das Stylesheet mit roter Textfarbe dargestellt.
function setTestfeldTextColorRed () {
  document.getElementById ('testfeld').style.color = 'red';
}

// Funktion mit Parametern
// Übergeben wird die ID des HTML-Elements, dessen Farbeigenschaft
// geändert werden soll. Der zweite Parameter enthält die zu setzende
// Farbe.
// Wird der Parameter color nicht angegeben, so wird dieser Wert auf
// black gesetzt. Diese Vorgehensweise entspricht der Definition eines
// Default-Wertes für den Parameter color.
function setTextColor (field_id, color) {
  document.getElementById (field_id).style.color = color ¦¦ 'black';
}
// -->
</script>

Inhalt des Testfeldes
Farbe auf rot setzen
Farbe auf blau setzen
Farbe auf schwarz setzen

weiter zu Seite 2 3 4 »