Análise e Desenvolvimento de Sistemas
GUILHERME JOAQUIM DOS SANTOS
Desenvolvimento em JavaScript:
Construir função simples
IPORÃ-PR
2025
GUILHERME JOAQUIM DOS SANTOS
Desenvolvimento em JavaScript:
Construir função simples
Aula prática de linguagem de programação apresentado
como requisito parcial para a obtenção de média
semestral no curso Analise e Desenvolvimento de
Sistemas.
Orientador: Vanessa Matias Leite
Tutor: PROFESSOR
IPORÃ-PR
2025
Sumário
INTRODUÇÃO............................................................................................................................
DESENVOLVIMENTO................................................................................................................
RESULTADO................................................................................................................................
CONCLUSÃO..............................................................................................................................
REFERENCIAS............................................................................................................................
1-INTRODUÇÃO
Este documento é um relatório das atividades práticas de desenvolvimento web realizadas no
ambiente [Link]. O projeto principal focou na implementação de um formulário simples para
coleta de e-mail, utilizando as tecnologias fundamentais do Front-end: HTML, CSS e JavaScript.
O objetivo primordial foi demonstrar a aplicação da lógica de programação para validar dados de
entrada, garantindo que o campo de e-mail estivesse preenchido corretamente e, ao mesmo tempo,
oferecer uma experiência de usuário educativa, fornecendo orientações claras em caso de erro.
2-DESENVOLVIMENTO
A atividade foi dividida em três procedimentos principais:
A) Estrutura e Estilo (HTML e CSS)
Criação do Projeto: Um novo projeto do tipo "Empty" foi iniciado no [Link].
HTML: A estrutura básica foi montada, incluindo um <form> com um campo de entrada (<input
type="email" id="email">) e um botão de envio.
CSS: O estilo foi aplicado para centralizar o formulário e criar um container visualmente agradável,
além de definir classes específicas (.erro e .sucesso) para o feedback visual.
B) Validação Lógica (JavaScript)
O código JavaScript foi implementado para gerenciar o evento de submissão do formulário.
Captura de Evento: Um addEventListener('submit', ...) foi anexado ao formulário para interceptar o
envio e impedir o recarregamento da página ([Link]()).
Verificação de Formato: A validação do e-mail foi realizada usando uma Expressão Regular
(Regex): /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,6}$/. Essa expressão garante que o valor
digitado possua a estrutura básica texto@[Link]ão.
Feedback e Orientação:
Sucesso: Se o e-mail for válido, uma mensagem verde (.sucesso) é exibida.
Erro (Orientação): Se o e-mail for inválido, uma mensagem vermelha (.erro) é exibida, contendo a
orientação detalhada solicitada.
Mensagem de Orientação Detalhada: "🚨 E-mail Inválido! A composição correta de um e-mail deve
seguir o padrão: NomeDeUsuário@DominioDoServiç[Link]ão. Por exemplo:
[Link]@[Link]. É obrigatório o uso do símbolo '@' e de um ponto (.) após o domínio."
3-RESULTADO
O projeto demonstrou a aplicação prática dos fundamentos de programação front-end. O objetivo de
criar um sistema que verifica o campo de e-mail e orienta o usuário foi plenamente atingido.
Pontos-Chave da Atividade:
Integridade dos Dados: A validação com Regex é uma técnica eficiente para garantir a qualidade
mínima dos dados de entrada.
Usabilidade: O uso de mensagens de erro claras e informativas (em vez de alertas genéricos)
melhora significativamente a experiência do usuário.
Competência Técnica: Demonstra proficiência na manipulação do Document Object Model (DOM)
e na implementação de lógica de negócios em JavaScript.
]
4-CONCLUSÃO
A base para a execução desta atividade incluiu:
Ambiente de Desenvolvimento: [Link].
Recursos de Linguagem: Documentação oficial do MDN Web Docs e W3Schools (para
HTML, CSS e Expressões Regulares em JavaScript).
Tecnologias Envolvidas: HTML5, CSS3 e JavaScript ES6.