JavaScripts › Mathematik

Vektorenpfeile berechnen

Berechnet aus zwei Punkten A und B die Verbindungsvektoren AB und BA sowie deren Länge.

Dieses Script zur Berechnung von Vektorenpfeilen hat uns unser User Valentin Hammer geschickt. Ihr gebt einfach zwei Punkte A und B in der Ebene an, und das Script berechnet euch die beiden Verbindungsvektoren dazu: den Pfeil von A nach B und den Gegenpfeil von B nach A, dazu die Länge des Vektors.

Zur Bedienung: Tragt in die vier Felder die Koordinaten der Punkte A und B ein — jeweils erst den x-, dann den y-Wert — und klickt auf „Pfeil berechnen". Als Beispiel sind A(1|2) und B(4|6) vorausgefüllt; dafür kommt der Vektor (3|4) mit der Länge 5 heraus. Kommazahlen sind erlaubt, das Dezimalkomma dürft ihr wahlweise als Komma oder Punkt tippen. Leere Felder wertet das Script als 0.

Zum mathematischen Hintergrund: Den Verbindungsvektor von A nach B erhält man, indem man die Koordinaten „Spitze minus Fuß" subtrahiert, also B minus A. Der Gegenvektor von B nach A hat dieselben Zahlen mit umgekehrtem Vorzeichen — gleicher Pfeil, entgegengesetzte Richtung. Die Länge (der Betrag) des Vektors folgt aus dem Satz des Pythagoras: Wurzel aus der Summe der quadrierten Komponenten. Beide Vektoren sind deshalb immer gleich lang.

Wer weiter mit Geometrie rechnen möchte: Im Archiv gibt es auch den Dreiecksrechner und ein Script für trigonometrische Berechnungen. Vom selben Einsender stammt außerdem das Script Zufallszahlen berechnen.

Mathematik Baujahr 2007 läuft in deinem Browser

Leere Felder zählen als 0.

Eingesandt von Valentin Hammer

So funktioniert das Script

Das Script besteht aus drei Schritten: die vier Koordinaten aus den Feldern lesen, die Vektoren und ihre Länge berechnen und das Ergebnis in die Ausgabefläche schreiben. Alles ist in eine sofort ausgeführte Funktion verpackt, damit die Variablennamen anderen Scripts auf der Seite nicht in die Quere kommen.

function zahl(id) {
  const wert = Number(document.getElementById(id).value.replace(",", "."));
  return isNaN(wert) ? 0 : wert;
}

Die Hilfsfunktion zahl() holt ein Eingabefeld anhand seiner id und macht mit Number() eine Zahl aus dem eingetippten Text. Vorher tauscht replace(",", ".") ein deutsches Dezimalkomma gegen einen Punkt, weil JavaScript nur die englische Schreibweise versteht. Kommt keine gültige Zahl heraus (geprüft mit isNaN(), „is Not a Number"), liefert die Funktion 0 — genau wie im Original werden leere Felder so einfach als Nullkoordinate gewertet.

const ab1 = bx - ax;
const ab2 = by - ay;
const ba1 = ax - bx;
const ba2 = ay - by;

Hier entstehen die beiden Vektoren, komponentenweise nach der Regel „Spitze minus Fuß": Für den Pfeil von A nach B wird jeweils die A-Koordinate von der B-Koordinate abgezogen. Der Gegenvektor von B nach A rechnet genau andersherum — seine Komponenten sind daher dieselben Zahlen mit umgekehrtem Vorzeichen.

const laenge = Math.sqrt(ab1 * ab1 + ab2 * ab2);

Die Länge des Vektors ist der Satz des Pythagoras in Aktion: Die beiden Komponenten bilden die Katheten eines rechtwinkligen Dreiecks, der Vektorpfeil selbst ist die Hypotenuse. Also werden beide Komponenten quadriert, addiert und mit Math.sqrt() die Wurzel gezogen. Beim Beispiel (3|4) ergibt das die Wurzel aus 9 + 16 = 25, also 5.

document.getElementById("vek-ausgabe").innerHTML =
  'Vektor <span style="text-decoration: overline">AB</span> = (' + ab1 + " | " + ab2 + ")<br>" + …

Die Ausgabe wird per innerHTML gesetzt, damit sie HTML enthalten darf: text-decoration: overline zeichnet den Überstrich über „AB" — die in der Mathematik übliche Schreibweise für einen Vektor. Zum Schluss verbindet addEventListener("click", vektor) die Rechenfunktion mit dem Knopf; das Script steht unter dem Formular, damit alle Felder schon existieren, wenn es ausgeführt wird.

Zum Anpassen: Bei krummen Eingaben kann die Länge viele Nachkommastellen bekommen. Wer runden möchte, ersetzt in der Ausgabe laenge durch laenge.toFixed(2) — die 2 steht für zwei Nachkommastellen. Auch eine dritte Dimension ist schnell ergänzt: zwei weitere Felder für die z-Werte, eine dritte Differenz und in der Wurzel ein weiteres Quadrat.

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