1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
|
---
title: Galería de imágenes
slug: Learn/JavaScript/Building_blocks/Image_gallery
translation_of: Learn/JavaScript/Building_blocks/Image_gallery
original_slug: Learn/JavaScript/Building_blocks/Galeria_de_imagenes
---
<div>{{LearnSidebar}}</div>
<div>{{PreviousMenu("Learn/JavaScript/Building_blocks/Events", "Learn/JavaScript/Building_blocks")}}</div>
<p class="summary"><span class="tlid-translation translation" lang="es"><span title="">Ahora que hemos analizado los bloques de construcción fundamentales de JavaScript, pongamos a prueba tu conocimiento de bucles, funciones, condicionales y eventos, creando un elemento que comumente vemos en muchos sitios web, una </span> <span title="">Galería de imágenes "motorizada" por JavaScript .</span></span></p>
<table class="learn-box standard-table">
<tbody>
<tr>
<th scope="row">Prerequisitos:</th>
<td>Antes de intentar esta evaluación deberías de haber trabajado con todos los artículos en éste módulo.</td>
</tr>
<tr>
<th scope="row">Objetivo:</th>
<td>Evaluar la comprensión de los bucles, funciones, condicionales y eventos de JavaScript..</td>
</tr>
</tbody>
</table>
<h2 id="Punto_de_partida">Punto de partida</h2>
<p>Para realizar esta evaluación, debería descárgarse <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/gallery/gallery-start.zip?raw=true">archivoZip</a> para el ejemplo, descomprímalo en algún lugar de su computadora y haga el ejercicio localmente para empezar.</p>
<p>Opcionalmente, puedes usar un sitio como <a class="external external-icon" href="http://jsbin.com/">JSBin</a> o <a href="https://glitch.com/">Glitch</a> para realizar tu evaluación. Puede pegar el HTML, CSS y JavaScript dentro de uno de estos editores online. <span class="tlid-translation translation" lang="es"><span title="">Si el editor en línea que está utilizando no tiene paneles JavaScript / CSS separados, siéntase libre de ponerlos en línea <script> / <style> elementos dentro de la página HTML.</span></span></p>
<div class="blockIndicator note">
<p><strong>Nota</strong>: Si se atascascas con algo, entonces pregúntenos para ayudarlo — vea la sección de {{anch("evaluación o ayuda adicional")}} al final de esta página.</p>
</div>
<h2 id="Resumen_del_proyecto">Resumen del proyecto</h2>
<p>Ha sido provisto con algún contenido de HTML, CSS e imágenes, también algunas líneas de código en JavaScript; necesitas escribir las líneas de código en JavaScript necesatio para transformarse en un programa funcional. El HTML body luce así:</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>El ejemplo se ve así:</p>
<p><img alt="" src="https://mdn.mozillademos.org/files/13787/gallery.png" style="display: block; margin: 0 auto;"></p>
<ul>
</ul>
<p>Las partes más interesantes del archivo example's CSS :</p>
<ul>
<li>It absolutely positions the three elements inside the <code>full-img <div></code> — the <code><img></code> in which the full-sized image is displayed, an empty <code><div></code> that is sized to be the same size as the <code><img></code> and put right over the top of it (this is used to apply a darkening effect to the image via a semi-transparent background color), and a <code><button></code> that is used to control the darkening effect.</li>
<li>It sets the width of any images inside the <code>thumb-bar <div></code> (so-called "thumbnail" images) to 20%, and floats them to the left so they sit next to one another on a line.</li>
</ul>
<p>Your JavaScript needs to:</p>
<ul>
<li>Loop through all the images, and for each one insert an <code><img></code> element inside the <code>thumb-bar <div></code> that embeds that image in the page.</li>
<li>Attach an <code>onclick</code> handler to each <code><img></code> inside the <code>thumb-bar <div></code> so that when they are clicked, the corresponding image is displayed in the <code>displayed-img <img></code> element.</li>
<li>Attach an <code>onclick</code> handler to the <code><button></code> 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.</li>
</ul>
<p>To give you more of an idea, have a look at the <a href="http://mdn.github.io/learning-area/javascript/building-blocks/gallery/">finished example</a> (no peeking at the source code!)</p>
<h2 id="Steps_to_complete">Steps to complete</h2>
<p>The following sections describe what you need to do.</p>
<h3 id="Looping_through_the_images">Looping through the images</h3>
<p>We've already provided you with lines that store a reference to the <code>thumb-bar <div></code> inside a constant called <code>thumbBar</code>, create a new <code><img></code> element, set its <code>src</code> attribute to a placeholder value <code>xxx</code>, and append this new <code><img></code> element inside <code>thumbBar</code>.</p>
<p>You need to:</p>
<ol>
<li>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.</li>
<li>In each loop iteration, replace the <code>xxx</code> placeholder value with a string that will equal the path to the image in each case. We are setting the value of the <code>src</code> 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 <code>pic1.jpg</code>, <code>pic2.jpg</code>, etc.</li>
</ol>
<h3 id="Adding_an_onclick_handler_to_each_thumbnail_image">Adding an onclick handler to each thumbnail image</h3>
<p>In each loop iteration, you need to add an <code>onclick</code> handler to the current <code>newImage</code> — this handler should find the value of the <code>src</code> attribute of the current image. Set the <code>src</code> attribute value of the <code>displayed-img <img></code> to the <code>src</code> value passed in as a parameter.</p>
<h3 id="Writing_a_handler_that_runs_the_darkenlighten_button">Writing a handler that runs the darken/lighten button</h3>
<p>That just leaves our darken/lighten <code><button></code> — we've already provided a line that stores a reference to the <code><button></code> in a constant called <code>btn</code>. You need to add an <code>onclick</code> handler that:</p>
<ol>
<li>Checks the current class name set on the <code><button></code> — you can again achieve this by using <code>getAttribute()</code>.</li>
<li>If the class name is <code>"dark"</code>, changes the <code><button></code> class to <code>"light"</code> (using <code><a href="/en-US/docs/Web/API/Element/setAttribute">setAttribute()</a></code>), its text content to "Lighten", and the {{cssxref("background-color")}} of the overlay <code><div></code> to <code>"rgba(0,0,0,0.5)"</code>.</li>
<li>If the class name not <code>"dark"</code>, changes the <code><button></code> class to <code>"dark"</code>, its text content back to "Darken", and the {{cssxref("background-color")}} of the overlay <code><div></code> to <code>"rgba(0,0,0,0)"</code>.</li>
</ol>
<p>The following lines provide a basis for achieving the changes stipulated in points 2 and 3 above.</p>
<pre class="brush: js">btn.setAttribute('class', xxx);
btn.textContent = xxx;
overlay.style.backgroundColor = xxx;</pre>
<h2 id="Hints_and_tips">Hints and tips</h2>
<ul>
<li>You don't need to edit the HTML or CSS in any way.</li>
</ul>
<h2 id="Assessment_or_further_help">Assessment or further help</h2>
<p>If you would like your work assessed, or are stuck and want to ask for help:</p>
<ol>
<li>Put your work into an online shareable editor such as <a href="https://codepen.io/">CodePen</a>, <a href="https://jsfiddle.net/">jsFiddle</a>, or <a href="https://glitch.com/">Glitch</a>.</li>
<li>Write a post asking for assessment and/or help at the <a href="https://discourse.mozilla.org/c/mdn/learn">MDN Discourse forum Learning category</a>. Your post should include:
<ul>
<li>A descriptive title such as "Assessment wanted for Image gallery".</li>
<li>Details of what you have already tried, and what you would like us to do, e.g. if you are stuck and need help, or want an assessment.</li>
<li>A link to the example you want assessed or need help with, in an online shareable editor (as mentioned in step 1 above). This is a good practice to get into — it's very hard to help someone with a coding problem if you can't see their code.</li>
<li>A link to the actual task or assessment page, so we can find the question you want help with.</li>
</ul>
</li>
</ol>
<p>{{PreviousMenu("Learn/JavaScript/Building_blocks/Events", "Learn/JavaScript/Building_blocks")}}</p>
<h2 id="In_this_module">In this module</h2>
<ul>
<li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/conditionals">Making decisions in your code — conditionals</a></li>
<li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Looping_code">Looping code</a></li>
<li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Functions">Functions — reusable blocks of code</a></li>
<li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Build_your_own_function">Build your own function</a></li>
<li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Return_values">Function return values</a></li>
<li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Events">Introduction to events</a></li>
<li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Image_gallery">Image gallery</a></li>
</ul>
|
