Agora que analisamos os blocos de construção fundamentais do JavaScript, testaremos seu conhecimento de loops, funções, condicionais e eventos, fazendo com que você crie um item bastante comum que você verá em muitos sites — uma galeria de imagens ativadas em JavaScript.
| Pré-requisitos: | Antes de tentar esta avaliação, você já deve ter trabalhado em todos os artigos deste módulo. |
|---|---|
| Objetivo: | Para testar a compreensão de loops, funções, condicionais e eventos de JavaScript. |
Para começar esta avaliação, você deve pegar o arquivo ZIP para o exemplo e descompactá-lo em algum lugar no seu computador.
Note: Como alternativa, você pode usar um site como o JSBin ou Thimble para fazer sua avaliação. Você pode colar o HTML, CSS e JavaScript em um desses editores on-line. Se o editor on-line que você está usando não tiver painéis JavaScript / CSS separados, sinta-se à vontade para colocar os elementos in-line <script> e <style> dentro da página HTML.
Você recebeu alguns recursos de HTML, CSS e imagem e algumas linhas de código JavaScript; você precisa escrever o JavaScript necessário para transformar isso em um programa de trabalho. O corpo do HTML se parece com isto:
<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>
O exemplo é assim:
As partes mais interessantes do arquivo CSS do exemplo:
full-img <div> — o <img> no qual a imagem em tamanho normal é exibida, um <div> vazio que é dimensionado para ser do mesmo tamanho que o <img> e colocado sobre a parte superior (isso é usado para aplicar um efeito de escurecimento à imagem através de uma cor de fundo semitransparente) e um <button> que é usado para controlar o efeito de escurecimento.thumb-bar <div> (as chamadas imagens "thumbnail") para 20%, e flutue-as para a esquerda para que elas fiquem lado a lado em uma linha.Seu JavaScript precisa:
<img> dentro do thumb-bar <div> que incorporará a imagem na página.onclick para cada <img> dentro do thumb-bar <div> para que, quando clicados, a imagem correspondente seja exibida no elemento displayed-img <img>.onclick ao <button> para que, ao ser clicado, um efeito de escurecimento seja aplicado à imagem em tamanho normal. Quando é clicado novamente, o efeito de escurecimento é removido novamente.Para lhe dar mais uma ideia, dê uma olhada no exemplo finalizado (não espreite o código-fonte!)
As seções a seguir descrevem o que você precisa fazer.
Já fornecemos a você linhas que armazenam uma referência à thumb-bar <div> dentro de uma variável chamada thumbBar, cria um novo elemento <img> define seu atributo src como um valor de espaço reservado xxx, e acrescenta essa nova <img> elemento dentro do thumbBar.
Você precisa:
xxx por uma string que seja igual ao caminho para a imagem em cada caso. Estamos definindo o valor do atributo src para esse valor em cada caso. Tenha em mente que, em cada caso, a imagem está dentro do diretório de imagens e seu nome é pic1.jpg, pic2.jpg, etc.Em cada iteração de loop, você precisa adicionar um manipulador onclick ao atual newImage — isso deve:
src da imagem atual. Isto pode ser feito executando a função getAttribute() no <img> em cada caso e passando um parâmetro de "src" em cada caso. Mas como conseguir a imagem? O uso do newImage.getAttribute() não funcionará, pois o loop é concluído antes de os manipuladores de eventos serem aplicados; fazer desta forma resultaria no retorno do valor src do último <img> para todos os casos. Para resolver isso, tenha em mente que, no caso de cada manipulador de eventos, o <img> é o destino do manipulador. Que tal obter as informações do objeto de evento?src retornado como um parâmetro. Você pode chamar essa função como quiser.src do displayed-img <img> para o valor src passado como um parâmetro. Já fornecemos uma linha que armazena uma referência ao <img> relevante em uma variável chamada displayedImg. Note que queremos uma função nomeada definida aqui.Isso só deixa o nosso escurecer / clarear <button> — nós já fornecemos uma linha que armazena uma referência ao <button> em uma variável chamada btn. Você precisa adicionar um manipulador onclick que:
<button> — você pode novamente fazer isso usando getAttribute()."dark", altera a classe <button> para "light" (usando setAttribute()), seu conteúdo de texto para "Lighten", e o {{cssxref("background-color")}} da sobreposição <div> para "rgba(0,0,0,0.5)"."dark", a classe <button> será alterada para "dark", o conteúdo de texto de volta para "Darken", e o {{cssxref("background-color")}} da sobreposição <div> para "rgba(0,0,0,0)".As linhas seguintes fornecem uma base para alcançar as mudanças estipuladas nos pontos 2 e 3 acima.
btn.setAttribute('class', xxx);
btn.textContent = xxx;
overlay.style.backgroundColor = xxx;
Se você está seguindo esta avaliação como parte de um curso organizado, você deve poder dar seu trabalho ao seu professor / mentor para marcação. Se você é auto-didata, então pode obter o guia de marcação com bastante facilidade, perguntando no tópico de discussão sobre este exercício, ou no canal #mdn IRC da Mozilla IRC. Tente o exercício primeiro — não há nada a ganhar com a trapaça!
{{PreviousMenu("Learn/JavaScript/Building_blocks/Events", "Learn/JavaScript/Building_blocks")}}