If you're seeing this message, it means we're having trouble loading external resources on our website.

Wenn du hinter einem Webfilter bist, stelle sicher, dass die Domänen *. kastatic.org und *. kasandbox.org nicht blockiert sind.

Hauptinhalt

Programmierung

Kurs: Programmierung > Lerneinheit 1

Lesson 10: Funktionen
Informatik
Programmierung
Einführung in JS: Zeichnung & Animation
Funktionen
© 2023 Khan AcademyNutzungsbedingungenDatenschutzerklärungCookie-Meldung

Wiederholung: Funktionen

Google Classroom
Dies ist eine Wiederholung von dem, was du in diesem Tutorial bisher über Funktionen gelernt hast.
Oft wollen wir beim Schreiben von Programmen Codeblöcke erneut ausführen, ohne dass wir den Codeblock komplett neu schreiben müssen. Wir benötigen einen Weg, Code zu einer Gruppe zusammenzufassen und ihm einen Namen zu geben, mit dem wir ihn später aufrufen können. Dies nennen wir Funktion.
Um eine Funktion zu erstellen, müssen wir sie zunächst deklarieren und ihr einen Namen geben, genau so, wie wir Variablen deklarieren. Danach folgt die Funktionsdefinition:
var sayHello = function() {
};
Wir können jede Art von Code in diese Funktion schreiben. Eine Anweisung, mehrere Anweisungen, je nachdem, was wir tun wollen. In dieser Funktion könnten wir eine Nachricht an einer beliebigen Stelle ausgeben:
var sayHello = function() {
   text("Halllllllo!", random(200), random(200));
};
Deklarieren wir die Funktion jetzt nur, wird nichts passieren. Um im Programm den Code der Funktion auszuführen, müssen wir diese erst aufrufen, indem wir ihren Namen gefolgt von leeren Klammern schreiben:
sayHello();
Wir können die Funktion aufrufen, wann wir wollen und so oft wir wollen!
sayHello();
sayHello();
sayHello();
Des Öfteren möchten wir aber in der Lage sein, unsere Funktionen abzuändern, um dem Programm zu sagen "so, führ diesen Code aus, aber mach ein paar Dinge anders." Auf diese Weise haben wir wiederverwendbaren und flexiblen Code, also das Beste aus beidem. Das machen wir, indem wir "Parameter" für eine Funktion festlegen und diese übergeben, wenn wir die Funktion aufrufen. Diese Parameter verändern, wie eine Funktion arbeitet.
Was wäre, wenn wir zum Beispiel genau festlegen wollten, wo die Nachricht angezeigt werden soll, genau so, wie wir festlegen können, wo ein rect() oder eine ellipse() gezeichnet wird? Wir könnten uns vorstellen, sie so aufzurufen, dass die Nachricht an zwei bestimmten Koordinaten erscheint:
sayHello(50, 100);
sayHello(150, 200);
Damit das funktioniert, müssen wir die Definition unserer Funktion sayHello so anpassen, dass sie 2 Argumente annimmt und diese im Innern benutzt.
var sayHello = function(xPos, yPos) {
   text("Halllllllo!", xPos, yPos);
};
Die Argumente, die übergeben werden, werden quasi zu Variablen in deiner Funktionsdefinition, und die Namen hängen davon ab, wie du sie in den Klammern nennst. Wir könnten sie leicht in etwas Kürzeres abwandeln:
var sayHello = function(x, y) {
   text("Halllllllo!", x, y);
};
Unsere Funktionen können beliebig viele Argumente annehmen - keine, eine, zwei oder mehr. Wir könnten uns auch dazu entscheiden, unsere Funktion so zu ändern, dass sie einen Namen als Argument akzeptiert, dem Hallo gesagt wird:
var sayHello = function(name) {
   text("Halllllllo, " + name, random(200), random(200));
};
Und dann würden wir sie so aufrufen:
sayHello("Winston");
sayHello("Anton");
Wir könnten diese Ideen auch verbinden und die Funktion drei Argumente akzeptieren lassen für Name und Position:
var sayHello = function(name, x, y) {
   text("Halllllllo " + name, x, y);
};
Und sie dann so aufrufen:
sayHello("Winston", 10, 100);
Es kommt ganz darauf an, was man seine Funktionen machen lassen möchte und wie sehr man verändern möchte, was sie tun. Man beginnt immer ohne Argumente und fügt dann mehr davon hinzu, wenn man bemerkt, dass man weitere benötigt.
Nun hast du tatsächlich die ganze Zeit Funktionen aufgerufen - So erstellst du auch Zeichnungen und Animationen, z. B. mit rect, ellipse, triangle, etc. All diese Funktionen kommen aus der ProcessingJS-Bibliothek. Die laden wir in jedes Programm, das du hier erstellst, damit du sie immer nutzen kannst. Wir haben diese Funktionen für dich erstellt, weil wir dachten, sie könnten vielleicht nützlich sein. Nun ist es an der Zeit, selbst zu entscheiden, welche eigenen Funktionen du in deinen Programmen verwenden möchtest. Zum Beispiel stellen wir dir die Funktion ellipse bereit, jedoch keine Funktion cat. Wenn dein Programm viele verschiedene Katzen an vielen verschiedenen Stellen beinhaltet, solltest du dir vielleicht eine Katzenfunktion erstellen.
Es gibt noch einen weiteren mächtigen Einsatzzweck von Funktionen. Wir können sie nutzen, um Werte anzunehmen, Berechnungen anzustellen und einen neuen Wert zurückzugeben. Führe dir einmal all die Dinge vor Augen, die du mit einem Taschenrechner machen kannst. Werte addieren, subtrahieren, Quadratwurzeln berechnen, multiplizieren, etc. All das kann mit Funktionen gemacht werden, welche eine Eingabe erhalten und ein Ergebnis zurückgeben. Die Funktionen erhalten einen Input in Form von Argumenten und geben das Ergebnis durch die Anweisung return zurück. Hier ist eine Funktion, die zwei Zahlen addiert und das Ergebnis zurückgibt:
var addNumbers = function(num1, num2) {
  var result = num1 + num2;
  return result;
};

var sum = addNumbers(5, 2);
text(sum, 200, 200); // Zeigt "7" an
Die return-Anweisung tut zwei Dinge: Sie gibt einen Wert zurück, und zwar dem, der sie aufruft (weshalb wir den Wert der Funktion in der sum Variable speichern können) und sie beendet die Funktion direkt. Das bedeutet, es wäre schwachsinnig, so etwas wie unten gezeigt zu schreiben, da die letzte Zeile niemals ausgeführt wird:
var addNumbers = function(num1, num2) {
  var result = num1 + num2;
  return result;
  result = result * 2; // schwachsinnig!
};
Funktionen mit einem Rückgabewert sind sehr nützlich, um in Programmen Daten zu bearbeiten. Sie können außerdem zu komplexen Ausdrücken kombiniert werden:
var biggerSum = addNumbers(2, 5) + addNumbers(3, 2);
Wir können sogar Funktionen in Funktionsaufrufen aufrufen. Aber Achtung, dies kann schnell unleserlich und schwer nachvollziehbar werden:
var hugeSum = addNumbers(addNumbers(5, 2), addNumbers(3, 7));
Jetzt, wo wir wissen, wie wir Funktionen erstellen, die Codeblöcke umschließen, wird es Zeit, ein wichtiges Konzept einzubringen: Lokale Variablen im Vergleich zu Globalen Variablen.
Wenn wir eine neue Variable innerhalb einer Funktion deklarieren, bezeichnen wir diese als lokal. Lokal in dieser Funktion. Dies ist der Fall, weil nur diese Funktion die Variable sehen kann, das restliche Programm außerhalb der Funktion kann sie nicht sehen. Wenn wir uns außerhalb der Funktion befinden, ist es so, als würde die Variable nicht länger existieren. In der folgenden Funktion ist localResult eine lokale Variable:
var addNumbers = function(num1, num2) {
  var localResult = num1 + num2;
  println("The local result is: " + localResult);
  return localResult;
};
addNumbers(5, 7);
println(localResult); // oh noes!
Wenn wir diesen Code ausführen, erhalten wir einen Fehler in der letzten Zeile: "localResult is not defined." ("localResult ist nicht definiert.") Die Variable ist nur innerhalb der Funktion definiert, da wir sie genau innerhalb der Funktion mit var localResult= definiert haben und nicht außerhalb von ihr.
Wenn wir eine Variable außerhalb unserer Funktionen deklarieren, sprechen wir von einer globalen Variable. Das tun wir, weil alle Funktionen nun Zugriff auf diese Variable haben und damit mit ihr tun können, was immer sie wollen.
var globalResult;

var addNumbers = function(num1, num2) {
  globalResult = num1 + num2;
  println("The global result is: " + globalResult);
};
addNumbers(5, 7);
println(globalResult);
Wenn wir den oben stehenden Code ausführen, erhalten wir keinen Fehler, da wir globalResult außerhalb der Funktion deklariert haben, sodass wir überall auf sie zugreifen können.
⚠️ Du könntest versucht sein, globale Variablen für alles zu verwenden, da man nie einen Fehler erhält, dass sie undefiniert sind. Aber tatsächlich sind globale Variablen eine häufige Quelle für schwer zu findende Fehler. In grösseren Programmen oder bei der Zusammenarbeit mit anderen ist es leicht, den Überblick zu verlieren, wo und wie du (oder andere!) diese globalen Variablen verwendet hast. Verwende wenn immer möglich lokale Variablen.
Jede Programmiersprache ist anders. Doch bei JavaScript ist es wichtig zu wissen, dass Variablen eine "Sichtbarkeit" (scope) in den Funktionen haben. Eine Funktion kann lokale Variablen, welche in ihr deklariert wurden, und globale Variablen, welche außerhalb von ihr deklariert wurden, sehen. Sie kann jedoch nicht lokale Variablen innerhalb von anderen Funktionen sehen.

Willst du an der Diskussion teilnehmen?

Anmelden
Verstehst du Englisch? Klick hier, um weitere Diskussionen auf der englischen Khan Academy Seite zu sehen.