Différences entre versions de « Js algo td1 »

De The Linux Craftsman
Aller à la navigation Aller à la recherche
Ligne 220 : Ligne 220 :
 
= Exercice 6 =
 
= Exercice 6 =
 
Afficher un tableau qui indique pour chacune des lettres de l'alphabet son code.
 
Afficher un tableau qui indique pour chacune des lettres de l'alphabet son code.
 +
 +
<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>
 +
      <hr />
 +
      a = <input type="text" id="a" value="2">
 +
      <br />
 +
      b = <input type="text" id="b" value="3">
 +
      <hr/>
 +
      <div id="alphabet"></div>
 +
      <script type="text/javascript">
 +
        afficheAlphabet();
 +
      </script>
 +
  </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">
 +
function afficheAlphabet(){
 +
  var div_alphabet = document.getElementById("alphabet");
 +
  for ( var index in alphabet) {
 +
      var image = (getA()*index+getB())%26;
 +
      div_alphabet.innerHTML += alphabet[index]+" --> "+index+" --> "+image+" --> "+alphabet[image] +"<br/>";
 +
  }
 +
}
 +
</source>
 +
</div>

Version du 12 mars 2014 à 20:31

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.

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>
      <hr />
      a = <input type="text" id="a" value="2">
      <br /> 
      b = <input type="text" id="b" value="3">
   </body>
</html>


globals.js 

var default_a = 2;
var default_b = 3;

function getA(){
   var a = document.getElementById('a').value;
   if(a == ""){
      return default_a;
   }
   return a;
}

function getB(){
   var b = document.getElementById('b').value;
   if(b == ""){
      return default_b;
   }
   return b;
}


hill.js 

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

Exercice 6

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

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>
      <hr />
      a = <input type="text" id="a" value="2">
      <br /> 
      b = <input type="text" id="b" value="3">
      <hr/>
      <div id="alphabet"></div>
      <script type="text/javascript">
         afficheAlphabet();
      </script>
   </body>
</html>


globals.js 

function afficheAlphabet(){
   var div_alphabet = document.getElementById("alphabet");
   for ( var index in alphabet) {
      var image = (getA()*index+getB())%26;
      div_alphabet.innerHTML += alphabet[index]+" --> "+index+" --> "+image+" --> "+alphabet[image] +"<br/>";
   }
}
Récupérée de « https://tala-informatique.fr/index.php?title=Js_algo_td1&oldid=991 »