Desenvolvimento em Javascript - A

Prévia do material em texto

4
4
4
FACULDADE ANHANQUERA
ANÁLISE E DESENVOLVIMENTO DE SISTEMAS
CAIO ALVES SOUSA
DESENVOLVIMENTO EM JAVASCRIPT
VALPARAÍSO DE GOIÁS, GO
2025
CAIO ALVES SOUSA 
Desenvolvimento em JavaScript
Construir função simples para validação de campo de e-mail de um determinado formulário feito em HTML utilizando a plataforma Playcode
Professor: Gabriel Malaquias
BRASÍLIA, DF
2025
Análise orientada a objetos
RELATÓRIO DE AULA PRÁTICA	
1 INTRODUÇÃO	3
2 DESENVOLVIMENTO	4
2.1 CRIANDO O PROJETO NO PLAYTIME.IO	4
2.2 ESTRUTURA HTML	4
2.3 ADICIONANDO ELEMENTOS DO FORMULÁRIO	5
2.4 ESTILIZAÇÃO COM CSS	7
2.5 VALIDAÇÃO COM JAVASCRIPT	8
2.6 TESTE E FINALIZAÇÃO	8
CONCLUSÃO	11
INTRODUÇÃO
 A atividade teve como objetivo desenvolver uma função simples em JavaScript para validar o campo de e-mail de um formulário HTML. O exercício foi realizado na plataforma online Playcode.io, que permite testar códigos em tempo real, facilitando a aprendizagem prática da linguagem JavaScript.
DESENVOLVIMENTO
CRIANDO O PROJETO NO PLAYTIME.IO
 Na tela inicial do website, clicamos em “Start coding” e selecionamos
um novo projeto HTML vazio:
ESTRUTURA HTML
 Iniciamos com a declaração e a tag para
definir o tipo de documento e a linguagem.
 Adicionamos as seções e para separar metadados
e conteúdo visível.
ADICIONANDO ELEMENTOS DO FORMULÁRIO
 Criaremos um	título	com para descrever a função do
formulário.
 Utilizaremos para encapsular os campos de entrada e o
botão de envio.
 Adicionamos um e um do tipo texto para o campo
de e-mail, garantindo que o atributo required force a entrada do usuário.
 Incluir um para enviar o formulário.
 Criar parágrafos () para mensagens de erro e orientações.
ESTILIZAÇÃO COM CSS
 Adicionaremos um estilo básico para o corpo (body), definindo a
fonte e a margem.
 Criar classes .error e	.info para as mensagens de erro e
informações, definindo cores e estilos de fonte.
VALIDAÇÃO COM JAVASCRIPT
 Agora, incluiremos o seguinte script ao final do que adiciona
um event listener para “ouvir” o evento que será enviado quando o usuário clicar em “Submit”:
 Adicionamos variáveis do tipo constante para capturar o valor do
campo de e-mail e o elemento para a mensagem:
 Criamos uma expressão regular (regex) para validar o formato do e-
mail:
 Ao final, verificamos se o e-mail corresponde à regex e exibimos as
mensagens apropriadas:
TESTE E FINALIZAÇÃO
 Com a visualização web disponível no playtime.io, podemos ver o
resultado do projeto que desenvolvemos:
Teste de validação com e-mail inválido:
Teste de validação com e-mail válido
O código final completo ficou da seguinte forma:
CONCLUSÃO
 A prática permitiu compreender melhor como o JavaScript interage com elementos HTML para realizar validações e fornecer feedback ao usuário. Através do uso de expressões regulares, foi possível validar o formato do e-mail de forma eficiente, garantindo maior confiabilidade nos dados inseridos em formulários web.
image1.jpg
image2.jpg
image3.jpg
image4.jpg
image5.jpg
image6.jpg
image7.jpg
image8.jpg
image9.jpg
image10.jpg
image11.jpg
image12.jpg
image13.jpg
image14.jpg
image15.jpg
image16.jpg
image17.jpg
image18.jpg
image19.jpg
image170.jpg
image180.jpg