Découvrir Java pour le web

Exploiter JavaScript pour les interactions

TESTEZ LINKEDIN LEARNING GRATUITEMENT ET SANS ENGAGEMENT

Tester maintenant Afficher tous les abonnements
À l'aide d'une fonctionnalité de chronomètre, vous ajouterez des interactions en utilisant un code JavaScript intégré à la maquette.
07:30

Transcription

Nous allons maintenant ajouter des interactions dans d'autres pages. Ces interactions vont être écrites en Javascript. Si on regarde notre page principale ici, l'interaction principale est l'incrémentation du temps de façon à ce que le temps s'écoule pour notre projet à intervalles réguliers. Nous allons ajouter une balise de scripts dans notre page. À la fin de la page, pour ne pas ralentir son chargement. Et aussi disposer tous les objets de la page, et notamment nos temps, affichés en face de chaque projet. Maintenant, il faut avoir une vision du temps écoulé pour chaque projet. Pour ça, on va déclarer une variable qui contient la liste des projets. C'est une variable « liste », qui est définie avec une notation qui est la notation d'objets Javascript (« Javascript object notation »), qu'on connait aussi sous le nom de JSON. Pour chaque entrée, on a réutilisé les identifiants projets. Et « 0 » pour le repos. Donc pour chaque entrée, on a un champ « nom » et un champ « durée ». Mais il faut aussi associer dans notre HTML ces identifiants pour pouvoir, lorsqu'on va traiter chaque valeur, retrouver l'identifiant du projet correspondant. Pour ça, on va copier grâce au Ctrl+J, qu'on a vu précédemment, les identifiants et les associer au span de chaque temps, à partir de celui-là. On peut aussi prendre celui-là, puisqu'il faudra un temps de repos, mais je vais le faire d'abord là-dessus. Ctrl+J. Et j'ajoute un attribut, qui est personnalisé parce qu'il se voit au préfixe « data » qui est proposé en HTML5, et en HTML5, il est conseillé de faire précéder tous les attributs par « data ». Et je vais pouvoir coller l'identifiant que j'ai précédemment copié. Voilà. Pour celui-là, il faudra un « data-id » de projet à zéro que j'aurais pu copier aussi. Voilà. Donc là, on a bien un « id » de projet associé à chaque span, et donc on va pouvoir les retrouver et les traiter. Pour retrouver l'élément à sélectionner, on va utiliser notre sélecteur CSS, qu'on a vu aussi précédemment. « Input checked » pour trouver l'élément coché. Ici, c'est celui-là. Et puis, le span correspondant à cet « input checked », donc on prend l'élément qui a la classe « temps » ici, qui suit notre « input checked ». Et on utilise une méthode assez méconnue mais très pratique, qui est « querySelector », qui permet de retrouver un élément d'après un sélecteur CSS. Voilà. Il y a aussi « getElementById » si on voulait le faire par son identifiant, ou « getElementsByTagname » pour retrouver plusieurs éléments d'après leurs noms de balises. Maintenant que l'on a l'élément actuellement sélectionné, il faut retrouver son identifiant pour ça, mais on va prendre l'attribut « data-id » de projet qu'on vient de créer pour le temps courant. Ensuite, on va retrouver le projet courant en récupérant dans la liste, d'après l'identifiant, l'objet correspondant. Il ne reste plus qu'à tester si l'identifiant courant est différent de « 0 », puisqu'on a rien à faire quand on est en repos, on a pas à faire des commandes « temps ». Il nous faut maintenant mesurer le temps qui s'est écoulé depuis le chargement de la page pour ce projet sélectionné. Pour travailler sur le temps, il va nous falloir des fonctions spécifiques. Pour ça, nous allons inclure un Javascript qui contient plusieurs fonctions de temps que j'ai préparées. Notamment une fonction qui permet, d'après un « time stamp », c'est-à-dire un numéro correspond à la date et l'heure actuelles, qui déduit le nombre de secondes. Je vais fixer ça au début du chargement de la page et faire la différence au fur et à mesure pour voir le temps écoulé. Et puis aussi une fonction de formatage qui va permettre de formater le temps en nombre de jours en prenant le nombre de secondes dans une journée, le nombre de secondes dans une heure, le nombre de secondes dans une minute, et donc on pourra faire un formatage correct du temps, et puis aussi une fonction pratique pour ajouter des zéros quand on n'a qu'un seul chiffre. Alors, je vais inclure ce Javascript. Cette notation est importante puisqu'ici, ça me permet d'inclure des Javascripts existants. Ils sont en général groupés dans un répertoire « js/temps.js » Voilà, j'inclus mon Javascript. Très important : fermer la balise de cette manière, c'est celle qui est la mieux comprise par tous les navigateurs. Je peux donc maintenant, pour le projet courant, stocker le début. Donc au chargement de la page, je vais stocker l'heure actuelle, le time stamp actuel. Et après faire la différence au fur et à mesure grâce à une fonction. Cette fonction, je vais l'écrire ; mais d'abord, je fixe l'appel à intervalles réguliers de cette fonction, donc je l'appellerai « mise à jour temps », « majTemps », et puis je l'appelle à intervalles de 1000 ms. Donc à toutes les secondes, cette fonction sera appelée. Cette fonction, je vais la définir au préalable. Par exemple ici, voilà. Je déclare une variable, j'y associe une closure. Une closure, c'est une fonction définie à la volée qui peut utiliser des variables locales et qui est stockée dans une variable. La forme de closure est très utilisée en Javascript. J'aurais aussi pu définir ma fonction de façon plus classique, en faisant « function=majtemps() », et ainsi de suite. Ici on va reprendre la notation « accolade ». Si on s'intéresse maintenant à l'intérieur de la fonction, je calcule le temps total du projet en faisant la différence entre maintenant et le début de chargement de ma page. Et puis en ajoutant ce temps à la durée déjà travaillée sur le projet, qui est stockée dans ma liste. Enfin, une fois que j'ai cette durée totale, je la formate ici. Et si jamais ma durée totale était non valide, j'utiliserais la valeur « repos ». Ce qui n'est pas le cas ici, puisque j'ai fait mon test. Il ne reste plus qu'à mettre à jour une première fois, quand même, le temps au chargement de la page avant même que j'aie une seconde d'écoulée pour que, dès le début, l'utilisateur voit le temps réel travaillé sur le projet. Le projet sélectionné. On peut tester. Nous avons bien le temps qui s'écoule à partir d'un temps qui était initialement dans le tableau. On pourrait en effet rajouter, de la même façon, une mise à jour de toute la liste en parcourant les éléments avec un « querySelectorAll ». Nous voyons donc que le Javascript est un langage très pratique pour créer des interactions. On va maintenant voir comment utiliser des fonctions plus avancées. Il existe aussi des éditeurs qui associent HTML, CSS et Javascript pour s'adapter au format mobile. C'est ce que nous allons voir.

Découvrir Java pour le web

Développez une application web avec Java. Apprenez à écrire des servlets, des entités ​J​PA (Java Persistence API) d'accès aux données et des pages JSP (Java Server Pages).

2h06 (23 vidéos)
Aucun commentaire n´est disponible actuellement
 
Logiciel :
Spécial abonnés
Date de parution :25 janv. 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 !