- LightNoxMembre
- Nombre de messages : 1759
Age : 32
Localisation : Chez Moi ^^
Date d'inscription : 10/04/2008
[PROG] Atelier d'apprentissage du Javascript/Web
Mer 20 Jan 2016 - 14:25
Cour N°1: Algorithme de César !
1/ Qu'est-ce que l'Algorithme de César ?
L'Algorithme de César et une méthode de cryptographie des messages très ancienne, elle permet de remplacer un caractère par un autre de façon
mono-alphabétique, suivant un décalage donné.
Si on prend une phrase simple comme :
"bonjour tous le monde"
Et qu'on lui applique un décalage de 2 ça donne ceci :
"dqplqwt vqwu ng oqpfg"
Votre message a donc bien étais crypter et seul le récepteur de se message pourra le décrypter si il possède la clé de décryptage qui est donc sur
cet exemple 2.
L'explication de cet algorithme reste simple et donc on fera pour cela un exemple simple aussi.
2/ Préparer les outils pour bien coder :
C'est ce que nous allons voir ici est pour ça nous allons utiliser un peu de HTML5 et CSS3 avec derrière notre script JAVASCRIPT.
Le code que je vais vous montrer et certe un code simpliste qui fais sont taf ! Mais, qui comporte quelque faille de décryptage et c'est normal pour le
moment.
Commençons par le commencement :
Tout d'abord vous allez créer un dossier que vous nommerez CryptageCesar (par exemple) et dedans vous allez créer trois fichier :
- index.html
- style.css
- script.js
Ensuite prenez votre éditeur de texte préférer et ouvrez y ces trois fichiers, si vous en avez pas je vous conseille notepad ++ sur Windows ou Atom sur Linux.
Nous aurons besoin également d'un terminal de commande afin de simuler un serveur web, donc invite de commande sur Windows et terminal sur Linux.
- Pour Windows:
Tapez :
cd CryptageCesar
Ensuite :
python -m http.server [8000]
Sinon regarder ici :
[Vous devez être inscrit et connecté pour voir ce lien]
- Pour Linux:
Tapez :
cd CrypageCesar
normalement vous aurez quelque chose comme ceci :
VotreOrdi:~/CryptageCesar/
Ensuite vous aller tapez cette commande:
sudo apt-get install python
il va vous demander un mot de passe, mettez votre mot de passe de session.
une fois python installer tapez ceci :
python -m SimpleHTTPServeur 8000
Sa va vous permettre quand vous irez sur votre navigateur de voir un aperçu de vos modification en Local en mettant ceci dans la barre d'adresse :
[Vous devez être inscrit et connecté pour voir ce lien]
Voilà notre serveur Local et lancer on peut maintenant commencer a coder ^^.
3/ Le Code et Explication :
Tout d'abord avant de voir le JS nous avons besoin de préparer le terrain xD.
A/ HTML5:
Donc rendez-vous sur le fichier index.html.
mettez y ceci :
- Code:
<!DOCTYPE html>
<html>
<head>
<title>Cryptage</title>
<link rel="stylesheet" href="style.css" type="text/css">
<script src="script.js"></script>
</head>
<body>
<h3>Message clair:</h3>
<textarea id="message-clair" placeholder="Message clair"></textarea><br>
<input type="text" placeholder="Décallage" id="decallage">
<button onclick="crypter()" type="button" name="button">Crypter</button>
<h3>Message crypter:</h3>
<div id="message-crypte"></div>
</body>
</html>
Ne vous inquiétez pas je vais pas vous balancer du code sans explication donc on va décortiquer ce code html.
- Code:
<!DOCTYPE html>
Permet de dire sur quel type de document on travaille, ici c'est un document html.
- Code:
<html></html>
Permet de dire que c'est un document html.
- Code:
<head></head>
Tous ce qui va se trouver a l'intérieur de cette balise n'aura pas de rendu visuel sauf pour la balise suivante.
- Code:
<title></title>
Permet de définir le nom d'affichage de l'onglet du navigateur.
- Code:
<link rel="stylesheet" href="style.css" type="text/css">
Cette balise va permettre de récupérer notre fichier style.css dans notre dossier et d'appliquer notre code sur notre page html.
- Code:
<script src="script.js"></script>
Idem pour script.js, sauf que les balises changent.
- Code:
<body></body>
Ahhhhhh, nous arrivons petit à petit vers ce qui deviens excitant xD
Cette balise <body> permet de définir le corps de notre page html, tous les éléments à rendu visuel serons écrient à l'intérieur de cette balise.
(Craquement de doigt)
Bon ! maintenant faisons en sorte que dans notre page web nous ayons du contenu, c'est parti.
- Code:
<h3>Message clair:</h3>
<textarea id="message-clair" placeholder="Message clair"></textarea><br>
<input type="text" placeholder="Décallage" id="decallage">
<button onclick="crypter()" type="button" name="button">Crypter</button>
<h3>Message crypter:</h3>
<div id="message-crypte"></div>
- Code:
<h3>Message clair:</h3>
- Code:
<textarea id="message-clair" placeholder="Message clair"></textarea>
- id="message-clair" => permet de définir un identifiant unique a cette balise.
/!\ Attention une balise html peut contenir que 1 seul identifiant /!\
- placeholder="Message clair" => permet d'écrire par défaut un message à l'intérieur de notre zone de texte qui sera effacer automatiquement dès que le 1er caractère sera taper.
- Code:
<input type="text" placeholder="Décallage" id="decallage">
- Code:
<br>
- Code:
<button onclick="crypter()" type="button" name="button">Crypter</button>
- onclick="crypter()" => Ahah ! on verra ça après au moment ou on parlera du JS ^^.
- type="button" => Défini le type du bouton.
- name="button" => Je vous laisse devinez x).
Et "Crypter" sera le texte afficher sur le bouton.
- Code:
<div id="message-crypte"></div>
Et si je met le code que je viens de vous expliquer sans balise code ça donne ceci :
<h3>Message clair:</h3>
<textarea id="message-clair" placeholder="Message clair"></textarea><br>
<input type="text" placeholder="Décallage" id="decallage">
<button onclick="crypter()" type="button" name="button">Crypter</button>
<h3>Message crypter:</h3>
<div id="message-crypte"></div>
Voilà comme ça sa vous donne une petite idée ^^
B/ CSS3 :
Alors je ne vais pas m'attarder sur le CSS, je l'expliquerais dans un autre tuto que je ferais plus tard.
voici le code a mettre dans votre fichier style.css
- Code:
*{-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; margin: 5px}
textarea{width: 250px; height: 100px; margin-bottom: 20px;}
input{width: 70px;}
div{border: 1px solid #ccc; background-color: #e6e6e6; width: 250px; height: 100px;}
h3{text-decoration: underline;}
Vous remarquerez que l'aspect de notre page viens de changer légèrement, c'est la magie du CSS qui permet de faire des rendus impressionnant quand on le manipule a fond ^^.
Maintenant place au JAVASCRIPT !!!!!!!!!!
C/ JAVASCRIPT :
Bon bon bon, pour ce qui et du JAVASCRIPT, je ne vais pas rentrer dans des explications pointu car sinon j'en aurais pour l'après-midi et j'en ai déjà marre d'écrire donc je ferais court x).
Voici le code :
- Code:
function crypter(){
var alphaNormal = ["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"];
var clair = document.getElementById('message-clair').value;
var decaller = document.getElementById('decallage').value;
for(var i = 0; i < clair.length; i++){
if(clair[i] == " "){
crypter.innerHTML += " ";
}
else{
var idx = alphaNormal.indexOf(clair[i]);
var idxDecaler = (idx + parseInt(decaller)) % alphaNormal.length;
var lettreDecaler = alphaNormal[idxDecaler];
var crypter = document.getElementById('message-crypte');
crypter.innerHTML = crypter.innerHTML + lettreDecaler;
}
}
}
- Code:
function crypter(<arguments>){
<instructions>
}
- Code:
var alphaNormal = ["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"];
var clair = document.getElementById('message-clair').value;
var decaller = document.getElementById('decallage').value;
La on déclare nos variables et on les affectent.
- la variable alphaNormal est un tableau qui contient tous les caractères de notre alphabet.
l'index d'un tableau en JS et comme dans d'autre langage de programmation commence a 0 donc la notre lettre "a" est à l'index 0 de notre tableau alphaNormal.
- la variable clair permet de récupérer dans notre document html, l'id contenu dans notre balise
- Code:
<textarea>
- la variable decaller permet de récupérer dans notre document html, l'id contenu dans notre balise
- Code:
<input>
- Code:
for(var i = 0; i < clair.length; i++){
if(clair[i] == " "){
crypter.innerHTML += " ";
}
else{
var idx = alphaNormal.indexOf(clair[i]);
var idxDecaler = (idx + parseInt(decaller)) % alphaNormal.length;
var lettreDecaler = alphaNormal[idxDecaler];
var crypter = document.getElementById('message-crypte');
crypter.innerHTML = crypter.innerHTML + lettreDecaler;
}
}
Maintenant on défini notre boucle "for" qui va permettre de crypter notre message.
Quelques explications :
- Code:
for(var i = 0; i < clair.length; i++)
- Code:
if(clair[i] == " "){
crypter.innerHTML += " ";
}
else{
var idx = alphaNormal.indexOf(clair[i]);
var idxDecaler = (idx + parseInt(decaller)) % alphaNormal.length;
var lettreDecaler = alphaNormal[idxDecaler];
var crypter = document.getElementById('message-crypte');
crypter.innerHTML = crypter.innerHTML + lettreDecaler;
}
Notre condition "if" permet de voir si notre chaîne de caractères contient des espaces, et si il y en à de ne pas les crypter et de les afficher normalement à l'écran.
Et pour finit notre condition "else":
- var idx permet de récupérer la valeur de l'index de notre tableau correspondant à notre chaîne de caractères.
- var idxDecaller permet d'ajouter notre index a notre décalage écris dans notre balise "input" de la transformer en entier et de fixer la limite de notre tableau.
- var lettreDecaller permet d'appliquer notre décalage au index de notre tableau.
- var crypter permet de récupérer dans notre document html, l'id contenu dans notre balise "div".
- crypter.innerHTML = crypter.innerHTML + lettreDecaler;
Avant de passer à l'explication de cette ligne une petit précision s'impose.
le .innerHTML c'est tout ce qui est entre un balise html pour vous donner un exemple:
- Code:
<div>innerHTML</div>
Et pour l'explication:
cette ligne permet d'ajouter le contenu de notre var crypter + notre décalage a notre balise "div".
Je n'arrive pas à mieux expliquer cette ligne x) donc si quelqu'un à une meilleure explication je vous en prie

Bon voilà ce Tuto est fini j'espère qui vous aura distrait pendant un petit moment et que vous allez vous amusez avec x).
Je l'améliorerais sur un prochain Tuto pour faire le sens contraire, d'ici là portez vous bien A PLUCH !!!
- ZangtherMembre
- Nombre de messages : 913
Distinction : aucune
Date d'inscription : 06/02/2013
Re: [PROG] Atelier d'apprentissage du Javascript/Web
Jeu 21 Jan 2016 - 14:58
Je te conseillerais d'éviter de mettre des "tutos HTML" dans un apprentissage du Javascript. C'est du bruit et cela nuit à la lisibilité de ton cours.
Dans la globalité, tu devrais laisser tomber tout ce qui est HTML dans ton tuto et passer que en javascript (via la console). Je pense que ce sera bien mieux, ça permet d'éviter toutes les explications sur la mise en forme.
Sinon c'est une bonne application pour comprendre comment utiliser des modulos.
C'est juste dommage que le forum ne permette pas de faire de la jolie mise en forme.
Dans la globalité, tu devrais laisser tomber tout ce qui est HTML dans ton tuto et passer que en javascript (via la console). Je pense que ce sera bien mieux, ça permet d'éviter toutes les explications sur la mise en forme.
Sinon c'est une bonne application pour comprendre comment utiliser des modulos.
C'est juste dommage que le forum ne permette pas de faire de la jolie mise en forme.
Re: [PROG] Atelier d'apprentissage du Javascript/Web
Jeu 21 Jan 2016 - 15:55
- LightNoxMembre
- Nombre de messages : 1759
Age : 32
Localisation : Chez Moi ^^
Date d'inscription : 10/04/2008
Re: [PROG] Atelier d'apprentissage du Javascript/Web
Jeu 21 Jan 2016 - 18:29
Merci pour vos commentaires ^^
Ensuite j'ai opter pour un peu de Html juste pour donner une notion en plus du Javascript ^^.
Et ouai Tonyryu la prochaine fois j'y penserais, merci
Ensuite j'ai opter pour un peu de Html juste pour donner une notion en plus du Javascript ^^.
Et ouai Tonyryu la prochaine fois j'y penserais, merci

- LightNoxMembre
- Nombre de messages : 1759
Age : 32
Localisation : Chez Moi ^^
Date d'inscription : 10/04/2008
Re: [PROG] Atelier d'apprentissage du Javascript/Web
Jeu 21 Jan 2016 - 19:53
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum
|
|