Différences entre versions de « Js algo td1 »

De The Linux Craftsman
Aller à la navigation Aller à la recherche
Ligne 91 : Ligne 91 :
 
* un bouton qui permettra de déclencher l'opération de codage
 
* un bouton qui permettra de déclencher l'opération de codage
 
* une ''div'' qui affichera le résultat
 
* une ''div'' qui affichera le résultat
 +
 +
 +
<div class="toccolours mw-collapsible mw-collapsed" style="width:700px">
 +
<big>index.html</big>
 +
<source lang="html4strict" style="border:1px solid black;font-size:130%" class="mw-collapsible-content">
 +
<!DOCTYPE html>
 +
<html>
 +
  <head>
 +
      <meta charset="UTF-8">
 +
      <title>Chiffrement de Hill</title>
 +
      <script type="text/javascript" src="js/globals.js"></script>
 +
      <script type="text/javascript" src="js/hill.js"></script>
 +
  </head>
 +
  <body>
 +
      <input type="text" id="mot" value="ami">
 +
      <button onClick="chiffrer();">Chiffrer</button>
 +
      <hr />
 +
      <div>
 +
        Résultat:
 +
        <div id="resultat">entrez un mot à coder</div>
 +
      </div>
 +
  </body>
 +
</html>
 +
</source>
 +
</div>
 +
 +
 +
<div class="toccolours mw-collapsible mw-collapsed" style="width:700px">
 +
<big>globals.js</big>
 +
<source lang="javascript" style="border:1px solid black;font-size:130%" class="mw-collapsible-content">
 +
var alphabet = new Array("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");
 +
 +
function getMot(){
 +
  var mot = document.getElementById('mot').value;
 +
  return mot.split("");
 +
}
 +
 +
function afficheMot(mot){
 +
  document.getElementById('resultat').innerHTML = mot;
 +
}
 +
</source>
 +
</div>
 +
 +
 +
<div class="toccolours mw-collapsible mw-collapsed" style="width:700px">
 +
<big>hill.js</big>
 +
<source lang="javascript" style="border:1px solid black;font-size:130%" class="mw-collapsible-content">
 +
function chiffrer(){
 +
  var mot = getMot();
 +
  var code_chiffre = code_mot_chiffre(mot);
 +
  var code = code_chiffre_chiffre(code_chiffre);
 +
  afficheMot(code_chiffre_mot(code));
 +
}
 +
</source>
 +
</div>
  
 
= Exercice 5 =
 
= Exercice 5 =

Version du 12 mars 2014 à 21:26

Introduction

Pour coder un message, on procède de la manière suivante : à chacune des 26 lettres de l’alphabet, on commence par associer un entier n de l’ensemble selon le tableau ci-dessous :

A B C D ... V W X Y Z
0 1 2 3 ... 21 22 23 24 25

Puis on associe à tout entier n de le reste de la division euclidienne de par 26 ; ce reste est alors associé à la lettre correspondante.

Exemple

Pour coder la lettre P on procède de la manière suivante :

  1. on lui associe l’entier
  2. on calcule l'image soit .
  3. le reste de la division de 33 par 26 est 7.
  4. on associe 7 à H. Donc P est codé par la lettre H.

Les étapes 2 et 3 sont appelées codage affine.

Exercice 1

Ecrire une fonction code_mot_chiffre(mot) dont le paramètre est la chaîne de caractères mot. Cette fonction renvoie le code chiffre.

Exemple : mot →

Solution 

function code_mot_chiffre(mot){
   var resultat = new Array();
   for ( var index in mot) {
      var i = 0;
      var found = false;
      while(!found && i < alphabet.length){
         if(mot[index] == alphabet[i]){
            resultat[index] = i;
            found = true;
         }
         i++;
      }
   }
   return resultat;
}

Exercice 2

Écrire une fonction code_chiffre_mot(code_chiffre) dont le paramètre est la liste de chiffres code_chiffre. Cette fonction renvoie la chaîne de caractères correspondante.

Exemple : →

Solution 

function code_chiffre_mot(code_chiffre){
   var resultat = new Array();
   for ( var index in code_chiffre) {
      resultat[index] = alphabet[code_chiffre[index]];
   }
   return resultat;
}

Exercice 3

Écrire une fonction code_chiffre_chiffre(code_chiffre) dont le paramètre est la liste de chiffres code_chiffre qui renvoie le code_chiffre en utilisant la formule : Reste de la division par 26 de , où n est le numéro de la lettre à coder.

Exemple : →

Solution 

function code_chiffre_chiffre(code_chiffre){
   var resultat = new Array();
   for ( var index in code_chiffre) {
      var calcul = (2*code_chiffre[index]+3)%26;
      resultat[index] = calcul;
   }
   return resultat;
}

Exercice 4

Faire une interface graphique qui permette de saisir le mot à coder et qui affiche le mot codé.

Cette interface comprendra:

  • un champ input de type text pour la saisie du mot à coder
  • un bouton qui permettra de déclencher l'opération de codage
  • une div qui affichera le résultat


index.html 

<!DOCTYPE html>
<html>
   <head>
      <meta charset="UTF-8">
      <title>Chiffrement de Hill</title>
      <script type="text/javascript" src="js/globals.js"></script>
      <script type="text/javascript" src="js/hill.js"></script>
   </head>
   <body>
      <input type="text" id="mot" value="ami">
      <button onClick="chiffrer();">Chiffrer</button>
      <hr />
      <div>
         Résultat:
         <div id="resultat">entrez un mot à coder</div>
      </div>
   </body>
</html>


globals.js 

var alphabet = new Array("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");

function getMot(){
   var mot = document.getElementById('mot').value;
   return mot.split("");
}

function afficheMot(mot){
   document.getElementById('resultat').innerHTML = mot; 
}


hill.js 

function chiffrer(){
   var mot = getMot();
   var code_chiffre = code_mot_chiffre(mot);
   var code = code_chiffre_chiffre(code_chiffre);
   afficheMot(code_chiffre_mot(code));
}

Exercice 5

Améliorer l'interface graphique en proposant deux champs qui permettent de modifier les paramètres a et b de la fonction affine.

Exercice 6

Afficher un tableau qui indique pour chacune des lettres de l'alphabet son code.

Récupérée de « https://www.tala-informatique.fr/wiki/index.php?title=Js_algo_td1&oldid=989 »