JavaScripts › Mathematik

Flächenberechnung / Parallelogramm

Berechnet die Fläche eines Parallelogramms aus Kantenlänge und Höhe.

Dieses Script berechnet die Fläche eines Parallelogramms. Ein Parallelogramm ist ein Viereck, bei dem je zwei gegenüberliegende Seiten parallel und gleich lang sind — das Rechteck ist der Sonderfall mit lauter rechten Winkeln, die Raute der Sonderfall mit vier gleich langen Seiten.

Tragt in das erste Feld die Kantenlänge in Zentimetern ein und in das zweite die Höhe, dann liefert ein Klick auf „Berechnen" die Fläche in Quadratzentimetern. Bleibt ein Feld leer oder steht dort eine 0, meldet sich das Script mit einem Hinweis, denn eine Fläche von null Quadratzentimetern wäre kein Parallelogramm.

Wichtig ist, was mit „Höhe" gemeint ist: nicht die schräge zweite Seite, sondern der senkrechte Abstand zwischen der eingegebenen Kante und der ihr gegenüberliegenden Seite. Das ist der häufigste Fehler beim Rechnen mit Parallelogrammen. Nimmt man versehentlich die Schrägseite, kommt immer ein zu großes Ergebnis heraus.

Warum die Formel „Kante mal Höhe" — also dieselbe wie beim Rechteck — überhaupt stimmt, lässt sich mit der Schere zeigen: Schneidet man an einer Seite das überstehende Dreieck ab und setzt es auf der anderen Seite wieder an, entsteht aus dem Parallelogramm genau ein Rechteck mit derselben Grundseite und derselben Höhe. Die Fläche ändert sich beim Umlegen nicht.

Für andere Formen gibt es im selben Fach passende Geschwister: Rechteck, Dreieck, Trapez und Kreis. Für Körper statt Flächen ist der Volumenrechner zuständig.

Mathematik Baujahr 2004 läuft in deinem Browser

Die Höhe ist der senkrechte Abstand zur gegenüberliegenden Seite, nicht die Schrägkante.

So funktioniert das Script

Das Script ist eines der kürzesten auf dieser Seite und deshalb ein guter Einstieg. Es hat drei Aufgaben: die beiden Eingabefelder auslesen, das Produkt bilden und das Ergebnis in die Ausgabefläche schreiben. Alles steckt in einer sofort ausgeführten Funktion, damit die Namen im Script nicht mit anderen Scripts auf der Seite kollidieren.

function zahl(id) {
  return Number(document.getElementById(id).value.replace(",", "."));
}

Die Hilfsfunktion zahl() sucht ein Eingabefeld anhand seiner id, liest den eingetippten Text aus und macht daraus mit Number() eine echte Zahl. Der replace(",", ".") davor tauscht ein deutsches Dezimalkomma gegen einen Punkt — JavaScript versteht intern nur die englische Schreibweise, aus "7,5" wird also erst "7.5" und dann die Zahl 7.5.

Das Original arbeitete an dieser Stelle direkt mit .value, also mit Text. Dass "12" * "5" trotzdem 60 ergibt, liegt an einer Eigenheit von JavaScript: Beim Multiplizieren werden Texte stillschweigend in Zahlen umgedeutet. Beim Pluszeichen passiert das nicht — dort würde "12" + "5" die Zeichenkette "125" ergeben. Genau deshalb ist es besser, Eingaben gleich sauber in Zahlen umzuwandeln.

const flaeche = kante * hoehe;

Die eigentliche Rechnung — mehr steckt nicht in der Flächenformel des Parallelogramms. Bei 12 cm Kantenlänge und 5 cm Höhe sind das 60 Quadratzentimeter.

if (isNaN(flaeche) || flaeche <= 0) {
  ausgabe.textContent = "Ungültige Eingabe — bitte tragt in beide Felder eine Zahl größer als 0 ein.";
  return;
}

Erst danach wird geprüft, ob das Ergebnis brauchbar ist. isNaN() steht für „is Not a Number" und schlägt an, wenn in einem Feld etwas stand, das sich nicht in eine Zahl verwandeln ließ. Der zweite Teil fängt leere Felder, Nullen und negative Längen ab — ein Parallelogramm mit der Fläche 0 gibt es nicht. Das || bedeutet „oder": Trifft eine der beiden Bedingungen zu, erscheint der Hinweis, und return beendet die Funktion, bevor ein Ergebnis angezeigt wird.

ausgabe.innerHTML =
  "Die Fläche des Parallelogramms beträgt <strong>" +
  flaeche.toLocaleString("de-DE") + " cm²</strong>";

toLocaleString("de-DE") bringt die Zahl in deutsche Schreibweise: Tausenderpunkte und Dezimalkomma, aus 1234.5 wird 1.234,5. Weil das Ergebnis per innerHTML gesetzt wird, darf der Wert in <strong>-Tags stehen und erscheint hervorgehoben.

document.getElementById("par-berechnen").addEventListener("click", rechnen);

Zum Schluss wird die Funktion rechnen() mit dem Knopf verbunden. Das ist die moderne Art, auf Klicks zu reagieren — früher schrieb man ein onclick-Attribut mitten ins HTML. Das Script steht dafür unter dem Formular, so existieren Knopf und Felder bereits, wenn es ausgeführt wird.

Zum Anpassen: Rechnet ihr in Metern statt Zentimetern, ändert ihr nur die Beschriftungen und das " cm²" im Ausgabetext. Und weil ein Dreieck die halbe Fläche eines Parallelogramms mit gleicher Grundseite und Höhe hat, wird aus diesem Script mit einem / 2 in der Rechenzeile ein Dreiecksrechner.

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