Infoforall

Javascript 05 : LOGIQUE ET STRINGS

Attention : activité en reconstruction pendant quelques jours.

L’aspect visuel est devenu l’un des aspect fondamental de la communication moderne : donner un pavé de 400 pages sans image à lire à quelqu’un, il a plus de chances de laisser tomber que de s’y mettre de façon enthousiaste. Néanmoins, si la forme est importante pour rendre un document attrayant, le fond est important également. Voilà pourquoi nous allons travailler aujourd’hui sur la gestion des caractères à travers l’objet qui le gère en informatique : le string ou chaîne de caractères.

L’utilisation de ce structure de données va nous être utile pour aborder un thème courant en informatique : la cryptologie ou l’art de coder/décoder un message pour le rendre illisible et incompréhensible en cas d’interception.

Nous utiliserons pour votre première vraie page interactive le classique rot13, avant de compliquer les choses dans les leçons suivantes.

Le rot13 Le rot13

1 - Les boucles FOR sur les objets itératifs

Nous avons vu dans l'activité précédente que le string est un ensemble ordonné de caractères et qu'on peut les lire un à un en utilisant une boucle FOR.

Si vous n'étes pas familier avec le code ci-dessous, il vaut mieux repartir voir la partie sur le FOR dans les deux activités précédentes :

texte = "Bonjour !";

for (caractere of texte) {

    console.log(caractere);

}

01° Sans lancer le code, répondre à la question suivante : Que devrait-on voir dans la console du navigateur ?

02° Rajouter ce code dans un fichier javascript rattaché à une page HTML de votre choix. Vérifiez ainsi si votre réponse précédente est bonne.

...CORRECTION ...

B

o

n

j

o

u

r

 

!

03° Quel est le numéro d'index de la première lettre du string, le B ? Comment afficher ce caractère à l'aide de la variable texte et cet index ?

...CORRECTION ...

B possède le numéro d'index 0 puisqu'on commence à numéroter à partir de 0.

Pour atteindre ce B, il faut utiliser les crochets : texte[0]

04° Combien de caractères possède cette chaîne de caractères ?

...CORRECTION ...

Elle possède 9 caractéres : B - o - n - j - o - u - r - ESPACE - !.

L'espace est donc un 'caractère' pour l'ordinateur.

Si les réponses vous semble étranges, il serait mieux de repartir voir la partie FOR de l'activité précédente.

Si vous cherchez des renseignements complémentaires, w3schools.

2 - Encodage ASCII des caractères

Nous allons profiter de ce cours pour faire un peu de cryptologie, mais nous devons d’abord comprendre comment l’ordinateur stocke les caractères qu’on lui envoie. Le principe est simple : l’ordinateur n’est qu’une machine à calculer, il ne sait stocker que des nombres.

Lorsqu’il travaille sur une image, il gère des nombres.

De même, lorsqu’il travaille sur des lettres (des « caractères »), il gère des nombres. Ainsi, il faut décider par quel nombre coder A, B, a, b, 0, 8 …

Le codage basique des caractères est le codage ASCII (qui fut publié en 1963) : on associe à chaque caractère un nombre compris entre 0 et 127. On obtient donc 128 possibilités.

05° A votre avis, les caractères ASCII sont donc codés sur combien de bits ? On rappelle que si X est le nombre de bits, on obtient un nombre de possibilités de 2 à la puissance X, 2X.

Rappel : un octet correspond à 8 bits : M = 1010 1111 vaut M = 128 + 32 + 8 + 4 + 2 + 1 = 175. Vous pouvez aller revoir la leçon sur la gestion des images si vous avez besoin d'un rappel plus conséquent. Avec 8 bits, on obtient un codage allant de 0 à 255, soit 256 possibilités.

...CORRECTION ...

Pour stocker 128 valeurs (allant de 0 à 127, n'oubliez pas qu'on commence à zéro), il faut 7 bits.

En effet, 27 vaut 128.

A l'époque, la mémoire était une denrée rare et on ne stockait même pas les caractères sur un octet (8 bits) !

ASCII se prononce “ASKI” pour American Standard Code for Information Interchange : il s’agit d’une norme d’encodage informatique des caractères alphanumériques standards de l’alphabet et de quelques « caractères » spéciaux permettant à l’ordinateur de comprendre qu’on veut faire une tabulation, un saut à la ligne …

Revoilà l’exemple typique du "Hello World" qui donnerait :

Contenu de la mémoireA l’écranValeur codanteen binaire
Start of Text2000 0010
HH721001000
ee1011100101
ll1081101100
ll1081101100
oo1111101111
Space32100000
WW871010111
oo1111101111
rr1141110010
ll1081101100
dd1001100100
End of Text3000 0011

On remarquera qu’on code également des “caractères” qui ne sont pas imprimés à l’écran : il s’agit de caractères de contrôle du flux en grande majorité : on peut savoir quand un texte commence, quand il est fini, quand on doit partir à la ligne, faire une tabulation … En gros, certains caractères sont faits pour être affichés, d’autres pour savoir comment on affiche.

Si vous voulez regarder la correspondance du tableau avec le code, taper votre caractère ci-dessous :

Le caractère est codé par

La prochaine fois que vous lirez 0000010 1001000 1100101 1101100 ... vous devriez maintenant un peu mieux comprendre votre ordinateur...

Et voilà la fameuse table de correspondance ASCII :

Les premiers de la liste sont des caractères de contrôle et de gestion :

TypeDécimalSymboleSignificationBinaire
Contrôle0NULL or NULNull000 0000
Contrôle1SOM or SOHStart of Heading000 0001
Contrôle2EOA or STXStart of Text000 0010
Contrôle3EOM or ETXEnd of Text000 0011
Contrôle4EOTEnd of Transmission000 0100
Contrôle5WRU or ENQEnquiry000 0101
Contrôle6RU or ACKAcknowledgement000 0110
Contrôle7BELL or BELBell000 0111
Contrôle8FE0 or BSBackspace000 1000
Contrôle9HT/SK or HTHorizontal Tab000 1001
Contrôle10LFLine Feed000 1010
Contrôle11VTAB or VTVertical Tab000 1011
Contrôle12FFForm Feed000 1100
Contrôle13CRCarriage Return000 1101
Contrôle14SOShift Out000 1110
Contrôle15SIShift In000 1111
Contrôle16DC0 or DLEData Link Escape001 0000
Contrôle17DC1Device Control 1001 0001
Contrôle18DC2Device Control 2001 0010
Contrôle19DC3Device Control 3001 0011
Contrôle20DC4Device Control 4001 0100
Contrôle21ERR or NAKNegative Acknowledgement001 0101
Contrôle22SYNC or SYNSynchronous Idle001 0110
Contrôle23LEM or ETBEnd of Transmission Block001 0111
Contrôle24S0 or CANCancel001 1000
Contrôle25S1 or EMEnd of Medium001 1001
Contrôle26S2 or SSSubstitute001 1010
Contrôle27S3 or ESCEscape001 1011
Contrôle28S4 or FSFile Separator001 1100
Contrôle29S5 or GSGroup Separator001 1101
Contrôle30S6 or RSRecord Separator001 1110
Contrôle31S7 or USUnit Separator001 1111

Et à partir de 32, on trouve les caractères dits imprimables car visibles à l'écran :

TypeDécimalSymboleSignificationBinaire
Printable32(space)(space)010 0000

L'espace est un caractère un peu spécial mais les autres sont visibles :

TypeDécimalSymboleBinaire
Printable33!010 0001
Printable34"010 0010
Printable35#010 0011
Printable36$010 0100
Printable37%010 0101
Printable38&010 0110
Printable39'010 0111
Printable40(010 1000
Printable41)010 1001
Printable42*010 1010
Printable43+010 1011
Printable44,010 1100
Printable45-010 1101
Printable46.010 1110
Printable47/010 1111
Printable480011 0000
Printable491011 0001
Printable502011 0010
Printable513011 0011
Printable524011 0100
Printable535011 0101
Printable546011 0110
Printable557011 0111
Printable568011 1000
Printable579011 1001
Printable58:011 1010
Printable59;011 1011
Printable60<011 1100
Printable61=011 1101
Printable62>011 1110
Printable63?011 1111
Printable64@100 0000
Printable65A100 0001
Printable66B100 0010
Printable67C100 0011
Printable68D100 0100
Printable69E100 0101
Printable70F100 0110
Printable71G100 0111
Printable72H100 1000
Printable73I100 1001
Printable74J100 1010
Printable75K100 1011
Printable76L100 1100
Printable77M100 1101
Printable78N100 1110
Printable79O100 1111
Printable80P101 0000
Printable81Q101 0001
Printable82R101 0010
Printable83S101 0011
Printable84T101 0100
Printable85U101 0101
Printable86V101 0110
Printable87W101 0111
Printable88X101 1000
Printable89Y101 1001
Printable90Z101 1010
Printable91[101 1011
Printable92\101 1100
Printable93]101 1101
Printable94^101 1110
Printable95_101 1111
Printable96`110 0000
Printable97a110 0001
Printable98b110 0010
Printable99c110 0011
Printable100d110 0100
Printable101e110 0101
Printable102f110 0110
Printable103g110 0111
Printable104h110 1000
Printable105i110 1001
Printable106j110 1010
Printable107k110 1011
Printable108l110 1100
Printable109m110 1101
Printable110n110 1110
Printable111o110 1111
Printable112p111 0000
Printable113q111 0001
Printable114r111 0010
Printable115s111 0011
Printable116t111 0100
Printable117u111 0101
Printable118v111 0110
Printable119w111 0111
Printable120x111 1000
Printable121y111 1001
Printable122z111 1010
Printable123{111 1011
Printable124|111 1100
Printable125}111 1101
Printable126~111 1110

Le numéro 127 correspond à la touche DEL d'effacement :

TypeDécimalSymboleSignificationBinaire
Contrôle127DEL111 1111

Nous avions vu que String.fromCharCode(valeur) permet de connaître le caractère associé au nombre entier valeur. Il nous reste à voir la fonction inverse.

Pour connaître le code d’un caractère d'un string x, on peut utiliser une méthode qui s’applique sur des strings x :

x.charCodeAt(position);

La méthode renvoie un nombre base 10 (décimal) qui correspond à la valeur encodée par le caractère à la position donnée dans le string x.

Appliquons ceci dans une page :

Code HTML

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8" />

        <title>Code ASCII avec js</title>

        <meta http-equiv="content-Language" content="fr" />

        <link rel="stylesheet" href="style_1.css" />

    </head>

    <body>

        <header>

            <h1>Codage ASCII et plus</h1>

        </header>

        <section>


            <p>Votre texte :</p>

            <p><input type="text" id="mon_string" onchange="codeChaine()" placeholder="Votre string"></p>

            <p>Codes des caractères du texte : <span id="resultat_encodage"></span></p>


        </section>

        <script type="text/javascript" src="js_chap_05.js"></script>

    </body>

</html>

Pour le JS, je vous fournis celui qui fonctionne pour un caractère unique:

function codeChaine() {

    var sTexte = document.getElementById("mon_string").value;

    var sResultat = "";

    var sCar = sTexte[0];

    sResultat = sResultat + sCar.charCodeAt(0);

    document.getElementById("resultat_encodage").innerHTML = sResultat;

}

06° Tester le code ci-dessus sur plusieurs caractères ASCII puis tenter de créer un code qui donne un à un le codage de tous les caractères d’un string. Vous devrez réutiliser un FOR pour lire un à un les caractéres de votre string. Vérifiez que je ne me suis pas trompé avec "Hello World" : 72 101 108 108 111 32 87 111 114 108 100 .

Il va falloir utiliser vos connaissances sur les boucles for (x of y) ou for (x in y) et sur la concaténation pour créer au fur et à mesure la chaine sResultat à renvoyer à la fin.

Arrivé à ce stade, vous comprendrez bien que je ne puisse vous intégrer mon propre script dans cette page pour vous montrer le résultat. Par contre, je peux vous montrer ce que vous devriez obtenir :

codeChaine

Si vraiment, il le faut, voici une correction possible (il est possible de faire de même avec un for numérique ou un for (x in y) :

...CORRECTION ...

function codeChaine() {

    var sTexte = document.getElementById("mon_string").value;

    var sResultat = "";

    for (caractere of sTexte) {

        sResultat = sResultat + " " + caractere.charCodeAt(0);

    }

    document.getElementById("resultat_encodage").innerHTML = sResultat;

}

07 Avez-vous été curieux ? Tenter de lancer une chaîne de caractères qui contient des caractères bizarres pour nos amis anglo-saxons ? Des é, â et autres ç. Regardez bien la valeur affichée. Mais, mais …ça ne dépasserait pas 127 cette histoire ?

Pour l’instant, nous allons nous limiter au cas 0 à 127 avec de l’ASCII pur. Et nous compliquerons les choses ensuite.

3 - Modifier une chaîne de caractères en javascript

Créer une chaîne de caractères, c’est facile en javascript :

08° Lancer le code ci-dessous qui vous montre les deux façons de créer une chaîne contenant « Hello World ! » et les transformations internes des variables lors des concaténations.

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8" />

        <title>Les Strings</title>

        <meta http-equiv="content-Language" content="fr" />

        <link rel="stylesheet" href="style_1.css" />

    </head>

    <body>

        <header>

            <h1>Modification de String</h1>

        </header>

        <section>

            <p><input type="button" onclick="modificationString()" value="Activez le script !"></p>

        </section>

        <script type="text/javascript" src="js_chap_05.js"></script>

    </body>

</html>

function modificationString() {

    var y1 = "Hello World";

    var y2 = y1 + " World";

    alert("y1 contient :\n" + y1 + "\n et son type est " + typeof(y1));

    alert("y2 contient :\n" + y2 + "\n et son type est " + typeof(y2));


    var y3 = "1+2=";

    var y4 = 3;

    alert("y3 contient :\n" + y3 + "\n et son type est " + typeof(y3));

    alert("y4 contient initialement :\n" + y4 + "\n et son type est " + typeof(y4));


    y4 = y3 + y4;

    alert("y4 contient ensuite :\n" + y4 + "\n et son type est " + typeof(y4));

    alert("Si on tente de faire un typeof sur une variable inexistante, on obtient : " + typeof(haha));

}

...CORRECTION ...

y1 contient Hello World et son type est string.

y2 contient Hello World World et son type est string.

y3 contient 1+2= et son type est string.

y4 contient initialement 3 et son type est number.

y4 contient ensuite 1+2=3 et son type est string.

Si on tente de faire un typeof sur une variable inexistante, on obtient undefined.

On retrouve bien le type dynamique du langage : y4 est initialement un number mais va être transformé en string lors de la concaténation.

Remarque : pour connaitre le type d'une variable, on peut utiliser typeof(mon-truc).Si on teste une variable qui n'existe pas ou qui est mal remplie, on obtient la réponse suivante : undefined. Ainsi, un mon-truc.charAt(200) alors que la variable mon-truc ne contient que 20 caractères peut renvoyer cette réponse, ça peut être pratique.

Les éléments d’une chaîne de caractères javascript ont une spécificité : on ne peut pas les modifier une fois créées.Mais, enfin … Et une fonction telle que y1.replace(/o/g,'*') alors ? Elle va bien remplacer tous les o par des étoiles (*) non ?

Non, cette fonction renvoie simplement une copie de la première chaîne en ayant changé les caractères demandés. D’ailleurs, elle doit s’écrire ainsi pour parvenir à changer la variable y1 initiale :

y1 = y1.replace(/o/g,'*')

On remplace intégralement l’ancienne y1 par une nouvelle. Nous n’avons pas juste changé un caractère par ci, un caractère par là.

09° Lancer le code ci-dessous pour vous convaincre que la modification directe ne fonctionne pas.

function modificationString() {

    var y1 = "Hello World";

    y1[1] = "a";

    alert(y1[1]);

    alert(y1);

}

Et oui, ça ne fonctionne pas. Le deuxième caractère (d'index 1 donc) est toujours le 'e'. Pas moyen de modifier le string.

Voilà trois façons de modifier une chaîne de caractères de façon à remplacer chaque caractère par trois caractères : une étoile, le caractère et un underscore. Ainsi :

Hello Wordl!

doit devenir

*H_*e_*l_*l_*o_* W_*o_*r_*d_*l_*!_

La première version est élaborée avec la boucle for (of) qui énumère les caractères un par un.

La seconde fonctionne avec un for (in) qui donne l'index des différents caractères dans la chaine.

La troisième fonctionne avec un for (initialisation;condition;incrémentation) qui donne l'index des différents caractères en utilisant l'attibut length.

10° Lancez les codes et analysez les ligne par ligne pour bien en comprendre le fonctionnement.

Première méthode : le for (x of in maChaine) où x est un caractère

function modificationString() {

    var y1 = "Hello World";

    var y_temp = "";

    for (car of y1) {

        y_temp = y_temp + "*" + car + "_";

    }

    y1 = y_temp;

    alert(y1);

}

Deuxième méthode : le for (x in maChaine) où x est un numéro d'index

function modificationString() {

    var y1 = "Hello World";

    var y_temp = "";

    for (numIndex in y1) {

        y_temp = y_temp + "*" + y1.charAt(numIndex) + "_";

    }

    y1 = y_temp;

    alert(y1);

}

Troisième méthode : le for (init;condition,incrémentation) où i est un numéro d'index

function modificationString() {

    var y1 = "Hello World";

    var y_temp = "";

    for (var numIndex = 0; numIndex < y1.length;numIndex++) {

        y_temp = y_temp + "*" + y1.charAt(numIndex) + "_";

    }

    y1 = y_temp;

    alert(y1);

}

Voilà, vous savez maintenant comment modifier n’importe quel caractère d’une chaîne de caractères : il faut recréer une nouvelle chaîne portant le même nom !

Autre chose : on peut sortir de l’exécution d’une boucle en utilisant l’instruction break. Lorsque le code lit break, on sort tout de suite de la boucle par le bas.

11° Deviner ce que va afficher le code suivant :

function modificationString() {

    var y1 = "Hello World";

    var y_temp = "";

    for (var caractere of y1) {

        if (caractere == "o") {

            break;

        }

        y_temp = y_temp + caractere;

    }

    y1 = y_temp;

    alert(y1);

}

Dernière chose : on peut revenir à la ligne du test d’une boucle en utilisant l’instruction continue. Javascript sort alors de la boucle par le haut et continue le for à l’élément ou l’itération suivante :

12° Deviner ce que va afficher le code suivant :

function modificationString() {

    var y1 = "Hello World";

    var y_temp = "";

    for (var caractere of y1) {

        if (caractere == "o") {

            continue;

        }

        y_temp = y_temp + caractere;

    }

    y1 = y_temp;

    alert(y1);

}

Pour voir plein d’autres choses qu’on peut faire avec les chaînes de caractères, le mieux est d’aller voir la documentation de javascript ou de lancer une recherche :

 DOCS Javascript SUR LES STRINGS (str) 

On pourra par exemple trouver la méthode isNaN(x) globale (car elle s'applique à l'objet window,la fenêtre du navigateur). Cette méthode très pratique renvoie true si x n'est pas un nombre, false sinon. isNaN signifie is Not a Number.

Ainsi si x = "a", alors isNaN(x) renvoie true.

Votre entrée x :

Réponse de la fonction isNaN(x) =

Réponse de la fonction parseFloat(x) =

Attention, la méthode isNaN observe l'intégralité de l'expression: parseInt("12a") renvoie 12 mais isNaN(12a) renvoie true car "12a" n'est pas un nombre ! Par contre, isNaN("12e-3") renvoie false car la fonction détecte qu'il s'agit de 12.10-3.

Voilà. C'est fini. Une dernière chose néanmoins : comment détecter la présence d'un caractère dans une chaîne de caractère ? C'est toujours pratique :

Si vous désirez savoir si le caractère car est l'un des caractères contenus dans la chaine " ,;:!'()[]{}=+-*", vous pouvez utiliser ceci, avec le tilde :

if (~(" ,;:!'()[]{}=+-*".indexOf(car)))

Cela permet de détecter que car est l'un des caractères contenus dans " ,;:!'()[]{}=+-*".

Sans cette façon de faire, il faudra tester un à un les caractères recherchés avec des if et des else if. Un peu long.

4 - Mise en pratique

Pour stabiliser toutes ces nouvelles connaissances (dont le isNaN()), voilà trois exercices, plutôt longs. Faites au moins le premier.

Calcul du nombre de caractéres dans une phrase (difficulté moyenne):

13° Réalisons un exercice pratique : je voudrais distinguer les gens par le nombre moyen de caractères par phrase écrite. Je pense montrer que ce nombre moyen est corrélé avec la formation et la durée de la formation. Je voudrais donc pouvoir compter le nombre de lettres de la première phrase d’un texte. Penser à bien regarder les textes d'explication ci-dessous. Il faudra donc :

  1. Lire les caractères du texte un à un à l’aide d’une boucle for.
  2. Créer un compteur qui va s’incrémenter de 1 si le caractère est bien une lettre (voir la méthode isNaN() présentée ci-dessus, mais il faudra également supprimer les virgules et autres point-virgules, point d'interrogation...) .
  3. Sortir de la boucle for dès qu’on rencontre un point (on ne doit pas en tenir compte pour la longueur de la phrase).
  4. Afficher le nombre de lettres (alphabétiques donc) rencontrées sur la première phrase.

Comme il faut compter les caractères, on peut aussi supprimer les caractères de ponctuation (sauf le point qui nous servira d'arrêt). Deux méthodes possibles sont proposés ici :

Pour savoir si un caractère doit être comptabilisé ou non, on peut utiliser isNaN pour supprimer les chiffres et if (~(" ,;:!'()[]{}=+-*".indexOf(car))) permet de détecter que car est l'un des caractères contenus dans " ,;:!'()[]{}=+-*".

Sinon, on peut tout simplement tenter de supprimer tous les caractères non voulus en utilisant monTexte = monTexte.replace(/ ?'?"?,?;?:?-?_?\??/g,''); : on utilise une expression régulière dans le replace. Ainsi

  • L'expression régulière est donnée entre les deux /
  • Le g après l'expression régulière signifie que la recherche est globale
  • Les ? dans / ?'?"? ect ... signifient que le caractère (espace, ' ou " ...) peut apparaitre 1 fois ou 0 fois
  • \? indique qu'on recherche un point d'interrogation et qu'il ne s'agit pas du ? indiquant le nombre de recherche (0 ou 1 fois)
  • \?? indique donc qu'on cherche ? et qu'il peut apparaître 0 ou 1 fois.

Comme vous le voyez, l'utilisation des expressions régulières nécessite de connaitre une sorte de langage dans le langage. La documentation est néanmoins assez bien fournie. Nous compléterons plus tard son utilisation. Pour l'instant, je ne fais que vous la présenter.

Tester le programme avec :

monTexte = "Voilà la première phrase, celle dans laquelle il faut compter les caractères, enfin sauf les virgules, les espaces et les points. On ne devrait pas compter non plus les ; mais comme c'est une seconde phrase, cela n'a pas d'importance."

Vous devriez trouver 105 caractères. Pas facile, si ?

Le jeu du pendu (plus compliqué) :

14° Passons à un exercice un peu plus complexe : on veut maintenant faire un mini-jeu du pendu. Pensez à regarder les remarques.

  1. On enregistre dans le code javascript un mot dans une chaîne de caractères qu’on nomme motSecret.

  2. Lorsqu'on appuie sur le bouton de départ, on active penduInit() et on crée une chaîne sInit ayant le même nombre de caractères que motSecret mais contenant * partout. On l'affiche à l'écran dans le span d'id caracteres_connus. Si le mot est test, on doit afficher ****.

  3. Lorsqu'on appuie sur le bouton de test, on active penduTest()  :
    • On va chercher le contenu de l'input d'id caracteres_connus et on le stocke dans une variable sMotObtenu.
    • On va chercher le contenu de l'input d'id lettre_cherchee et on le stocke dans une variable sCar.
    • Si la lettre de sCar est présente dans motSecret, on crée une nouvelle chaîne motObtenu où on remplace les * par la bonne lettre à la bonne position. Si on rentre t, on doit donc stocker t**t.
    • On affiche la nouvelle chaîne motObtenu dans l'id lettre_cherchee.
    • Si toutes les lettes sont trouvées, on on écrit "Bravo !" dans l'id message_final.

L'interface html commune sera plutôt simple :

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8" />

        <title>Les Strings</title>

        <meta http-equiv="content-Language" content="fr" />

        <link rel="stylesheet" href="style_1.css" />

    </head>

    <body>

        <header>

            <h1>Modification de String</h1>

        </header>

        <section>


            <p>Le mot ou la chaîne mystère pour l'instant : <span id="caracteres_connus"></span></p>

            <p>Votre lettre svp : <input type="text" id="lettre_cherchee" placeholder="Votre lettre"></p>

            <p><input type="button" id="mon_bouton" onclick="pendu()" value="Tester la lettre."></p>

            <p><span id="message_final"></span></p>


        </section>

        <script type="text/javascript" src="js_chap_05.js"></script>

    </body>

</html>

Le début du code javascript sera donc :

var motSecret = "javascript";


function penduInit() {

    /* motSecret est accessible à l'intérieur de cette fonction */

    var sInit = "";

    /* Il faut créer la nouvelle sInit à partir de motSecret */

    document.getElementById("caracteres_connus").innerHTML = sInit; /* On renvoie une chaine de base */

}


function penduTest() {

    /* motSecret est accessible à l'intérieur de cette fonction */

    var sMotObtenu = document.getElementById("caracteres_connus").value;

    var sCar = document.getElementById("lettre_cherchee").value;

    var sTemp = "";

    /* Il faut créer sTemp destiné à remplacer sMotObtenu à partir de motSecret, sMotObtenu et sCar */

    document.getElementById("caracteres_connus").innerHTML = sTemp; /* On renvoie la nouvelle chaine */

}

Le ROT-13 (plus compliqué) :

15° En avant pour le mini-projet noté du jour :

Voilà l'affichage non fonctionnel :

Le texte à coder svp :

Le texte encodé :

Le cryptage ROT-13 : c’est un codage primitif, datant de l’époque où les calculateurs automatiques n’existaient pas. On décale toutes les lettres de 13 lettres. Comme l’alphabet en comporte 26, l’avantage est que le codage et le décodage nécessite le même algorithme.

A devient N, N devient A.

B devient O, O devient B.

M devient Z, Z devient M.

Ceci en majuscule, comme en minuscule.

Voilà un bout de code qui va vous permettre :

  • de créer un input dans lequel rentrer votre texte.
  • de créer un bouton permet d’activer la fonction rot13().
  • de créer un paragraphe dans lequel on affichera le texte codé ou décodé après application de ROT-13.

<div class="test_html">

    <p>Le texte à coder svp :<input type="text" id="texte_de_base" placeholder="Votre texte" size="75"></p>

    <p><input type="button" onclick="rot13()" value="Activer le rot13"></p>

    <p>Le texte encodé : <span id="texte_encode"></span></p>

</div>

Attention : pour l’instant, on ne peut gérer que des caractères sans accent et autre. Ne modifiez pas avec votre code les caractères qui ne vont pas de A à Z ou de a à z.

Je vous demande de créer la fonction rot13() de façon à :

  • lire le code ASCII de chaque caractère du texte tapé dans mon_texte
  • modifier le code de chaque caractère entre A et Z pour le transformer par ROT13
  • recréer le nouveau texte à l’aide du code ASCII du nouveau caractère
  • faire de même pour gérer les minuscules a-z
  • créer un filtre pour empêcher le rot13 de modifier autre chose que A-Z et a-z.

Nous verrons dans les parties suivantes des moyens beaucoup plus performants de coder un message.

Comment lire rapidement des éléments précis d'un string :

La lecture rapide des caractères d'un string

Pour finir, nous allons voir qu'on peut également simplifier l'extraction d'une partie d'un string à l'aide de méthode adaptée.

Pour lire le contenu des cases de 2 à 4, on peut écrire un for de type for (var i=2,i<5;i++) ou alors utiliser la méthode slice(2,5) :

var laChaine = "C'est bientôt la fin de cette partie";

var res = laChaine.slice(2, 5);

console.log(res);

On obtient

est

Si on donne des arguments négatifs, cela veut dire qu'on part de la fin de la chaine. Ainsi, slice(-3,-1) veut dire qu'on lit du caractère -3 jusqu'à atteindre en l'excluant le caractère -1 (la fin de chaîne). Attention donc, 0 reste le premier caractère de la chaine et -1 le dernier caractère. Il y a une raison logique interne à cela mais c'est vrai que ce n'est pas très pratique à utiliser au départ.

var laChaine = "C'est bientôt la fin de cette partie";

var res = laChaine.slice(-3, -1);

console.log(res);

On obtient

ti

Pour lire un contenu de longueur donnée (par exemple 3 caractères) à partir d'une position donnée (par exemple l'index 2), on peut utiliser la méthode substr(2,3) :

var laChaine = "C'est bientôt la fin de cette partie";

var res = laChaine.substr(2, 3);

console.log(res);

On obtient

est

Si cela dépasse, on ne crée pas d'erreur. La méthode s'arrête juste à la fin de la chaîne. Par contre, cette méthode ne supporte pas les indexations négatives comme la précédente.

Pour finir, on retiendra qu'il ne faut pas tenter de trouver le caractère précis d'un string x avec une instruction du type x[position] mais plutôt x.charAt(position). Pourquoi ? Et bien simplement car les strings et les arrays ne fonctionnent pas exactement de la même façon dans certains cas précis et qu'écrire x[position] pourrait laisser croire que x est un Array (alors que c'est une String).

Voilà. Comme pour les images, ceux qui voudront travailler sur un projet lié à la gestion de texte auront l’occasion d’aller beaucoup plus loin. Par contre, sachez que Javascript n'est pas particulièrement adapté à la gestion d'énormes strings. Si vous voulez analyser "Les racines du mal" ou autres romans, autant utiliser un langage comme C++ ou Python.