Maintenant que nous avons examiné les blocs fondamentaux de construction de JavaScript, nous allons tester vos connaissances sur les boucles, les fonctions, les conditions et les événements en vous aidant à créer un élément assez commun que vous verrez sur de nombreux sites web. Une galerie JavaScript animée.
| Conditions préalables: | Avant de tenter cette évaluation, vous devriez avoir parcouru tous les articles de ce module. |
|---|---|
| Objectif: | Tester la compréhension des boucles, des fonctions, des conditions et des événements JavaScript. |
Pour réaliser cette évaluation, vous devez récupérer le fichier ZIP et le décompresser quelque par sur votre ordinateur.
Vous pouvez également utiliser un site comme JSBin ou Thimble pour effectuer votre évalution. Vous pouvez copier le code HTML,CSS et JavaScript dans l'un de ces éditeurs en ligne. Si l'éditeur en ligne que vous utilisez ne dispose pas de panneaux JavaScript/CSS séparés, n'hésitez pas à utiliser les éléments <script>/<style> dans la page HTML.
Note: Si vous êtes bloqué, demandez-nous de l'aide — voir la section {{anch("Évaluation ou aide supplémentaire")}} au bas de cette page.
Vous avez reçu des fichiers HTML, CSS, des images et quelques lignes de code JavaScript; vous devez écrire le code JavaScript nécessaire pour en faire un programme fonctionnel. Le corps HTML ressemble à ceci:
<h1>Image gallery example</h1> <div class="full-img"> <img class="displayed-img" src="images/pic1.jpg"> <div class="overlay"></div> <button class="dark">Darken</button> </div> <div class="thumb-bar"> </div>
L'exemple ressemble à ceci:
Les parties les plus intéressantes du fichier CSS de l'exemple:
full-img <div>: le <img> dans lequel l’image est affichée grandeur nature, un <div> vide dimensionné à la même taille que le <img> et placé juste au-dessus (ceci est utilisé pour appliquer un effet assombrissant à l'image via une couleur d'arrière-plan semi-transparente), et un bouton <button>qui est utilisé pour contrôler l'effet d'assombrissement.thumb-bar <div>(appelées images miniatures) à 20% et faites un float à gauche pour qu'elles soient côte-à-côte sur une ligne.Votre JavaScript doit:
<img> à l'intérieur de thumb-bar <div> qui va incorporer cette image dans la page.onclick à chaque <img> à l'intérieur de thumb-bar <div> pour que, lorsqu'elles sont cliquées, l'image correspondante soit affichée dans l'élément displayed-img <img>.onclick au <button> pour que, lorsqu'il est cliqué, un effet assombrissant soit appliqué à l'image grandeur nature. Losrqu'il est cliqué à nouveau, l'effet doit disparaitre.Pour vous donner une idée, regardez l'exemple (Ne regardez pas le code source!).
Les sections suivantes décrivent ce que vous avez à faire.
Nous vous avons fourni des lignes qui storent une référence à thumb-bar <div> dans une variable nommée thumbBar, créent un nouvel élément <img>, définissent son attribut src à un emplacement de valueur xxx, et ajoutent ce nouvel élément <img> dans thumbBar.
Vous avez besoin de:
xxx de l'emplacement par une chaîne de caractères qui correspond au chemin de l'image considérée. Il faut définir la valeur de l'attribut src dans chaque cas. Gardez à l'esprit que, à chaque fois, l'image est dans le répertoire des images et que son nom est pic1.jpg, pic2.jpg, etc.À chaque itération, vous devez ajouter un gestionnaire onclick au newImage courant. Il doit:
src de l'image courante. Cela peut être fait avec la fonction getAttribute() sur <img>, en lui passant le paramètre "src" à chaque fois. Mais comment avoir l'image? Utiliser newImage ne marche pas du fait que la boucle est finie avant que le gestionnaire d'événement ne soit appelé; de cette manière, la valeur de src sera toujours celle du dernier <img>. Pour résoudre cela, gardez à l'esprit que, pour chaque gestionnaire d'événement, c'est <img> qui en est la cible. Pourquoi ne pas récupérer l'information de l'objet événement?src. Vous pouvez nommer la fonction à votre guise.src de displayed-img <img> à la valeur du src passé en paramètre. Nous vous avons fourni une ligne qui stocke une référence de l'<img> concerné dans une variable nommée displayedImg. Notez que nous voulons une fonction nommée.Il ne reste que notre <button> d'assombrissement — nous vous avons fourni une ligne qui stocke une référence au <button> dans une variable appelée btn. Vous devez ajouter un gestionnaire onclick qui:
<button> — à nouveau, vous pouvez utiliser getAttribute()."dark", changer la classe du <button> pour "light" (avec setAttribute()), son contenu textuel par "Lighten", et le {{cssxref("background-color")}} du voile d'assombrissement <div> par "rgba(0,0,0,0.5)"."dark", changer la classe du <button> pour "dark", son contenu textuel par "Darken", et le {{cssxref("background-color")}} du voile d'assombrissement <div> par "rgba(0,0,0,0)".Les lignes suivantes fournissent une base pour réaliser les changements décrits aux points 2 et 3.
btn.setAttribute('class', xxx);
btn.textContent = xxx;
overlay.style.backgroundColor = xxx;
Si vous souhaitez que votre travail soit évalué, ou si vous êtes bloqué et que vous voulez demander de l'aide :
Si vous suivez cette évaluation dans le cadre d'un cours organisé, vous devriez pouvoir donner votre travail à votre professeur ou mentor pour la notation. Si vous apprenez en autodidacte, vous pouvez obtenir le guide de notation simplement en le demandant sur le fil de discussion de cet exercice, ou sur #mdn du canal IRC de Mozilla IRC. Faites d'abord l'exercice, vous ne gagnerez rien à tricher!
{{PreviousMenu("Learn/JavaScript/Building_blocks/Events", "Learn/JavaScript/Building_blocks")}}