diff options
Diffstat (limited to 'files/fr/learn/javascript/building_blocks/image_gallery/index.html')
| -rw-r--r-- | files/fr/learn/javascript/building_blocks/image_gallery/index.html | 163 |
1 files changed, 163 insertions, 0 deletions
diff --git a/files/fr/learn/javascript/building_blocks/image_gallery/index.html b/files/fr/learn/javascript/building_blocks/image_gallery/index.html new file mode 100644 index 0000000000..07a51499fd --- /dev/null +++ b/files/fr/learn/javascript/building_blocks/image_gallery/index.html @@ -0,0 +1,163 @@ +--- +title: Galerie d'images +slug: Apprendre/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 +--- +<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;'><script></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;'><style></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"><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></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 <div></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;'><img></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;'><div></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;'><img></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;'><button></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 <div></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><img></code> à l'intérieur de <code>thumb-bar <div></code> qui va incorporer cette image dans la page.</li> + <li>Associer un gestionnaire d'événement <code>onclick</code> à chaque <code><img></code> à l'intérieur de <code>thumb-bar <div></code> pour que, lorsqu'elles sont cliquées, l'image correspondante soit affichée dans l'élément <code>displayed-img <img></code>.</li> + <li>Associer un gestionnaire d'événement <code>onclick</code> au <code><button></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 <div></code> dans une variable nommée <code>thumbBar</code>, créent un nouvel élément <code><img></code>, définissent son attribut <code>src</code> à un emplacement de valueur <code>xxx</code>, et ajoutent ce nouvel élément <code><img></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><img></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><img></code>. Pour résoudre cela, gardez à l'esprit que, pour chaque gestionnaire d'événement, c'est <code><img></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 <img></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><img></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><button></code> d'assombrissement — nous vous avons fourni une ligne qui stocke une référence au <code><button></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><button></code> — à nouveau, vous pouvez utiliser <code>getAttribute()</code>.</li> + <li>Si le nom de classe est <code>"dark"</code>, changer la classe du <code><button></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><div></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><button></code> pour <code>"dark"</code>, son contenu textuel par "Darken", et le {{cssxref("background-color")}} du voile d'assombrissement <code><div></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> |