Relatorio - Desenvolvimento em Javascript

Prévia do material em texto

TÉCNICO ANÁLISE E DESENVOLVIMENTO DE SISTEMAS
 PORTFÓLIO DESENVOLVIMENTO EM JAVASCRIPT
Aluno(a): Anna Júlia Santos Rezende
Professor(a): Anderson Emidio de Macedo Goncalves
Lagoa da Prata – MG
2025
SUMÁRIO
Introdução	3
Métodos	4
Infraestrutura Utilizada	4
Procedimentos Realizados	5
Criação do Projeto no Playcode.io	5
Estruturação do Formulário HTML	5
Implementação da Validação em JavaScript	6
Teste e Execução do Código	7
Resultados	8
Conclusão	10
10
Introdução
O JavaScript é uma das linguagens mais utilizadas no desenvolvimento web moderno, sendo indispensável para criar páginas dinâmicas e interativas. Sua integração com HTML e CSS possibilita validar informações, manipular elementos na tela e reagir às ações do usuário de forma imediata.
Nesta atividade prática, o objetivo foi desenvolver uma função em JavaScript para validar o campo de e-mail em um formulário HTML, garantindo que o usuário fornecesse um endereço válido. A prática foi realizada na plataforma online Playcode.io, um ambiente gratuito que permite escrever e testar códigos diretamente no navegador de maneira simples e ágil.
A validação de formulários é um passo essencial para assegurar a qualidade e consistência dos dados enviados, além de evitar falhas e proporcionar uma melhor experiência ao usuário. Dessa forma, este exercício contribuiu para entender como o JavaScript pode ser aplicado na verificação de informações e na exibição de mensagens de orientação e erro de forma dinâmica.
Métodos
Infraestrutura Utilizada
- Computador com acesso à Internet;
· Navegador Web atualizado (Google Chrome, Edge ou Firefox);
· Plataforma Playcode.io, utilizada como ambiente online para edição e execução de códigos em JavaScript;
· Licença: Freeware (uso gratuito).
O Playcode.io é um ambiente online atual e intuitivo, projetado para testar códigos em tempo real, oferecendo retorno imediato das mudanças feitas no script e facilitando o processo de desenvolvimento e aprendizagem.
[Figura 1 – Página inicial do Playcode.io]
Legenda: Interface inicial do ambiente de desenvolvimento online Playcode.
Procedimentos Realizados
Criação do Projeto no Playcode.io:
Primeiramente, foi acessado o site Playcode.io, onde foi criado um novo projeto em branco. A plataforma já disponibiliza um ambiente pré-configurado, permitindo escrever códigos em HTML e JavaScript e executá-los diretamente pelo navegador. Esse recurso facilita o desenvolvimento e a visualização imediata dos resultados durante a programação.
[Figura 2 – Tela de criação de projeto no Playcode]
Legenda: Projeto criado na plataforma Playcode.io para início da codificação.
Estruturação do Formulário HTML:
Na sequência, foi elaborado um formulário básico com um campo destinado à inserção do e-mail e um botão para envio. Esse formulário funciona como a estrutura inicial para aplicação da função de validação que posteriormente seria implementada em JavaScript.
.
[Figura 3 – Estrutura HTML do formulário criada no Playcode] Legenda: Código HTML base com campo de e-mail e botão de envio.
Implementação da Validação em JavaScript:
Posteriormente, foi desenvolvida a função validarEmail(), responsável por analisar o conteúdo inserido no campo e verificar se ele corresponde ao formato adequado de um endereço de e-mail. 
[Figura 4 – Código JavaScript de validação do e-mail no Playcode]
Legenda: Função JavaScript criada para validação do campo de e-mail.
Teste e Execução do Código:
Após finalizar a programação, foi utilizado o botão Run da plataforma para executar e verificar o funcionamento do formulário. Em seguida, foram realizados três testes principais:
1. Campo vazio;
2. E-mail em formato incorreto;
3. E-mail válido.
[Figura 5 – Execução dos testes no Playcode mostrando diferentes respostas] Legenda: Testes de validação mostrando mensagens distintas conforme o tipo de entrada.
Resultados
Os testes realizados demonstraram que a função em JavaScript funcionou corretamente:
· Quando o campo foi deixado em branco, o sistema apresentou uma mensagem de alerta em vermelho;
· Ao digitar um e-mail em formato incorreto, foi exibida uma mensagem em laranja indicando o padrão esperado;
· Quando um e-mail válido foi inserido, o sistema mostrou uma mensagem verde indicando sucesso.
[Figura 6 – Tela do Playcode exibindo os resultados dos testes no navegador] Legenda: Diferentes respostas visuais conforme o resultado da validação.
Esses resultados evidenciam a relevância da validação de dados no front-end, prevenindo o envio de informações incorretas ao servidor e garantindo uma experiência mais segura e eficiente para o usuário.
Conclusão
A atividade realizada possibilitou compreender, na prática, como o JavaScript pode ser aplicado para validar campos de formulários, aprimorando tanto a usabilidade quanto a confiabilidade dos dados. A utilização da plataforma Playcode.io tornou o processo mais ágil, oferecendo um ambiente acessível e interativo, ideal para testes rápidos e experimentações.
Além de fortalecer o conhecimento na linguagem, o exercício destacou a importância de fornecer mensagens claras para orientar o usuário durante o preenchimento dos formulários. Essa prática contribui para a criação de aplicações web mais seguras, dinâmicas e intuitivas.
Em síntese, a atividade atingiu plenamente os objetivos estabelecidos, consolidando o aprendizado sobre validação de dados com JavaScript e sobre a utilização prática de editores online no desenvolvimento front-end.
Referências
PLAYCODE. Playcode.io – Online Editor for JavaScript, HTML and CSS. Disponível em: https://playcode.io/. Acesso em: 07 out. 2025.
MOZILLA DEVELOPER NETWORK. JavaScript Guide – Regular Expressions. 2024. Disponível	em:
https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Guide/Regular_Expressions. Acesso em: 07 out. 2025.
PRESSMAN, R. S. Engenharia de Software: uma abordagem profissional. 8. ed. Porto Alegre: AMGH, 2016.
SOMMERVILLE, I. Engenharia de Software. 10. ed. São Paulo: Pearson Education do Brasil, 2019.
image3.jpeg
image4.png
image5.jpeg
image6.png
image7.png
image8.png
image1.jpeg
image2.png