desenvolvimento em javascript aula pratica

Prévia do material em texto

lOMoARcPSD|52632172
lOMoARcPSD|52632172
lOMoARcPSD|52632172
 
 
 
UNIVERSIDADE ANHANGUERA EDUCACIONAL CENTRO DE EDUCAÇÃO À DISTÂNCIA 
 
 
 
 
ATIVIDADE PRÁTICA – DESENVOLVIMENTO EM JAVASCRIPT 
 
 
 
 
 
 
 
 
 
SUMÁRIO 
 
1. INTRODUÇÃO	4 
2. DESENVOLVIMENTO	5 
2.1 Função para validação de campo de e-mail	5 
2.1.1 Código HTML	5 
2.1.2 Código JavaScript	7 
2.1.3 Código CSS	9 
2.1.4 Produto Final	11 
3. CONCLUSÃO	13 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
INTRODUÇÃO 
 
JavaScript é uma linguagem de programação usada em aplicações web e considerada uma linguagem de scripts, interpretada, com tipagem dinâmica e fraca e de suporte à orientação a objetos. Além disso, ela possui uma sintaxe simples, o que contribuiu para que tenha uma ampla comunidade de desenvolvedores. Hoje, JavaScript é considerada uma das linguagens mais populares do mercado. 
Portanto, esse portfólio de aula prática possui como objetivo de enfim colocar em prática o que foi aprendido nas aulas de Desenvolvimento em JavaScript. Para isso, será usado a plataforma online gratuita Playcode, nela é possível a criação de código em linguagens como JavaScript, permitindo realizar testes e executar rotinas escritas na linguagem de forma prática, rápida e interativa, como uma forma de aprendizado inteligente. 
A atividade do portfólio consiste em desenvolver uma função simples para validação de campo de e-mail de um determinado formulário feito em HTML utilizando a plataforma Playcode, com o objetivo consolidar as teorias aprendidas da linguagem JavaScript. 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
DESENVOLVIMENTO 
 
Função para validação de campo de e-mail 
 
Para a atividade, foi elaborado uma função utilizando a plataforma Playcode.io na qual o usuário registra um determinado e-mail, e o programa define se o e-mail é válido ou não. Caso não estiver nos conformes, surge um aviso de “Email Inválido. Exemplo: contact@email.com” para o usuário registrar o e-mail da maneira correta. 
 
Código HTML 
Figura 1- C digo base HTML utilizando o Playcode.io 
 
O primeiro passo para essa atividade, é a criação do código HTML base para o projeto. Adicionando o título do documento, o atributo charset utilizado para indicar o conjunto de caracteres a ser exibido, a tag meta viewport, na qual informa ao navegador como renderizar a página em dispositivos móveis e por fim, a tag link, que define a relação entre o código HTML e o código externo de estilo CSS. 
 
 
Figura 2 - C digo simples HTML para um formulÆrio de e-mail utilizando o Playcode.io 
Após definir o código base, foram criadas duas tags juntamente da definição de suas classes para posteriormente adicionar estilos através do código CSS . A primeira div será para a definição geral da página web, e a segunda para o bloco onde ficará o formulário de e-mail. 
A tag representa o título do elemento dentro do formulário para demonstrar que será adicionado um “email” no campo de entrada, esse definido na tag , onde o usuário poderá inserir dados, dependendo do tipo, nesse caso, o tipo é “email”. 
O evento “onkeyup” ocorre quando o usuário pressiona e solta uma tecla no teclado, acionando a função “validarEmail()”, descrita mais adiante no código JavaScript. 
Por fim, a tag possui a finalidade de adicionar um texto de erro caso o usuário inserir o email da maneira incorreta. 
 
 
Figura 3 - C digo para adicionar um botªo de enviar ap s o usuÆrio inserir o e-mail 
 
O código acima adiciona um botão com a tag junto de um evento 
“onclick”, no qual ativa quando o usuário clicar no botão. O evento designado de “validarEnviar()”, verifica se o email inserido pelo usuário é válido e envia para o sistema, caso o email estiver incorreto, a tag é acionada para mostrar uma mensagem de erro. 
 
 
 
 
Código JavaScript 
Figura 4 - C digo HTML para referŒncia ao c digo JavaScript 
Para relacionar um arquivo externo JavaScript ao código HTML, é necessário inserir uma linha de código com a tag ao final da tag body no código HTML e o atributo “src”(source) com o caminho para o arquivo em questão. 
 
Figura 5 - Cria ªo de variÆveis dentro do c digo JavaScript 
 
O primeiro passo dentro do código JavaScript é a criação de variáveis para acessar os elementos definidos no código HTML utilizando o “document.getElementById”, um método DOM que retorna o elemento cujo atributo ID foi especificado. 
 
Figura 6 - C digo JavaScript para validar o e-mail em um formulÆrio 
 
 
 
 
Para que possamos fazer alterações no código após o usuário inserir o email no campo de entrada, é criada uma variável “email” na qual acessa o elemento HTML dentro da tag através do “document.getElementById” definido anteriormente, porém adicionando a propriedade value, na qual retorna o valor atribuído no campo de entrada. 
Após obter o valor, o programa executa uma estrutura condicional if para validar o email inserido. A primeira condição “if (email.length == 0)”, verifica se no campo de entrada não há nenhum caractere. Se for o caso, o programa mostra uma mensagem de erro ao lado “Obrigatório”, indicando ao usuário que é obrigatório a inserção de um email no campo. 
A segunda condição “if (!email.match(/^[A-Za-z\._\-[0-9]*[@][A-Za-z]*[\.][az]{2,4}$/))” verifica através de uma expressão regular, a padronização do email a ser inserido no campo. Onde o início do email precisa conter apenas caracteres de A-Z, pontos, underline, traços, asteriscos ou números. O meio do email obrigatoriamente é determinado pelo símbolo “@”, ou arroba, e o final do email necessita conter também apenas caracteres de A-Z, um ponto e caracteres a-z. 
Caso o usuário inserir caracteres diferentes do definido, o programa aciona uma mensagem de 'Email Inválido. Exemplo: contact@email.com.', revelando ao usuário um exemplo de como deve ser o padrão de email e alterando a cor da mensagem de alerta para vermelho através da propriedade style, dando uma ênfase de que algo está errado. 
Se tudo suceder de maneira correta, o código passa para a última parte, mostrando ao usuário uma mensagem de “OK!” e alterando as cores dos elementos de texto e linhas ao redor do campo de entrada para verde, exibindo ao usuário que o padrão de email está correto. 
 
Figura 7- Fun ªo para autenticar o botªo de enviar 
A função acima “validarEnviar()” entra em conjunto com o botão descrito no código HTML para servir como uma segunda validação do email no campo de entrada. 
A condição “if (!validarEmail())” verifica se a função anterior não foi satisfeita, gerando uma mensagem de erro “Email é obrigatório!” abaixo do botão de enviar. A mensagem permanece por 5 segundos através do “setTimeout()” e depois desaparece. 
 
 
 
Código CSS 
Figura 8 - C digo CSS para alterar formato da pÆgina 
A primeira parte do código de estilo CSS define o formato geral da página, mantendo os elementos alinhados no centro, com a cor de fundo em branco e a fonte “Poppins / sans-serif” definida. 
Figura 9 - C digo CSS para alterar o bloco de formulÆrio 
 
O bloco com a classe “.input-email” delimita o espaço que funcionará o código de fato, com uma largura máxima de 900 pixels e a posição absoluta. 
Já no bloco com o ID “#contact-email”, é onde encontra tag de elemento . O input gera um caixa de texto padrão dependendo da tipologia escolhida, nesse caso foi escolhido o email, onde o padrão é uma caixa em branco com o contorno em preto. Para fazer a alteração, no código CSS foi definido a cor de fundo como transparente, para manter a mesma cor do bloco acima, o contorno foi eliminado, o tamanho da fonte foi aumentado para 26 pixels e a posição relativa. Foi adicionado também espaço ao redor através do padding e uma linha abaixo do campo com 2 pixels. 
Figura 10 - C digo CSS para alterar o t tulo e mensagem de erro 
 
O ID “email-label” edita o texto-título incorporado na tag . Com as propriedades top e left, o texto se encontra originalmente dentro do campo input, contudo, com a adição da propriedade “transition: top 0.5s” elinhas de código adicionados no código JavaScript, assim que o usuário insere o email no campo, o título se movimenta para a parte superior, gerando um dinamismo. 
Já no “email-erro”, o propósito é similar em relação à transição do bloco acima, onde o texto adicionado está abaixo do input, contudo, ao aparecer a mensagem de erro ou sucesso, se movimenta alguns pixels abaixo. A cor foi alterada para vermelho, por ser uma mensagem de erro, e o tamanho da fonte 16 pixels para ser menor em relação ao input. 
Figura 11 - C digo CSS para alterar o botªo de enviar 
 
A última parte do código se refere ao botão de enviar. Foi alterada a cor de fundo para #131A34, um tom de azul marinho, e a cor da fonte para branco, com o objetivo de dar um contraste em relação ao resto da página. 
As bordas do botão foram levemente arredondadas com o border-radius, sua dimensão aumentada com o padding, a posição do botão alterada para se manter no centro com o margin, e o cursor:pointer na qual indica ao usuário que esse espaço tem o objetivo de ser clicado com o mouse. 
Por fim, o “enviar-erro” torna a mensagem de erro quando clicado antecipadamente no botão acima na cor vermelha. 
 
Produto Final 
 
Figura 12 - Produto final em sua fase inicial 
Assim fica o produto final sem inserir o email no campo de entrada. 
Figura 13 - Produto final ap s inserir email de forma incorreta 
 
Após inserir o email, porém de forma incorreta, o título “EMAIL” faz sua transição para cima e surge a mensagem de erro “Email Inválido. 
Exemplo: contact@email.com.” 
 
 
Figura 14 - Projeto final ap s nªo inserir o email 
 
Caso o usuário clicar no botão ENVIAR sem incluir o email no campo de entrada, aparecerá a mensagem abaixo de obrigatoriedade. 
 
Figura 15 - Projeto final com o email correto 
 
Por último, caso o usuário adicionar o email da maneira correta, a linha abaixo do campo de entrada e a mensagem abaixo ambas alteram para a cor verde e o botão é autorizado para envio. 
 
 
 
 
 
 
 
 
 
 
 
 
 
CONCLUSÃO 
 
Após essa atividade de aula prática, conseguimos compreender a importância dos diversos conceitos de JavaScript, além de captar o quão ampla e o quanto ainda podemos aprender e criar com a linguagem, adicionando interatividade às aplicações web. A partir do desenvolvimento de uma função simples para validação de campo de e-mail de um determinado formulário utilizando as linguagens de marcação HTML, de estilo CSS e o JavaScript. 
 
 
1 
 	
Baixado por João Cassiano (joaocassianoa.c@gmail.com)
 
	
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
image1.png
image2.jpg
image3.jpg
image17.png