Download als eBook
Schnelles Beispiel
- Funktionen sind spezielle Anweisungen, die jeweils ganz bestimmte Aufgaben erfüllen, wenn Sie ausgeführt werden:
<script>
// Definition der Funktion
function meineFunktion(){
document.write("This is my function!");
}
// Aufruf der Funktion
meineFunktion(); // This is my function!
</script>
- Was sind Funktionen?
- Parameter
- Rückgabewert
- Gültigkeit von Variablen
- Funktionen auslagern
- Übungen
Inhaltsverzeichnis
Was sind Funktionen?
Eine JavaScript-Funktion ist ein Codeblock, der dazu geschrieben wurde, um ganz bestimmte Aufgaben zu erfüllen. Eine Funktion wird ausgeführt, indem Sie im Programm aufgerufen wird.
Funktionen gehören zum Handwerkszeug eines jeden Programmierers. Die beiden wichtigsten Vorteile von Funktionen sind:
- Modularisierung: Mit Funktionen können wir unser Programm in kleinere Programmteile ("Unterprogramme") aufteilen. Dadurch wird unser Code strukturierter und übersichtlicher.
- Kein doppelter Code: Bestimmte Vorgänge, die sich wiederholen bzw. häufiger benötigt werden, müssen nur einmal durch eine Funktion beschrieben werden. Danach können sie durch einen einfachen Funktionsaufruf immer wieder ausgeführt werden.
Der Grundaufbau einer JavaScript-Funktion sieht so aus:
Wir wollen nun nach diesem Muster eine Funktion schreiben, die uns beim Aufruf 7 Sternchen und einen Zeilenumbruch am Bildschirm ausgibt:
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8">
<title>Funktionen mit JS</title>
<script>
// Definition der Funktion
function meineFunktion(){
document.write("******* <br>");
}
</script>
</head>
<body>
<script>
// Aufruf der Funktion
meineFunktion();
</script>
</body>
</html>
Das Ergebnis sieht dann so aus:
******* Bei Funktionen unterscheiden wir zwischen Definition und Aufruf:
- Die Definition einer Funktion ist die Implementierung ("Bauplan") und beschreibt, wie sie arbeiten soll. In unserem Beispiel wird die Funktion im head-Bereich definiert.
- Aufruf: Sobald die Funktion definiert wurde, kann sie beliebig oft ausgeführt ("gestartet") werden. Dazu schreiben wir den Namen der Funktion und die Parameterklammern an die gewünschte Stelle.
Wir können die Funktion mehrmals ausführen...
// Code darüber
<script>
meineFunktion();
meineFunktion();
meineFunktion();
</script>
// Code darunter
... und bekommen im Browser dann entsprechend das angezeigt:
*******
*******
*******- JavaScript ebook
Parameter
Bei Parametern handelt es sich um Werte, die in eine Funktion "hineingegeben" werden. Die Funktion kann mit diesen Werten anschließend arbeiten.
Beschrieben werden die Parameter in den runden Klammern der Funktionsdefinition.
Programmieren wir nun eine Funktion mit zwei Parametern. Die Funktion soll die beiden Parameter-Werte addieren und das Ergebnis am Bildschirm anzeigen:
function addiere(zahl1, zahl2){
var erg = zahl1 + zahl2;
document.write(erg);
}
Wie wir sehen, werden mehrere Parameter in den runden Klammern durch Komma voneinander getrennt.
Und jetzt rufen wir die Funktion entsprechend auf:
addiere(4,6); // 10
Achtung: Die Anzahl der übergebenen Werte beim Funktionsaufruf sollte mit der Anzahl der Parameter in der Funktionsdefinition sein.
Variablen übergeben
In unserem Beispiel oben haben wir der Funktion addiere() zwei Literale übergeben. Selbstverständlich sind auch Variablen als Parameter möglich:
var z1 = 4;
var z2 = 6;
addiere(z1,z2); // 10
Rückgabewert
Funktionen in JavaScript können einen Rückgabewert haben. Rückgabewert bedeutet, dass eine Funktion nach ihrem Aufruf einen bestimmten Wert an das Programm zurückliefert. Dieser Wert kann zum Beispiel eine Zahl, eine Zeichenkette oder ein Wahrheitswert sein (um nur einige Möglichkeiten zu nennen).
Der Rückgabewert wird innerhalb einer Funktion mit einer return-Anweisung beschrieben.
Erweitern wir unsere Funktion addiere() entsprechend:
function addiere(zahl1, zahl2){
return (zahl1 + zahl2);
}
Mit dem Funktionsaufruf wird der Rückgabewert angefordert, mit dem dann weitergearbeitet werden kann:
var ergebnis = addiere(4,6); //10
Der Rückgabewert ist 10. Dieser Wert wird in unserem Beispiel in der Variablen ergebnis gespeichert.
Rufen wir die Funktion dagegen auf und "greifen" uns den zurückgelieferten Wert nicht in einer Variable oder geben ihn nicht mit document.write() am Bildschirm aus, ist der Wert verloren und "verpufft".
Funktionen als Maschinen
Stellen sie sich eine Funktion mit Parameter- und Rückgabewerten ruhig als eine Maschine vor, in die von außen "etwas reinkommt" (Parameter) und am Ende nach einer Verarbeitung etwa in Form eines Rückgabewerts "rauskommt".
Gültigkeit von Variablen
Es gibt einen wichtigen Zusammenhang zwischen Variablen und Funktionen. Denn es macht einen Unterschied, ob eine Variable außerhalb oder innerhalb einer Funktion definiert ist:
- Globale Variablen: Diese werden außerhalb von Funktionen definiert und sind überall im Programm gültig. Sie können außerhalb und innerhalb von Funktionen eingesetzt werden.
- Lokale Variablen: Diese werden innerhalb einer Funktion definiert. Sie sind deshalb nur innerhalb der Funktion gültig und können außerhalb davon nicht eingesetzt werden.
Mal sehen, was das konkret bedeutet 🧐
<script>
function sayMyName(){
var katze = "Simba"; //lokale Variable
}
document.write(katze); // Fehler!
</script>
Wir definieren die Variable katze innerhalb der Funktion sayMyName(). Die Variable ist damit eine lokale Variable. Der Versuch, auf diese außerhalb der Funktion zuzugreifen, kann nicht funktionieren, da sie dem Programm außerhalb der Funktion nicht bekannt ist. Wir erhalten in der JavaScript-Konsole daher eine entsprechende Fehlermeldung (Can't find variable: katze).
Umgekehrt ist das natürlich kein Problem:
<script>
var katze = "Simba"; //globale Variable
function sayMyName(){
document.write(katze); // Simba
}
</script>
Da jede Funktion ihren eigenen Gültigkeitsbereich hat, können wir in unterschiedlichen Funktionen Variablen mit demselben Namen definieren.
Verhalten bei Parameter-Variablen
Parameter stellen lokale Kopien des in die Funktion eingegebenen Werts dar:
<script>
var katze = "Simba";
function sayMyName(katzeP){
katzeP = "Bailey";
}
sayMyName(katze);
document.write(katze); // Simba
</script>
Die Funktion sayMyName() erhält beim Aufruf den Wert der Variablen katze als Argument. Dieses Prinzip nennt man pass-by-value:
- Pass-by-value: Werden Variablen beim Funktionsaufruf eingesetzt, werden deren Werte in die Parametervariable kopiert. Es wird also nur der Inhalt von Variablen in die Funktion übertragen, nicht die Variablen selbst.
Wenn wir also nun innerhalb der Funktion den Wert der Parametervariablen ändern, hat dies keine Auswirkung auf die ursprüngliche Variable außerhalb der Funktion. Deshalb hat in unserem Beispiel die globale Variable katze am Ende des Codes unverändert den Wert "Simba".
Funktionen auslagern
Bisher haben wir unsere Funktionen stets im head-Bereich der Website definiert. Das ist OK, aber hat den Nachteil, dass diese Funktionen auch nur auf der gleichen Seite abrufbar sind.
Wenn wir Funktionen programmübergreifend nutzen wollen, müssen wir sie in einer externen Datei auslagern.
Die externe Datei hat die Endung .js. Es gibt dort keinen <script></script> Tag:
//Datei extern.js
function meineFunktion1(){
document.write("This is sunshine ");
}
function meineFunktion2(){
document.write("This is rain");
}
Die externen Funktionen binden wir im head-Bereich mit einem src-Attribut im script-Tag ein. Auf die Funktionen können wir dann wie gewohnt im body-Bereich der Seite zugreifen:
<!DOCTYPE html><html lang="en"><head>
<script src="extern.js"></script> // Einbinden der .js-Datei
</head><body>
<script>
meineFunktion1();
meineFunktion2();
</script>
</body></html>
So ist das 😀
Übungen
einfach
Definieren Sie im head-Bereich Ihrer Seite eine Funktion, die beim Aufruf den Text "You get, what you see" ausgibt. Rufen Sie die die Funktion anschließend im body-Bereich zweimal auf.
mittel
- Schreiben Sie eine Funktion namens gibProdukt(). Diese besitzt zwei Parameter für Zahlen-Werte. Innerhalb der Funktion sollen die beiden Werte miteinander multipliziert und das Ergebnis am Ende der Funktion zurückgeliefert werden.
- Rufen Sie die Funktion nun mit zwei beliebigen Ganzzahlen auf und speichern den Rückgabewert in einer Variablen namens produkt. Nutzen Sie document.write(), um den Wert der Variablen produkt am Bildschirm anzuzeigen.
schwer
Schreiben Sie eine Funktion namens getFigur() mit einem Parameter für die Übergabe einer Zeichenkette.
Sofern beim Funktionsaufruf die übergebene Zeichenkette "Mario" lautet, wird ein Mario-Bild am Bildschirm angezeigt. Lautet die Zeichenkette dagegen "MegaMan", kommt - gut geraten! - das MegaMan-Bild zum Vorschein. Bei jeder anderen Zeichenkette folgt eine Fehlermeldung ("Fehler, bitte gültige Figur eingeben").
Hier die beiden, schön pixeligen Grafiken (rechte Maustaste -> Bild speichern unter...):
