JavaScript Funktionen

Einführung

In JavaScript sind Funktionen einer der grundlegenden Bausteine. Sie sind wiederverwendbare Codeblöcke, die Sie einmal schreiben und viele Male ausführen können. Die Verwendung von Funktionen hilft Ihnen, Ihren Code zu organisieren, ihn lesbarer zu machen und Wiederholungen zu vermeiden.

In diesem Lab lernen Sie die Grundlagen der Erstellung und Verwendung von Funktionen in JavaScript. Sie erstellen eine einfache Funktion, die zwei Zahlen addiert, und lernen, wie Sie sie definieren, ihr Daten übergeben, ein Ergebnis zurückerhalten und dieses Ergebnis anzeigen.

Funktion mit dem Schlüsselwort 'function' definieren

In diesem Schritt definieren Sie Ihre erste Funktion. Eine Funktion wird mit dem Schlüsselwort function definiert, gefolgt von einem Namen, einem Satz von Klammern () und einem Codeblock (dem Funktionskörper), der in geschweiften Klammern {} eingeschlossen ist.

Suchen Sie zuerst die Datei script.js im Dateiexplorer auf der linken Seite der WebIDE und öffnen Sie sie. Wir werden unseren gesamten JavaScript-Code in dieser Datei schreiben.

Fügen Sie nun den folgenden Code zu script.js hinzu, um eine Funktion namens addNumbers zu definieren.

function addNumbers() {
  // Code wird hier eingefügt
}

Dieser Code erstellt eine leere Funktion. Sie tut noch nichts, aber es ist eine gültige Funktionsdefinition. Der Name addNumbers ist die Art und Weise, wie wir später auf diese Funktion verweisen werden.

Parameter zur Funktionsdefinition hinzufügen

In diesem Schritt fügen Sie Ihrer Funktion Parameter hinzu. Parameter sind wie Platzhalter für die Daten, die eine Funktion erhält, wenn sie aufgerufen wird. Sie definieren sie innerhalb der Klammern () in der Funktionsdefinition, getrennt durch Kommas.

Lassen Sie uns die Funktion addNumbers so ändern, dass sie zwei Zahlen akzeptiert, die wir addieren möchten. Wir nennen diese Parameter num1 und num2.

Aktualisieren Sie Ihre script.js-Datei mit dem folgenden Code.

function addNumbers(num1, num2) {
  // Code wird hier eingefügt
}

Nun ist die Funktion addNumbers so eingerichtet, dass sie zwei Werte empfängt. Innerhalb der Funktion können Sie num1 und num2 als Variablen verwenden, die die an die Funktion übergebenen Werte enthalten.

Rückgabewert aus Funktion mit 'return' zurückgeben

In diesem Schritt lassen Sie die Funktion eine Aktion ausführen und ein Ergebnis zurückgeben. Die return-Anweisung wird verwendet, um den Wert anzugeben, den die Funktion ausgeben soll. Wenn JavaScript auf eine return-Anweisung trifft, stoppt die Ausführung der Funktion und der angegebene Wert wird dorthin zurückgegeben, wo die Funktion aufgerufen wurde.

Fügen wir unserer Funktion die Logik hinzu, um die beiden Parameter zu summieren und das Ergebnis zurückzugeben.

Aktualisieren Sie Ihre script.js-Datei. Fügen Sie die return-Anweisung innerhalb der geschweiften Klammern der Funktion hinzu.

function addNumbers(num1, num2) {
  return num1 + num2;
}

Wenn die Funktion addNumbers nun ausgeführt wird, berechnet sie die Summe von num1 und num2 und gibt diesen Wert zurück.

Funktion mit Argumenten aufrufen

In diesem Schritt rufen Sie die Funktion auf, um sie auszuführen. Das Definieren einer Funktion führt sie nicht aus. Um die Funktion auszuführen und ein Ergebnis zu erhalten, müssen Sie sie "aufrufen" oder "invokieren". Wenn Sie eine Funktion aufrufen, übergeben Sie tatsächliche Werte, sogenannte Argumente, für die von Ihnen definierten Parameter.

Der von der Funktion zurückgegebene Wert kann in einer Variablen gespeichert werden, um ihn später zu verwenden.

Fügen Sie die folgenden Zeilen zu Ihrer script.js-Datei hinzu, unterhalb der Funktionsdefinition, um die Funktion addNumbers mit den Argumenten 5 und 10 aufzurufen.

function addNumbers(num1, num2) {
  return num1 + num2;
}

let sum = addNumbers(5, 10);

In diesem Code ruft addNumbers(5, 10) die Funktion auf. Der Wert 5 wird an den Parameter num1 übergeben und 10 an den Parameter num2. Die Funktion gibt 15 zurück, das dann in der Variablen sum gespeichert wird.

Funktionsergebnis in Konsole ausgeben

In diesem letzten Schritt zeigen Sie das Ergebnis Ihres Funktionsaufrufs an. Eine gängige Methode, um den Wert von Variablen oder die Ausgabe von Code in der Webentwicklung anzuzeigen, ist die Verwendung von console.log(). Diese Funktion gibt Nachrichten in der Entwicklerkonsole des Webbrowsers aus.

Fügen Sie die folgende Zeile am Ende Ihrer script.js-Datei hinzu, um den Wert der Variablen sum zu protokollieren.

function addNumbers(num1, num2) {
  return num1 + num2;
}

let sum = addNumbers(5, 10);

console.log(sum);

Um die Ausgabe zu sehen:

1. Stellen Sie sicher, dass Ihre script.js-Datei gespeichert ist.
2. Wechseln Sie zum Tab Web 8080 oben in der LabEx-Oberfläche.
3. Öffnen Sie die Entwicklertools des Browsers. Dies können Sie normalerweise tun, indem Sie mit der rechten Maustaste auf die Seite klicken und "Untersuchen" (Inspect) auswählen oder die Taste F12 drücken.
4. Klicken Sie im Entwicklertools-Panel auf den Tab Konsole (Console).

Sie sollten die Zahl 15 in der Konsole sehen. Dies ist das Ergebnis, das Ihre Funktion addNumbers zurückgegeben hat.

Zusammenfassung

Herzlichen Glückwunsch zum Abschluss dieses Labs! Sie haben die wesentlichen Konzepte von JavaScript-Funktionen gelernt.

Sie haben erfolgreich:

• Eine Funktion mit dem Schlüsselwort function definiert.
• Parameter zu einer Funktion hinzugefügt, um Eingabedaten zu akzeptieren.
• Die return-Anweisung verwendet, um einen Wert aus einer Funktion auszugeben.
• Eine Funktion mit Argumenten aufgerufen, um ihren Code auszuführen, und das Ergebnis in einer Variablen gespeichert.
• console.log() verwendet, um die Ausgabe in der Entwicklerkonsole des Browsers anzuzeigen.

Funktionen sind ein Kernbestandteil des Schreibens von sauberem, effizientem und wiederverwendbarem JavaScript-Code. Üben Sie diese Konzepte weiter, um sich damit vertrauter zu machen.