SELFHTML wird 30 Jahre alt!
Die Mitgliederversammlung findet am 24.05.2025 um 10:00 statt. Alle Mitglieder und Interessierte sind herzlich eingeladen.
Davor und danach gibt es Gelegenheiten zum gemütlichen Beisammensein. → Veranstaltungs-Ankündigung.
JavaScript/Objekte/Math/hypot
Der Begriff hypot ist mehrdeutig.Die Beschreibung der CSS Funktion hypot() finden Sie unter CSS/Funktionen/Math-Funktionen#hypot().
Die Methode hypot() erwartet einen bis beliebig viele Parameter. Sie bestimmt für jeden ihrer Parameter den numerischen Wert und ermittelt für diese Werte die Wurzel der Summe ihrer Quadrate.
Mathematisch gesprochen bestimmt sie für N Zahlen die Länge eines N-dimensionalen Vektors. Bei nur zwei Koordinaten entspricht das der Anwendung des Satzes des Pythagoras.
Sonderfälle: Ist einer der übergebenen Werte Infinity oder -Infinity, so gibt hypot() den Wert Infinity zurück (immer den positiven Unendlich-Wert). Diese Bedingung wird als erstes überprüft. Erst danach beginnt hypot mit der Summierung. Wird dabei hypot() ein ungültiger Wert (NaN) angetroffen, ist das Ergebnis NaN.
Diese Funktion wurde mit ECMAScript 2016 eingeführt und ist in älteren Browsern nicht verfügbar.
const target = document.getElementById("target"),
ausgabe = document.getElementById("kommentar");
document.addEventListener("click", function (mouseEvent) {
let targetRect = target.getBoundingClientRect(),
targetPosX = targetRect.x + targetRect.width / 2,
targetPosY = targetRect.y + targetRect.height / 2;
let deltaX = mouseEvent.clientX - targetPosX,
deltaY = mouseEvent.clientY - targetPosY,
distanz = Math.hypot(deltaX, deltaY);
if (distanz < 5) {
ausgabe.textContent = "Treffer!";
} // und weitere Kommentare...
});
Das Beispiel zeigt in der Mitte des <body>-Elements eine kleine Zielscheibe an (id="target"). Klickt man mit der Maus, wird die client-Position des MouseEvent-Objekts relativ zur Mitte der Zielscheibe umgerechnet. Der Vektor (deltaX, deltaY) zeigt nun vom Bullseye zum geklickten Punkt. Die Länge dieses Vektors wird mit Math.hypot() berechnet und das Ergebnis in ein output-Element mit id="kommentar" geschrieben.
