RELATÓRIO DE AULA PRÁTICA: DESENVOLVIMENTO EM JAVASCRIPT
Aluno: Vilker Rainer Silveira
Professor: Anderson Emidio de Macedo Goncalves
Disciplina: Desenvolvimento em JavaScript
Teófilo Otoni – 2025
Sumário
1. Introdução
2. Métodos e Desenvolvimento
3. Resultados
4. Conclusão
1. Introdução
Este relatório documenta a criação de uma página web interativa para a disciplina de
Desenvolvimento em JavaScript. O objetivo principal do projeto foi aplicar
conhecimentos de manipulação do DOM (Document Object Model) e validação de
formulários utilizando JavaScript puro.
A atividade consistiu em desenvolver um formulário simples com um campo de e-mail e
um botão de verificação. Através de um script, a aplicação valida se o e-mail inserido
pelo usuário corresponde a um formato padrão, exibindo uma mensagem de sucesso ou
de erro apropriada.
2. Métodos e Desenvolvimento
O projeto foi estruturado em três arquivos principais: [Link] para a estrutura,
[Link] para a apresentação visual, e [Link] para a lógica de interatividade e validação.
2.1. Estrutura do HTML ([Link])
Foi criado um documento HTML contendo um formulário (<form>) simples. Dentro do
formulário, foram adicionados um campo de texto (<input type='text'>) para o e-mail e
um botão (<button type='submit'>) para iniciar a verificação. Um <div> adicional foi
incluído para servir como contêiner das mensagens de feedback para o usuário.
<div class="container">
<h1>Validador de E-mail</h1>
<form id="validation-form">
<input type="text" id="email-input" placeholder="exemplo@[Link]">
<button type="submit">Verificar</button>
</form>
<div id="message-container"></div>
</div>
2.2. Estilização com CSS ([Link])
Para garantir uma interface limpa e agradável, foi desenvolvido um arquivo CSS que
centraliza o formulário na página e aplica um design moderno aos elementos. Foram
criadas classes específicas para as mensagens de sucesso (.success-message) e de erro
(.error-message), utilizando cores distintas (verde para sucesso, vermelho para erro) para
fornecer um feedback visual claro e imediato ao usuário.
2.3. Lógica de Validação com JavaScript ([Link])
O núcleo da funcionalidade reside no arquivo [Link]. O script executa os seguintes
passos:
1. Seleção dos Elementos: Utiliza [Link]() para obter as referências
do formulário, do campo de e-mail e do contêiner de mensagens.
2. Escuta de Evento: Adiciona um event listener ao evento submit do formulário. Isso
permite que o script intercepte a tentativa de envio do formulário para realizar a
validação.
3. Prevenção do Envio Padrão: Dentro do event listener, a função [Link]()
é chamada para impedir que a página seja recarregada, permitindo que a validação ocorra
de forma dinâmica.
4. Validação com Expressão Regular: O valor do campo de e-mail é testado contra uma
expressão regular (RegEx) que verifica a estrutura padrão de um e-mail
(nome@[Link]). A RegEx utilizada foi: /^[\w-\.]+@([\w-]+\.)+[\w-]{2,4}$/.
5. Exibição do Feedback:
• Se o e-mail passar no teste da RegEx, uma mensagem de sucesso é exibida,
informando que o formato é válido.
• Se o e-mail falhar no teste, uma mensagem de erro é exibida, explicando o formato
correto e orientando o usuário.
3. Resultados
O resultado é uma página web funcional e interativa. Ao inserir um texto no campo de e-
mail e clicar em 'Verificar', a aplicação responde instantaneamente:
• Entrada Válida (ex: teste@[Link]): Exibe uma caixa verde com a mensagem 'E-mail
válido! O formato está correto.'
• Entrada Inválida (ex: teste ou teste@email): Exibe uma caixa vermelha com a
mensagem 'E-mail inválido. Por favor, insira um e-mail no formato correto. Ex:
nome@[Link]'.
O projeto cumpre com sucesso o objetivo de validar um campo de formulário utilizando
JavaScript, manipulando o DOM para fornecer feedback dinâmico ao usuário.
4. Conclusão
A realização desta atividade prática permitiu consolidar os conceitos fundamentais do
desenvolvimento front-end com JavaScript. A manipulação de elementos do DOM, o
gerenciamento de eventos e a utilização de expressões regulares para validação de dados
são habilidades essenciais para a criação de aplicações web modernas e responsivas.
O projeto serviu como uma excelente demonstração prática de como essas técnicas se
integram para criar uma experiência de usuário mais rica e interativa.