Javascript 05 : GESTION DES 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.

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 :

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.

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 ?

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

Si les réponses vous semblent é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 puisque le code commence à 0 et finit à 127 ? On rappelle que si X est le nombre de bits, on obtient un nombre de possibilités de 2 à la puissance X, 2^X.

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 par Python 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.

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 :

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  000 0010   100 1000   110 0101   110 1100  ... 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 :

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

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

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

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

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 monString.

Appliquons ceci dans une page :

Code HTML

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

06° Tester le code ci-dessus sur plusieurs caractères ASCII.

07° Transformer le code pour qu'il 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.

Voilà de quoi tester les réponses de votre code :

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

08 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. Il s'agit des encodages dits ASCII étendu (sur 1 octet) ou des encodages modernes comme l'UTF-8 qui permet d'utiliser une sorte de code universel qu'on nomme UNICODE.

Précision sur le résultat de charCodeAt(x) :

Rappel : Dans l'une des activités précédentes, nous avions vu la fonction inverse de charAtCode : String.fromCharCode(code) permet de connaître le caractère associé au nombre entier code.

3 - Le string est non mutable on vous dit !

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

• On peut faire de l’affectation directe : monTexte = "Hello World !";
• On peut rajouter des éléments un à un : monTexte = "Hello" + " World" + "!";

09° Lancer le code ci-dessous qui vous montre les deux façons de créer une chaîne contenant « Hello World ! ». Attention au nom d'enregistrement de votre fichier js : js_chap_05.js

On retrouve bien le type dynamique du langage : monTexte4 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 utilise une variable qui n'existe pas, on obtient ce type de réponse.

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 méthode telle que replace ?

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, on doit l'utiliser ainsi pour parvenir à changer la variable monTexte initiale :

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

Oui, bon ... On ne peut pas changer le contenu sauf avec une nouvelle affectation (un =) ? C'est grave ?

Ca dépend. Si vous voulez que les modifications soient suivies oui.

Regardons le programme suivant : on crée dans un Array maListe notre liste de courses.

10° Sans lancer le code, demandez-vous ce que vont afficher les deux alertes. Lancez ensuite le code.

On constate ceci :

Comment expliquer ceci ...

Et bien, c'est assez simple si on sait ce qu'est une variable.

Pour l'instant, vous avez beaucoup travaillé avec le modèle de réprésentation le plus simple : la variable est un nom qui permet d'accéder au contenu d'une boite.

En réalité, une variable contient l'adresse d'une zone-mémoire : lorsqu'on tape monTexte, l'interpréteur ne va pas directement lire le string : à l'aide du nom de la variable, il va lire dans un tableau l'adresse pointée par ce nom de variable. Par exemple :

Nom de la variable	Exemple de zone-mémoire pointée	Type de données
monTexte	80 144	string
monTexte2	27 024	string

En gros, on crée une liste à partir de deux variables monTexte et monTexte2. On affiche alors la liste et on obtient ceci :

['Lait', 'Carottes']

On affecte un nouveau contenu à la variable monTexte2 : monTexte2 = "Des Chips !". En réalité, on va juste faire pointer cette variable vers une autre zone-mémoire :

Nom de la variable	Exemple de zone-mémoire pointée	Type de données
monTexte	80 144	string
monTexte2	39034	string

On affiche le tableau maListe et on obtient :

['Lait', 'Carottes']

Comme vous pouvez le constater, le tableau maListe n'est pas modifié : ses éléments pointent toujours vers l'ancien identifiant-mémoire.

11° Lancer le code ci-dessous pour vous convaincre (encore plus) que la modification directe d'un string ne fonctionne pas. C'est normal, souvenez-vous le string est non modifiable après création. On dira également que le string est non mutable.

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.

Conclusion : on dit que le String est non mutable. On ne peut pas modifier son contenu une fois créé. Pour avoir l'impression de modifier des données non mutables, il faut remplacer sa variable par une variable qui porte le même nom mais qui n'aura pas la même référence interne.

4 - "Modifier" un string - Le jeu du pendu

Bilan de la partie précédente : la seule façon de "modifier" un string (qui est non mutable), c'est de recréer un string qui porte le même nom.

Un exemple concret :

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 !

Nous allons maintenant reprendre notre exercice du pendu que nous avions commencé dans l'une des activités précédentes. Pour cela :

• On crée une variable motMoinsSecret à partir de motSecret si la balise d'id "mot_moins_secret" est vide : on remplace les caractères par des étoiles, sauf s'il s'agit d'un tiret ou d'un espace. Nous utilisons un FOR of.
• On crée par concaténation un string temporaire, caractère par caractère. Ce string va contenir la future version de motMoinsSecret : la version dans laquelle les caractères découverts vont rester visibles.
• On affecte temporaire dans motMoinsSecret.
• On affiche temporaire dans la balise d'id "mot_moins_secret".

Nous allons devoir comparer la lettre demandée aux différents index de motSecret. Nous allons donc utiliser un FOR numérique :

• Si la lettre est détectée à cette position, on concaténe la lettre de motSecret à cette position.
• Sinon, on garde l'ancienne lettre de motMoinsSecret à cette position.

12° Recréer le HTML et le JS nommé js_chap_05.js de notre projet. Le code js proposé n'est pas opérationnel : le string temporaire est créé ici strictement identique à motMoinsSecret. On aura donc toujours juste les étoiles.

Maintenant que la réponse trouvée est stockée dans le string motMoinsSecret, nous allons pouvoir le changer au fur et à mesure de la découverte des lettres. Nous voudrions faire quelque chose commme :

Nous allons néanmoins devoir changer un peu la structure de notre programme : il faudra créer motMoinsSecret si la balise d'id "mot_moins_secret" est vide, sinon il faudra initialiser motMoinsSecret à partir de ce qui se trouve dans cette balise :

Nous allons devoir cette fois utiliser une boucle FOR numérique car nous avons besoin de comparer la lettre voulue et un numéro précis d'index dans les strings motSecret et motMoinsSecret.

13° Modifier le code de façon à obtenir la mise à jour correcte de la chaine motMoinsSecret lorsqu'on teste une lettre.

Amélioration :

14° Testez avec le mot à découvrir Bonjour et en demandant de vérifier la lettre b minuscule. Ca fonctionne ?

Nous allons donc devoir formater les lettres : le A et le a n'ont pas le même code. Si l'utilisateur demande à savoir s'il y a des A, alors que motSecret contient des a, le programme va répondre que non, il n'y a pas de A...

Pour faire cela, nous pourrions analyser les caractères un par un et les transformer en utilisant un test IF pour chaque lettre... Heureusemet, il y a mieux : il y a les méthodes des strings.

Voyons maintenant quelques autres méthodes pratiques pour comparer les chaînes de caractères ou les caractères entre eux :

15° Améliorer le test du pendu en comparant non pas le vrai contenu de

• maLettre et
• motSecret[ index ] ou motSecret.charAt(index)

Mais cette fois, il faudra comparer deux versions intégralement en majuscules ou en minuscules. Ainsi demandant A devrait revéler les a et les A. Et l'inverse devrait vrai aussi.

16° Finaliser enfin en gérant la fin. Il faudra rajouter un span pour indiquer qu'on a gagné !

Il est temps d'arrêter. Ce n'est pas encore parfait. On pourrait remplacer les é,è,ê par un simple e. Idem pour les à ... On pourrait compter les étapes ou même proposer de découvrir le mot avant la fin. Mais vous avez vu l'essentiel.

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) 

Une dernière chose néanmoins : vous risquez parfois de trouver des codes de détection avec des tildes :

5 - Mise en pratique : des exercices (pas faciles !)

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

Le ROT-13 (plus compliqué) :

Mini-projet 2 : nous allons maintenant manipuler les caractères via leurs codes ASCII.

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-texte d'id "texte_de_base"dans lequel rentrer votre texte.
• de créer un bouton permet d’activer la fonction rot13.
• de créer un span d'id "texte_encode" 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>

Le caractère A correspond au code 65 et Z correspond au code 90 lorsqu'on utilise respectivement "A".charCodeAt(0) et "Z".charCodeAt(0).

A l'inverse, String.fromCharCode(65) renvoie A et String.fromCharCode(90) renvoie Z.

ATTENTION : vous n'aurez qu'à modifier le contenu de la fonction rot13. Inutile de chercher à modifier le code ailleurs pour répondre aux questions.

function rot13() {

    // Récupération du texte à encoder

    var texteDeBase = document.getElementById("texte_de_base").value;

    // Création du texte encodé

    var texteEncode = texteDeBase;

    // Placement du texte encodé à l'écran

    document.getElementById("texte_encode").innerHTML = texteEncode;

}

18° Modifier et compléter la fonction rot13 donnée de façon à :

• lire avec charCodeAt le code ASCII de chaque caractère du texte stocké dans texteDeBase
• rajouter 13 à ce code
• trouver avec fromCharCode le nouveau caractère à afficher.
• recréer le nouveau texte texteEncode à l’aide des nouveaux caractères.

Votre code devrait vous permettre de gérer parfaitement l'encodage de A à M. Mais pas encore de N à Z !

Testez votre interface : si vous rentrez  ABC , elle devrait vous répondre  NOP . Idem en minuscule.

...CORRECTION ...

function rot13() {

    // Récupération du texte à encoder

    var texteDeBase = document.getElementById("texte_de_base").value;

    // Création du texte encodé

    var texteEncode = "";

    for ( var caractere of texteDeBase ) {

        var codeObtenu = caractere.charCodeAt(0);

        codeObtenu = codeObtenu + 13 ;

        nouveauCaractere = String.fromCharCode(codeObtenu) ;

        texteEncode = texteEncode +nouveauCaractere

    }

    // Placement du texte encodé à l'écran

    document.getElementById("texte_encode").innerHTML = texteEncode;

}

Le problème du caractère  N  ? Il renvoie  [  et pas  A . Pourquoi ?

C'est simple : "N".charCodeAt(0) renvoie le code 78. 78+13 vaut 91. Or String.fromCharCode(91) est bien le caractère après le Z : cela renvoie  [ .

Type	Décimal	Symbole	Binaire
Printable	65	A	100 0001
Printable	66	B	100 0010
...	..	.	... ....
Printable	77	M	100 1101
Printable	78	N	100 1110
Printable	79	O	100 1111
...	..	.	... ....
Printable	90	Z	101 1010
Printable	91	[	101 1011
Printable	92	\	101 1100

19° Gérer le code pour qu'on ne puisse pas :

• dépasser 90(Z) : on doit continuer sur 65(A) et plus
• dépasser 122(z) : on doit continuer sur 97(a) et plus

Testez votre interface avec  ABCNOP , elle devrait vous répondre  NOPABC . Idem en majuscule.

...CORRECTION ...

function rot13() {

    // Récupération du texte à encoder

    var texteDeBase = document.getElementById("texte_de_base").value;

    // Création du texte encodé

    var texteEncode = "";

    for ( var caractere of texteDeBase ) {

        var codeObtenu = caractere.charCodeAt(0);

        codeObtenu = codeObtenu + 13 ;

        if ( codeObtenu > 90 || codeObtenu > 122 ) {

            codeObtenu = codeObtenu - 26;

        }

        nouveauCaractere = String.fromCharCode(codeObtenu) ;

        texteEncode = texteEncode +nouveauCaractere

    }

    // Placement du texte encodé à l'écran

    document.getElementById("texte_encode").innerHTML = texteEncode;

}

Dernière amélioration pour aujourd'hui :  ABC NOP  devrait vous donner  NOP-ABC . Et oui : 32 est le code de l'espace et 32+13 = 45 est le code du tiret.

20° Rajouter un filtre sur la lecture et la modification du code du caractère : on ne doit rien faire si le code de base n'est pas celui de A à Z ou de a à z.

Testez votre code :  ABC NOP  devrait maintenant vous donner  NOP ABC . Ouf.

Si vous avez besoin d'aide, n'hésitez à me contacter. Il suffit de quelques tests bien placés.

6 - FAQ

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

Question : comment sortir d'une boucle for avant la fin ?

Question : Je voudrais compter de 0 à 6 mais sans passer par 5, c'est possible ?

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.