recherche

Maison >interface Web >js tutoriel >Comment construire une machine à chiffre avec JavaScript

Comment construire une machine à chiffre avec JavaScript

Joseph Gordon-Levitt
Joseph Gordon-Levittoriginal
2025-02-14 09:34:11498parcourir

Ce tutoriel vous montre comment construire une machine de chiffre Caesar à l'aide de JavaScript. Le chiffre de César déplace chaque lettre dans un message un certain nombre d'endroits.

How to Build a Cipher Machine with JavaScript

Nous allons créer une page HTML avec un formulaire pour saisir le message et la valeur de décalage, et un div pour afficher le résultat crypté.

Le code JavaScript comprend:

  • un tableau d'alphabet.
  • Manipulation DOM pour accéder aux éléments de formulaire.
  • un gestionnaire d'événements pour le bouton de soumission.
  • une fonction encrypt appliquant le chiffre de César, manipulant des caractères non alphabet et la sensibilité aux cas.

Voici un exemple du code fini. Expérimentez la création de messages secrets!

Tout d'abord, créez caesar.html: 

<code class="language-html"><!DOCTYPE html>


  <meta charset="utf-8">
  <title>Caesar Cipher</title>


  <h1>Caesar Cipher</h1>
  <form>
    <label>Plaintext:</label>
    <textarea name="plaintext">Top Secret</textarea><br>
    <label>Shift:</label>
    <input type="number" name="shift" value="5" min="1" max="26">
    <input type="submit" value="encrypt">
  </form>
  <h2>Output</h2>
  <div id="output"></div>
  

</code>

Ce HTML crée une forme simple. L'entrée de changement par défaut est à 5, mais vous pouvez l'ajuster.

Ensuite, créez main.js dans le même dossier: 

<code class="language-javascript">const alphabet = [
  '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'
];

const form = document.forms[0];
const output = document.getElementById('output');

form.addEventListener ('submit',event => {
  event.preventDefault();
  output.innerHTML = [...form.plaintext.value].map(char => encrypt(char)).join('');
});

function encrypt(char) {
  const shift = Number(form.shift.value);
  if (alphabet.includes(char.toUpperCase())) {
    const position = alphabet.indexOf(char.toUpperCase());
    const newPosition = (position + shift)%26;
    return alphabet[newPosition];
  } else {
    return char;
  }
}</code>

Ce code JavaScript définit l'alphabet, obtient des éléments de formulaire, ajoute un écouteur d'événements pour gérer la soumission de formulaire et comprend la fonction encrypt qui exécute le chiffre Caesar. La fonction encrypt gère les lettres majuscules; Les lettres minuscules sont gérées implicitement par les méthodes includes et indexOf.

How to Build a Cipher Machine with JavaScript

Cela complète la machine à chiffre de Caesar. N'oubliez pas qu'il s'agit d'un chiffre simple et ne convient pas à une communication sécurisée.

Questions fréquemment posées (FAQ) (résumé pour la brièveté)

  • Caesar Cipher: A Substitution Cipher Lettres de change un nombre fixe de places.
  • Implémentation JavaScript: Créer une fonction itérative à travers la chaîne, décalé les positions des lettres et manipulation de caractères et de cas non alphabétiques.
  • Caractères non alphabetes: Vérifiez si un caractère est une lettre avant de se déplacer; Sinon, gardez-le inchangé.
  • Sensibilité à la caisse: Convertissez l'entrée en majuscules ou en minuscules avant le traitement, ou gérez les cas individuellement.
  • DESCRATIONS: Changement de déplacements dans la direction opposée en utilisant la valeur de décalage connue. Si vous êtes inconnu, essayez tous les changements possibles.
  • Optimisation: pré-calculer des valeurs décalées ou utiliser un StringBuilder pour une manipulation de chaîne plus rapide.
  • Sécurité: non sécurisé; Utilisez des algorithmes modernes comme les EI pour le cryptage sécurisé.
  • s'étendant à d'autres chiffres: Résumé la logique de change dans une fonction distincte, remplaçable avec d'autres implémentations de chiffre.
  • Test: Crypt le texte en clair connu avec une valeur de décalage connue et vérifiez la sortie. Utilisez un cadre de test pour les tests automatisés.
  • Caractères spéciaux: Créez un alphabet personnalisé, y compris tous les caractères souhaités.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

JavaScript html String Array if for try using Event JS number function dom this display input Access Other
Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：XmlHttpRequest vs l'API Fetch pour ajaxArticle suivant：XmlHttpRequest vs l'API Fetch pour ajax

Articles Liés

Voir plus