Le 14 septembre 2017, nous avons publié une version actualisée de notre Politique de confidentialité. En utilisant video2brain.com vous vous engagez à respecter ces documents mis à jour. Veuillez donc prendre quelques minutes pour les consulter.

L'essentiel de JavaScript

Changer la taille du texte

TESTEZ LINKEDIN LEARNING GRATUITEMENT ET SANS ENGAGEMENT

Tester maintenant Afficher tous les abonnements
Vous allez découvrir comment augmenter ou diminuer la taille du texte, en réponse au clic sur un bouton.

Transcription

Dans ce troisième exemple, nous allons manipuler la taille du texte, regardez, j'ai ajouté, ici, deux boutons, un bouton avec un « a » minuscule qui me permet de diminuer la taille de mon texte, un bouton avec un « A » majuscule qui me permet d'augmenter la taille de mon texte. Alors, c'est une option importante pour l'accessibilité de votre site, puisque cela permettra aux personnes qui ont une vue défaillante de quand même profiter de votre information, puisqu'ils pourront augmenter la taille de leur texte. Alors, je vais revenir, maintenant, dans mon éditeur, pour vous montrer comment tout cela fonctionne en HTML et en JavaScript. Alors, d'abord, au niveau de l'HTML, eh bien, voici ce « div », qui s'appelle « textResize » et ce « div » contient, donc, deux boutons, les deux boutons avec un « a » et un « A », il s'agit de deux éléments « A » de l'HTML, qui ne mènent nulle part, le « href » ne va nulle part. Alors, comment fait-on cela dans le JavaScript ? Eh bien, dans le JavaScript, tout commence par cette fonction « window.onload », par cet événement. J'attends que la page ait fini de charger. Et, une fois que la page est chargée, eh bien, je vais aller récupérer cet élément « textResize », grâce à « getElementByID ». Je vais stocker cet élément dans une variable que j'appelle « buttonWrapper ». Rappelez-vous que cet élément, eh bien c'est le « div » qui contient mes deux balises « A » qui sont ici. Dans la ligne suivante, eh bien je vais utiliser « getElementsByTagName », je vais aller rechercher tous les A, mais attention, tous les A qui sont dans « buttonWrapper », donc vous voyez que je ne fais pas « document. quelque chose », mais « buttonWrapper. quelque chose », pour limiter l'action de « getElementsByTagName », uniquement au contexte de ce div « buttonWrapper ». Qu'est-ce que j'obtiens ? J'obtiens mes deux éléments A que je stocke dans la variable « textButtons ». Alors, comment fait cette variable pour stocker deux éléments ? Eh bien, c'est une « array », et donc, ici, plus bas, je vais accéder individuellement aux deux éléments de cette « array », d'abord le premier bouton qui est à l'index 0 de cette « array », et puis le second qui est à l'index 1. Je vais associer à l’événement « onclick » de ces deux éléments « A », une fonction qui s'appelle « textResize », vous voyez que c'est la même fonction pour les deux boutons, simplement je passe un paramètre différent à chaque fois, dans le premier cas, donc le premier lien avec le « a », eh bien je demande à ce que le texte soit plus petit, et je passe le paramètre « smaller », et, dans l'autre cas je passe le paramètre « bigger ». Alors, allons voir, maintenant, cette fonction « textResize ». Elle est définie plus haut, la voici, et la première chose que cette fonction va faire, c'est d'aller rechercher les différents éléments que l'on désire redimensionner. Donc, je vais chercher, dans le DOM, un élément qui s'appelle « mainContent », que je stocke dans une variable que j'appelle « mainContent » également, eh bien, cet élément, il s'agit d'un div, qui est ici, et c'est le div principal de la page qui contient le contenu principal de ma page. Et puis, à l'intérieur de ce « mainContent », vous voyez que je fais « mainContent. », j'utilise « getElementsByTagName », pour aller rechercher tous les titres de niveau 1, tous les titres de niveau 2 et tous les paragraphes qui se trouvent à l'intérieur de ce div « mainContent ». Et, je stocke cela dans trois variables, que j'appelle « mainContent » H1, H2 et puis P, ici. Ces trois variables, eh bien ce sont trois « arrays » qui contiennent, chacune, la liste de tous les H1, H2 et P qui se situent dans « mainContent ». Alors, cela ne m'intéresse pas trop. J'aimerais bien avoir une seule et unique « array », qui contient tous les éléments que je veux redimensionner. Alors, cette « array », je vais l'appeler, ici, « elementsToResize », voyez que je crée une nouvelle variable, et je rends cette variable égale à la valeur qui m'est retournée par une fonction qui s'appelle « collectElements », et j'envoie, dans cette fonction, les trois « arrays » que je veux joindre en une seule. Alors, cette fonction « collectElements », elle est ici, la voici, et, une première chose qui peut peut-être surprendre, c'est qu'elle ne reçoit, ici, aucun paramètre. C'est-à-dire que je ne déclare aucun argument au niveau de la signature de la fonction. Pourtant, je lui envoie, bel et bien, des données, à cette fonction, puisqu'au moment de l'appeler, je lui envoie mes trois « arrays ». Rappelez-vous que cela ne pose aucun problème au JavaScript, alors que cela renverrait une erreur dans d'autres langages. Cela dit, comment vais-je récupérer ces éléments, maintenant, dans ma fonction ? Eh bien, il faut savoir que, quand vous exécutez une fonction, le JavaScript va automatiquement créer cette propriété qui s'appelle « arguments », et cette propriété est une « array », qui contient les différents paramètres que vous envoyez dans votre fonction. Et donc, comme toutes les « arrays » du monde, elle a une longueur, « length », qui sera égale à trois, puisque j'envoie trois paramètres à cette fonction. Et, je stocke cette information, très précieuse bien sûr, dans cette variable que j'appelle « len ». Ensuite, je crée une « array » vide, que j'appelle « elementsToResize », c'est cette « array » qui sera, tout à la fin, renvoyée au code qui a appelé cette fonction. Évidemment, cette « array » « elementsToResize » je ne vais pas la laisser vide. Ici, j'ai des boucles, une boucle « for », qui va d'abord boucler autour de mon « array arguments », ici. Regardez, je déclare une variable, un index que j'initialise à 0, puis je vérifie si cet index est toujours inférieur à « len », c'est-à-dire à trois, c'est-à-dire au nombre d'éléments, au nombre de paramètres que j'ai passé à ma fonction, et puis, à la fin de chaque boucle, j'incrémente cette variable i de 1. Ensuite, regardez, je vais créer une deuxième boucle à l'intérieur de la première, alors, comme i était déjà pris, j'ai pris la lettre suivante, j'ai déclaré une variable j, un deuxième compteur. Et, cette fois-ci, eh bien je vais tourner autour du premier élément de cette « array arguments ». C'est-à-dire, dans mon cas, autour de l'« array » « mainContentH1 », que j'envoie dans ma fonction « collectElements ». Et, qu'est-ce que je vais faire avec cette boucle ? Eh bien, je vais aller rechercher dans le premier argument, le premier élément de cette « array », Et, avec « .push », eh bien je le mets dans l'« array » vide, pour le moment, « elementsToResize ». Et puis, je vais recommencer cette boucle intérieure. Je vais boucler sur le deuxième élément du premier paramètre qui était envoyé dans ma fonction. Puis, sur le troisième élément du premier paramètre de ma fonction. Et, chaque fois, je vais ajouter cet élément dans l'« array elementsToResize ». Au bout d'un moment, eh bien, j'aurai parcouru tous les éléments du premier paramètre que j'ai envoyé dans ma fonction. À ce moment-là, je vais revenir sur la boucle externe, qui va boucler sur le deuxième élément que j'ai envoyé dans ma fonction, et puis, rebelote pour la boucle interne, mais cette fois-ci, avec le deuxième élément que j'envoie dans ma fonction, et donc, je vais prendre le premier paramètre du deuxième élément, que je mets, avec « push », dans « elementsToResize », et ainsi de suite jusqu'à la fin. Donc, au bout d'un moment, cette « array elementsToResize », contiendra, à la queue leu leu, tous les éléments de chacune des trois « arrays » que j'ai envoyées au départ dans ma fonction. Et je renvoie ceci, « return elementsToResize », alors, à qui ? Au code qui a appelé la fonction, c'est-à-dire que je stocke ceci dans cette variable « elementsToResize », ici. Alors, petite parenthèse, je suis dans une fonction, je crée une variable, avec le mot clé : « var », donc cette variable, ici, n'est visible qu'à l'intérieur de la fonction « textResize », il s'agit donc bien d'une variable complètement différente de celle-ci, qui est créée dans sa fonction « collectElement », avec « var », qui est donc uniquement visible dans cette fonction. Alors, elles ont le même nom, ces deux variables, mais c'est tout à fait une coïncidence, donc c'est bien deux variables totalement différentes qui ne se voient pas l'une et l'autre. Alors, maintenant que j'ai, ici, une « array » avec tous les éléments que je veux redimensionner, cela devient assez simple, je vais faire une boucle « for », qui tourne autour de cette « array », et donc, je vais exécuter ce code plusieurs fois, une fois pour chaque élément dans l'« array elementsToResize ». Alors, la première chose que je vais faire, c'est obtenir la taille actuelle de l'élément que je veux redimensionner. Je vais stocker cela dans une variable qui s'appelle « fontSizeCurrent », et je vais utiliser une méthode que l'on a pas encore vue, c'est une méthode de l'objet « window » qui s'appelle « getComputedStyle ». Alors, pourquoi je n'utilise pas l'objet « style » et la propriété « fontSize » qu'on a vue, plus tôt, dans ce cours ? C'est parce que, dans ma feuille de style, je ne donne pas forcément une taille directement à cet élément-là. Peut-être que la taille de l’élément est héritée d'autre chose. Et donc, si je vais voir, dans l'élément style de cet élément particulier, je risque de ne rien obtenir du tout, c'est-à-dire, pas de données, puisque le CSS n'a pas forcément explicitement mis une taille pour ces caractères. Donc, je vais utiliser cette autre méthode, « getComputedStyle », je vais ensuite dire de quel élément je veux obtenir les styles. Puis, une fois que j'obtiens les styles, calculés par l'ordinateur, de cet élément, je vais aller rechercher la propriété « fontSize », je vais obtenir une taille en pixels. C'est-à-dire que je vais obtenir, par exemple, 10px ou 12px. C'est-à-dire une chaîne de caractères, puisque p et x sont des lettres. Alors, ce que j'ai envie de faire maintenant c'est de retirer px de cette variable « fontSizeCurrent », donc je vais créer une autre variable que j'appelle « fontSizeNumber », et je sais que je dois prendre, en fait, toute la chaîne de caractères sauf les deux derniers, le p et le x. Je vais utiliser, pour cela, la méthode « slice ». C'est une méthode de l'objet « string », donc de l'objet chaîne de caractères, qui me permet d'aller extraire une « slice », donc un extrait d'une chaîne de caractères. Alors quel extrait je veux ? Je veux commencer à l'index 0, c'est-à-dire au début de ma chaîne de caractères et je veux m'arrêter deux caractères avant la fin, c'est-à-dire, la longueur de la chaîne de caractères, moins deux. Pourquoi moins deux ? Eh bien p et x, j'ai deux lettres. Et, j'obtiens la même chose, ici, que dans « fontSizeCurrent », mais sans le px. Je stocke cela dans « fontSizeNumber ». Alors, maintenant, je vais voir si l'opération demandée c'est « bigger » ou « smaller », grâce à un « if », rappelez-vous que « bigger » et « smaller », c'est-à-dire l'opération, c'est un paramètre que je passe à la fonction « textResize » et qui dépend du bouton sur lequel je clique. Rappelez-vous, vous avez « smaller » et « bigger » au moment de joindre cette fonction « textResize », à l'événement « onclick » des deux boutons. Alors, si on me demande d'augmenter la taille du texte, eh bien je crée une variable qui s'appelle « newSize », mais je vais ajouter deux pixels à « fontSizeNumber », et vous voyez que pour être bien certain que c'est une opération mathématique et que ceci est bien compris comme un nombre, j'utilise la fonction « number », pour le convertir correctement en un nombre, avant de faire mon addition ou ma soustraction, ici, si la taille doit être plus petite. Maintenant que j'ai la nouvelle taille de mon élément, eh bien je vais assigner cette nouvelle taille à l'élément en question, grâce à la propriété « Style » et à la propriété « CSS fontSize » et regardez, je prends la « newSize », ici. Je lui remets l'unité de mesure px, donc px est une chaîne de caractères donc le + est, ici, l'opérateur de concaténation. Puis, comme je suis dans une boucle, je recommence toutes ces opérations chaque fois, pour chaque élément de cette « array elementsToResize », et donc pour chaque H1, H2 et paragraphe que je désire redimensionner. Voilà comment cela fonctionne, et vous voyez le résultat, ici mes éléments sont plus petits ou plus grands.

L'essentiel de JavaScript

​Ajoutez des fonctionnalités interactives à vos pages web avec JavaScript. Découvrez la syntaxe, le DOM, l'utilisation des bibliothèques JavaScript populaires, etc.

Aucun commentaire n´est disponible actuellement
 
Logiciel :
Spécial abonnés
Date de parution :26 avr. 2016

Votre formation est disponible en ligne avec option de téléchargement. Bonne nouvelle : vous ne devez pas choisir entre les deux. Dès que vous achetez une formation, vous disposez des deux options de consultation !

Le téléchargement vous permet de consulter la formation hors ligne et offre une interface plus conviviale. Si vous travaillez sur différents ordinateurs ou que vous ne voulez pas regarder la formation en une seule fois, connectez-vous sur cette page pour consulter en ligne les vidéos de la formation. Nous vous souhaitons un excellent apprentissage avec cette formation vidéo.

N'hésitez pas à nous contacter si vous avez des questions !