Exercício JavaScript do Professor Gustavo Guanabara: Uma Jornada para Exibir a Hora Atual
Exercício JavaScript do Professor Gustavo Guanabara: Uma Jornada para Exibir a Hora Atual
Introdução
O JavaScript, uma das linguagens de programação mais populares para o desenvolvimento web, é frequentemente ensinado por meio de exercícios práticos. O professor Gustavo Guanabara, renomado por suas aulas online, oferece um exercício cativante que não apenas ensina JavaScript, mas também cria uma página web interativa que exibe a data, hora e saudação com base no horário atual.
O Desafio
O exercício envolve a exibição da data e hora atuais, acompanhadas por uma saudação personalizada que muda dependendo da hora do dia. Além disso, a página apresenta uma imagem de fundo que se adapta ao período do dia, ou seja, amanhecer, tarde, noite ou madrugada.
Documentação Detalhada
1. Estrutura HTML (HTML Structure):
- O HTML define a estrutura da página web, incluindo metatags para configurações de exibição.
- A tag
<title>define o título da página exibido na guia do navegador.
2. Estilo da Página (Page Styling):
- O código CSS dentro das tags
<style>é usado para definir o estilo da página, incluindo cores de fundo, cores de texto, tamanhos de fonte, sombras e posicionamento de elementos. - Define estilos para o corpo da página, cabeçalho, títulos, seção e rodapé, entre outros elementos.
3. Corpo da Página (Page Body):
- A função
onload="updateTime()"é chamada quando a página é carregada, invocando a funçãoupdateTime()para exibir informações de data, hora e saudação.
4. Cabeçalho (Header):
- O cabeçalho da página contém um título principal
<h1>e um subtítulo<h2>.
5. Seção (Section):
- A seção principal contém um bloco de informações, incluindo a data e hora atuais, uma saudação e uma imagem de fundo.
- O estilo da seção é definido pelo CSS, com cores de fundo, bordas arredondadas e sombras.
6. Div com a Data e Hora (Datetime):
- Dentro da seção, uma
<div>com a classedatetimecontém parágrafos identificados comodate,timeegreetingpara exibir informações de data, hora e saudação.
7. Imagem de Fundo (Background Image):
- Também na seção, uma imagem com a classe
imagemexibe uma imagem correspondente ao período do dia (amanhecer, tarde, noite ou madrugada). A imagem muda com base na hora atual.
8. JavaScript:
- A parte JavaScript começa com a função
updateTime(). - Essa função obtém a hora atual, determina a saudação apropriada com base na hora do dia e formata informações de data e hora.
- A imagem e o estilo de fundo da página também são atualizados com base na hora atual.
- As informações atualizadas são exibidas nos parágrafos correspondentes.
9. Intervalo de Atualização (Update Interval):
- Após chamar
updateTime()uma vez na inicialização da página,setInterval(updateTime, 1000)é usado para atualizar continuamente as informações a cada segundo. Isso garante que a data, hora e saudação sejam atualizadas automaticamente enquanto a página estiver aberta.
Conclusão
O exercício proposto pelo professor Gustavo Guanabara não apenas ensina JavaScript de maneira envolvente, mas também permite a criação de uma página web funcional e estilizada. A documentação detalhada ajuda a compreender cada parte do código, enquanto a criação de um repositório no GitHub permite compartilhar seu trabalho com a comunidade de desenvolvedores. Isso não apenas aprimora suas habilidades de programação, mas também contribui para o aprendizado de outros aspirantes a desenvolvedores. Portanto, aceite o desafio, aprofunde-se no código e compartilhe seu conhecimento com o mundo!