Différences entre versions de « Js algo td1 »
(6 versions intermédiaires par le même utilisateur non affichées) | |||
Ligne 51 : | Ligne 51 : | ||
Exemple : <math>code\_chiffre = [0,12,8]</math> → <math>code\_chiffre\_mot(code\_chiffre) = AMI</math> | Exemple : <math>code\_chiffre = [0,12,8]</math> → <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> → <math>code\_chiffre\_chiffre(code\_chiffre) = [3, 1, 19]</math> | Exemple : <math>code\_chiffre = [0, 12, 8]</math> → <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 = | ||
Ligne 63 : | 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: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éliorer l'interface graphique en proposant deux champs qui permettent de modifier les paramètres 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 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: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 à 20: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 :
- on lui associe l’entier
- on calcule l'image soit .
- le reste de la division de 33 par 26 est 7.
- 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/>";
}
}