JavaScripts › Mathematik

Flächenberechnung / Dreieck

Berechnet die Fläche eines Dreiecks aus Grundseite und zugehöriger Höhe.

Dieses Script berechnet die Fläche eines Dreiecks. Ihr braucht dafür zwei Angaben: eine Kante des Dreiecks — die Grundseite — und die Höhe, die senkrecht auf dieser Kante steht und bis zur gegenüberliegenden Ecke reicht. Beides tragt ihr in Zentimetern ein, ein Klick auf „Berechnen" liefert die Fläche in Quadratzentimetern. Voreingestellt sind 8 cm Grundseite und 5 cm Höhe.

Die Formel dahinter ist eine der ersten, die man in der Geometrie lernt: Fläche = Grundseite × Höhe ÷ 2. Anschaulich wird sie, wenn ihr euch zwei gleiche Dreiecke vorstellt, von denen eines um 180 Grad gedreht an das andere gelegt wird — zusammen ergeben sie immer ein Parallelogramm mit derselben Grundseite und derselben Höhe. Ein Dreieck ist also genau die Hälfte davon.

Wichtig ist, dass die Höhe wirklich im rechten Winkel auf der eingetragenen Grundseite steht und nicht etwa eine der anderen Seitenlängen ist. Bei einem rechtwinkligen Dreieck macht ihr es euch besonders leicht: Dort stehen die beiden Katheten — die Seiten am rechten Winkel — bereits senkrecht aufeinander, ihr könnt sie also direkt als Grundseite und Höhe eintragen. Bei einem stumpfwinkligen Dreieck kann die Höhe auch außerhalb der Figur liegen; die Formel gilt trotzdem unverändert.

Die Einheit ist frei wählbar, solange ihr sie für beide Angaben gleich haltet: Tragt ihr Meter ein, kommen Quadratmeter heraus. Im Ausgabetext steht „cm²", weil das Script ursprünglich für Zentimeter gedacht war — im Code lässt sich das mit einem Handgriff ändern.

Für andere Formen gibt es im Archiv die Flächenberechnungen für Rechteck, Kreis, Parallelogramm und Trapez. Wenn ihr von einem Dreieck die drei Seiten kennt und Winkel oder Umfang braucht, hilft euch der Dreiecksrechner weiter.

Mathematik Baujahr 2004 läuft in deinem Browser

Die Höhe muss senkrecht auf der eingetragenen Kante stehen.

So funktioniert das Script

Das Script ist eines der kürzesten im Archiv und eignet sich deshalb gut als Einstieg: Es liest zwei Felder aus, prüft die Eingaben, rechnet eine Zeile und schreibt das Ergebnis in die Seite. Der ganze Code steckt in einer sofort ausgeführten Funktion, damit die Namen darin nicht mit anderen Scripts auf derselben Seite kollidieren.

function zahl(id) {
  const text = document.getElementById(id).value.trim().replace(",", ".");
  return text === "" ? NaN : Number(text);
}

Diese Hilfsfunktion holt sich über document.getElementById() ein Eingabefeld und liest dessen value — das ist immer Text, auch wenn eine Zahl darin steht. trim() entfernt Leerzeichen am Anfang und Ende, replace(",", ".") übersetzt das deutsche Dezimalkomma in den Punkt, mit dem JavaScript rechnet. Ist das Feld leer, kommt bewusst NaN zurück („not a number"), denn Number("") würde eine 0 liefern und ein leeres Feld sähe aus wie eine eingetragene Null.

if (isNaN(kante) || isNaN(hoehe) || kante <= 0 || hoehe <= 0) {
  ausgabe.textContent = "Bitte tragt für Kante und Höhe je eine Zahl größer als 0 ein.";
  return;
}

Vor dem Rechnen wird geprüft. Die beiden senkrechten Striche || bedeuten „oder": Trifft auch nur eine der vier Bedingungen zu, erscheint der Hinweis und return beendet die Funktion. Negative Längen und die Null werden gleich mit abgefangen — ein Dreieck ohne Ausdehnung hat keine sinnvolle Fläche. Das Original gab in diesem Fall „Ungültige Eingabe" aus; ein Satz, der sagt, was zu tun ist, hilft den Besuchern mehr.

const flaeche = 0.5 * kante * hoehe;

Das ist die gesamte Mathematik des Scripts: Grundseite mal Höhe, halbiert. Statt 0.5 * könnte hier genauso gut (kante * hoehe) / 2 stehen — das Ergebnis ist dasselbe, die Multiplikation mit 0,5 ist nur die traditionelle Schreibweise aus dem Original.

ausgabe.innerHTML = "Die Fläche des Dreiecks beträgt <strong>" +
  flaeche.toLocaleString("de-DE", { maximumFractionDigits: 4 }) + " cm²</strong>";

toLocaleString("de-DE") schreibt die Zahl in der bei uns üblichen Form — mit Komma statt Punkt und mit Tausenderpunkten. maximumFractionDigits: 4 begrenzt die Nachkommastellen auf vier; das hält die Ausgabe lesbar und räumt nebenbei die winzigen Rechenreste weg, die beim Rechnen mit Kommazahlen im Computer entstehen können. Weil im Text ein <strong> steckt, wird die Ausgabe mit innerHTML gesetzt.

Zum Anpassen: Die Einheit ändert ihr an genau zwei Stellen — bei den Beschriftungen im HTML und im Ausgabetext, wo " cm²" steht. Wollt ihr die Fläche eines Rechtecks statt eines Dreiecks, lasst ihr einfach die 0.5 weg.

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