JavaScripts › Mathematik

Streckenkonverter

Rechnet eine Länge in einem Rutsch zwischen Kilometer, Meter, Dezimeter, Zentimeter und Millimeter um.

Wie viele Zentimeter sind 0,75 Kilometer? Und wie viele Millimeter sind das dann? Solche Umrechnungen zwischen den Längeneinheiten kommen in der Schule, beim Basteln und beim Heimwerken ständig vor — und genau dafür ist dieses Script gedacht, das die Idee von unserem User david97 und die Programmierung von Freddus zusammenbringt.

Die Bedienung ist bewusst schlicht: Tragt euren Wert in genau ein Feld ein und klickt auf „Ausrechnen". Alle anderen Felder füllen sich daraufhin mit demselben Abstand in der jeweiligen Einheit. Steht in mehreren Feldern etwas — oder in gar keinem — meldet sich das Script, denn dann wüsste es nicht, von welchem Wert es ausgehen soll. Der Knopf „Leeren" räumt alle fünf Felder auf einmal frei.

Praktisch ist dabei, dass ihr in beide Richtungen rechnen könnt: von der großen zur kleinen Einheit ebenso wie umgekehrt. Nachkommastellen dürft ihr mit Komma oder mit Punkt schreiben, beides wird verstanden.

Alle Einheiten hier gehören zum metrischen System und stehen im Verhältnis von Zehnerpotenzen zueinander: Ein Kilometer sind 1.000 Meter, ein Meter 10 Dezimeter, ein Dezimeter 10 Zentimeter, ein Zentimeter 10 Millimeter. Vom Kilometer bis zum Millimeter liegt also der Faktor eine Million. Genau diese Staffelung macht das Umrechnen so einfach — man verschiebt im Grunde nur das Komma.

Wollt ihr statt Längen andere Größen umrechnen, findet ihr im selben Fach den Gewichts-Umrechner, den Temperaturkonverter und den KB-MB-Umrechner für Dateigrößen.

Mathematik Baujahr 2007 läuft in deinem Browser

Genau ein Feld ausfüllen — die übrigen vier rechnet das Script aus.

Eingesandt von Freddus

So funktioniert das Script

Das Script besteht aus drei Teilen: einer Tabelle, die jede Einheit mit ihrem Umrechnungsfaktor beschreibt, der Funktion rechnen(), die das ausgefüllte Feld sucht und die übrigen füllt, und der Funktion leeren() für den zweiten Knopf. Alles steckt in einer sofort ausgeführten Funktion, damit die Namen im Script nicht mit anderen Scripts der Seite kollidieren.

const einheiten = [
  { id: "sk-km", name: "Kilometer",  faktor: 1000000 },
  { id: "sk-m",  name: "Meter",      faktor: 1000 },
  { id: "sk-dm", name: "Dezimeter",  faktor: 100 },
  { id: "sk-cm", name: "Zentimeter", faktor: 10 },
  { id: "sk-mm", name: "Millimeter", faktor: 1 }
];

Das ist das Herzstück. Jede Zeile ist ein Objekt — eine kleine Sammlung benannter Werte — und beschreibt eine Einheit: zu welchem Eingabefeld sie gehört (id), wie sie heißt (name) und wie viele Millimeter sie sind (faktor). Der Millimeter dient als gemeinsame Bezugsgröße, deshalb hat er den Faktor 1. Ein Kilometer sind eine Million Millimeter, daher die 1000000.

Der Vorteil dieser Schreibweise: Statt für jede der fünf Einheiten vier Umrechnungen von Hand zu programmieren — das wären zwanzig Zeilen Rechnung — genügt eine einzige Formel, die für alle Kombinationen funktioniert. Und wenn ihr noch Zoll oder Meilen ergänzen wollt, tragt ihr einfach eine weitere Zeile mit dem passenden Faktor ein; der Rest des Scripts bleibt unangetastet.

const text = feld(einheit).value.trim().replace(",", ".");
if (text !== "" && !isNaN(Number(text))) {
  gefuellt.push({ einheit: einheit, wert: Number(text) });
}

Beim Klick geht das Script mit forEach alle fünf Einheiten durch und schaut, in welchen Feldern etwas Brauchbares steht. trim() entfernt versehentliche Leerzeichen, replace(",", ".") tauscht das deutsche Dezimalkomma gegen einen Punkt — JavaScript versteht intern nur die englische Schreibweise. isNaN() heißt „is Not a Number" und meldet sich, wenn im Feld keine gültige Zahl steht; das vorangestellte ! kehrt die Prüfung um. Jedes brauchbare Feld landet in der Liste gefuellt.

if (gefuellt.length !== 1) {
  ausgabe.textContent =
    "Bitte tragt in genau ein Feld eine Zahl ein — aus ihr werden die anderen vier berechnet.";
  return;
}

Jetzt zeigt sich, warum die Liste geführt wurde: gefuellt.length ist die Anzahl der ausgefüllten Felder. Ist sie nicht genau 1, kann das Script nicht wissen, welcher Wert der Ausgangswert sein soll — es schreibt einen Hinweis in die Ergebnisfläche, und return beendet die Funktion, bevor gerechnet wird. Der strikte Vergleich !== prüft dabei zusätzlich den Datentyp und ist deshalb dem alten != vorzuziehen.

const inMillimetern = quelle.wert * quelle.einheit.faktor;

einheiten.forEach(function (einheit) {
  feld(einheit).value = inMillimetern / einheit.faktor;
});

Die eigentliche Umrechnung in zwei Schritten. Zuerst wird der eingegebene Wert in die gemeinsame Bezugseinheit umgerechnet: 0,75 Kilometer × 1000000 sind 750000 Millimeter. Danach läuft das Script noch einmal durch alle Einheiten und teilt diesen Millimeterwert durch den jeweiligen Faktor — 750000 ÷ 1000 sind 750 Meter, 750000 ÷ 10 sind 75000 Zentimeter. Das Ausgangsfeld wird dabei mit seinem eigenen Wert überschrieben, was nicht auffällt, weil dasselbe Ergebnis herauskommt.

ausgabe.innerHTML =
  "Umgerechnet ausgehend von <strong>" +
  quelle.wert.toLocaleString("de-DE") + " " + quelle.einheit.name + "</strong>";

Zum Schluss eine kurze Rückmeldung, von welchem Wert gerechnet wurde. toLocaleString("de-DE") setzt dabei die deutschen Tausenderpunkte und das Dezimalkomma, aus 1500.5 wird also 1.500,5. Weil hier innerHTML statt textContent benutzt wird, darf der Wert in <strong>-Tags stehen und erscheint hervorgehoben.

Zum Anpassen: Weitere Einheiten ergänzt ihr über die Tabelle ganz oben plus ein zugehöriges Eingabefeld im HTML. Wenn euch die langen Nachkommastellen bei krummen Werten stören, schreibt in der Ausgabezeile statt inMillimetern / einheit.faktor ein (inMillimetern / einheit.faktor).toFixed(3) — dann werden alle Felder auf drei Nachkommastellen gerundet.

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