So erstellen Sie einen Konverter für römische Zahlen und ein interaktives Diagramm für römische Zahlen

Die römischen Ziffern sind kein wesentlicher Bestandteil unseres täglichen Lebens mehr. Aber wir verwenden sie beim Entwerfen von Denkmälern, Uhren und sogar für Sportveranstaltungen.

Was sind die römischen Ziffern?

Römische Ziffern stammen aus dem alten Rom und waren viele Jahrhunderte lang die gängige Schreibweise für Zahlen in ganz Europa. Ihre Verwendung überlebte das Römische Reich selbst lange. Sie wurden nach und nach durch das heute verwendete hindu-arabische Zahlensystem ersetzt - die Zahlen Null bis Neun.

Römische Ziffern werden durch Buchstabenkombinationen des lateinischen Alphabets dargestellt, die in diesem System als Ziffern dienen. Aber im Gegensatz zu Dezimalbasis, mit Symbolen 0 bis 9 , die das römische System beschäftigt sieben aktivieren lateinische Buchstaben I, V, X, L, C, D, M .

Ursprünglich gab es keine Einzelbuchstabenbezeichnung für Null. Stattdessen verwendeten sie das lateinische Wort Nulla , was "keine" bedeutet.

Wie funktionieren römische Ziffern?

Die hindu-arabische Darstellung dieser Buchstaben ist wie folgt: I = 1, V = 5, X = 10, L = 50, C = 100, D = 500 und M = 1000 .

Andere Zahlen werden gebildet, indem diese Buchstaben nach bestimmten Regeln kombiniert werden: Ein Symbol nach dem anderen mit gleichem oder höherem Wert addiert seinen Wert.

Zum Beispiel ist   VI = V + I = 5 + 1 = 6 oder LX = L + X = 50 + 10 = 60 .Die Notationen VI und LX werden als "eins mehr als fünf" und "zehn mehr als fünfzig" gelesen.

Ein Symbol vor einem der größeren Werte subtrahiert seinen Wert. Zum Beispiel ist IX = X - I = 10 - 1 = 9 und XC = C - X = 100 - 10 = 90 .

Die Notationen IX und XC werden als "eins weniger als zehn" und "zehn weniger als hundert" gelesen.

Zahlen größer als 1.000 werden gebildet, indem ein Strich über das Symbol gesetzt wird. Somit ist V̅ = 5.000 , X̅ = 10.000 , L̅ = 50.000 , C̅ = 100.000 , D̅ = 500.000 und M̅ = 1.000.000 .

Das sogenannte "Standard" -Formular verbietet die Verwendung desselben Symbols mehr als dreimal hintereinander. Aber gelegentlich können Ausnahmen gesehen werden. Zum Beispiel IIII für Nummer 4, VIIII für Nummer 9 und LXXXX für 90.

Ein interaktives Diagramm römischer Ziffern und ihrer Kombinationen

Bewegen Sie den Mauszeiger über jedes Symbol, um das hindu-arabische Äquivalent anzuzeigen:

I II III IV V VI VII VIII IX X XX XXX XL L LX LXX LXXX XC C CC CCC CD D DC DCC DCCC CM M V̅ X̅ L̅ C̅ D̅ M̅

Ich habe den Code für diese interaktive römische Zifferntabelle geschrieben, die hier in freeCodeCamp News eingebettet werden soll.

Angesichts der Tatsache, dass die HTML-Einbettungsfunktion kein vollständiger Code-Editor ist, ist der angegebene Code nicht strukturiert und wird als separate HTML-, CSS- und JavaScript-Dateien dargestellt. Vielmehr wird es als einzelne HTML-Datei geschrieben und Elemente für Stil und Funktionalität hinzugefügt.

Hier ist das vollständige Code-Repository für meine interaktive römische Zifferntabelle.

Römischer Zahlenkonverter

Geben Sie eine nicht negative Ganzzahl zwischen 0 und 5.000 ein. Klicken Sie dann auf Konvertieren, um ein Äquivalent einer römischen Zahl anzuzeigen.

Arabisch bis Römisch
Konvertieren

Es gibt keine programmatische Beschränkung auf die Zahl 5.000 oder höher. Der Algorithmus, der die Konvertierung steuert, würde trotzdem funktionieren.

Der Platz, der erforderlich ist, um römische Ziffernäquivalente großer Zahlen anzuzeigen, wird immer größer, ohne dass ein neuer Vorteil darin besteht, etwas Neues zu enthüllen.

Der Code selbst besteht aus einem HTML-Teil, der den Inhalt mit Inline-Stilen beschreibt, um die Interaktion zu vereinfachen, und JavaScript für die Funktionalität hinzugefügt.

Das ist ein Eingabeelement vom Typ "Nummer", um Eingabedaten auf numerische Werte und zwei Schaltflächen zu beschränken. Die Schaltfläche "Konvertieren" ist mit der Funktion verbunden, die die Konvertierung durchführt, und die Schaltfläche "Anzeigen" gibt die entsprechende römische Zahl aus.

Warum über ein Schaltflächenelement ausgeben? Das Styling funktionierte gut, wenn es auf beide Tasten zusammen angewendet wurde. Angesichts der eingeschränkten Funktionalität der Einbettung schien dies eine Zeitersparnis zu sein.

Aus Gründen der Übersichtlichkeit sind diese Elemente Variablen zugeordnet:

const inputField = document.querySelector('input'); // input element const convertButton = document.getElementById('convert'); // convert button const outputField = document.getElementById('display'); // output element

Die Funktion convertToRoman()enthält die Logik und rendert das Ergebnis:

function convertToRoman() { let arabic = document.getElementById('arabicNumeral').value; // input value let roman = ''; // variable that will hold the result }

Der numerische Wert vom Eingabeelement wird zur weiteren Prüfung in einer Variablen namens " Arabisch " gespeichert . Die Variable " roman " enthält die Zeichenfolge, die das römische Äquivalent der arabischen Eingabe darstellt.

Als nächstes gibt es zwei Arrays gleicher Länge, eines mit arabischen Ziffern und eines mit ihren römischen Gegenstücken. Beide sind in absteigender Reihenfolge, um die Subtraktion zu vereinfachen:

// descending order simplifies subtraction while looping const arabicArray = [5000, 4000, 1000, 900, 500, 400, 100, 90, 50, 40, 10, 9, 5, 4, 1] const romanArray = ['V̅', 'MV̅','M', 'CM', 'D', 'CD', 'C', 'XC', 'L', 'XL', 'X', 'IX', 'V', 'IV', 'I'] 

Unicode-Tabellen helfen beim Bilden von Symbolen größer als 1.000.

Schließlich ist hier die Logik, die die eingegebene Zahl testet und konvertiert.

if (/^(0|[1-9]\d*)$/.test(arabic)) { // Regular expression tests if (arabic == 0) { // for decimal points and negative outputField.innerHTML = "Nulla"; // signs } else if (arabic != 0) { for (let i = 0; i < arabicArray.length; i++) { while (arabicArray[i] <= arabic) { roman += romanArray[i]; arabic -= arabicArray[i]; } } outputField.innerHTML = roman; } } else { outputField.innerHTML = "Please enter non negative integers only. No decimal points."; }

Der erste Test prüft auf Dezimalstellen und negative Vorzeichen. Wenn gefunden, werden Sie aufgefordert, "nur nicht negative Ganzzahlen einzugeben".

Der nächste Test prüft, ob die eingegebene Zahl gleich Null ist. In diesem Fall wird die Zeichenfolge "Nulla" angezeigt.

Andernfalls verketten die Schleifen weiterhin römische Zeichenfolgen, während sie arabische Zahlen subtrahieren, bis letztere die Bedingung für die while-Schleife erfüllen. Dann wird das römische Äquivalent der Benutzereingabe angezeigt.

Just like with the interactive chart, the code for the Roman Numeral Converter is all set for you to copy it and embed it into any article. Here's the full code repository.