Exercícios JavaScript (Parte 2) - Curso JavaScript
Introdução
Visão geral da seção: Nesta seção, o professor introduz o exercício que será realizado no vídeo. O objetivo é criar um site que exiba a hora atual e personalize a aparência de acordo com o período do dia.
Configurando o ambiente
- Abra os arquivos criados na aula anterior.
- Organize os arquivos em uma pasta chamada "Modelo".
- Duplicar a pasta "Modelo" e renomeá-la para "Exercício014".
Preparando as imagens
- Acesse o site pexels.com/pt-br para buscar imagens relacionadas à manhã, tarde e noite.
- Baixe três fotos correspondentes aos períodos do dia.
- Abra as imagens baixadas em um editor de desenho (como o Photoshop).
- Recorte as imagens em formato redondo e salve-as como arquivos separados.
Personalizando as imagens
Visão geral da seção: Nesta seção, o professor mostra como deixar as imagens transparentes para serem usadas no site.
Editando as imagens
- Abra cada imagem em um editor de desenho.
- Apague o plano de fundo das imagens para torná-las transparentes.
Redimensionando e salvando imagens para a web
Visão geral da seção: Nesta parte do vídeo, o instrutor demonstra como redimensionar e salvar imagens para uso na web.
Redimensionando e salvando as imagens
- Utilize um editor de desenho, como o Photoshop, para redimensionar as imagens.
- Ajuste o tamanho das imagens para 250 pixels.
- Salve as imagens no formato PNG 24, que é ideal para uso na web.
- Mantenha os nomes dos arquivos em letras minúsculas e sem caracteres especiais.
Preparação dos arquivos HTML, CSS e JavaScript
Visão geral da seção: Nesta parte do vídeo, o instrutor prepara os arquivos HTML, CSS e JavaScript necessários para o exercício.
Preparação dos arquivos
- Abra a pasta do exercício no Visual Studio Code.
- Certifique-se de ter os arquivos HTML, CSS e JavaScript abertos no editor.
- Abra o Google Chrome para visualizar a página.
- Organize as janelas do editor e navegador lado a lado.
Estruturação do arquivo HTML
Visão geral da seção: Nesta parte do vídeo, o instrutor estrutura o arquivo HTML adicionando elementos necessários.
Estruturação do arquivo HTML
- Defina um título adequado para a página.
- Adicione uma mensagem inicial dentro de uma tag
<div>com um ID "msg".
- Crie uma tag
<img>com um ID "imagem" para exibir a foto correspondente ao horário do dia.
Programação em JavaScript
Visão geral da seção: Nesta parte do vídeo, o instrutor inicia a programação em JavaScript para exibir a mensagem e imagem corretas de acordo com o horário do dia.
Programação em JavaScript
- Crie um objeto para a mensagem utilizando o ID "msg" do elemento HTML.
- Crie um objeto para a imagem utilizando o ID "imagem" do elemento HTML.
- Defina uma função chamada "carregar" que será responsável por carregar os elementos na página.
- Utilize o método
getHours()para obter a hora atual.
- Utilize condicionais
ifeelse ifpara exibir a mensagem correta de acordo com o horário do dia.
- Atribua o caminho da imagem correspondente ao atributo
srcda tag<img>.
- Atualize a página para ver as alterações.
Testando diferentes horários
Visão geral da seção: Nesta parte do vídeo, o instrutor testa diferentes horários para verificar se as mensagens e imagens são exibidas corretamente.
Testando diferentes horários
- Comente a linha que obtém a hora atual (
hora) e defina manualmente um valor desejado (por exemplo, 8 horas).
- Salve e atualize a página para ver as alterações refletidas.
Mudando a cor de fundo usando o Photoshop
Visão geral da seção: Nesta seção, o palestrante demonstra como mudar a cor de fundo de uma página usando o Photoshop.
Usando o conta-gotas para escolher cores
- O palestrante abre três fotos no Photoshop: uma foto da manhã, uma da tarde e uma da noite.
- Ele usa o conta-gotas para selecionar uma cor em cada foto.
- Ao clicar com o conta-gotas, ele arrasta para escolher a cor desejada.
- Ele copia o código hexadecimal das cores selecionadas.
Aplicando as cores de acordo com os horários do dia
- Para a parte da manhã, ele define
document.body.style.background = '#e2cd9f'para mudar a cor de fundo.
- Ele faz um teste atualizando a página e verifica se está funcionando corretamente.
- Repete o mesmo processo para as partes da tarde e noite, escolhendo cores diferentes e aplicando-as usando
body.style.background.
- Testa novamente para verificar se as cores estão sendo aplicadas corretamente.
Centralizando os componentes na página
Visão geral da seção: Nesta seção, o palestrante mostra como centralizar os componentes na página usando CSS.
Centralizando os componentes
- O palestrante adiciona um seletor CSS para centralizar os componentes na página usando
text-align: center;.
- Ele também adiciona um espaçamento interno aos componentes usando
padding: 5px.
- Após atualizar a página, verifica se os componentes estão centralizados corretamente.
Testando os horários do dia
Visão geral da seção: Nesta seção, o palestrante testa os diferentes horários do dia para verificar se as cores de fundo estão sendo aplicadas corretamente.
Testando os horários
- O palestrante define manualmente diferentes horários do dia (2h da manhã, 14h e 20h) para verificar se as cores de fundo correspondentes são aplicadas corretamente.
- Ele verifica se as cores estão sendo exibidas corretamente para cada horário.
Conclusão e dicas finais
Visão geral da seção: Nesta seção final, o palestrante conclui a demonstração e fornece algumas dicas adicionais.
Dicas finais
- O palestrante lembra que é comum cometer erros no início e encoraja a persistência na aprendizagem de JavaScript.
- Ele destaca a importância de verificar possíveis erros usando o inspetor do navegador.
- Finaliza mencionando que no próximo vídeo será resolvido um exercício semelhante, mas com interatividade do usuário.