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 du HTML5

Aller plus loin dans les attributs

TESTEZ LINKEDIN LEARNING GRATUITEMENT ET SANS ENGAGEMENT

Tester maintenant Afficher tous les abonnements
Avec l'attribut data-*, vous pouvez définir, de manière valide, tout type d'attribut nécessaire à vos applications. Vous allez voir que JavaScript va de pair et vous permet de les interroger de manière native.
05:01

Transcription

HTML5 nous apporte la possibilité de pouvoir créer nos propres attributs, au travers de l'attribut data-*. Le plus simple, c'est de le mettre en démonstration pour mieux l'appréhender. Voilà, ici j'ai trois paragraphes, on avait vu, le premier déplaçable, le deuxième éditable, le troisième menu contextuel. J'ai supprimé le menu contextuel, pour focaliser simplement sur data. Ce qui nous intéresse là, c'est de pouvoir apporter un attribut supplémentaire, donc ici de dire on va créer simplement un attribut "data", tiret "infos" par exemple, on pourrait inventer n'importe quel mot, tout est valable; évitez quand même d'utiliser des mots trop alambiqués. Utilisez des mots explicites dans votre langue, donc data-infos égal entre guillemets, vous placez une valeur, donc ici élément déplaçable par exemple. On pourrait créer pour le menu contextuel ici un data, tiret infos. Ca pourrait être un autre attribut, pas forcément utiliser toujours data info, mais là ça serait pour passer des informations sur la balise, donc data-infos tiret menu contextuel par exemple. Donc ici, si j'enregistre cette partie-là et que je joins un fichier javascript à cette page, ici, je vais pouvoir venir dans le javascript et dire- je vais faire un écouteur sur le chargement de la page, je vais passer une fonction anonyme. Je vais créer une variable P, qui va venir récupérer toutes les balises de type P ici, je vais les récupérer. Et je vais pouvoir faire une boucle maintenant en disant, pour tous les éléments, alors on va créer un incrémenteur, i égal zéro, le nombre d'élément qu'il y a dans P. p lenght, voilà. Pour tous les paragraphes de un à un, tant que i est inférieur à nb, donc tant que tu en as, tu incrémentes de un à chaque fois. Et on va dire qu'on va placer un écouteur, ici, sur chacun de ces paragraphes, en disant chaque fois qu'on clique tu appeleras la fonction affiche. Et quand on appelle la fonction affiche, Ce qu'on va faire maintenant, c'est créer une variable qui va récupérer les datas. Donc ces datas, on les a vu, on les passe directement dans data-infos, Et on a un objet qui s'appelle dataset. Donc on va les récupérer sur l'élément. Donc égal, this, dataset, on va récupérer le dataset, le jeu de datas, de tous ces attributs datas. Et on va passer une deuxième variable, qui serait "résultat". On va fabriquer une observation de tous ces éléments-là. Donc ici, je vais créer une balise conditionnelle, "if" il y a des éléments datas, alors la meilleure façon de les trouver, c'est de dire si l'objet key datas a une longueur, donc si tu as pu me récupérer quelque chose, ça veut dire qu'il y a des éléments dedans ou s'il n'y en a pas, là si c'est strictement égal à zéro, ça veut dire qu'il y a rien, je vais dire résultat, pas d'éléments, rien à afficher. Si par contre tu as du résultat, tu m'affichera datas. Et là je vais faire console.log(résultats) Si j'enregistre cette partie-là, ici, et que je passe maintenant dans mon navigateur pour venir tester, j'ouvre la console ici, je vais passer en partie console, j'actualise. Vous voyez, si je clique sur le premier, il me dit : il y a un élément qui s'appelle infos, qui est l"élément déplaçable, et si je clique là-dessus il y a un élément infos qui s'appelle menu contextuel. Bien sûr, si j'avais eu d'autres éléments datas, ici tous ces éléments seraient listés sous cette forme d'objet dataset ici, qui viendrait les incrémenter. Alors, on peut aller un tantinet plus loin ici, c'est que regardez, si maintenant je viens et que pour la partie contenu éditable, je me dise - ben le data-infos, je vais l'utiliser pareil, mais au lieu d'utiliser égal double quote, je vais utiliser un simple quote. Alors ça c'est une astuce simplement pour ici puisque je tape le contenu du HTML en dur, mais si c'était généré par du PHP côté serveur, du javascript côté serveur sous nod, ça se ferait de manière automatique, il y aurait une sorte d'HTML entité qui viendrait bloquer tout ça. Donc ici on va le faire on dur, donc je préfère l'écrire simple quote, ça sera plus parlant. Donc ici je vais pouvoir passer un objet, qui est un objet littéral, qui va être manifesté par ces accolades ici. Et puis, à l'intérieur de ces accolades, je vais passer un objet de type type, je vais dire c'est un paragraphe par exemple, virgule, je vais passer nature et je vais dire que c'est un contenu modifiable. Par contre il va me falloir venir maintenant modifier, ici, ma partie d'objet que je vais récupérer. Donc ici, je vais commenter cette partie, et je vais dire cette fois je vais faire un console.log, Mais je ne vais pas utiliser le résultat de manière telle quelle, je vais utiliser une fonction native de javascript, qui est JSON.parse Je vais dire tu vas pouvoir me parser cet objet, et parce que c'est un objet, résultat, et ici à résultat je vais demander les infos, puisque ce sont des infos dont il s'agit. Si j'enregistre maintenant, ici, regardez ici, si je passe, j'actualise ma page. Alors bien entendu, si je clique sur le premier, ça me fait une erreur, il me dit qu'il n'y a pas d'objet JSON, Mais si je clique sur le second ici, il me dit c'est un objet de type paragraphe, nature contenu modifiable. Le gros intérêt, c'est que maintenant je peux le parser comme un objet. Donc si je viens ici et je lui dis : donne moi, par exemple, la nature de cet élément, Contrôle S, j'actualise ma page, voilà, ici si je clique on me dit contenu modifiable. Donc vous voyez que les attributs data-* peuvent avoir une grande portée, une grande utilisation au sein de nos applications. Donc HTML5 nous a apporté une merveille ici, puisque ça reste compatible, et donc notre HTML restera conforme, sera valide, et nous permettra de passer tous les attributs personnalisables et personnalisés dont l'on a besoin dans nos applications.

L'essentiel du HTML5

Préparez la structure de vos sites web de manière évolutive, sémantique, et accessible à tous avec le HTML5. Abordez la gestion du texte, les balises et les attributs, etc.

5h13 (63 vidéos)
Aucun commentaire n´est disponible actuellement
 
Logiciel :
Spécial abonnés
Date de parution :29 juin 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 !