portifolio dsenvolvimento javascript

Esta é uma pré-visualização de arquivo. Entre para ver o arquivo original

ANÁLISE E DESENVOLVIMENTO DE SISTEMAS
WESLEY PERES DOS SANTOS
PORTFÓLIO – RELATÓRIO DE AULA PRÁTICA:
Desenvolvimento em Javascript
JAÚ
2024
WESLEY PERES DOS SANTOS
PORTFÓLIO – RELATÓRIO DE AULA PRÁTICA
Desenvolvimento em Javascript
Trabalho de portfólio apresentado como requisito parcial para a obtenção de pontos para a média semestral.
Orientador: Luís Gustavo Cardoso
JAÚ
2024
SUMÁRIO
Sumário
INTRODUÇÃO	4
DESENVOLVIMENTO	5
RESULTADOS	7
CONCLUSÃO	8
INTRODUÇÃO
Este estudo aborda a validação de formulários, com ênfase na verificação dos campos de e-mail e senha, empregando exclusivamente Javascript, sem a utilização de bibliotecas externas. A validação de formulários constitui um processo fundamental para assegurar que os dados fornecidos pelos usuários sejam precisos e seguros, minimizando a ocorrência de erros e prevenindo vulnerabilidades relacionadas à segurança da informação.
DESENVOLVIMENTO
Para o desenvolvimento da funcionalidade proposta, utilizou-se o software "Playcode.io", uma ferramenta que permite a implementação e o teste de código em tempo real.
A validação dos formulários foi realizada por meio da criação e organização de três arquivos distintos, cada um responsável por um aspecto específico do processo:
1. HTML: Estruturação do formulário, definindo os campos para entrada de e-mail e senha.
2. CSS: Aplicação de estilização aos elementos do formulário, garantindo melhor usabilidade e acessibilidade.
3. JavaScript: Desenvolvimento das funções de validação, empregando expressões regulares e manipuladores de eventos para assegurar a integridade e a segurança dos dados inseridos pelos usuários.
Desenvolvimento do Formulário: Foi implementado um formulário em HTML, contendo campos específicos para a inserção de e-mail e senha, além de um botão de envio para submissão dos dados. O arquivo foi nomeado como "index.html" e desempenha a função de interface do formulário, caracterizando-se como a estrutura do Frontend da aplicação. conforme ilustrado nas seções seguintes.
Estilização com CSS
Classes CSS foram aplicadas para aprimorar a apresentação visual dos campos do formulário, garantindo uma interface mais intuitiva e acessível ao usuário. Além disso, a utilização de classes permite uma estruturação mais organizada do código, facilitando a manutenção e aprimoramento da aplicação. A seguir, são apresentados os códigos utilizados para a estilização.
Validação com JavaScript
A validação dos campos de e-mail e senha é realizada por meio de funções JavaScript. Para garantir que o e-mail esteja no formato correto, é utilizada uma expressão regular. Caso o e-mail inserido não esteja adequado, será exibida a seguinte mensagem:
"O formato do e-mail deve conter ao menos como no exemplo: xxxx@xxxx.com."
Enquanto o e-mail não estiver no formato esperado, a mensagem continuará sendo exibida.
A validação da senha assegura que ela atenda a critérios específicos, como:
· Comprimento mínimo de 6 e máximo de 16 caracteres
· Presença de caracteres maiúsculos, minúsculos e numéricos
· Pelo menos 1 caractere especial
Caso a senha não cumpra esses requisitos, uma mensagem de erro será exibida.
Além disso, há uma verificação adicional para garantir que todos os campos sejam preenchidos. Se o usuário tentar clicar no botão “ENTRAR” sem informar o e-mail e a senha, o sistema exibirá a mensagem:
"Todos os campos devem ser preenchidos."
Essa validação melhora a experiência do usuário e evita o envio de dados inválidos.
RESULTADOS
 Os resultados da validação são exibidos visualmente no formulário:
· E-mail: Caso o e-mail inserido não esteja no formato correto, uma mensagem de erro será exibida e o campo será destacado.
· Senha: Se a senha não atender aos critérios estabelecidos (como um comprimento mínimo), uma mensagem de erro será exibida e o campo será realçado
CONCLUSÃO
 Este trabalho apresentou, de forma clara e prática, a implementação da validação de e-mail e senha em formulários utilizando JavaScript. A validação no lado do cliente aprimora a experiência do usuário ao fornecer feedback imediato sobre os dados inseridos. Além disso, contribui para a prevenção do envio de informações inválidas, garantindo maior integridade e segurança dos dados coletados. 
REFERÊNCIAS
image1.jpeg
image2.jpeg