• Anterior
• Menu: Elementos construtivos do Javascript

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.

Ponto de partida

Para começar esta avaliação, você devepegar o arquivo ZIP para o exemplo e descompactá-lo em algum lugar no seu computador.

Como alternativa, você pode usar um site como oCodePen,JSFiddle ouGlitch 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.

Resumo do projeto

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>  <img src="images/pic1.jpg" />  <div></div>  <button>Darken</button></div><div></div>

O exemplo é assim:

As partes mais interessantes do arquivo CSS do exemplo:

• Absolutamente posicione os três elementos dentro dofull-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.
• Defina a largura de qualquer imagem dentro da thumb-barthumb-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:

• Faça um loop em todas as imagens e, para cada uma, insira um elemento<img> dentro dothumb-bar <div> que incorporará a imagem na página.
• Anexe um manipuladoronclick para cada<img> dentro dothumb-bar <div> para que, quando clicados, a imagem correspondente seja exibida no elementodisplayed-img <img>.
• Anexe um manipuladoronclick 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 noexemplo finalizado (não espreite o código-fonte!)

Passos para concluir

As seções a seguir descrevem o que você precisa fazer.

Looping através das imagens

Já fornecemos a você linhas que armazenam uma referência àthumb-bar <div> dentro de uma variável chamadathumbBar, cria um novo elemento<img> define seu atributosrc como um valor de espaço reservadoxxx, e acrescenta essa nova<img> elemento dentro dothumbBar.

Você precisa:

1. Coloque a seção de código abaixo do comentário "Looping through images" dentro de um loop que percorre todas as 5 imagens — você só precisa percorrer cinco números, um representando cada imagem.
2. Em cada iteração de loop, substitua o valor de espaço reservadoxxx por uma string que seja igual ao caminho para a imagem em cada caso. Estamos definindo o valor do atributosrc 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.

Adicionando um manipulador onclick a cada imagem em miniatura

Em cada iteração de loop, você precisa adicionar um manipuladoronclick ao atualnewImage — isso deve:

1. Encontre o valor do atributosrc da imagem atual. Isto pode ser feito executando a funçãogetAttribute() no<img> em cada caso e passando um parâmetro de"src" em cada caso. Mas como conseguir a imagem? O uso donewImage.getAttribute() não funcionará, pois o loop é concluído antes de os manipuladores de eventos serem aplicados; fazer desta forma resultaria no retorno do valorsrc 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?
2. Rode uma função, passando o valorsrc retornado como um parâmetro. Você pode chamar essa função como quiser.
3. Esta função do manipulador de eventos deve definir o valor do atributosrc dodisplayed-img <img> para o valorsrc passado como um parâmetro. Já fornecemos uma linha que armazena uma referência ao<img> relevante em uma variável chamadadisplayedImg. Note que queremos uma função nomeada definida aqui.

Escrevendo um manipulador que executa o botão escurecer / clarear

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 chamadabtn. Você precisa adicionar um manipuladoronclick que:

1. Verifica o nome da classe atual definido no<button> — você pode novamente fazer isso usandogetAttribute().
2. Se o nome da classe for"dark", altera a classe<button> para"light" (usandosetAttribute()), seu conteúdo de texto para "Lighten", e obackground-color da sobreposição<div> para"rgba(0,0,0,0.5)".
3. Se o nome da classe não for"dark", a classe<button> será alterada para"dark", o conteúdo de texto de volta para "Darken", e obackground-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;

Dicas e sugestões

• Você não precisa editar o HTML ou CSS de forma alguma.

Avaliação

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 dediscussão sobre este exercício, ou no canal#mdn IRC daMozilla IRC. Tente o exercício primeiro — não há nada a ganhar com a trapaça!

• Anterior
• Menu: Elementos construtivos do Javascript