Funktionen in JavaScript

Was ist eine Funktion? Funktionen haben den Vorteil, dass diese beliebig oft aufgerufen werden können. Als gedankliches Beispiel wollen wir eine Ausgabe der Uhrzeit, wann das JavaScript-Programm gestartet wurde und wann es beendet ist. Dazu ist eine Funktion geschickt, die die aktuelle Uhrzeit ausgibt.

Fangen wir einfach an – die Ausgabe von dem Text „jetzt JavaScript lernen“ erfolgt über den Aufruf einer Funktion

<script>
function ausgabe() {
    alert('jetzt JavaScript lernen');
}
</script>

Funktionen starten mit dem Schlüsselwort function gefolgt vom Namen der Funktion – im obigen Beispiel ausgabe. Dann kommen im obigen Beispiel die zwei runden Klammern. Diese müssen hier stehen, auch wenn nichts innerhalb der Klammern steht. Später können hier Daten in die Funktion hereingegeben werden. Dann kommen die geschweiften Klammern, damit auch klar ist, was die Funktion alles an Befehlen umschließt. Eine Funktion in JavaScript kann beliebig viele Befehle beinhalten. Im Beispiel wird hier ein alert(…) ausgeführt. Wichtig dabei ist am Ende des Befehls das Semikolon. Das Vergessen des Semikolons ist einer der beliebtesten Fehler in JavaScript.

Wenn nun das JavaScript-Programm im Browser ausgeführt wird, passiert nichts. Denn diese Funktion wird bisher noch nicht aufgerufen. Also erstellen wir noch den Funktionsaufruf in unserem JavaScript-Programm.

Dazu wird der Funktionsname gefolgt von runden Klammern und dem Semikolon benötigt. Die runden Klammern sind notwendig (auch wenn wir noch keine Werte übergeben).

<script>
function ausgabe() {
    alert('JavaScript-Tutorial - jetzt JavaScript lernen');
}
ausgabe();
</script>

Wenn jetzt unser Programm ausgeführt wird, erscheint auf dem Bildschirm ein Fenster mit der Ausgabe „JavaScript-Tutorial - jetzt JavaScript lernen“.

Werte in JavaScript-Funktion übergeben

Wir wollen jetzt unser obiges Beispiel erweitern, dass ein Vorname übergeben wird und dieser dann ausgegeben wird.

Also wird in der Klammer bei dem Funktionsaufruf dieser Vorname mitgeben.

ausgabe('Sonja');

Wird nun die Funktion aufgerufen, erhält die Funktion einen Inhalt mitgeliefert. Damit die Funktion damit irgendwas tun kann, muss in der Funktionsdefinition die Variable entgegengenommen werden. Dazu wird unser bisheriger JavaScript-Code erweitert:

<script>
function ausgabe(vorname) {
    alert('JavaScript-Tutorial - jetzt JavaScript lernen');
}
ausgabe('Sonja');
</script>

Jetzt ist innerhalb der Funktion die Variable vorname vorhanden, die dann ausgeben wird. Als Ausgabe wollen wir den Satz „JavaScript-Tutorial für Sonja“.

<script>
function ausgabe(vorname) {
    alert('JavaScript-Tutorial für vorname - jetzt JavaScript lernen');
}
ausgabe('Sonja');
</script>

Diese Erweiterung wird noch nicht zum gewünschten Ergebnis führen. Die Ausgabe wird dann sein „JavaScript-Tutorial für vorname - jetzt JavaScript lernen“

Wir müssen unserem Programm noch sagen, wo der normale Text aufhört und die Variable anfängt. Dies wird durch den Einsatz von + und den einfachen Anführungszeichen am entsprechenden Platz gemacht.

<script>
function ausgabe(vorname) {
    alert('JavaScript-Tutorial für ' + vorname  + 
           ' - jetzt JavaScript lernen');
}
ausgabe('Sonja');
</script>

Nun bekommen wir das gewünschte Ergebnis.

Wir können nun auch Variablen übergeben. Das obige Beispiel wird ergänzt.

<script>
function ausgabe(vorname) {
    alert ('JavaScript-Tutorial für ' + vorname  + 
           ' - jetzt JavaScript lernen');
}
var name = 'Sonja';
ausgabe(name);
</script>

Wer sich den Quellcode genau ansieht, fragt sich, warum außerhalb der Funktion der Variablenname ein anderer ist wie innerhalb der Funktion. Die Variablen innerhalb der Funktion bekommen nichts von den Variablen außerhalb der Funktion mit (solange es keine globalen Variablen sind) und bei der Übergabe in die Funktion werden nicht die Variablennamen übergeben, sondern „nur“ die Inhalte der Variablen.