Cette traduction est incomplète. Aidez à traduire cet article depuis l'anglais.

Maintenant que nous avons examiné les blocks fondamentaux de construction de JavaScript,  nous testerons 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. 
Objective: Pour tester la compréhension des boucles, des fonctions, des conditions et des événements JavaScript 

Point de départ

Pour commencer cette évaluation, vous devez récupérer le fichier  ZIP et le décompresser quelque par sur votre ordinateur.

Note: vous pouvez également utiliser un site comme JSBin ou  Thimble pour effectuer vôtre é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 des panneaux JavaScript / CSS séparés, n'hésitez pas à utiliser les  éléments  <script>/ <style> dans la page HTML.

Résumé du projet

Vous avez reçu des fichiers HTML, CSS et 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:

  • Positionnez absolument les trois éléments à l’intérieur du full-img <div>- le <img>format dans lequel l’image pleine grandeur est affichée, un  <div> vide dimensionné pour avoir la même taille que le <img>et placé juste au-dessus (ceci est utilisé pour appliquer un effet assombrissant au image via une couleur d'arrière-plan semi-transparente), et un bouton <button>qui est utilisé pour contrôler l'effet d'assombrissement.
  • Réglez la largeur des images à l'intérieur des images thumb-bar <div>(appelées images miniatures) à 20% et faites-les flotter à gauche pour qu'elles soient côte à côte sur une ligne.

Votre JavaScript doit:

  • Loop through all the images, and for each one insert an <img> element inside the thumb-bar <div> that will embed that image in the page.
  • Attach an onclick handler to each <img> inside the thumb-bar <div> so that when they are clicked, the corresponding image will be displayed in the displayed-img <img> element.
  • Attach an onclick handler to the <button> so that when it is clicked, a darken effect is applied to the full-size image. When it is clicked again, the darken effect is removed again.

To give you more of an idea, have a look at the finished example (no peeking at the source code!)

Steps to complete

The following sections describe what you need to do.

Looping through the images

We've already provided you with lines that store a reference to the thumb-bar <div> inside a variable called thumbBar, create a new <img> element, set its src attribute to a placeholder value xxx, and append this new <img> element inside thumbBar.

You need to:

  1. Put the section of code below the "Looping through images" comment inside a loop that loops through all 5 images — you just need to loop through five numbers, one representing each image.
  2. In each loop iteration, replace the xxx placeholder value with a string that will equal the path to the image in each case. We are setting the value of the src attribute to this value in each case. Bear in mind that in each case, the image is inside the images directory and its name is pic1.jpg, pic2.jpg, etc.

Adding an onclick handler to each thumbnail image

In each loop iteration, you need to add an onclick handler to the current newImage — this should:

  1. Find the value of the src attribute of the current image. This can be done by running the getAttribute() function on the <img> in each case, and passing it a parameter of "src" in each case. But how to get the image? Using newImage won't work, as the loop is completed before the event handlers are applied; doing it this way would result in the src value of the last <img> being returned in every case. To solve this, bear in mind that in the case of each event handler, the <img> is the target of the handler. How about getting the information from the event object?
  2. Run a function, passing it the returned src value as a parameter. You can call this function whatever you like.
  3. This event handler function should set the src attribute value of the displayed-img <img> to the src value passed in as a parameter. We've already provided you with a line that stores a reference to the relevant <img> in a variable called displayedImg. Note that we want a defined named function here.

Writing a handler that runs the darken/lighten button

That just leaves our darken/lighten <button> — we've already provided a line that stores a reference to the <button> in a variable called btn. You need to add an onclick handler that:

  1. Checks the current class name set on the <button> — you can again achieve this by using getAttribute().
  2. If the class name is "dark", changes the <button> class to "light" (using setAttribute()), its text content to "Lighten", and the background-color of the overlay <div> to "rgba(0,0,0,0.5)".
  3. If the class name not "dark", changes the <button> class to "dark", its text content back to "Darken", and the background-color of the overlay <div> to "rgba(0,0,0,0)".

The following lines provide a basis for achieving the changes stipulated in points 2 and 3 above.

btn.setAttribute('class', xxx);
btn.textContent = xxx;
overlay.style.backgroundColor = xxx;

Hints and tips

  • You don't need to edit the HTML or CSS in any way.

Assessment

If you are following this assessment as part of an organized course, you should be able to give your work to your teacher/mentor for marking. If you are self-learning, then you can get the marking guide fairly easily by asking on the discussion thread about this exercise, or in the #mdn IRC channel on Mozilla IRC. Try the exercise first — there is nothing to be gained by cheating!

 

In this module

 

Étiquettes et contributeurs liés au document

Contributeurs à cette page : Jcninho87, SphinxKnight, tonybengue
Dernière mise à jour par : Jcninho87,