JavaScripts › Mathematik

Flächenberechnung / Kreis

Berechnet aus dem Radius den Flächeninhalt eines Kreises nach der Formel A = π · r².

Dieses Script berechnet den Flächeninhalt eines Kreises. Die Formel dafür kennt ihr aus dem Matheunterricht: A = π · r² — die Kreiszahl Pi mal Radius mal Radius. Der Radius ist dabei der Abstand vom Mittelpunkt bis zum Rand, also der halbe Durchmesser.

Gebt einfach den Radius in Zentimetern in das Feld ein und klickt auf „Berechnen“ — das Script zeigt euch den Flächeninhalt in Quadratzentimetern (cm²) an, gerundet auf zwei Nachkommastellen. Nachkommastellen dürft ihr wahlweise mit Komma oder Punkt eingeben.

Die Kreiszahl π (Pi) ist übrigens eine der berühmtesten Zahlen der Mathematik: Sie beschreibt das Verhältnis von Kreisumfang zu Durchmesser, beträgt ungefähr 3,14159 und hat unendlich viele Nachkommastellen, die sich nie wiederholen. JavaScript bringt sie als eingebaute Konstante Math.PI gleich mit.

Für andere Grundformen haben wir passende Schwester-Scripts im Archiv: Rechteck, Dreieck, Parallelogramm und Trapez.

Mathematik Baujahr 2004 läuft in deinem Browser

So funktioniert das Script

Das Script besteht aus drei Teilen: Es liest das Radius-Feld aus, rechnet die Kreisformel und schreibt das Ergebnis in die Ausgabefläche. Alles steckt in einer sofort ausgeführten Funktion, damit keine Variablennamen mit anderen Scripts auf der Seite kollidieren.

const wert = document.getElementById("radius").value.replace(",", ".");
const radius = wert === "" ? NaN : Number(wert);

getElementById holt sich das Eingabefeld, .value liefert den eingetippten Text. replace(",", ".") tauscht ein deutsches Dezimalkomma gegen einen Punkt, denn JavaScript versteht intern nur die englische Schreibweise. Ein leeres Feld wird bewusst zu NaN („Not a Number“) gemacht, damit es gleich bei der Prüfung auffällt — alles andere macht Number() zur Zahl.

if (isNaN(radius) || radius <= 0) {
  ausgabe.textContent = "Ungültige Eingabe — bitte gebt einen Radius größer als 0 ein.";
  return;
}

Bevor gerechnet wird, prüft das Script die Eingabe: isNaN() erkennt Buchstaben und leere Felder, und radius <= 0 sortiert Werte aus, die geometrisch keinen Sinn ergeben — ein Kreis mit Radius 0 oder einem negativen Radius hat keine Fläche. Genau diese Fälle meldete schon das Original als „Ungültige Eingabe“. Im Fehlerfall erscheint der Hinweis und return beendet die Funktion, ohne weiterzurechnen.

const flaeche = Math.PI * radius * radius;

Die Kreisformel in einer Zeile: Math.PI ist die eingebaute Kreiszahl (3,14159…), und radius * radius ist das Quadrat des Radius. Das Original schrieb dafür Math.pow(radius, 2) — das ist dieselbe Rechnung, nur umständlicher notiert; heute würde man auch radius ** 2 schreiben.

ausgabe.innerHTML =
  "Die Fläche des Kreises beträgt <strong>" +
  flaeche.toFixed(2).replace(".", ",") + " cm²</strong>";

toFixed(2) rundet auf zwei Nachkommastellen — das Original gab noch bis zu fünfzehn Nachkommastellen aus, was niemand braucht — und das anschließende replace macht aus dem Punkt wieder ein deutsches Komma. Weil das Ergebnis per innerHTML gesetzt wird, darf der Wert in <strong>-Tags stehen und erscheint hervorgehoben.

document.getElementById("kreis-berechnen").addEventListener("click", berechneKreis);

Zum Schluss wird die Funktion berechneKreis() mit dem Knopf verbunden: addEventListener("click", …) sorgt dafür, dass sie bei jedem Klick läuft. Das Script steht dafür unter dem Formular — so existieren Feld und Knopf bereits, wenn es ausgeführt wird.

Zum Anpassen: Für andere Einheiten müsst ihr nur die Beschriftung im HTML und das " cm²" im Ausgabetext ändern. Wollt ihr stattdessen den Umfang des Kreises, ersetzt die Formel durch 2 * Math.PI * radius — mehr ist nicht nötig. Mehr oder weniger Nachkommastellen regelt die Zahl in toFixed(2).

Script für die eigene Homepage

Kopiert euch den kompletten Code und fügt ihn an der Stelle eurer Seite ein, an der das Script erscheinen soll. Er läuft ohne weitere Dateien und ohne fremde Server.

Mehr aus der Kategorie Mathematik