path: root/files/fr/learn/javascript/building_blocks/image_gallery/index.html

---
title: Galerie d'images
slug: Learn/JavaScript/Building_blocks/Image_gallery
tags:
  - Apprendre
  - Boucles
  - Débutant
  - Evaluation
  - Gestionnaire d'événement
  - JavaScript
  - conditions
  - l10n:priority
  - Écriture de code
  - évènements
translation_of: Learn/JavaScript/Building_blocks/Image_gallery
original_slug: Apprendre/JavaScript/Building_blocks/Image_gallery
---
<div>{{LearnSidebar}}</div>

<div>{{PreviousMenu("Learn/JavaScript/Building_blocks/Events", "Learn/JavaScript/Building_blocks")}}</div>

<p>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.</p>

<table class="learn-box standard-table">
 <tbody>
  <tr>
   <th scope="row">Conditions préalables:</th>
   <td>Avant de tenter cette évaluation, vous devriez avoir parcouru tous les articles de ce module. </td>
  </tr>
  <tr>
   <th scope="row">Objectif:</th>
   <td>Tester la compréhension des boucles, des fonctions, des conditions et des événements JavaScript.</td>
  </tr>
 </tbody>
</table>

<h2 id="Point_de_départ">Point de départ</h2>

<p>Pour réaliser cette évaluation, vous devez récupérer le fichier<a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/gallery/gallery-start.zip?raw=true"> ZIP</a> et le décompresser quelque par sur votre ordinateur.</p>

<p>Vous pouvez également utiliser un site comme <a class="external external-icon" href="http://jsbin.com/">JSBin</a> ou  <a class="external external-icon" href="https://thimble.mozilla.org/">Thimble</a> pour effectuer votre évalution. Vous pouvez copier le code HTML,CSS et JavaScript dans l'un de ces éditeurs en ligne. <font><font>Si l'éditeur en<span> </span></font><font>ligne que<span> </span></font><font>vous utilisez ne dispose pas de<span> </span></font><font>panneaux JavaScript/CSS séparés, n'hésitez pas<span> </span></font><font>à utiliser les éléments</font><font><span> </span></font></font><code style='margin: 0px; padding: 0px 2px; border: 0px; font-style: normal; font-weight: 400; background-color: rgba(220, 220, 220, 0.5); border-radius: 2px; font-family: consolas, "Liberation Mono", courier, monospace; word-wrap: break-word; font-size: 1rem; color: rgb(51, 51, 51); letter-spacing: normal; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; text-decoration-style: initial;'>&lt;script&gt;</code><font><font>/</font></font><code style='margin: 0px; padding: 0px 2px; border: 0px; font-style: normal; font-weight: 400; background-color: rgba(220, 220, 220, 0.5); border-radius: 2px; font-family: consolas, "Liberation Mono", courier, monospace; word-wrap: break-word; font-size: 1rem; color: rgb(51, 51, 51); letter-spacing: normal; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; text-decoration-style: initial;'>&lt;style&gt;</code><font><font> dans la page HTML.</font></font></p>

<div class="note">
<p><strong>Note</strong>: Si vous êtes bloqué, demandez-nous de l'aide — voir la section {{anch("Évaluation ou aide supplémentaire")}} au bas de cette page.</p>
</div>

<h2 id="Résumé_du_projet">Résumé du projet</h2>

<p><font>Vous avez reçu des fichiers HTML, CSS, des images et quelques lignes de code JavaScript;<span> </span></font><font>vous devez écrire le code JavaScript nécessaire pour en faire un programme fonctionnel.<span> </span></font><font>Le corps HTML ressemble à ceci:</font></p>

<pre class="brush: html">&lt;h1&gt;Image gallery example&lt;/h1&gt;

&lt;div class="full-img"&gt;
  &lt;img class="displayed-img" src="images/pic1.jpg"&gt;
  &lt;div class="overlay"&gt;&lt;/div&gt;
  &lt;button class="dark"&gt;Darken&lt;/button&gt;
&lt;/div&gt;

&lt;div class="thumb-bar"&gt;

&lt;/div&gt;</pre>

<p>L'exemple ressemble à ceci:</p>

<p><img alt="" src="https://mdn.mozillademos.org/files/13787/gallery.png" style="display: block; margin: 0 auto;"></p>

<ul>
</ul>

<p><span style='background-color: #ffffff; color: #333333; display: inline !important; float: none; font-family: "Open Sans",arial,x-locale-body,sans-serif; font-size: medium; font-style: normal; font-weight: 400; letter-spacing: normal; text-align: start; text-decoration-style: initial; text-indent: 0px; text-transform: none; white-space: normal;'>Les parties les plus intéressantes du fichier CSS de l'exemple:</span></p>

<ul>
 <li style="margin: 0px 0px 6px; padding: 0px; border: 0px;"><font><font>Positionnez les trois éléments en absolu à l’intérieur du<span> </span></font></font><code style='margin: 0px; padding: 0px 2px; border: 0px; font-style: inherit; font-weight: inherit; background-color: rgba(220, 220, 220, 0.5); border-radius: 2px; font-family: consolas, "Liberation Mono", courier, monospace; word-wrap: break-word;'>full-img &lt;div&gt;</code><font><font>: le<span> </span></font></font><code style='margin: 0px; padding: 0px 2px; border: 0px; font-style: inherit; font-weight: inherit; background-color: rgba(220, 220, 220, 0.5); border-radius: 2px; font-family: consolas, "Liberation Mono", courier, monospace; word-wrap: break-word;'>&lt;img&gt;</code><font><font> dans lequel l’image est affichée grandeur nature, un <span> </span></font></font><code style='margin: 0px; padding: 0px 2px; border: 0px; font-style: inherit; font-weight: inherit; background-color: rgba(220, 220, 220, 0.5); border-radius: 2px; font-family: consolas, "Liberation Mono", courier, monospace; word-wrap: break-word;'>&lt;div&gt;</code><font><font> vide</font></font> <font><font>dimensionné à la même taille que le<span> </span></font></font><code style='margin: 0px; padding: 0px 2px; border: 0px; font-style: inherit; font-weight: inherit; background-color: rgba(220, 220, 220, 0.5); border-radius: 2px; font-family: consolas, "Liberation Mono", courier, monospace; word-wrap: break-word;'>&lt;img&gt;</code><font><font> 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<span> </span></font></font><code style='margin: 0px; padding: 0px 2px; border: 0px; font-style: inherit; font-weight: inherit; background-color: rgba(220, 220, 220, 0.5); border-radius: 2px; font-family: consolas, "Liberation Mono", courier, monospace; word-wrap: break-word;'>&lt;button&gt;</code><font><font>qui est utilisé pour contrôler l'effet d'assombrissement.</font></font></li>
 <li style="margin: 0px 0px 6px; padding: 0px; border: 0px;"><font><font>Réglez la largeur des images à l'intérieur de<span> </span></font></font><code style='margin: 0px; padding: 0px 2px; border: 0px; font-style: inherit; font-weight: inherit; background-color: rgba(220, 220, 220, 0.5); border-radius: 2px; font-family: consolas, "Liberation Mono", courier, monospace; word-wrap: break-word;'>thumb-bar &lt;div&gt;</code><font><font>(appelées images miniatures) à 20% et faites un float à gauche pour qu'elles soient côte-à-côte sur une ligne.</font></font></li>
</ul>

<p><span style='background-color: #ffffff; color: #333333; display: inline !important; float: none; font-family: "Open Sans",arial,x-locale-body,sans-serif; font-size: medium; font-style: normal; font-weight: 400; letter-spacing: normal; text-align: start; text-decoration-style: initial; text-indent: 0px; text-transform: none; white-space: normal;'>Votre JavaScript doit:</span></p>

<ul>
 <li>Itérer toutes les images dans une boucle, et pour chacune d'elle, insérer un élément <code>&lt;img&gt;</code> à l'intérieur de <code>thumb-bar &lt;div&gt;</code> qui va incorporer cette image dans la page.</li>
 <li>Associer un gestionnaire d'événement <code>onclick</code> à chaque <code>&lt;img&gt;</code> à l'intérieur de <code>thumb-bar &lt;div&gt;</code> pour que, lorsqu'elles sont cliquées, l'image correspondante soit affichée dans l'élément <code>displayed-img &lt;img&gt;</code>.</li>
 <li>Associer un gestionnaire d'événement <code>onclick</code> au <code>&lt;button&gt;</code> pour que, lorsqu'il est cliqué, un effet assombrissant soit appliqué à l'image <font><font>grandeur nature</font></font>. Losrqu'il est cliqué à nouveau, l'effet doit disparaitre.</li>
</ul>

<p>Pour vous donner une idée, regardez l'<a href="http://mdn.github.io/learning-area/javascript/building-blocks/gallery/">exemple</a> (Ne regardez pas le code source!).</p>

<h2 id="Les_différentes_étapes">Les différentes étapes</h2>

<p>Les sections suivantes décrivent ce que vous avez à faire.</p>

<h3 id="Itération_sur_les_images">Itération sur les images</h3>

<p>Nous vous avons fourni des lignes qui storent une référence à <code>thumb-bar &lt;div&gt;</code> dans une variable nommée <code>thumbBar</code>, créent un nouvel élément <code>&lt;img&gt;</code>, définissent son attribut <code>src</code> à un emplacement de valueur <code>xxx</code>, et ajoutent ce nouvel élément <code>&lt;img&gt;</code> dans <code>thumbBar</code>.</p>

<p>Vous avez besoin de:</p>

<ol>
 <li>Ajouter votre code en-dessous du commentaire <em>Looping through images</em> à l'intérieur d'une boucle qui itère sur les 5 images — vous n'avez besoin que de 5 itérations, chacune représentant une image.</li>
 <li>Remplacez, pour chaque itération,  la valeur <code>xxx</code> 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 <code>src</code> dans chaque cas. Gardez à l'esprit que, à chaque fois, l'image est dans le répertoire des images et que son nom est <code>pic1.jpg</code>, <code>pic2.jpg</code>, etc.</li>
</ol>

<h3 id="Ajout_dun_gestionnaire_onclick_à_chaque_miniature">Ajout d'un gestionnaire onclick à chaque miniature</h3>

<p>À chaque itération, vous devez ajouter un gestionnaire <code>onclick</code> au <code>newImage</code> courant. Il doit:</p>

<ol>
 <li>Trouver la valeur de l'attribut <code>src</code> de l'image courante. Cela peut être fait avec la fonction <code><a href="/en-US/docs/Web/API/Element/getAttribute">getAttribute()</a></code> sur <code>&lt;img&gt;</code>, en lui passant le paramètre <code>"src"</code> à chaque fois. Mais comment avoir l'image? Utiliser <code>newImage</code> 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 <code>src</code> sera toujours celle du dernier <code>&lt;img&gt;</code>. Pour résoudre cela, gardez à l'esprit que, pour chaque gestionnaire d'événement, c'est <code>&lt;img&gt;</code> qui en est la cible. Pourquoi ne pas récupérer l'information de l'objet événement?</li>
 <li>Exécuter une fonction, en lui passant en paramètre la fameuse valeur de <code>src</code>. Vous pouvez nommer la fonction à votre guise.</li>
 <li>Cette fonction du gestionnaire d'événement doit définir la valeur de l'attribut <code>src</code> de <code>displayed-img &lt;img&gt;</code> à la valeur du <code>src</code> passé en paramètre. Nous vous avons fourni une ligne qui stocke une référence de l'<code>&lt;img&gt;</code> concerné dans une variable nommée <code>displayedImg</code>. Notez que nous voulons une fonction nommée.</li>
</ol>

<h3 id="Écrire_le_gestionnaire_du_bouton_dassombrissement">Écrire le gestionnaire du bouton d'assombrissement</h3>

<p>Il ne reste que notre <code>&lt;button&gt;</code> d'assombrissement — nous vous avons fourni une ligne qui stocke une référence au <code>&lt;button&gt;</code> dans une variable appelée <code>btn</code>. Vous devez ajouter un gestionnaire <code>onclick</code> qui:</p>

<ol>
 <li>Vérifie la classe appliquée à <code>&lt;button&gt;</code> — à nouveau, vous pouvez utiliser <code>getAttribute()</code>.</li>
 <li>Si le nom de classe est <code>"dark"</code>, changer la classe du <code>&lt;button&gt;</code> pour <code>"light"</code> (avec <code><a href="/en-US/docs/Web/API/Element/setAttribute">setAttribute()</a></code>), son contenu textuel par "Lighten", et le {{cssxref("background-color")}} du voile d'assombrissement <code>&lt;div&gt;</code> par <code>"rgba(0,0,0,0.5)"</code>.</li>
 <li>Si le nom de classe n'est pas <code>"dark"</code>, changer la classe du <code>&lt;button&gt;</code> pour <code>"dark"</code>, son contenu textuel par "Darken", et le {{cssxref("background-color")}} du voile d'assombrissement <code>&lt;div&gt;</code> par <code>"rgba(0,0,0,0)"</code>.</li>
</ol>

<p>Les lignes suivantes fournissent une base pour réaliser les changements  décrits aux points 2 et 3.</p>

<pre class="brush: js">btn.setAttribute('class', xxx);
btn.textContent = xxx;
overlay.style.backgroundColor = xxx;</pre>

<h2 id="Conseil">Conseil</h2>

<ul>
 <li>Vous n'avez pas besoin d'éditer le code HTML ni le code CSS.</li>
</ul>

<h2 id="Évaluation_ou_aide_supplémentaire">Évaluation ou aide supplémentaire</h2>

<p>Si vous souhaitez que votre travail soit évalué, ou si vous êtes bloqué et que vous voulez demander de l'aide :</p>

<ol>
 <li>Mettez votre travail dans un éditeur partageable en ligne tel que <a href="https://codepen.io/">CodePen</a>, <a href="https://jsfiddle.net/">jsFiddle</a>, ou <a href="https://glitch.com/">Glitch</a>.</li>
 <li>Rédiger un sujet pour demander une évaluation et/ou une aide à le <a href="https://discourse.mozilla.org/c/mdn">forum Discourse du MDN</a>. Ajoutez la balise "learning" à votre message pour que nous puissions le trouver plus facilement. Votre message doit inclure :
  <ul>
   <li>Un titre descriptif tel que "Évaluation demandée pour la galerie d'images".</li>
   <li>Des détails sur ce que vous souhaitez que nous fassions — par exemple ce que vous avez déjà essayé, si vous êtes bloqué et avez besoin d'aide.</li>
   <li>Un lien vers l'exemple que vous souhaitez faire évaluer ou pour lequel vous avez besoin d'aide, dans un éditeur en ligne. C'est une bonne pratique à adopter — il est très difficile d'aider une personne ayant un problème de codage si on ne peut pas voir son code.</li>
   <li>Un lien vers la page de la tâche ou de l'évaluation proprement dite, afin que nous puissions trouver la question pour laquelle vous souhaitez de l'aide.</li>
  </ul>
 </li>
</ol>

<p>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 <a href="https://discourse.mozilla.org/t/image-gallery-assessment/24687">sur le fil de discussion de cet exercice</a>, ou sur <a href="irc://irc.mozilla.org/mdn">#mdn</a> du canal IRC de <a href="https://wiki.mozilla.org/IRC">Mozilla IRC</a>. Faites d'abord l'exercice, vous ne gagnerez rien à tricher!</p>

<p>{{PreviousMenu("Learn/JavaScript/Building_blocks/Events", "Learn/JavaScript/Building_blocks")}}</p>

<h2 id="Dans_ce_module">Dans ce module</h2>

<ul>
 <li><a href="https://developer.mozilla.org/fr/docs/Apprendre/JavaScript/Building_blocks/conditionals">Prendre des décisions dans le code — conditions</a></li>
 <li><a href="https://developer.mozilla.org/fr/docs/Apprendre/JavaScript/Building_blocks/Looping_code">Les boucles dans le code</a></li>
 <li><a href="https://developer.mozilla.org/fr/docs/Apprendre/JavaScript/Building_blocks/Fonctions">Fonctions — des blocs de code réutilisables</a></li>
 <li><a href="https://developer.mozilla.org/fr/docs/Apprendre/JavaScript/Building_blocks/Build_your_own_function">Construire vos propres fonctions</a></li>
 <li><a href="https://developer.mozilla.org/fr/docs/Apprendre/JavaScript/Building_blocks/Return_values">Valeurs de retour des fonctions</a></li>
 <li><a href="https://developer.mozilla.org/fr/docs/Apprendre/JavaScript/Building_blocks/Ev%C3%A8nements">Introduction aux événements</a></li>
 <li><a href="https://developer.mozilla.org/fr/docs/Apprendre/JavaScript/Building_blocks/Image_gallery">Galerie d'images</a></li>
</ul>