Javascript (7) - Objet String

Bonjour à tous et bienvenue dans cette nouvelle leçon de JavaScript. Aujourd'hui nous allons voir l'objet String ou chaîne de caractères. Les chaînes de caractères en JavaScript sont considérées comme étant des types scalaires ou des objets, c'est-à-dire que pour les créer vous avez 2 manières de le faire. Par exemple si on veut créer une chaîne de caractères du nom de str on va faire le code suivant: Alors là, vous avez compris que c'est une simple affectation, c'est-à-dire que str dans ce cas c'est une variable de type chaîne de caractères. Mais en fait, il est considéré en JavaScript comme étant un objet. Et pour dire littéralement que c'est un objet qui est créé à partir du prototype String, on fait ceci. Et on passe au constructeur l'argument qui n'est rien d'autre que la valeur de la chaîne souhaitée. Dans ce cas, c'est bonjour. Bon, maintenant nous avons créé une chaîne de caractères du nom de Esther, c'est-à-dire que désormais vous avez le choix soit de passer par le constructeur du prototype String ou bien une affectation directe comme si vous créez une variable de type chaîne de caractères. Maintenant, une fois notre chaîne créée, on peut la manipuler grâce à des attributs et des méthodes qui sont disponibles dans JavaScript. Il y a beaucoup de méthodes et attributs proposés, mais nous on va se contenter dans cette vidéo des plus populaires et les plus utilisés. Bon, imaginons que l'on veut connaître la longueur de notre chaîne de caractères. Dans ce cas, on va utiliser l'attribut length de cette manière. str.length retourne un entier qui représente la longueur de la chaîne str. Maintenant, on va afficher cette valeur dans la console de cette manière: console.log. On exécute, on affiche la console. Et ça nous donne 7. Le mot bonjour contient bel et bien 7 caractères. Ensuite je mets par exemple salut, donc là ça retourne 5 caractères. Il existe aussi la méthode charAt, et faites toujours attention à la casse, avec un A majuscule. Donc là charAt ça retourne le caractère indexé à la position souhaitée. Par exemple si je mets ici 0, dans ce cas ça va nous retourner le caractère à la position 0, sachant que la première position c'est 0. Et la dernière position c'est length- 1. Dans ce cas, la première position sera 0 et la dernière sera 4. Bon, maintenant si je fais ça, ça devrait afficher le S majuscule. Donc là, ça nous donne le S. Bon, si je mets par exemple 4, ça nous donne T. Ou bien je peux tout simplement mettre str.length- 1 pour dire la dernière position, et ça nous affiche toujours T. Maintenant, imaginez que je veux connaître la position d'un caractère. Bon, parce qu'ici je donne la position et le JavaScript me retourne le caractère. Maintenant, je fais l'inverse, je donne le caractère et le JavaScript me retourne la position. Alors, la méthode à utiliser, c'est indexOf avec un O majuscule. Voilà, je vais mettre S, c'est-à-dire que je cherche le caractère S. Dans ce cas, ça me retourne la position 0. Voilà, comme ça. Bon, si je mets par exemple le T, ça me retourne la position 4, c'est-à-dire c'est le complément de la méthode charAt. Maintenant on va changer le texte, on va mettre bonjour. Et maintenant je vais chercher la position du O. Vous avez vu que le O il figure 2 fois dans la chaîne, mais par défaut c'est le premier qui sera retourné. Donc quand je fais ça, ça me retourne la position 1 qui correspond au premier O rencontré. Mais si je veux récupérer la position du deuxième O, dans ce cas il faut savoir que indexOf accepte un deuxième paramètre facultatif. Je mettrai par exemple ici 2, c'est-à-dire que la position de O qui me sera retournée doit impérativement être supérieure ou égale à 2. Dans ce cas, donc je vais prendre en considération les O à partir de la position 2 qui est le n. Et dans ce cas, j'ai un seul O qui est celui à la position 4. Maintenant j'exécute et ça me donne 4. Bon, si vous mettez rien, c'est que la position par défaut c'est 0. Bon, ça c'est l'équivalent de ne rien mettre et ça vous retourne la position 1 qui est le premier O rencontré. Il y a aussi la méthode substring. La méthode substring permet d'extraire une partie de la chaîne de caractères. Elle possède 2 arguments. Par exemple, si je mets 0 et 3, dans ce cas ça signifie que la chaîne qui me sera retournée commence à la position 0, premier argument, et finit à la position 3- 1, c'est-à-dire la position 2. Dans ce cas, ce que je vais recevoir c'est Bon, si je mets par exemple 3 et 6, alors ça va commencer de J et ça va finir à 6- 1, c'est-à-dire 5, et ça va me retourner JOU. J'exécute et ça me retourne ceci. Il y a aussi la méthode toUpperCase qui permet de retourner la chaîne de caractères entièrement en majuscule. Comme ceci, ou bien toLowerCase qui retourne la chaîne entièrement en minuscule de cette manière. On se contente de ces méthodes parce qu'il y en a d'autres, mais ce sont les plus utilisées. Avec ça d'ailleurs, on peut réussir pratiquement tous les traitements souhaités avec des chaînes de caractères. Et maintenant, on va essayer de faire un exemple. Imaginons que l'on veut créer un compteur de caractères, c'est-à-dire vous avez une zone de texte où vous avez le droit d'écrire quelques mots à condition de ne pas dépasser une longueur maximale, comme c'est le cas dans les annuaires de référencement par exemple. Où ils vous disent qu'il faut pas dépasser un certain nombre de caractères bien donné. Alors ce qu'on va faire, on va créer d'abord la partie HTML. On aura besoin d'une textarea, on va l'appeler par exemple mon-texte, cols on va mettre par exemple 40 colonnes, et rows on va dire qu'il y en a 5 lignes. Voilà. Et juste après, on va mettre une zone de texte, on va l'appeler CPT. Voilà, comme ça. Donc maintenant, on va écrire dans la zone de texte et on va afficher combien de caractères il nous reste dans CPT, sachant qu'on va fixer la longueur maximale à ne pas dépasser. Alors, vous imaginez que l'événement que l'on va solliciter dans ce cas, c'est la saisie au clavier. On va mettre donc on keyApp égale par exemple la fonction f qui va faire le traitement. Maintenant je crée la fonction f ici et je vais fixer la longueur maximale, par exemple lmax égale 30 caractères. Ça veut dire que la longueur maximale des caractères à ne pas dépasser c'est 30. À chaque fois que je saisis un caractère de plus, je vais voir combien il me reste et je l'affiche dans la zone de texte qui est là. Maintenant déjà j'exécute pour voir le résultat sur le navigateur. Alors là c'est le rendu par défaut. Donc là c'est l'espace de texte où on va saisir notre chaîne, et ici c'est là où je vais afficher la valeur. Bon, je vais zoomer un petit peu pour mieux voir ceci. Maintenant ce qu'on va faire, c'est qu'à chaque fois je saisis un caractère, je vais faire le traitement souhaité. Mais avant, il faut pas oublier de déclarer le formulaire comme ça. Pour assurer la hiérarchie, je mettrai ici document fou .cpt .value égal. Alors qu'est-ce que je vais mettre ici C'est la longueur maximale moins la longueur de la chaîne en cours d'écriture. Là je mettrai c'est lmax moins la chaîne courante. Bon c'est document fou mon texte, voilà, dans le texte, point value, point length, ça veut dire la longueur de cette chaîne. Maintenant j'exécute. À chaque fois j'écris, regardez, ça décrémente automatiquement. Voilà. Mais quand je commence, bon, ça veut dire au chargement de la page, il n'y a rien qui est affiché. Imaginez que je veux afficher quelque chose au chargement de la page, alors il suffit d'appeler la fonction f au chargement de la page comme ça. Donc onload égale à f. Tout court. Quand j'exécute, bon, ça me donne déjà la longueur maximale à ne pas dépasser, c'est 30 caractères. Bien sûr, vous pouvez personnaliser votre message en ajoutant quelques mots ici, comme par exemple 30 caractères restants, etc. Maintenant, bon, je suis en train de saisir, c'est bien, donc ça marche. Mais le problème, c'est que j'arrive à dépasser les 30 caractères et du coup je passe à des valeurs qui sont négatives. Bon, pour pallier ce problème, ce qu'on va faire, c'est une condition. Je mettrai ici Si la longueur de la chaîne est supérieure à LMAX, il faut arrêter la saisie. Alors là, donc if document.foo.monText.value.length est supérieur à LMAX, alors ce que je vais faire ici, c'est afficher un message. Par exemple, alerte, vous avez dépassé la longueur autorisée. Comme ça, maintenant on exécute pour voir le résultat. Moi j'écris, voilà, ça affiche vous avez dépassé la longueur autorisée. Mais le problème c'est que je peux quand même continuer à écrire et je passe à des valeurs négatives. Maintenant ce qu'il faut faire c'est retirer tous les caractères superflus de telle sorte à ne conserver que les 30 premiers. Alors là moi je mettrai encore un truc, c'est que je vais écrire dans la zone de texte document.foo.text.value, c'est-à-dire que la nouvelle valeur c'est quoi? C'est les 30 premiers caractères de l'ancienne valeur tout simplement. C'est document.foo.text.value.substring et là donc la position initiale c'est 0 et la position finale c'est LMAX. Et dans ce cas je vais conserver seulement les caractères allant de 0 jusqu'à Lmax- 1. Maintenant j'exécute pour voir le résultat. J'écris quoi que ce soit. Voilà, donc j'ai ajouté le D, ça m'affiche le message, je clique et vous avez bien vu que le D a été retiré. Le S, même chose, je clique et le S a été retiré. Alors là c'est un exemple de contrôle de saisie basique en JavaScript. Maintenant on va faire notre exemple, c'est une chaîne de caractères qui sera écrite automatiquement lettre par lettre. Bon, je vais conserver juste une zone de texte comme ça. Je vais l'appeler ma chaîne. Je vais agrandir un peu sa longueur, par exemple size= 40 caractères, ou bien carrément 60 caractères. Voilà, bon, pour la fonction, ça va être, ça va changer. Bon, ici au chargement de la page, j'ai appelé la fonction f. Bon, bien sûr, la fonction f, c'est elle qui va se charger d'animer donc ma chaîne, ou bien d'afficher ma chaîne lettre par lettre. Bon, mais d'abord il faut initialiser la chaîne. Par exemple, str, c'est-à-dire la chaîne de caractères, égale bonjour à tous, comme ça. Bien sûr, je peux le créer aussi à travers le constructeur new String. Et ensuite, je vais avoir besoin d'une autre variable en guise de compteur. Bon, c'est elle qui va me calculer la position courante de la chaîne. Donc i, par exemple, je vais initialiser à 0. La fonction f, c'est une fonction qui sera récursive, que je pourrais appeler depuis l'intérieur grâce à setTimeout, ou bien de l'extérieur grâce à setInterval. Mais bon, on va opter pour setTimeout. Par exemple, t égale setTimeout, la fonction f. La durée, on va mettre par exemple 40 millisecondes. Chaque 40 millisecondes, on va imprimer un nouveau caractère. Ici, ce qu'on va faire, c'est afficher dans la zone de texte, c'est-à-dire la zone qui porte le nom ma chaîne, on va y afficher une portion de la chaîne str. On va mettre document.info.maChaîne.value= str.substring. On commence toujours à la position 0 au début et on finit à la position Donc la position i, bien sûr, c'est une variable qui va changer au fur et à mesure. Et là, on va tout simplement incrémenter i de 1. On fait d'abord ça pour voir le résultat. On actualise. On voit bien que la chaîne s'affiche de cette manière. Mais le problème, c'est qu'une fois on dépasse la longueur de la chaîne, il y a une erreur qui sera soulevée parce que le i, il va indexer sur des caractères inexistants. Et du coup, il faut faire un contrôle. On va mettre donc ici if i est inférieur à str.length, c'est-à-dire si c'est inférieur, on va incrémenter. Sinon, on arrête le compteur grâce à la méthode clearTimeout. Comme ça, voilà, on actualise maintenant pour voir. Et ça affiche maintenant le message de gauche à droite. Imaginez maintenant que je veux afficher le message lettre par lettre et aussi l'effacer lettre par lettre dans un mouvement infini. Alors ce que je vais faire maintenant, c'est ajouter une autre variable que j'appellerai par exemple direction. Direction égale D pour dire droite. Ça veut dire que par défaut on va aller vers la droite. Donc c'est le premier mouvement. Et là on va faire une condition, mettre donc if dir est égal à D, le traitement à faire c'est ça. On enlève carrément le else. Ça veut dire que si la direction c'est vers la droite, bon je vais incrémenter le i, je vérifie toujours donc est-ce que je dépasse pas la longueur. Sinon, il suffit de changer la valeur de dir. Donc dir= g. Maintenant je vais prendre ce traitement-là, je vais le copier ici. On peut mettre un else si vous voulez, sinon on peut mettre un if. Donc là, si dir= g, c'est-à-dire vers la gauche, dans ce cas on va vérifier est-ce que i est supérieur à 0 parce qu'il faut pas passer au-dessous de 0. On décrémente i. Sinon, à leur dire il est égal à droite. C'est un mouvement alterné, ça veut dire qu'on va aller vers la droite et ensuite vers la gauche et encore une fois vers la droite, etc. J'exécute pour voir le résultat. Donc ça m'affiche maintenant ma chaîne de cette manière. Donc voilà, on voit bien que ça s'affiche et ça s'efface lettre par lettre. Bon, si je mets le curseur comme ça, donc ça donnera l'impression que quelqu'un est en train de saisir un peu trop vite. Voilà, avec ça j'espère que vous avez compris le principe des chaînes de caractères en JavaScript. Merci pour votre attention et à la vidéo prochaine.