Traducteur de Code Morse réalisé en HTML

Code Morse :

Pour créer un script HTML 1 qui traduit le texte entré dans une boîte de saisie en code Morse, vous pouvez utiliser une combinaison de HTML pour la structure de la page et de JavaScript2 pour la logique de conversion.

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="author" content="F4HXN">
    <meta name="description" content="Traducteur de Code Morse">
    <meta name="copyright" content="Libre de droits">
    <title>Traducteur de Code Morse</title>
    <script>
        function traduireEnMorse() {
            const texte = document.getElementById("texteInput").value;
            const traduction = convertirEnMorse(texte);
            document.getElementById("morseOutput").innerText = traduction;
        }

        function convertirEnMorse(texte) {
            const alphabetMorse = {
                'A': '.-',    'B': '-...',  'C': '-.-.',  'D': '-..',
                'E': '.',     'F': '..-.',  'G': '--.',   'H': '....',
                'I': '..',    'J': '.---',  'K': '-.-',   'L': '.-..',
                'M': '--',    'N': '-.',    'O': '---',   'P': '.--.',
                'Q': '--.-',  'R': '.-.',   'S': '...',   'T': '-',
                'U': '..-',   'V': '...-',  'W': '.--',   'X': '-..-',
                'Y': '-.--',  'Z': '--..',
                '0': '-----', '1': '.----', '2': '..---', '3': '...--',
                '4': '....-', '5': '.....', '6': '-....', '7': '--...',
                '8': '---..', '9': '----.', ' ': ' '
            };

            return texte.toUpperCase().split('').map(letter => alphabetMorse[letter]).join(' ');
        }
    </script>
</head>
<body>
    <h1>Traducteur de Texte en Code Morse</h1>
    <input type="text" id="texteInput" oninput="traduireEnMorse()" placeholder="Entrez le texte ici">
    <p>Code Morse :</p>
    <div id="morseOutput" style="white-space: pre;"></div>
</body>
</html>

Explications :

Un champ de saisie (input type=”text”) permet à l’utilisateur d’entrer du texte.
L’ évènement oninput sur le champ de saisie déclenche la fonction traduireEnMorse chaque fois que l’utilisateur tape quelque chose.
La fonction convertirEnMorse prend le texte entré, le convertit en majuscules, le divise en lettres, et remplace chaque lettre par son équivalent en code Morse en utilisant le dictionnaire alphabetMorse.
Le résultat est affiché dans un élément avec l’ID morseOutput.

(1) Le HTML (HyperText Markup Language) est le langage de balisage standard utilisé pour créer et structurer des pages web. Il fonctionne en utilisant des balises pour délimiter et définir le contenu, tel que le texte, les images et les liens, permettant ainsi aux navigateurs web d’afficher le contenu de manière structurée. HTML est fondamental dans le développement web, formant la structure de base sur laquelle et les scripts JavaScript sont appliqués pour créer des sites web interactifs et visuellement attrayants.

(2) JavaScript est un langage de programmation puissant et flexible, couramment utilisé pour ajouter de l’interactivité, du dynamisme et des fonctionnalités complexes aux pages web. Il s’exécute principalement côté client dans les navigateurs web, permettant de manipuler le contenu du document, de gérer les évènements utilisateur et de communiquer avec des serveurs web.

Bon codage 😉

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *