JavaScript Funktionen für Anfänger: Multiplikationsrechner Schritt für Schritt (CPSC1520)

JavaScript Funktionen verstehen – der Schlüssel zu sauberem Code

Funktionen sind das Herzstück der JavaScript-Programmierung. Sie helfen dir, komplexe Probleme in kleine, überschaubare Schritte zu zerlegen und Code wiederzuverwenden. In diesem Tutorial bauen wir einen einfachen Multiplikationsrechner – ähnlich wie in deiner CPSC1520-Aufgabe. Dabei lernst du, eigene Funktionen zu schreiben und mit DOM-Manipulation zu arbeiten. Ein Trendbeispiel: Stell dir vor, du entwickelst eine App, die tägliche Highscores in einem Spiel wie Fortnite berechnet – auch dort nutzt du Funktionen, um Werte zu holen, zu verarbeiten und anzuzeigen.

Vorbereitung: JavaScript einbinden und testen

Bevor es losgeht, verknüpfe deine JavaScript-Datei mit deiner HTML-Datei. Füge dazu im <head> oder kurz vor dem schließenden </body> Tag ein <script src="app.js"></script> ein. Schreibe dann in deine JS-Datei:

console.log("javascript calculator linked");

Öffne die Konsole im Browser (F12) – siehst du die Meldung? Perfekt! Das bestätigt, dass dein JavaScript läuft. Das ist wie ein erster Check, ob dein Code mit der Website verbunden ist – ähnlich wie ein Ping in einem Netzwerk-Spiel.

Schritt 1: Die Funktion `getElementValue` erstellen

Diese Funktion holt den Textinhalt eines HTML-Elements. Sie nimmt einen Parameter selector entgegen, der als CSS-Selektor dient. So implementierst du sie:

function getElementValue(selector) {
  const element = document.querySelector(selector);
  return element.innerText;
}

Warum ist das nützlich? Stell dir vor, du baust eine Finanz-App, die den aktuellen Bitcoin-Kurs von einer Webseite ausliest – auch dort würdest du so den Wert greifen. Teste die Funktion in der Konsole:

console.log(getElementValue("#firstNumber")); // Beispiel: "5"

Wichtig: Der Rückgabewert ist ein String. Das beachtest du später bei der Multiplikation.

Schritt 2: Die `multiply` Funktion schreiben

Jetzt die Kernfunktion: zwei Zahlen multiplizieren. Sie erwartet zwei Parameter: firstValue und secondValue. Der *-Operator macht die Arbeit:

function multiply(firstValue, secondValue) {
  return firstValue * secondValue;
}

Teste sie:

console.log(multiply(4, 5)); // 20
console.log(multiply(2.5, 3)); // 7.5

Beachte: Die Parameter müssen Zahlen sein, keine Strings. Sonst passiert eine String-Verkettung („5“ * „3“ ergibt 15, weil JavaScript automatisch konvertiert, aber besser ist es, explizit zu sein). In einer echten KI-gestützten App, die Rezepte skaliert, würdest du so die Zutatenmengen multiplizieren.

Schritt 3: `updateResult` – DOM aktualisieren

Diese Funktion holt die Werte aus den Eingabefeldern, wandelt sie in Zahlen um, multipliziert sie und zeigt das Ergebnis im DOM an. So geht's:

function updateResult() {
  const firstValueString = getElementValue("#firstNumber");
  const secondValueString = getElementValue("#secondNumber");
  const firstValue = parseInt(firstValueString, 10);
  const secondValue = parseInt(secondValueString, 10);
  const result = multiply(firstValue, secondValue);
  document.querySelector("#result").innerText = result;
}

updateResult(); // Aufruf beim Laden

Erklärung: parseInt wandelt den String in eine ganze Zahl um. Der zweite Parameter (10) gibt das Dezimalsystem an – wichtig für Sicherheit und Lesbarkeit. Danach rufst du multiply auf und speicherst das Ergebnis in result. Zum Schluss setzt du den Text des Elements mit der ID result auf diesen Wert. Der Aufruf von updateResult() am Ende sorgt dafür, dass das Ergebnis beim Seitenladen sofort angezeigt wird.

In einem aktuellen Kontext: Stell dir vor, du entwickelst eine App, die die Gesamtpunktzahl in einem E-Sports-Turnier berechnet – auch dort greifst du Werte aus Eingabefeldern, multiplizierst sie (z.B. Kills * Punkte pro Kill) und zeigst das Ergebnis live an.

Häufige Fehler und Tipps

Vergiss nicht parseInt: Ohne Umwandlung werden Strings aneinandergereiht („5“ * „3“ funktioniert zwar, aber bei Addition wäre es „5“ + „3“ = „53“).
Selektoren richtig schreiben: #firstNumber sucht nach einer ID. Wenn du Klassen verwendest, nutze .className.
Funktionen aufrufen: Nur definieren reicht nicht – du musst sie auch aufrufen, z.B. updateResult().
Konsole nutzen: Gib console.log an wichtigen Stellen ein, um zu prüfen, ob deine Werte korrekt sind.

Trendbeispiel: Gaming-Score-Rechner

Angenommen, du erstellst einen Rechner für ein Battle-Royale-Spiel. Der Spieler gibt die Anzahl der Kills und den Multiplikator (z.B. 100 Punkte pro Kill) ein. Deine Funktionen könnten so aussehen:

function getElementValue(selector) { ... }
function multiply(a, b) { ... }
function updateScore() {
  const kills = parseInt(getElementValue("#kills"), 10);
  const multiplier = parseInt(getElementValue("#multiplier"), 10);
  const score = multiply(kills, multiplier);
  document.querySelector("#score").innerText = score;
}
updateScore();

Das Prinzip ist identisch – du lernst eine universelle Fähigkeit.

Zusammenfassung und Ausblick

Du hast jetzt drei grundlegende Funktionen erstellt: getElementValue zum Auslesen, multiply zum Berechnen und updateResult zum Aktualisieren des DOM. Dieses Muster – Daten holen, verarbeiten, anzeigen – begegnet dir in unzähligen Webanwendungen, von Wetter-Apps bis hin zu KI-gestützten Dashboards. Übe, indem du weitere Funktionen hinzufügst, z.B. eine Division oder eine, die den Durchschnitt berechnet. Wenn du die Aufgabenstellung genau befolgst, erhältst du die volle Punktzahl – und vor allem ein solides Fundament für deine JavaScript-Reise.

Viel Erfolg bei deiner CPSC1520-Aufgabe!