Im folgenden Beispiel soll die Füll-Farbe von drei Kreisen geändert werden. Du siehst, dass im Programmiercode viele Zeilen doppelt vorkommen. Dadurch braucht man viel Platz im Quellcode und kann leicht den Überblick verlieren.
JavaScript bietet eine Möglichkeit, wie man diese vielen dopppelten Zeilen nur einmal aufschreiben muss: die Funktion. Die doppelt vorkommenden Anweisungen schreibst du in eine solche Funktion, für die du dir einen geeigneten Namen ausdenkst. Die Anweisungen der Funktion werden ausgeführt, indem man ihren Namen im Programmcode als Anweisung schreibt.
Wenn JavaScript bei der Programmausführung auf einen Funktionsnamen trifft, kennt es diese Anweisung nicht. Daraufhin sucht es im Programmcode nach einer Funktion mit diesem Namen. Wenn es eine solche Funktion findet springt JavaScript dorthin, führt die in den geschweiften Klammern stehenden Befehle aus und springt wieder zurück an die ursprüngliche Stelle.
Das sieht schon übersichtlicher aus. Du hast eine neue Anweisung für dein Programm erschaffen, die du im Programm einsetzen kannst.
Eine JavaScript-Funktion wird wie folgt festgelegt:
function funktionsname() {
führe folgende Anweisungen aus
}_ oder ein Dollarzeichen $ sein. Danach können Buchstaben, Ziffern, Unterstriche oder Dollarzeichen folgen. - oder sonstige Sonderzeichen enthalten.Eine Sammlung von hilfreichen Funktionen nennt man Funktions-Bibliothek. p5.js ist eine solche Funktionsbibliothek. Diese kann dir als Programmierer enorm helfen, schnell funktionierende Programme zu schreiben. Die Programmierer von p5.js sind echte Profis, die professionelle Funktionen programmieren können. Dadurch können auch Anfänger und Hobbyprogrammierer anspruchsvolle Programme schreiben.
Damit die Nutzer einer solchen Bibliothek wissen, welche Funktionen es gibt und wie man diese benutzt, wird zu jeder öffentlichen Funktionsbibliothek eine Funktionsreferenz angeboten, in der genau notiert ist, was eine Funktion macht und wie man diese nutzen kann. Die Funktionsreferenz von p5.js findest du hier:
(rechte Maustaste auf Link; Link in neuem Tab öffnen)
Einer Funktion kannst du bei deren Aufruf einen oder mehrere Werte übergeben.
Der Funktion blauerKreis(durchmesser) wird beim Aufruf der Wert für den gewünschten Durchmesser übergeben. Versuche weitere blaue Kreise zu zeichnen.
Der Funktion farbigerKreis(durchmesser, farbe) wird beim Aufruf die Werte für den gewünschten Durchmesser und die gewünschte Farbe übergeben. Eine Liste der Farben, die ein Browser darstellen kann findest du hier:
htmlcolorcodes.com
. Versuche weitere Kreise mit anderem Durchmesser und anderer Farbe zu erzeugen.
Die Werte, die du einer Funktion übergibst, müssen in genau der gleichen Reihenfolge und vollständig in der Klammer notiert werden, genauso wie diese dann von der Funktion übernommen werden! Sonst kommt das Programm durcheinander. Einige Funktionen werden nicht ausgeführt oder es kommt zu einem Skriptfehler, wie im folgenden Beispiel demonstriert wird.
Einer Funktion können Werte übergeben werden, aus welchen Sie einen neuen berechnet und das Resultat zurückgibt. Nach der Anweisung return wird die Ausführung der Funktion beendet.
In folgendem Beispiel wird die Summe der Zahlen 1 bis 20 und 1 bis 40 berechnet. Versuche weitere Summen zu berechnen.