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

Letzte Posts aus unserem Forum

Probleme mit iphone

Hallo, ich habe ein Problem bei der Darstellung einer Webseite. In allen Browsern hat das bisher bestens funktioniert außer beim iPhone und iPad, wo ... » mehr

von Finlay am Dienstag, 10. Juli 2012 19:45 in JavaScript - noch nicht beantwortet

Stream musik

Hallo, ich bin auf der Suche nach einem Script, mit dem ich einen Leser für Audio-Spuren in eine Html-Webseite einfügen kann. Ich brauche dabei ... » mehr

von Finlay am Sonntag, 22. Januar 2012 22:52 in JavaScript - bisher 2 Antworten
Letzter Beitrag: Dienstag, 8. Mai 2012 16:04 von maharadja

ich habe das mal mit jplayer probiert und bei mir gings ... » mehr

Byte Array PDF im Browser anzeigen

Hallo, ich bekomme von einem Webservice ein PDF als Byte Array. Mit einem JsonP Request habe ich das Byte Array so wie es ist (als Array von Bytes) ... » mehr

von TiloS am Mittwoch, 11. April 2012 17:37 in JavaScript - noch nicht beantwortet

Überbelnd effect in javascript gallerie

ich habe hier einie gallerie die funktioniert problem los aber hat noch kein über belnd effect jedoch würde ich diesen gerne einfügen aber ich habe ... » mehr

von faebe am Freitag, 20. Januar 2012 20:19 in JavaScript - noch nicht beantwortet

XML per JavaScript verarbeiten - IE

Hallo! Vielen Dank für das super kommentierte Script-Beispiel zur Weiterverarbeitung von XML-Dateien per JavaScript: ... » mehr

von gn0me am Freitag, 11. März 2011 19:03 in JavaScript - noch nicht beantwortet


¬ Insolvenzrecht