Você já percebeu que muitos sites exibem mensagens personalizadas como:

• Bom dia, Marcos!
• Boa tarde, Ana!
• Boa noite, João!

Isso parece simples, mas existe muita programação acontecendo por trás dos bastidores.

Como o computador sabe o seu nome?

Como ele decide qual mensagem deve aparecer?

E como consegue até mudar as cores da página automaticamente?

Neste artigo vamos responder essas perguntas construindo um projeto prático utilizando HTML, CSS e JavaScript, entendendo como o DOM permite criar páginas realmente interativas.

Se preferir acompanhar tudo na prática, assista ao vídeo completo:

🎥 Vídeo da aula:

A live completa utilizada para criar este projeto também está disponível na descrição do vídeo.

---

O que é o DOM?

Antes de entender como o JavaScript altera uma página, precisamos conhecer o DOM (Document Object Model).

O DOM é uma representação do documento HTML em forma de objetos.

Isso significa que cada elemento da página pode ser acessado pelo JavaScript.

Por exemplo:

• títulos
• parágrafos
• imagens
• botões
• campos de texto
• listas
• tabelas

Quando escrevemos um código JavaScript, estamos dizendo ao navegador exatamente qual elemento queremos acessar e o que desejamos fazer com ele.

É graças ao DOM que páginas deixam de ser apenas documentos estáticos e passam a responder às ações do usuário.

---

O problema que vamos resolver

Imagine um formulário simples.

O usuário informa seu nome e escolhe um período do dia.

Ao clicar em um botão, o sistema deverá:

• capturar o nome digitado;
• verificar o período selecionado;
• exibir uma saudação personalizada;
• alterar o tema da página conforme a opção escolhida.

O resultado será algo semelhante a:

Bom dia, Marcos!

ou

Boa tarde, Ana!

Tudo isso utilizando apenas JavaScript puro, sem bibliotecas e sem frameworks.

---

Capturando informações digitadas pelo usuário

Sempre que alguém preenche um formulário, essas informações ficam armazenadas nos elementos HTML.

O JavaScript consegue acessar esses dados utilizando métodos como:

• getElementById()
• querySelector()

Depois disso, basta ler o valor informado pelo usuário.

É exatamente esse mecanismo que permite que sistemas descubram:

• seu nome;
• seu e-mail;
• sua senha;
• sua pesquisa;
• qualquer outra informação digitada em um formulário.

Sem essa comunicação entre HTML e JavaScript, não existiriam sistemas de login, cadastros ou formulários inteligentes.

---

Eventos: esperando o usuário agir

Outro conceito muito importante é o de eventos.

O navegador fica aguardando alguma ação acontecer.

Alguns exemplos são:

• clique em um botão;
• digitação em um campo;
• mudança de seleção;
• envio de formulário.

Quando o usuário clica no botão do projeto, um evento é disparado.

Esse evento executa uma função JavaScript responsável por toda a lógica da aplicação.

É esse modelo orientado a eventos que torna as páginas web interativas.

---

Organizando o código com funções

À medida que um projeto cresce, colocar todo o código em um único lugar deixa a manutenção muito difícil.

Por isso utilizamos funções.

Cada função recebe uma responsabilidade específica.

No projeto, por exemplo, uma função é responsável por:

• capturar os dados;
• validar os campos;
• decidir qual saudação utilizar;
• atualizar a interface.

Essa organização torna o código mais limpo, reutilizável e muito mais fácil de compreender.

---

Tomando decisões com if e else

Depois que o JavaScript recebe as informações do usuário, ele precisa decidir o que fazer.

É aí que entram as estruturas condicionais.

Por exemplo:

• se o usuário escolher Manhã, exibimos Bom dia;
• se escolher Tarde, mostramos Boa tarde;
• caso contrário, exibimos Boa noite.

Essa lógica pode parecer simples, mas está presente praticamente em qualquer sistema desenvolvido atualmente.

Sempre que um programa precisa tomar uma decisão, estruturas condicionais entram em ação.

---

Alterando a aparência da página

Além de alterar o texto exibido, o projeto também modifica as cores da interface.

Isso acontece através da manipulação de classes CSS.

O JavaScript pode adicionar ou remover classes dinamicamente, permitindo alterar:

• cores;
• temas;
• animações;
• tamanhos;
• estilos;
• posicionamentos.

Esse mesmo conceito é utilizado em funcionalidades bastante comuns, como:

• modo escuro (Dark Mode);
• menus responsivos;
• notificações;
• validação de formulários;
• dashboards;
• sistemas administrativos.

---

O que você aprende neste projeto

Durante a construção da aplicação você pratica diversos conceitos fundamentais do desenvolvimento web.

Entre eles:

• HTML semântico;
• CSS;
• DOM (Document Object Model);
• captura de dados com inputs;
• eventos de clique;
• funções JavaScript;
• estruturas condicionais com if e else;
• manipulação de classes CSS;
• alteração dinâmica da interface.

Mais importante do que decorar comandos é compreender como todas essas tecnologias trabalham juntas.

É justamente esse entendimento que permite desenvolver aplicações reais.

---

Por que aprender JavaScript dessa forma?

Muitos iniciantes passam horas decorando sintaxe sem entender como as aplicações realmente funcionam.

Quando isso acontece, qualquer pequeno problema parece impossível de resolver.

No Desvendando o Código, a proposta é diferente.

Em vez de apenas ensinar comandos, mostramos como o computador interpreta cada informação e como todas as peças se conectam.

Quando você entende o processo, deixa de depender de copiar código e passa a construir suas próprias soluções.

Esse é o verdadeiro objetivo de aprender programação.

---

Assista à aula completa

Se você deseja acompanhar a construção completa deste projeto, entender cada linha de código e desenvolver a aplicação do zero, assista ao vídeo disponível no canal Desvendando o Código.

🎥

Na aula você verá desde a criação da estrutura HTML até a implementação completa da lógica em JavaScript, incluindo validações, eventos, manipulação do DOM e alteração dinâmica da interface.

---

Conclusão

Quando vemos uma página exibindo mensagens personalizadas, alterando cores ou respondendo aos nossos cliques, tudo parece acontecer automaticamente.

Na realidade, existe uma sequência de etapas muito bem definida.

O HTML cria a estrutura.

O CSS define a aparência.

E o JavaScript utiliza o DOM para acessar os elementos da página, capturar informações, tomar decisões e atualizar a interface em tempo real.

Depois que você compreende esse processo, construir aplicações deixa de ser uma tarefa baseada em copiar código e passa a fazer sentido.

É exatamente essa filosofia que seguimos no Desvendando o Código: não ensinar apenas ferramentas, mas revelar como a tecnologia funciona por trás dos bastidores.

Se você está começando no desenvolvimento web, dominar esses conceitos será uma das bases mais importantes da sua jornada como programador.