Différences entre versions de « Js algo td1 »

De The Linux Craftsman
Aller à la navigation Aller à la recherche
 
(11 versions intermédiaires par 2 utilisateurs non affichées)
Ligne 25 : Ligne 25 :
  
 
Exemple : mot <math>AMI</math> &rarr; <math>code\_mot\_chiffre(mot) = [0, 12, 8]</math>
 
Exemple : mot <math>AMI</math> &rarr; <math>code\_mot\_chiffre(mot) = [0, 12, 8]</math>
 +
 +
<div class="toccolours mw-collapsible mw-collapsed" style="width:700px">
 +
<big>Solution</big>
 +
<source lang="javascript" style="border:1px solid black;font-size:130%" class="mw-collapsible-content">
 +
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;
 +
}
 +
</source>
 +
</div>
  
 
= Exercice 2 =
 
= Exercice 2 =
Ligne 30 : Ligne 51 :
  
 
Exemple : <math>code\_chiffre = [0,12,8]</math> &rarr; <math>code\_chiffre\_mot(code\_chiffre) = AMI</math>
 
Exemple : <math>code\_chiffre = [0,12,8]</math> &rarr; <math>code\_chiffre\_mot(code\_chiffre) = AMI</math>
 +
 +
<div class="toccolours mw-collapsible mw-collapsed" style="width:700px">
 +
<big>Solution</big>
 +
<source lang="javascript" style="border:1px solid black;font-size:130%" class="mw-collapsible-content">
 +
function code_chiffre_mot(code_chiffre){
 +
  var resultat = new Array();
 +
  for ( var index in code_chiffre) {
 +
      resultat[index] = alphabet[code_chiffre[index]];
 +
  }
 +
  return resultat;
 +
}
 +
</source>
 +
</div>
 +
 
= Exercice 3 =
 
= 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 <math>2n + 3</math>, où ''n'' est le numéro de la lettre à coder.
 
É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 <math>2n + 3</math>, où ''n'' est le numéro de la lettre à coder.
  
 
Exemple : <math>code\_chiffre = [0, 12, 8]</math> &rarr; <math>code\_chiffre\_chiffre(code\_chiffre) = [3, 1, 19]</math>
 
Exemple : <math>code\_chiffre = [0, 12, 8]</math> &rarr; <math>code\_chiffre\_chiffre(code\_chiffre) = [3, 1, 19]</math>
 +
 +
<div class="toccolours mw-collapsible mw-collapsed" style="width:700px">
 +
<big>Solution</big>
 +
<source lang="javascript" style="border:1px solid black;font-size:130%" class="mw-collapsible-content">
 +
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;
 +
}
 +
</source>
 +
</div>
  
 
= Exercice 4 =
 
= Exercice 4 =
Faite une interface graphique qui permette de saisir le mot à coder et qui affiche le mot codé.  
+
Faire une interface graphique qui permette de saisir le mot à coder et qui affiche le mot codé.  
  
 
Cette interface comprendra:
 
Cette interface comprendra:
* un champ ''input'' de type ''text'' pour la saisie du mot à codé
+
* un champ ''input'' de type ''text'' pour la saisie du mot à coder
 
* 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:1455px">
 +
<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 =
Améliorez l'interface graphique en proposant deux champs qui permettent de modifier les paramètre a et b de la fonction affine.
+
Améliorer l'interface graphique en proposant deux champs qui permettent de modifier les paramètres a et b de la fonction affine.
 +
 
 +
<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">
 +
  </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 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;
 +
}
 +
</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 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;
 +
}
 +
</source>
 +
</div>
 +
 
 
= Exercice 6 =
 
= Exercice 6 =
Afficher un tableau qui indique pour chacune des lettres l'alphabet sont 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:1035px">
 +
<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 actuelle datée du 12 mars 2014 à 21:34

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/>";
   }
}