[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:

Je ne suis pas sur pour Windows mais je crois que vous n'avez pas besoin d'installer une plateforme python, il me semble que c'est natif.
Sinon regarder ici :
[Vous devez être inscrit et connecté pour voir ce lien]

Pour Linux:

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>

Ceci et un titre de taille 3, avec pour texte : "Message clair:"

Code:: <textarea id="message-clair" placeholder="Message clair"></textarea>

Défini une zone d'entrée de texte.
- 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">

D'après mes explications du textarea, vous n'aurez pas de mal a comprendre que la balise input et aussi une zone de saisie.

Code:: <br>

Saut à la ligne Oo OUAHHHHHH !

Code:: <button onclick="crypter()" type="button" name="button">Crypter</button>

Créer un bouton cliquable à la souris.
- 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>

Va permettre de définir une zone ou on mettra notre résultat du cryptage.

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> }

Permet de définir notre bloc de déclaration de notre fonction crypter qui ne prend aucun arguments.

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>

et sa valeur grâce au .value qui est donc ici une chaîne de caractères.

- la variable decaller permet de récupérer dans notre document html, l'id contenu dans notre balise

Code:: <input>

et sa valeur grâce au .value qui est donc ici un entier.

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++)

Le début de la boucle "for" ici, permet de parcourir notre chaînes de caractères et d'en prendre sa longueur.

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>

Tous ce qui est entre mes balises "div" est du innerHTML.
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 Wink

.

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 !!!

Mer 20 Jan 2016 - 19:43

Bon Tuto!!

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.

Jeu 21 Jan 2016 - 15:55

n'hésite pas à utiliser [Vous devez être inscrit et connecté pour voir ce lien] pour le coup!!

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 Smile