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

Afficher et masquer des sections de formulaire

TESTEZ LINKEDIN LEARNING GRATUITEMENT ET SANS ENGAGEMENT

Tester maintenant Afficher tous les abonnements
Voyez comment réagir à un évènement créé par un champ de formulaire. Vous allez pouvoir afficher ou masquer des éléments de la page.

Transcription

Dans cette vidéo, nous n'allons plus réagir à l’événement « onSubmit », du formulaire, mais à un événement « click » d'un des champs du formulaire. Alors, le formulaire en question, le voici. Le champ qui m'intéresse, c'est cette petite case à cocher : « Cliquez ici pour recevoir nos brochures », quand je coche cette case, je révèle une section de mon formulaire et quand je décoche cette case, eh bien je cache la section de ce formulaire. J'ai donc affaire, ici, à un « Toggle Button », comme on dit en anglais, à un bouton « on / off », à un « switch », qui allume ou qui éteint une section de mon formulaire, comme vous pouvez le constater, ici. Alors, comment réalise-t-on cela, en JavaScript, vous allez voir que c'est extrêmement simple. Petit détour, d'abord, par le code HTML pour vous montrer, ici, dans le formulaire, une balise « input type = checkbox », c'est donc une case à cocher qui a pour identifiant « brochures ». C'est donc la case à cocher qui est vide au départ et qui va me servir de bouton « on/off » pour afficher ou masquer une section de mon formulaire. La section de mon formulaire que je vais afficher ou masquer commence à la ligne suivante, c'est un « div », ici, qui s'appelle « tourSelection », et qui contient d'autres « checkbox », c'est-à-dire d'autres cases à cocher qui sont ici, et c'est donc l'ensemble de ces « checkbox », cases à cocher, que je veux afficher ou masquer. Au niveau du JavaScript, qu'est-ce que cela donne ? Je commence par un « window.onload », c'est-à-dire que je commence par attendre que la page soit complètement prête, que tout le DOM soit prêt, que tous les événements soient bien chargés avant d'exécuter une fonction qui s'appelle « preparePage ». Cette fonction, elle est définie juste ici, et que fait-elle ? Elle commence par aller chercher, grâce à « getElementById », l'élément « brochure » du DOM. L'élément « brochure », rappelez-vous, c'est précisément la case à cocher qui va me servir de bouton « on/off ». Je vous l'avais dit, ça commence toujours par aller chercher l'élément dans le DOM, et, la plupart du temps, on utilise « getElementById », pour cela. Alors, qu'est-ce que je vais faire, avec cet élément ? Eh bien je vais associer à l’événement « onclick » de cette case à cocher, une fonction anonyme que je définis, ici. Cette fonction, qu'est-ce qu'elle va faire ? Elle va utiliser un « if » pour vérifier quelque chose et elle va vérifier, toujours au niveau de l'élément « brochures », la propriété « checked ». Alors, qu'est-ce que cette propriété ? Rappelez-vous, dans la vidéo précédente, on avait besoin d'accéder à un champ de formulaire qui contenait une adresse e-mail. C'était un champ texte, et, pour cela, on avait besoin de la propriété « .value » pour aller rechercher la valeur tapée dans le champ. Alors, ici, « .value », pour une case à cocher, n'a pas beaucoup de sens, donc, à la place, on utilise « .checked ». Et cette propriété est dite booléenne parce qu'elle a deux valeurs possibles. « True » ou « false ». « .checked » sera « true » quand la case est cochée, et « .checked » sera « false » quand la case est décochée. Je n'ai donc pas besoin, ici, de comparer ceci à une valeur particulière. Je n'ai pas besoin de faire « ==true ». En effet, cette propriété « checked » va naturellement me renvoyer « true » ou « false ». Donc, le « if », ici, va naturellement comprendre le « true » ou le « false » renvoyé par cette propriété « checked ». Si c'est « checked », si « checked = true », si la case est cochée, eh bien, je vais rechercher l'élément « tourSelection », c'est le « div » que je veux afficher ou masquer. Et là, c'est la première fois que l'on fait ceci dans notre cours, je vais accéder à la propriété « style » de cet élément, et cela, tenez-vous bien, me donne accès au style CSS de cet élément « tourSelection ». Dans les styles CSS, je vais, plus précisément encore, m'adresser à la propriété « display » du CSS, et je vais rendre sa valeur égale à « block ». C'est comme si je faisais, dans la feuille de style CSS, « display:block », et cela va afficher la section « tourSelection ». « else », si jamais « checked » est égale à « false », si jamais la case à cocher n'est pas cochée, je vais rechercher cet élément « tour Selection », je vais de nouveau accéder, à ces styles CSS, et, plus précisément, à la propriété « CSS display », que je rend égale à « none », c'est comme si je faisais « displayNone » dans la feuille de style CSS pour masquer ce « div », pour masquer cette section de mon formulaire. Alors, n'oubliez pas que « preparePage », ici, sera exécuté une fois seulement, lors du chargement de la page. Donc, ici, qu'est-ce que j'ai fait ? J'ai associé à l’événement « onclick » de « brochures » une fonction anonyme, donc, cette fonction va s’exécuter quand je vais cliquer sur ma case à cocher « brochures », mais je vais faire encore autre chose, ici, dans « preparePage », je vais initialement décider de cacher l'élément « tourSelection ». Vous voyez que je fais « display none », sur cet élément « tourSelection », pour qu'initialement, cette section soit cachée au chargement de la page. Vous allez me dire que j'aurais pu faire cela directement dans la feuille de style CSS. J'aurais pu dire en CSS, « display:none » pour cet élément « tourSelection ». J'aurais pu, mais ce n'est pas considéré comme une meilleure pratique. En effet, si l'internaute décide, pour une raison quelconque, de désactiver son JavaScript, eh bien, il n'aura plus aucun moyen de révéler ces éléments, d'avoir « tourSelection » affiché sur sa page. Donc, je vais utiliser, pour cela, le JavaScript comme cela, si jamais le JavaScript n'est pas disponible, l'internaute qui n'a pas de JavaScript aura quand même accès à ces éléments de formulaires. Nous avons ici affaire à une idée qui s'appelle le « progressive enhancement », en anglais. C'est-à-dire l'amélioration progressive. Cela doit fonctionner normalement pour tous les utilisateurs, mais si JavaScript est disponible, eh bien alors, j'améliore ma page par un peu plus d'interactivité, dans ce cas-ci.

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 !