Ein Passwort wird per E-Mail an Sie geschickt
Funktionen sind neben Variablen die grundlegendsten Bestandteile einer jeden mordernen Programmiersprache.

Programme sind einfach eine Aneinanderreihung aus Befehlen, die ausgeführt werden. Diese Befehle können auch statements genannt werden. Beim ausführen der Programme wird einfach von oben nach unten ein statement nach dem anderen ausgeführt.

Beispiel:

var a;
class b;
get a;
use a;
do a;
void c;
private b;

Dieses Beispiel ist rein erfunden und basiert auf keiner Programmiersprache. Es zeigt meiner Meinung aber gut, wie ein Programm diese Befehle nun abarbeiten würde: Es würde einfach von oben beginnen und den ersten Befehl auszuführen. Ist dieser Befehl abgearbeitet, wird der nächste ausgeführt und das geht so lange weiter bis es keine Befehle mehr gibt und sich das Programm beendet.

Angenommen man braucht eine bestimmte Folge von Befehlen immer wieder im Programmverlauf. So müsste man diese jedes mal wieder aufs neue schreiben.

Das würde ungefähr so aussehen:

var a;
class b;
get a;
...
...
...
...
...
var a;
class b;
get a;
...
...
...
...
...
var a;
class b;
get a;
...
...
...
...

Hinweis: „…“ steht in unserem Beispiel für eine Reihe von beliebigen Anweisungen, die für das Verständnis nicht relevant sind.

Ziemlich umständlich, oder?

Und hier kommen die Funktionen ins Spiel!

Eine Funktion ist sozusagen ein Block aus statements („Anweisungen“), der über einen Namen erreichbar ist. Wird dieser Name aufgerufen, wird der Block aus statements ausgeführt. Man schreibt also eine Reihe von Anweisungen und immer wenn man „jetzt“ sagt, werden diese vordefinierten Anweisungen ausgeführt. In unserem Beispiel möchten wir das nun umsetzen. Anstatt jedes mal die sich wiederholenden Anweisungen aufs neue aufzulisten, wenn wir sie brauchen, schreiben wir diese nun in eine Funktion und rufen diese bei Bedarf auf.

Beispiel:

function myFirstFunction(){
   var a;
   class b;
   get a;
}
...
...
...
...
...
...
myFirstFuntion()
...
...
...
...
myFirstFuntion()
...
...
myFirstFuntion()
...

Anstatt nun jedes mal die 3 statements auszuschreiben, verpacken wir diese nun in eine Funktion. Jedes mal, wenn wir die 3 statements nun brauchen, müssen wir uns nicht mehr die Arbeit machen und diese ausschreiben, sondern rufen einfach die Funktion myFirstFunction auf. Es werden nun die 3 statements  der Funktion ausgeführt und anschließend fährt das Programm mit der nächsten Anweisung nach dem Aufruf der Funktion fort.

Die Anweisungen einer Funktion werden nicht zum Zeitpunkt der Definition ausgeführt, sondern erst wenn die Funktion aufgerufen wird.

Du könntest dich jetzt fragen, ob es wirklich so schlimm ist, anstelle der Funktion einfach jedes mal die 3 statements zu schreiben. In unserem Beispiel wäre es nicht ganz so schlimm, mal abgesehen davon, dass es von einem schlechten Programmierstil zeugt. Nehmen wir aber an, dass anstelle der 3 Anweisungen 40 stehen würden. Und dass wir diese 40 Anweisungen nicht wie in unserem Beispiel 3 mal, sondern über mehrere tausend Zeilen Code verteilt 20 mal bräuchten. Würde man jetzt an diesen 40 Zeilen wiederkehrenden Codes etwas ändern müssen, etwa weil sich ein Fehler darin versteckt, so müsste man nun jede Stelle im Quellcode suchen, wo man diese Anweisungen benutzt hat und diese entsprechend verändern. Würde man anstattdessen eine Funktion benutzen, wäre so ein Problem eine Sache von wenigen Sekunden. Man ändert einfach ein mal die entsprechende Zeile im Funktionsblock und jedes mal, wenn die Funktion aufgerufen wird, wird diese neue Zeile mit ausgeführt, ohne dass man an jeder Stelle, an der der Code gebraucht wird eine Änderung machen muss.

Beispiel, wir brauchen anstelle der 3 Anweisungen aufeinmal 5:

function myFirstFunction(){
   var a;
   var c;
   class b;
   get c + b;
}
...
...
...
...
...
...
myFirstFuntion()
...
...
...
...
myFirstFuntion()
...
...
myFirstFuntion()
...

Wie im Beispiel zu sehen, müssen wir nur einmal zentral eine Änderung durchführen.

Ich denke, du siehst schnell wieso man in der Programmierung nur schwer auf Funktionen verzichten kann.

Beispiel in Javascript

Jetzt zeige ich dir, wie eine Funktion beispielsweise in Javascript umgesetzt werden würde.

Hier wird dir gleich unser letzter Beitrag über Variablen nützlich, da wir diese in unserem Beispiel einsetzen werden. Wenn du unseren Artikel über Variablen noch nicht gelesen hast, empfehle ich dringend dies zu tun, bevor du hier weitermachst, da du sonst einige Beispiele eventuell nicht nachvollziehbar sind.

function addParagraph(){
   var paragraph = "Das ist ein Paragraph";
   document.body.appendChild(paragraph);
   alert("Der Paragraph wurde hinzugefügt!");
}

addParagraph();
addParagraph();
addParagraph();

In unserer Javascript Funktion haben wir zuerst eine Variable mit einem HTML-Paragraph erstellt (var paragraph = …). Anschließend haben wir den Paragraphen dem HTML Dokument hinzugefügt (document.body.appendChild(paragraph)) und einen Alert ausgegeben (alert(„..“)).

Wenn du an dieser Stelle nicht weist, was mit HTML und Paragraph gemeint ist, ist das kein Problem. Ich versuche dir kurz sinngemäß zu erklären, worum es geht: HTML ist sozusagen die Sprache der Webseiten. Wir erstellen in unserem Beispiel also einen kleinen Webseitenabschnitt, der einen Text enthält und fügen diesen dem HTML Dokument hinzu. Anschließend lassen wir noch ein alert Fenster erscheinen, welches eine Meldung ausgibt.

Frage: Wie oft würde in unserem Beispiel ein Paragraph hinzugefügt werden ? Die Antwort findest du am Ende dieses Artikels.

So sähe eine Funktion in Javascript aus, gar nicht so schwer oder ?

Falls du diesen und den Artikel über Variablen soweit verstanden hast, kannst du hier bedenkenlos weiterlesen. Andernfalls empfiehlt es sich, sich die Artikel noch einmal durchzulesen, da du das Wissen für diesen Abschnitt dringend benötigst.

Wenn du etwas nicht verstanden hast, kannst du auch gerne eine Frage unten in dem Kommentarbereich stellen, wir werden uns bemühen, dir so schnell wie möglich zu antworten.

Verwendung von Parametern

Um Funktionen noch dynamischer zu gestalten, können Parameter eingesetzt werden. Ein Parameter ist einfach eine Variable mit einem Wert, die der Funktion beim Aufruf mitgegeben wird, damit diese mit dem Wert arbeiten kann. Das hört sich jetzt vielleicht sehr theoretisch an, deshalb möchten wir ein einfaches Beispiel benutzen, um dir die Verwendung von Parametern näher zu bringen.

Damit eine Funktion mit einem Parameter arbeiten kann, muss erst einmal definiert werden, dass sie einen Parameter annehmen kann. Das würde folgendermaßen aussehen:

function myFirstFunction(meinParameter)
{
}

Wie eine Parameterdefinition aussieht ist wieder stark von der jeweiligen Programmiersprache abhängig. Bei manchen Programmiersprachen muss der Variablentyp streng eingehalten werden, bei anderen passt er sich automatisch dem Variablenwert an. Mehr dazu findest du in unserem Beitrag über Variablen. So verhält es sich auch mit den Parametern, denn diese sind nichts anderes als Variablen, welche nur in der Funktion vorhanden sind aber von außen mit einem Wert befüllt werden.

Kommen wir nun schließlich zu der Verwendung von Parametern. Wie schon gesagt werden sie verwendet, um einer Funktion beim Aufruf Daten mitzugeben, mit denen die Funktion arbeiten kann.

Nehmen wir an, der Programmierer möchte, dass der Anwender auf seiner Seite die Möglichkeit bekommt, die Hintergrundfarbe selber zu gestalten.

Eine solche Aufgabe würden wir mit der Programmiersprache Javascript lösen. Zuerst müssen wir eine Benutzereingabe ermöglichen. Das erreichen wir in Javascript mit dem prompt Befehl.

Prompt Fenster

 prompt("Bitte geben sie eine Farbe eine");

 

Um die Benutzereingabe später verwenden zu können, müssen wir diese in einer Variable speichern:

var benutzereingabe = prompt("Bitte geben sie eine Farbe eine"); 

Jetzt brauchen wir nur noch eine Funktion, die beim Aufruf den Seitenhintergrund ändert:

function setBackgroundColor()
{
   document.body.style.background = "red";
}

Beim Aufruf dieser Funktion würde der Hintergrund unserer Seite zu rot geändert werden. Das ist aber noch nicht das, was wir wollen. Wir wollen, dass der Benutzer selber bestimmen kann, welche Hintergrundfarbe unsere Seite hat.

Und hier kommen Parameter ins Spiel

Wie schon zu Anfang dieses Abschnittes gesagt, sind Parameter einfach nur Variablen, die in einer Funktion vorhanden sind. Beim Aufruf einer Fuktion, kann diese Variable mit einem Wert gefüllt werden, damit die Funktion mit dem Wert arbeiten kann.

In unserem Beispiel definieren wir nun einen Parameter, um die Hintergrundfarbe dynamisch anpassen zu können.

function setBackgroundColor(color)
{
   document.body.style.background = color;
}

Die Funktion „setBackgroundColor“ weiß nicht, was der Parameter „color“ einmal sein wird. Das ist aber auch nicht wichtig.

Wenn man die Funktion in Worte fassen sollte, würde es ungefähr folgendermaßen aussehen: „Egal welchen Wert mein Parameter color einmal haben wird. Ich sorge dafür, dass die Hintergrundfarbe der Seite nun in der Farbe, welche color als Wert hat, erscheint.“.

Da eine Funktion ja logischerweise nicht wissen kann, was beim Aufruf passiert, muss sie sozusagen einen Container mit einem Namen definieren. Um den Wert, welcher ja jedes mal anders ist, verwenden zu können, benutzt sie einfach den Namen des Containers, um auf den Wert zuzugreifen. Dadurch kann mit einem Wert gearbeitet werden, der zu keinem Zeitpunkt bekannt ist.

Jetzt fügen wir alle unsere Komponenten zusammen, sodass unser Code nun folgendermaßen aussieht:

function setBackgroundColor(color)
{
   document.body.style.background = color;
}

var benutzereingabe = prompt("Bitte geben sie eine Farbe eine");

setBackgroundColor(benutzereingabe);

Wenn wir unser Beispiel nun ausführen würden, sähe das folgendermaßen aus:

Nachdem wir die Benutzereingabe in einer Variable gespeichert haben, geben wir den Wert der Variable an unsere Funktion weiter. Diese Funktion setzt nun die Hintergrundfarbe der Seite dem Wert, den der Benutzer eingegeben hat, gleich.

Wir hoffen, unser Beitrag war für dich verständlich. Wenn du noch Fragen, oder Anregungen hast, würden wir uns über ein Kommentar freuen!

Hinweis: Die Antwort auf die Frage, wie oft ein Paragraph hinzugefügt werden würde ist 3. Da die Funktion 3 mal aufgerufen wird, wird der Codeblock auch 3 mal ausgeführt.