Baixe o app para aproveitar ainda mais
Leia os materiais offline, sem usar a internet. Além de vários outros recursos!
relatorio-de-aprendizagem-de-aula-pratica-desenvolvimento-em-javascript
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Compartilhar
Prévia do material em texto
PITÁGORAS
WATSON LUIZ DA SILVA
RELATÓRIO DE AULA PRÁTICA DESENVOLVIMENTO EM JAVASCRIPT
IPATINGA
2023
lOMoARcPSD|32671301
1. ATIVIDADES PROPOSTA
Foi proposto através da aula prática da matéria Desenvolvimento em Javascript em Front-end os a seguinte prática:
Construir função simples para validação de campo de e-mail de um determinado formulário feito em HTML utilizando a plataforma Playcode, uma plataforma online de criação de código em linguagens como JavaScript que permite realizar testes e executar rotinas escritas na linguagem e forma prática, rápita e interativa.
Assim, seria necessário a escrita de código em JavaScript para validar campo de um formulário simples para colega de e-mail. Apresentar uma mensagem orientando como preencher corretamente o campo de email.
Dessa forma e seguindo o recomendado foram alcançados os seguintes resultados abaixo:
lOMoARcPSD|32671301
7
2. ETAPA 1 – ENTENDENDO AS NECESSIDADES DO CÓDIGO
Primeiramente foi necessário entender as necessidades do código antes desenvolver o mesmo, basicamente um email é composto de algumas peculiaridades próprias, como por exemplo, ele deve possui um @ e caracteres antes e depois dele, deve possuir ao menos um “ponto” após o caracter depois do @ e um caractere após o ponto. O mesmo também não pode ter espaço.
Dessa forma, separamos o email em duas partes, anterior e posterior ao @, a primeira carrega o “nome” e a segunda o “domínio” e testamos essas partes.
O tamanho do texto do nome tem que ser de no mínimo 1 caractere não podendo possuir @ e nem espaço em branco; enquanto isso o “domínio” deve possuir um “ponto”, não podendo possuir @, além disso após o ponto o tamanho mínimo é de 3 caracteres.
Diante disso criaremos nosso código
Figura 1: Criando o Input
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial- scale=1.0">
<title>Validando Email</title>
</head>
<body>
<form name="f1">
<h2> Insira o seu email</h2>
<label>E-mail:</label>
<input type="text" name="email" onblur="validacaoEmail(f1.email)" maxlength="50" size='55'>
<div id="msgEmail"></div>
</form>
</body>
</html>
JJJJ
Note que usamos o evento onblur e criamos uma div de nome “msgEmail” que mostrará se o email é válido ou não.
3. INSERINDO JAVASCRIPT PARA VALIDAÇÃO
Após crição do Input, criaremos o código Javascript que através do evento onblur irá acionar a função de validação do email passando o parâmetro a ser validado.
Na função validacaoEmail recebemos o campo de email e fazemos a separação das duas partes, antes do @ e depois do @ aplicando os ifs abaixo:
Tamanho de usuário maior ou igual a 1 caracter. Tamanho do domínio maior ou igual a 3 caracteres. Usuário não pode conter o @.
Domínio não pode conter o @.
Usuário não pode conter o “ ” espaço em branco. Domínio não pode conter o “ ” espaço em branco. Domínio tem que possuir “.” Ponto.
A posição do primeiro ponto tem que ser maior ou igual a 1, lembrando a posição 0 deve ser ocupado por algum caracter após o @.
A posição do ultimo ponto tem que ser menor que o ultimo caracter, deve ser finalizado o domínio por um caracter.
Se as condições forem atendidas a mesagem de “Email Válido” será exibida, entretanto se apenas uma dessas não fro respeitada a seguinte mensagem será mostrada:
“Email inválido, por favor verifique seu email. Ele não deve possuir espaços; deve possuir @ e caracteres antes e depois dele, ele deve possuir pelo menos um ponto após o caracter depois do @; e possuir algum carceter após o ponto”.
Abaixo vemos a função desenvolvida:
Figura 2: Função de validação de email Javascript
<script language="Javascript"> function validacaoEmail(field) {
usuario = field.value.substring(0, field.value.indexOf("@")); dominio = field.value.substring(field.value.indexOf("@")+ 1, field.value.length);
if ((usuario.length >=1) && (dominio.length >=3) && (usuario.search("@")==-1) && (dominio.search("@")==-1) && (usuario.search(" ")==-1) &&
(dominio.search(" ")==-1) &&
(dominio.search(".")!=-1) && (dominio.indexOf(".") >=1)&& (dominio.lastIndexOf(".") < dominio.length - 1)) {
document.getElementById("msgEmail").innerHTML="E-mail válido"; alert("email valido");
}
else{
document.getElementById("msgEmail").innerHTML="<font color='red'>Email inválido, por favor verifique seu email. Ele não deve possuir espaços; deve possuir @ e caracteres antes e depois dele, ele deve possuir pelo menos um ponto após o caracter depois do @; e possuir algum caracter após o ponto </font>";
alert("Email inválido, por favor verifique seu email. Ele não deve possuir espaços; deve possuir @ e caracteres antes e depois dele, ele deve possuir pelo menos um ponto após o caracter depois do @; e possuir algum caracter após o ponto");
}
}
</script>
Abaixo está o código HTML desenvolvido.
4. ETAPA 3 – JUNTANDO OS CÓDIGOS
Por fim podemos fazer a junção dos dois códigos e realizar a testagem dos
mesmos. Abaixo temos o código por completo:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial- scale=1.0">
<title>Validando Email</title>
<script language="Javascript"> function validacaoEmail(field) {
usuario = field.value.substring(0, field.value.indexOf("@")); dominio = field.value.substring(field.value.indexOf("@")+ 1, field.value.length);
if ((usuario.length >=1) && (dominio.length >=3) && (usuario.search("@")==-1) && (dominio.search("@")==-1) && (usuario.search(" ")==-1) &&
(dominio.search(" ")==-1) &&
(dominio.search(".")!=-1) && (dominio.indexOf(".") >=1)&& (dominio.lastIndexOf(".") < dominio.length - 1)) {
document.getElementById("msgEmail").innerHTML="E-mail válido"; alert("email valido");
}
else{
document.getElementById("msgEmail").innerHTML="<font color='red'>Email inválido, por favor verifique seu email. Ele não deve possuir espaços; deve possuir @ e caracteres antes e depois dele, ele deve possuir pelo menos um ponto após o caracter depois do @; e possuir algum caracter após o ponto </font>";
alert("Email inválido, por favor verifique seu email. Ele não deve possuir espaços; deve possuir @ e caracteres antes e depois dele, ele deve possuir pelo menos um ponto após o caracter depois do @; e possuir algum caracter após o ponto");
}
}
</script>
</head>
<body>
<form name="f1">
<h2> Insira o seu email</h2>
<label>E-mail:</label>
<input type="text" name="email" onblur="validacaoEmail(f1.email)" maxlength="50" size='55'>
<div id="msgEmail"></div>
</form>
</body>
</html>
Podemos ver o seu funcionamento na plataforma playcode aqui
Figura 4: Testagem de email válido na Playcode
Também foi realizado um teste no qual o email é inválido.
Figura 5: Testagem de email inválido na Playcode
5. CONCLUSÃO
Conclui-se que a atividade proposta foi de grande valia para o aprendizado e desenvolvimento de em Porgramação Javascript.
Através da proposta e pesquisa para resolução foi possível treinar o raciocínio lógico e aprender sobre formas de validação de formulário. Além disso o conhecimento da plataforma playcode.io foi de grande valia.
Os resultados foram alcançados tornando o aprendizado ainda de maior valor.
Continue navegando
Materiais relacionados
Perguntas relacionadas
Compartilhar