Scribd
Carregar
11 visualizações9 páginas

Port JAVA

O relatório apresenta o desenvolvimento de uma função em JavaScript para validar campos de e-mail e senha em um formulário HTML. A atividade foi realizada na plataforma Playcode, onde foram implementadas validações que garantem a consistência dos dados inseridos, além de mensagens de erro personalizadas para orientar o usuário. Os resultados mostraram que a validação funcionou corretamente, reforçando os conhecimentos de desenvolvimento em JavaScript e HTML.

Enviado por

eng.fsbrandao
Direitos autorais
© © All Rights Reserved
Levamos muito a sério os direitos de conteúdo. Se você suspeita que este conteúdo é seu, reivindique-o aqui.
Formatos disponíveis
Baixe no formato PDF, TXT ou leia on-line no Scribd
11 visualizações9 páginas

Port JAVA

O relatório apresenta o desenvolvimento de uma função em JavaScript para validar campos de e-mail e senha em um formulário HTML. A atividade foi realizada na plataforma Playcode, onde foram implementadas validações que garantem a consistência dos dados inseridos, além de mensagens de erro personalizadas para orientar o usuário. Os resultados mostraram que a validação funcionou corretamente, reforçando os conhecimentos de desenvolvimento em JavaScript e HTML.

Enviado por

eng.fsbrandao
Direitos autorais
© © All Rights Reserved
Levamos muito a sério os direitos de conteúdo. Se você suspeita que este conteúdo é seu, reivindique-o aqui.
Formatos disponíveis
Baixe no formato PDF, TXT ou leia on-line no Scribd
Você está na página 1/ 9

UNIVERSIDADE PITÁGORAS UNOPAR ANHANGUERA

CURSO: TECNOLOGIA EM ANÁLISE E DESENVOLVIMENTO DE SISTEMAS


DISCIPLINA: DESENVOLVIMENTO EM JAVASCRIPT

RELATÓRIO DE AULA PRÁTICA: Desenvolvimento de código em JavaScript


para validação de campo de e-mail em formulário HTML.

:
SUMÁRIO

1. INTRODUÇÃO ..................................................................................................... 3
2. MÉTODOS ........................................................................................................... 3
3. RESULTADOS .................................................................................................... 4
4. CONCLUSÃO ...................................................................................................... 9
3

1. INTRODUÇÃO

A linguagem de programação JavaScript é uma das mais utilizadas nas


páginas web, juntamente com o HTML, CSS e PHP. Para profissionais da área de
desenvolvimento web, é uma das principais linguagens utilizadas no desenvolvimento
de aplicações que funcionam nesse tipo de plataforma.
Ela é utilizada principalmente para tornar páginas web mais interativas
diretamente no navegador do usuário e permite adicionar funcionalidades dinâmicas
a sites, como mostrar ou esconder elementos, validar formulários, criar animações,
carregar dados sem recarregar a página (com AJAX ou APIs), e muitas outras
funcionalidades.
O desenvolvimento em JavaScript refere-se à criação de funcionalidades e
interações para páginas web ou aplicativos usando a linguagem JavaScript. Essa
linguagem é uma das mais populares do mundo e é essencial para o desenvolvimento
front-end (interface que o usuário vê), mas também pode ser usada no back-end (parte
do servidor), especialmente com plataformas como o Node.js.
Nesse contexto, presente relatório tem por objetivo apresentar os resultados
da construção de uma função simples em Javascript para a validação de campo de e-
mail de um determinado formulário feito em HTML utilizando a plataforma Playcode.
Nas seções a seguir são apresentados os métodos, resultados e as conclusões.

2. MÉTODOS

A atividade proposta corresponde a criação de uma função simples para a


validação de campo de e-mail de um determinado formulário feito em HTML utilizando
a plataforma Playcode, para isto, a principal ferramenta utilizada foi o site playcode.io,
que é uma plataforma online de criação de código em linguagens como JavaScript
que permite realizar testes e executar rotinas escritas na linguagem de forma prática,
rápida e interativa. Os seguintes procedimentos foram executados para a realização
desta atividade:

• Criação de um novo projeto dentro do Playcode.io composto por um pequeno


formulário com campo para colega de e -mail que deve ser informado pelo usuário;
4

• Escolha de um projeto vazio (empty);


• Escrita de um código em HTML simples e com ele um código em JavaScript que
deverá fazer validação de campo para coleta de e-mail;
• Com o código escrito, foi feita a verificação se o campo de e-mail estava preenchido
corretamente;
• E por fim, foi mostrada uma mensagem de erro e de orientação, explicando a
estrutura de um e-mail.

Seguidas todas estas etapas, pode-se tesar as funcionalidades do código e


obter os resultados mostrados a seguir.

3. RESULTADOS

Na página do playcode.io, foi criado um novo projeto com um formulário


HTML, o qual foram escritos os campos de entrada para o e-mail e senha, além de
um botão de envio. O nome desse formulário foi deixado como padrão do playcode.io,
ou seja, “index.html”. O código criado para esta primeira etapa da atividade é mostrado
na Figura 1.

Figura 1 – Código do formulário HTML.


Fonte: Autor (2025).
5

Na mesma página do playcode.io, foi criado um novo arquivo com as classes


CSS aplicadas para estilizar os campos. O arquivo foi nomeado como “style.css” e
seu código é mostrado na Figura 2, na qual já é possível ver também os campos para
entrada do e-mail e senha.

Figura 2 – Código da estilização em CSS.


Fonte: Autor (2025).

E finalmente, foi criado junto dos demais arquivos, um código em JavaScript


que validasse o e-mail inserido pelo usuário. De maneira geral, esses tipos de funções
são implementados para validar os campos de e-mail e senha no formulário.
Nessa atividade, para o e-mail, foi utilizada uma expressão regular que
garante que o formato digitado esteja correto. Caso o usuário não informe o e-mail
conforme o padrão esperado, será exibida continuamente a seguinte mensagem
explicativa:

"O formato do e-mail deve estar de acordo com o exemplo: [email protected]".

Já a senha, passa por uma validação para assegurar que atenda a critérios
específicos, tais como:
6

• Ter um comprimento mínimo de 6 dígitos e máximo de 12 dígitos;


• Conter caracteres maiúsculos, minúsculos e numéros;
• Possuir pelo menos 1 caractere especial.

Caso a senha não cumpra essas exigências, uma mensagem indicativa será
continuamente exibida, solicitando ao usuário que a senha seja corrigida conforme o
padrão exigido. A mensagem é a seguinte:

“A senha deve conter comprimento de 6 a 16 dígitos, caracteres maiúsculos,


minúsculos, números e pelo menos um caractere especial.”

Uma validação adicional é realizada caso o usuário clique no botão "ENTRAR"


sem preencher nenhum dos campos (e-mail e senha). Nessa situação, será
apresentada uma mensagem informando claramente que:

"Todos os campos devem ser preenchidos".

Essas validações garantem a consistência dos dados inseridos e melhoram


significativamente a experiência do usuário ao evitar possíveis erros de
preenchimento. Na Figura 3 é mostrado o código em JavaScript escrito.

Figura 3 – Código de verificação JavaScript. Continua.


Fonte: Autor (2025).
7

Figura 3 – Código de verificação JavaScript.


Fonte: Autor (2025).

Finalmente são feitos os testes para verificar se tudo estava funcionando,


onde primeiramente se entra com e-mail e senha corretos e o resultado é mostrado
na Figura 4.

Figura 4 – Validação do e-mail e senha corretos.


Fonte: Autor (2025).

Em seguida, foi feito novamente o login só desta vez, digitando um e-mail não
condizendo com o padrão solicitado e digitando uma senha correta. O resultado é
mostrado na Figura 5.
8

Figura 5 – Validação do e-mail e senha com e-mail errado e senha correta.


Fonte: Autor (2025).

Prosseguindo, feito novamente o login digitando um e-mail correto e uma


senha errada. O resultado é mostrado na Figura 6.

Figura 6 – Validação do e-mail e senha com e-mail correto e senha errada.


Fonte: Autor (2025).

Por fim, feito novamente o login digitando um e-mail e uma senha errados e o
resultado é mostrado na Figura 7.

Figura 7 – Validação do e-mail e senha com e-mail e senha errados.


Fonte: Autor (2025).
9

4. CONCLUSÃO

Durante esta atividade, pode-se colocar em prática alguns dos conceitos


estudados na disciplina de desenvolvimento em JavaScript. Por meio desta atividade,
pode-se reforçar os conhecimentos básicos e essenciais de HTML e JavaScript,
especialmente no desenvolvimento de formulários interativos.
A implementação da validação de e-mail com uma função simples
desenvolvida em JavaScript apresentou resultados satisfatórios. Um dos pontos mais
interessantes foi desenvolver uma mensagem de erro personalizada que, além de
informar o erro, também orientasse o usuário sobre como deve ser a estrutura correta
de um endereço de e-mail e senha. No site playcode.io, é possível ir visualizando a
resposta na tela, ou seja, enquanto o código vai sendo criado e executado, e isso,
facilitou o processo dos testes e a identificação de eventuais erros. Com isso, foi
possível ajustar e melhorar o código até tudo funcionar perfeitamente.
No geral, a atividade foi bastante produtiva e teve-se a oportunidade de
aprender uma função bastante interessante e prática por meio do JavaScript. Além
disso, todos os recursos funcionaram como esperado e o aprendizado adquirido será
fundamental para projetos futuros.

Você também pode gostar