Relatório de aula - Desenvolvimento em JavaScript

Prévia do material em texto

Superior de tecnologia em análise e desenvolvimento de sistemas – Tecnológico 
MATEUS HENRIQUE DA SILVA E SOUZA
DESENVOLVIMENTO EM JAVA SCRIPT
AULA PRÁTICA PROJETO DE SOFTWARE
Contagem-Minas Gerais
2025
MATEUS HENRIQUE DA SILVA E SOUZA
DESENVOLVIMENTO EM JAVA SCRIPT
AULA PRÁTICA PROJETO DE SOFTWARE
Aula prática de Desenvolvimento em Java Script apresentado como requisito parcial para a obtenção de média semestral no curso superior de tecnologia em análise e desenvolvimento de sistemas.
Orientador(a): Luis Gustavo Cardoso
Tutor(a): Luis Gustavo Cardoso
Contagem-Minas Gerais
2025
SUMÁRIO
Superior de tecnologia em análise e desenvolvimento de sistemas	0
1	INTRODUÇÃO	3
2	DESENVOLVIMENTO	4
3	RESULTADOS	5
4	CONCLUSÃO	6
5 ANEXOS 7
6 	REFERÊNCIAS	8
1 INTRODUÇÃO
Esta atividade prática teve como objetivo o desenvolvimento de um formulário web utilizando as tecnologias HTML, CSS e JavaScript, focando especialmente na validação de um campo de e-mail. A intenção principal foi verificar se o e-mail informado pelo usuário segue o formato correto, proporcionando mensagens de erro e orientações claras para facilitar a correção por parte do usuário. Todo o projeto foi desenvolvido na plataforma Playcode.io, e este relatório descreve o processo de construção, os métodos aplicados, os resultados obtidos e as principais conclusões alcançadas durante o desenvolvimento.
2 DESENVOLVIMENTO
O projeto foi desenvolvido na plataforma Playcode.io, iniciando com a criação de um novo projeto estruturado em três camadas principais: HTML, CSS e JavaScript.
O formulário HTML contém um campo de entrada para e-mail e um botão de envio. A estilização em CSS foi aplicada para centralizar o formulário na tela, adicionar bordas e sombras leves, e diferenciar visualmente as mensagens de erro (vermelho) e sucesso (verde).
A validação do campo foi implementada em JavaScript utilizando uma expressão regular (/^[^\s@]+@[^\s@]+\.[^\s@]+$/) para garantir o formato padrão de e-mails. Mensagens de feedback orientam o usuário caso o campo esteja vazio, o e-mail seja inválido ou válido. Além disso, foi configurado um evento para limpar as mensagens ao começar uma nova digitação.
Os testes envolveram diferentes entradas (válidas, inválidas e campo vazio), além da verificação da clareza das mensagens e da responsividade do formulário.
3 RESULTADOS
O formulário foi implementado com sucesso e atendeu a todos os requisitos propostos pela atividade. Entre os principais resultados, destacam-se:
· Funcionamento correto da validação em tempo real do campo de e-mail;
· Exibição de mensagens de feedback claras e visualmente diferenciadas (erro em vermelho e sucesso em verde);
· Interface intuitiva e design centralizado, garantindo boa usabilidade;
· Organização e comentários no código, facilitando futuras manutenções e melhorias.
Os testes confirmaram que a validação foi eficiente para a maioria dos formatos de e-mail usuais, demonstrando a eficácia da expressão regular aplicada.
4 CONCLUSÃO
O desenvolvimento deste formulário proporcionou uma excelente oportunidade de aplicar conhecimentos fundamentais em HTML, CSS e JavaScript, além de reforçar a importância da validação de dados em aplicações web. O uso de expressões regulares se mostrou uma ferramenta poderosa para a verificação do formato de e-mails, e as mensagens de feedback contribuíram para uma melhor comunicação com o usuário.
Além da prática técnica, o exercício evidenciou a importância de planejar a estrutura do código, testar diferentes cenários e priorizar a experiência do usuário. Como possíveis melhorias futuras, seria interessante adicionar validações mais específicas (como restrições de domínio) ou integrar o formulário a um backend para o armazenamento e processamento dos dados inseridos.
De modo geral, esta atividade reforçou a compreensão dos conceitos de desenvolvimento web, organização de código e validação de formulários, competências fundamentais para projetos mais avançados na área de tecnologia.
5 - ANEXOS
6 - REFERÊNCIAS
https://www.w3schools.com/js/js_validation.asp
https://playcode.io/
https://html.spec.whatwg.org/
image1.png
image2.png
image7.png
image3.png