Dreiecksrechner

So funktioniert das Script

Das Script besteht aus vier Teilen: Es liest alle zehn Felder ein, füllt in mehreren Durchläufen die Lücken auf (rechnen()), berechnet danach Höhe und Fläche (hoeheUndFlaeche()) und prüft zum Schluss die Eingaben auf Plausibilität (pruefen()). Alles steckt in einer sofort ausgeführten Funktion, damit die vielen Variablennamen nicht mit anderen Scripts kollidieren.

function wert(id) {
  return parseFloat(feld(id).value.replace(",", "."));
}

Die Hilfsfunktion wert() liest ein Eingabefeld aus und macht mit parseFloat() eine Kommazahl daraus. Vorher tauscht replace(",", ".") ein deutsches Dezimalkomma gegen einen Punkt, denn JavaScript rechnet intern nur mit der englischen Schreibweise. Kann der Text gar nicht als Zahl gelesen werden, kommt NaN („Not a Number") heraus.

if (c === 0 && a !== 0 && b !== 0) {
  feld("dr-c").value = Math.sqrt(a * a + b * b);
}

Ein typischer Rechenschritt: Ist c unbekannt (also 0), aber a und b sind gegeben, liefert der Satz des Pythagoras die Hypotenuse — Math.sqrt() ist die Quadratwurzel, a * a + b * b ist a² + b². Nach demselben Muster werden a und b aus den jeweils anderen Größen bestimmt, wahlweise über Pythagoras oder über die Sinuswerte (Gegenkathete = Hypotenuse × Sinus).

radiant = Math.asin(a / c);
feld("dr-alpha").value = radiant * 360 / (2 * Math.PI);

Hier entsteht der Winkel alpha: a / c ist der Sinus von alpha, und Math.asin() — der Arkussinus — kehrt das um und liefert den Winkel. Allerdings im Bogenmaß (Radiant), der mathematischen Winkeleinheit, bei der ein Vollkreis 2π beträgt. Die zweite Zeile rechnet das mit dem Faktor 360 / 2π in Grad um.

if (i < 10) {
  i++;
  rechnen();
}

Der Kniff des Scripts: rechnen() ruft sich selbst insgesamt zehnmal auf und liest zu Beginn jedes Durchlaufs alle Felder neu ein. So können Werte, die im ersten Durchlauf berechnet wurden (etwa Seite b), im zweiten Durchlauf als Grundlage für weitere Größen dienen (etwa den Winkel). Nach dem letzten Durchlauf werden noch beta (als 180° − 90° − alpha) und die fehlenden Sinuswerte eingetragen.

if (h === 0 && a !== 0 && b !== 0 && c !== 0) {
  feld("dr-hoehe").value = (a * b) / c;
}
if (a !== 0 && b !== 0) {
  feld("dr-inhalt").value = (a * b) / 2;
}

Zum Schluss kommen Höhe und Flächeninhalt. Im rechtwinkligen Dreieck stehen die beiden Katheten a und b senkrecht aufeinander — eine ist damit die Grundseite, die andere die zugehörige Höhe. Die Fläche ist deshalb schlicht a · b / 2. Die Höhe auf der Hypotenuse ergibt sich aus derselben Fläche, von der anderen Seite gelesen: Weil auch c · h / 2 die Fläche ist, muss h = a · b / c sein. Das Original rechnete hier mit √(b² − (c/2)²) und setzte damit den Höhenfußpunkt in die Mitte von c — das trifft nur zu, wenn a und b gleich lang sind, und lieferte sonst zu große Werte.

feld("dr-berechnen").addEventListener("click", function () { … });
feld("dr-reset").addEventListener("click", zuruecksetzen);

Die beiden Knöpfe werden mit addEventListener("click", …) verdrahtet; Warnungen aus pruefen() erscheinen dabei nicht mehr als alert()-Fenster wie früher, sondern gesammelt in der Meldungsfläche unter den Knöpfen. Zum Anpassen: Die Meldungstexte stehen gut auffindbar in pruefen(), und und wer statt der Hypotenuse eine der Katheten als Grundseite betrachten möchte, tauscht in hoeheUndFlaeche() die Rollen von c und a beziehungsweise b.