Exercices Messages secrets

Exercice - Messages secrets

Le but de cet exercice est de créer un encodeur / décodeur de message secret, en convertissant une chaîne de caractère en nombre, et inversement.

Pour cela, nous avons besoin d'un champ HTML pour écrire notre message, et de deux boutons "Encoder" et "Décoder". Enfin un paragraphe pour obtenir le résultat.

Code HTML

<textarea id="input"></textarea>
<button id="encode">Encode</button>
<button id="decode">Decode</button>
<p id="output"></p>

La première étape consiste donc à gérer l’événement click sur le bouton "Encode". Lors du clic la fonction encode sera appellée.

document.getElementById('encode').addEventListener('click', encode);
function encode () {

}

Cette fonction encode() récupère la valeur actuelle du champ de formulaire, encode le texte et le définit comme contenu HTML du paragraphe:

// récupérer la valeur du champ de formulaire
let valeurTexte = document.getElementById('input').value;
// encoder le texte
let texteEncode = encodeText(valeurTexte);
// définir comme contenu HTML
document.getElementById('output').innerHTML = texteEncode;

La fonction encodeText() doit retourner un nombre pour chaque caractère de la chaîne, séparée par un point. Ce nombre est retourné via la méthode maChaine.charCodeAt(i):

Il ne reste ensuite plus qu'à faire l'inverse. C'est à dire une fonction décode qui récupère une suite de nombre séparés par des points et qui crée une chaîne de caractères. Vous aurez besoin de String.fromCharCode(code) (méthode statique de la classe String)

• Bonus: Pour un meilleur support (et une meilleure accessibilité), utilisez un formulaire et écoutez l’événement submit au lieu de click