Découvrir ASP.NET Core 1.0

Ajouter des interactions JavaScript

Testez gratuitement nos 1246 formations

pendant 10 jours !

Tester maintenant Afficher tous les abonnements
Grâce à une fonction de favoris, ajoutez des interactions en utilisant un code JavaScript intégré à la maquette.
05:38

Transcription

Nous avons maintenant une maquette très complète, mais on veut la rendre plus réaliste en permettant d'interagir un petit peu avec elle. Pour cela, on va par exemple implémenter une fonctionnalité de favoris, ici, on va cliquer sur favori et incrémenter le nombre total de favoris sélectionnés. Alors, pour ça on revient sur notre page et on va rajouter du Javascript. Alors, pour ajouter du Javascript, on peut le rajouter n'importe où dans la page, mais il est d'usage de le mettre à la fin pour ne pas alourdir la page. Et on peut éventuellement inclure un Javascript avec src égal et spécifier un nom de chemin, soit relatif ici, soit absolu en http, voilà. Surtout pas absolu. Fichier, c'est les mêmes règles que le CSS. Donc ici, on veut pas réutiliser notre Javascript. Il est là, on aura pas de favoris dans d'autres pages, donc il sera très bien directement dans la page. Pour manipuler nos éléments de favoris, il va falloir les distinguer des autres. Le sortir du texte, ici, donc Je vais utiliser une balise span, qui n'a pas de signification particulìere mais qui permet d'isoler un élément, soit pour du CSS soit pour du Javascript, et puis je vais l'appeler « nbfav ». Et puis on va aussi prendre les boutons de favoris et les distinguer. Alors, je sélectionne avec Control-D, fonctionnalité très pratique de Visual Studio Code, et puis affecter une classe à mes favoris. Donc mes favoris comme ça pourront être retrouvés en Javascript assez facilement, puisqu'ils se distinguent par cette classe. Je vais les marquer actifs, comme ça je pourrai distinguer. L'utilisateur pourra distinguer aussi, surtout, les favoris actifs de ceux qui ne le sont pas. Donc ici, favoris actifs, on va leur donner une couleur. Très bien. Et un texte en blanc, pour puisque la couleur est un peu foncée, ça sera parfait. Donc quand on cliquera dessus, ils se désactiveront et on décrémentera le nombre de favoris. Donc là d'ailleurs il faut que je passe à un, parce que j'en ai un qui est actif. Donc, première tâche à faire, retrouver mes éléments dans ma page. Donc je vais retrouver mes favoris Alors, ça c'est dans le document. Je vais demander, dans le document, tous les éléments qui répondent à un critère CSS. Donc querySelectorAll c'est tous, et puis querySelector c'est celui qui a le premier qui répond au sélecteur. Alors, ici, le tous, c'est tout ceux qui ont le fav. Tout cela, je veux capter le clic dessus. Et puis, aussi, je vais avoir une autre variable, qui est le nombre de favoris. nbfav. Que je vais pouvoir retrouver par une méthode plus connue que querySelectorAll, qui est getElement ById, puisque c'est par son identifiant que je vais le distinguer. Je l'ai appelé dièse nbfav. Voilà. D'ailleurs, querySelectorAll j'ai mis fav. C'est point fav, puisque c'est le sélecteur CSS qu'il faut utiliser. Et donc là j'ai tout ce qu'il faut pour travailler. Je peux maintenant parcourir ma liste des favoris et pour chacun affecter une méthode de traitement du clic. Donc ici faire un onclick. Alors, onclick, il faut que j'affecte ici une fonction. Soit j'ai une fonction qui est prédéfinie, je mets son nom, mais ça n'est pas le cas ici. Donc je vais faire ce qu'on appelle une closure. C'est une fonction qu'on crée à la volée qui peut utiliser des variables locales par exemple i, ici, ou fav. nbfav j'aurais pu. Mais si je n'en ai pas besoin, je vais dire que l'élément sur lequel on a appliqué je vais pouvoir l'inspecter. L'inspecter pour regarder, en fait, le nom de sa classe. Si le nom de sa classe c'est fav, alors à ce moment-là, il faut que j'incrémente le nombre de favoris. Si non, il va falloir que je décrémente. Et puis je vais permuter aussi son type. Dans un cas, il va être s'il est en fav, il va passer en fav actif, et dans le cas où il est en fav actif, il va passer en fav. Voilà, j'ai permuté son état. On va aussi déterminer de quelle quantité on veut augmenter ou diminuer les favoris. Alors, j'ai mis à moins un, mais c'est pas là qu'on va le faire. Si il n'est pas encore en favori, je vais faire un plus un. Voilà. Si non, ça sera un moins un. delta étant la différence. Voilà. Et puis donc on va dire que donc nbfav point Alors, innerHTML c'est pour modifier le contenu de ce span, et c'est égal à il faut que je le transforme en entier, donc je fais un parsing. plus delta. Et donc il va changer de valeur. Donc on voit notre favori ici. Si je clique dessus, je décrémente en haut. On voit, il est passé à zéro. Et puis si je re-clique dessus, il re-passe à un. Et pour les nouveaux, voilà, donc je peux tous les positionner à un, ou diminuer. Donc on a ici, avec le Javascript, relativement simplement implémenté une fonctionnalité côté client. Maintenant, on va s'intéresser, grâce à ASP.NET Core, à tout ce qui est côté serveur.

Découvrir ASP.NET Core 1.0

Prenez en main ASP.NET Core 1.0. Développez ainsi des applications web multiplateformes en C#, déployables sur Windows, Linux, Mac ainsi qu'en containers Dockers.

1h32 (20 vidéos)
Aucun commentaire n´est disponible actuellement
 
Logiciel :
ASP.NET Core ASP.NET Core 1
Spécial abonnés
Date de parution :1 févr. 2017

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 !