Comment créer un convertisseur de chiffres romains et un graphique interactif en chiffres romains

Les chiffres romains ne font plus partie intégrante de notre vie quotidienne. Mais nous les utilisons pour concevoir des monuments, des horloges et même pour des événements sportifs.

Quels sont les chiffres romains?

Les chiffres romains sont originaires de la Rome antique et sont restés la manière courante d'écrire les nombres dans toute l'Europe pendant de nombreux siècles. Leur utilisation a longtemps survécu à l'empire romain lui-même. Ils ont été progressivement remplacés par le système de numération hindou-arabe que nous utilisons aujourd'hui - les nombres de zéro à neuf.

Les chiffres romains sont représentés par des combinaisons de lettres de l'alphabet latin, qui servent de chiffres dans ce système. Mais la base décimale à la différence, avec des symboles 0 à 9 , le système romain emploie sept lettres majuscules latins I, V, X, L, C, D, M .

À l'origine, il n'y avait pas de désignation d'une seule lettre pour zéro. Au lieu de cela, ils ont utilisé le mot latin Nulla , qui signifie «aucun».

Comment fonctionnent les chiffres romains?

La représentation hindou-arabe de ces lettres est la suivante: I = 1, V = 5, X = 10, L = 50, C = 100, D = 500 et M = 1000 .

D'autres nombres sont formés en combinant ces lettres selon certaines règles: Un symbole placé après un autre de valeur égale ou supérieure, ajoute sa valeur.

Par exemple,   VI = V + I = 5 + 1 = 6 ou LX = L + X = 50 + 10 = 60 .Les notations VI et LX sont lues comme "un de plus de cinq" et "dix de plus de cinquante".

Un symbole placé avant l' une des valeurs supérieures soustrait sa valeur. Par exemple, IX = X - I = 10 - 1 = 9 et XC = C - X = 100 - 10 = 90 .

Les notations IX et XC sont lues comme «un de moins de dix» et «dix de moins de cent».

Les nombres supérieurs à 1 000 sont formés en plaçant un tiret sur le symbole. Ainsi V̅ = 5 000 , X̅ = 10 000 , L̅ = 50 000 , C̅ = 100 000 , D̅ = 500 000 et M̅ = 1 000 000 .

La forme dite "standard" interdit l'utilisation du même symbole plus de trois fois de suite. Mais parfois, des exceptions peuvent être observées. Par exemple, IIII pour le numéro 4, VIIII pour le numéro 9 et LXXXX pour 90.

Un graphique interactif des chiffres romains et de leurs combinaisons

Survolez chaque symbole pour révéler son équivalent hindou-arabe:

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̅

J'ai écrit le code de ce tableau interactif en chiffres romains à intégrer ici sur freeCodeCamp News.

Étant donné que la fonctionnalité d'intégration HTML n'est pas un éditeur de code à grande échelle, le code donné n'est pas structuré et présenté sous forme de fichiers HTML, CSS et JavaScript distincts. Au contraire , il est écrit sous la forme d' un seul fichier HTML avec et éléments ajoutés pour le style et la fonctionnalité.

Voici le référentiel de code complet pour mon graphique interactif en chiffres romains.

Convertisseur de chiffres romains

Entrez un entier non négatif compris entre 0 et 5 000. Cliquez ensuite sur Convertir pour révéler un équivalent en chiffres romains.

De l'arabe au romain
Convertir

Il n'y a aucune limitation programmatique au nombre de 5 000 ou au-delà. L'algorithme qui régit la conversion fonctionnerait tout de même.

L'espace requis pour afficher les équivalents en chiffres romains de grands nombres devient de plus en plus grand sans grand avantage supplémentaire de révéler quelque chose de nouveau.

Le code lui-même se compose d'une partie HTML décrivant le contenu avec des styles en ligne pour faciliter l'interaction et du JavaScript ajouté pour la fonctionnalité.

Le est un élément d'entrée de type «nombre» pour limiter les données d'entrée à des valeurs numériques et à deux boutons. Le bouton "Convertir" est connecté à la fonction qui effectue la conversion, et le bouton "Afficher" génère l'équivalent du nombre romain.

Pourquoi sortir via un élément bouton? Le style fonctionnait bien lorsqu'il était appliqué aux deux boutons ensemble. Et compte tenu de la fonctionnalité limitée de l'intégration, cela semblait être un gain de temps.

Pour plus de clarté, ces éléments sont affectés à des variables:

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

La fonction convertToRoman()contient la logique et rend le résultat:

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

La valeur numérique de l'élément d'entrée est enregistrée dans une variable appelée " arabe " pour des tests supplémentaires. La variable nommée " roman " contiendra la chaîne représentant l'équivalent romain de l'entrée arabe.

Ensuite, il y a deux tableaux de longueurs égales, l'un contenant des chiffres arabes et l'autre contenant leurs homologues romains. Les deux sont dans l'ordre décroissant pour simplifier la soustraction:

// 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'] 

Les tables Unicode aident à former des symboles supérieurs à 1000.

Enfin, voici la logique qui teste le nombre entré et le convertit.

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."; }

Le premier test vérifie les points décimaux et les signes négatifs. S'il est trouvé, le message demande «d'entrer uniquement des entiers non négatifs».

Le test suivant vérifie si le nombre entré est égal à zéro. Dans ce cas, la chaîne "Nulla" s'affiche.

Sinon, les boucles continuent de concaténer des chaînes romaines tout en soustrayant des nombres arabes jusqu'à ce que ces derniers remplissent la condition de la boucle while. Ensuite, il affiche l'équivalent romain de l'entrée utilisateur.

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.