Baixe o app para aproveitar ainda mais
Leia os materiais offline, sem usar a internet. Além de vários outros recursos!
Portifólio - Desenvolvimento em Javascript - MATEUS VALENTE
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
Impresso por Mateus Valente, E-mail mateusvalente01@gmail.com para uso pessoal e privado. Este material pode ser protegido por direitos autorais e não pode ser reproduzido ou repassado para terceiros. 21/11/2022 19:31:54
Impresso por Mateus Valente, E-mail mateusvalente01@gmail.com para uso pessoal e privado. Este material pode ser protegido por direitos autorais e não pode ser reproduzido ou repassado para terceiros. 21/11/2022 19:31:54
SISTEMA DE ENSINO 100% ONLINE
SISTEMAS DE INFORMAÇÃO - BACHARELADO
MATEUS VALENTE DE SOUSA
ROTEIRO AULA PRÁTICA
DESENVOLVIMENTO EM JAVASCRIPT
TUCURUI - PA
2022
MATEUS VALENTE DE SOUSA
ROTEIRO AULA PRÁTICA
DESENVOLVIMENTO EM JAVASCRIPT
Trabalho
apresentado
à
Universidade
UNOPAR,
como
requisito parcial p
ara a obtenção
de média
semestral nas
disciplinas norteadoras do semestre letivo.
Tutor (a): Márcio Barbosa de Lima
INTRODUÇÃO
Realizar a construção de uma função simples para validação de campo de e-mail
de determinado formulário feito em HTML utilizando a plataforma Playcode.
O 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ápida e interativa. Conta com exemplos prontos utilizando bibliotecas, frameworks e APIs. Nesta atividade será criado um código em JavaScript para validar campo de um formulário simples para uma pessoa e assim apresentar uma mensagem orientando como preencher corretamente o campo de em código em JavaScript para validar campo de um formulário simples apresentando uma mensagem que orienta como preencher corretamente o campo de e-mail.
Impresso por Mateus Valente, E-mail mateusvalente01@gmail.com para uso pessoal e privado. Este material pode ser protegido por direitos autorais e não pode ser reproduzido ou repassado para terceiros. 21/11/2022 19:31:54
Impresso por Mateus Valente, E-mail mateusvalente01@gmail.com para uso pessoal e privado. Este material pode ser protegido por direitos autorais e não pode ser reproduzido ou repassado para terceiros. 21/11/2022 19:31:54
TAREFA 1
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title> Validação de E-mail com JavaScript</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
</font>";
alert("E-mail invalido");
}
}
</script>
</head>
<body>
<form name="f1">
<h3> Validação de E-mail com JavaScript</h3>
<hr color='gray'>
<table>
<tr>
<td>
E-mail:
<input type="text" name="email" onblur="validacaoEmail(f1.email)" maxlength="60" size='65'>
</td>
<td>
<div id="msgemail"></div>
</td>
</tr>
</table>
<hr color='gray'>
</form>
</body> </html>
TAREFA 2
O e-mail deve possuir as seguintes opções em seu campo:
Não conter espaços;
Possuir o @;
Não conter caractere após ou antes o @;
Possuir ponto após o @.
Exemplos de e-mail valido:mateus01@hotmail.com, mateusvalente@gmail.com.
O e-mail possui duas partes separadas pelo @, Primeira Parte usuário e a Segunda o domínio.
Frequentemente, a ID da conta é a parte do seu endereço de email antes do símbolo "@" e o domínio é a parte do seu endereço de email após o símbolo "@".
Se o email for inválido uma mensagem irar aparecer para o usuário em uma div informando que o campo é inválido ou válido.
<form name="f1">
<h3>Formulário de Inscrição:</h3>
<table>
<tr>
<td>
E-mail:
<input type="text" name="email" onblur="validacaoEmail(f1.email)" maxlength="60" size='65'>
</td>
<td>
<div id="msgemail"></div>
</td>
</tr>
</table>
</form>
O código acima está criando um formulário com apenas o campo de e-
mail que aciona o evento onblur. Este input está dentro de uma célula da tabela e na célula ao lado existe uma div com id = “msgemail”, div onde são dadas informações acerca da validação do campo de email.
Código javaScript para validação do campo de email
<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("E-mail valido");
}
else{ document.getElementById("msgemail").innerHTML="<font color='red'>E-mail inválido </font>"; alert("E-mail invalido");
}
}
</script>
Ao criar o input de e-mail da Listagem 1, adicionamos para este input o
evento onblur, para que ele acione a função validacaoEmail passando como parâmetro o componente a ser validado no caso o nome do formulário ponto o nome do input (“f1.email”).
Na função criada em JavaScript recebemos o campo de e-mail e
separamos as duas partes existentes:
· usuario= antes do @
· domino= depois do @
Após começarmos as validações que já haviam sido definidas no início
do artigo no if na sequencia abaixo:
· Tamanho de usuário maior ou igual a 1 caractere.
· 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 caractere após o @.
· A posição do último ponto tem que ser menor que o ultimo caractere, deve ser finalizado o domínio por um caractere.
Essas explicações acima foram a validação do e-mail, se todas elas forem satisfeitas, o código entra no if e executa as duas operações a de escrever o conteúdo E-mail válido dentro da div e a de mostrar a mensagem de E-mail válido.
Se qualquer uma das condições não for satisfeita, será escrito na div “Email Inválido” e mostrada a mensagem.
Esta foi uma validação básica de e-mail, podendo algumas das restrições serem mais específicas quanto ao tamanho ou acrescentadas novas validações. Só lembrando, a validação com o alert e a escrita na div podem ser trocadas por outras operações, foram usadas essas duas opções como exemplo por serem mais simples.
Impresso por Mateus Valente, E-mail mateusvalente01@gmail.com para uso pessoal e privado. Este material pode ser protegido por
direitos autorais e não pode ser reproduzido ou repassado para terceiros. 21/11/2022 19:31:54
4
Impresso por Mateus Valente, E-mail mateusvalente01@gmail.com para uso pessoal e privado. Este material pode ser protegido por
direitos autorais e não pode ser reproduzido ou repassado para terceiros. 21/11/2022 19:31:54
4
CONCLUSÃO
A atividade proporciona uma assimilação excelente dos conceitos estudados, uma vez que foram aplicados de forma prática, do HTML e Javascript onde foi criada a validação de forma programática, dos campos de um formulário de envio de e-mail.
Link do Formulário: https://playcode.io/1017008
Continue navegando
Conteúdos escolhidos para você
476 pág.
64 pág.
Perguntas dessa disciplina
Compartilhar