Funktionen
Schleifen steuern, wann Arbeit sich wiederholt. Funktionen beantworten etwas anderes: wo bewahrst du einen Arbeitsblock, um ihn später per Namen zu starten? Eine Funktion ist ein benanntes Rezept. Du definierst es einmal. Du rufst es auf, wann immer du diese Schritte brauchst. Copy-Paste verblasst; der Name bleibt.
Was ist eine Funktion?
In JavaScript deklarierst du sie mit dem Schlüsselwort function, einem Namen, Klammern () und einem Rumpf in { }. Im Rumpf läuft nichts, bis du die Funktion aufrufst — Name plus (). Denk: „Schritte einpacken, dann Play drücken.“
Teile einer Funktion
📊 Anatomie einer Funktion
| Teil | Rolle | Alltagstauglich |
|---|---|---|
Schlüsselwort function |
startet die Deklaration | „hier kommt ein benanntes Rezept“ |
| Name | so rufst du später auf | sayHi, showTotal — klare Verben helfen |
() nach dem Namen |
Aufrufstelle / später Eingaben | leeres () heißt trotzdem „jetzt ausführen“ |
Rumpf { } |
Schritte bei jedem Aufruf | Logs, Rechnen, Seiten-Updates |
Aufruf name() |
führt den Rumpf jetzt aus | Wiederverwenden ohne den Rumpf neu zu schreiben |
Nur definieren speichert das Rezept. Aufrufen führt es aus. Ohne Aufruf bleibt der Rumpf still — das ist normal, kein Sprachfehler.
function sayHi() {
console.log("Hi");
}
sayHi();
Erst definieren, dann aufrufen
Die ersten drei Zeilen definieren sayHi. Die letzte Zeile ruft auf. In der Konsole solltest du Hi sehen. Ohne sayHi(); existiert die Funktion, läuft aber nicht.
function beep() {
console.log("beep");
}
beep();
beep();
Einen Rumpf wiederverwenden
Eine Definition, zwei Aufrufe — beep erscheint zweimal. Das ist der Punkt: Schritte einmal schreiben, jederzeit wieder starten. Änderst du den Rumpf später, gilt das für jede Aufrufstelle mit diesem Namen.
function showReady() {
console.log("loading");
console.log("ready");
}
showReady();
Der Rumpf darf mehrere Schritte haben
Bei einem Aufruf laufen beide Zeilen der Reihe nach: loading, dann ready. Eine Funktion ist nicht auf eine Anweisung begrenzt — packe die ganze Mini-Aufgabe in die Klammern.
function greetCity() {
let city = "Tehran";
let line = "Hello from " + city;
console.log(line);
}
greetCity();
Lokale Arbeit bleibt im Rezept
city und line leben in greetCity. Jeder Aufruf baut die Meldung und loggt Hello from Tehran. Für dieses Muster brauchst du die Namen außerhalb nicht — der Trigger ist der Aufruf.
function fillOut() {
let box = document.getElementById("out");
box.textContent = "Function ran";
}
fillOut();
Arbeit für die Seite ausführen
Wie in früheren DOM-Lektionen: Element finden, textContent setzen. In einer Funktion kannst du per Button, Timer oder Skript fillOut() rufen, wenn die Seite aktualisiert werden soll — ein Name, ein Job.
Eine Funktion auf der Seite zeigen
Definiere eine Funktion, die eine kurze Zeile in einen Absatz schreibt, und rufe sie im Skript auf, damit Besucher das Ergebnis sehen.
<!DOCTYPE html>
<html>
<head>
<title>functions — page</title>
</head>
<body>
<p id="msg">…</p>
<script>
function showMsg() {
let box = document.getElementById("msg");
box.textContent = "Hello from a function";
}
showMsg();
</script>
</body>
</html>
Die Seite zeigt Hello from a function. Der Rumpf von showMsg schrieb ins DOM; der Aufruf unten drückte Play. Ändere den String, aktualisiere, lies die neue Zeile. Als Nächstes kommen Parameter — Werte, die du beim Aufruf in die Klammern gibst.
Selbst ausprobieren
- Deklariere
function hello(), die"hello"loggt, und rufe einmal auf. - Rufe dieselbe Funktion ein zweites Mal auf, ohne den Rumpf neu zu schreiben.
- Bau eine Funktion, deren Rumpf zwei verschiedene Wörter der Reihe nach loggt.
- Baue in einer Funktion mit
leteinen String und logge ihn. - Schreibe eine Funktion, die
#outauf"ok"setzt (oder nutze die Demo-id). - In der HTML-Demo nur den Meldungstext ändern, aktualisieren, Absatz lesen.
Häufige Fehler
- Funktion definieren und den Aufruf mit
()vergessen sayHiohne()schreiben — nennt die Funktion, führt den Rumpf nicht aus- Dieselben Zeilen kopieren statt eine Funktion zweimal aufzurufen
- Arbeit außerhalb von
{ }legen und erwarten, der Funktionsname „gehöre“ dazu - Diese Lektion mit Parametern/
returnvermischen — das kommt später; hier definieren + aufrufen
Kurzfassung
- Eine Funktion packt Schritte unter einen Namen
- Deklarieren mit
function name() { … } - Aufrufen mit
name(), damit der Rumpf läuft - Ein Rumpf, viele Aufrufe — Wiederverwendung
- Der Rumpf darf mehrere Anweisungen und lokale
let-Arbeit haben - Seiten-Updates passen gut in eine Funktion, die du bei Bedarf aufrufst
- Weiter: Parameter — Werte beim Aufruf übergeben
🧠 Testen Sie Ihr Wissen
Testen Sie Ihr Wissen
Fordern Sie sich mit diesem interaktiven Quiz heraus und sehen Sie, wie gut Sie das Thema verstehen
📝 Anweisungen
- Lesen Sie jede Frage sorgfältig
- Wählen Sie die beste Antwort für jede Frage
- Sie können das Quiz so oft wiederholen, wie Sie möchten
- Ihr Fortschritt wird oben angezeigt