Roteiro de Aula Prática Portfólio - Desenvolvimento em Javascript

Prévia do material em texto

1 
SUMÁRIO 
 
 
1. Introdução:................................................................................04 
2. Métodos:....................................................................................05 
3. Resultados:...............................................................................09 
4. Conclusão:................................................................................11 
5. Referências:..............................................................................12 
 
 
 
 
2 
1. Introdução 
 
 Javascript é uma das linguagens de programação de 
alto nível mais conhecida em todo o mundo. É uma 
linguagem padrão dos navegadores onde em conjunto com 
CSS e HTML formam uma base de uma página Web. 
 
 Criada por Brendan Eich em 1995, seu principal objetivo 
foi tornar as páginas Web dinâmicas, sendo um enorme 
diferencial na época. 
 
 O JavaScript suporta estilos de programação orientados 
a eventos, funcionais e imperativos (incluindo orientado a 
objetos e prototype-based), apresentando recursos como 
fechamentos (closures) e funções de alta ordem 
comumente indisponíveis em linguagens populares como 
Java e C++. Possui APIs para trabalhar com texto, 
matrizes, datas, expressões regulares e o DOM, mas a 
linguagem em si não inclui nenhuma E/S, como instalações 
de rede, armazenamento ou gráficos, contando com isso 
no ambiente host em que está embutido. 
 
 A seguir criaremos um projeto em Javascript, HTML e 
CSS composto por um pequeno formulário que solicitará 
um e-mail e validará se o mesmo está correto, e se 
incorreto informará a forma que deve ser digitado conforme 
os critérios criados em seu código. 
 
 
 
3 
2. Métodos 
 
Para a criação deste projeto iniciamos utilizando o “Playcode.io” 
conforme orientação do roteiro da aula prática, porém devido a 
limitação do mesmo na criação de mais linhas de códigos, optei por 
migrar o projeto para o VS Code. 
 
 
Erro limitando a quantidade de linhas no Playcode.io 
 
Inicialmente, utilizando o VS Code, criei os arquivos “index.html”, 
“script.js” e “style.css”. 
 
 
HTML: 
Configurada a linguagem da página para “pt-br” (linha 2), criado o 
título que constará na aba da página “Validar e-mail” (linha 6), 
referenciado o ID “container” (linha 11) dentro do comando “div” e 
logo abaixo inserido o título que aparecerá dentro do mesmo (linhas 
12 e 13). 
Em seguida foi executado o formulário, o texto que o usuário vai 
visualizar indicando que deve ser informado um e-mail e o campo 
onde o usuário deverá inserir o e-mail (input, linha 16). 
Referenciado o ID “mensagem-erro” já inserindo seu estilo de cor 
(linha 17). 
Realizada a criação do botão “Enviar”, onde após a inserção do e-
mail o usuário deverá clicar neste botão para validar (linha 18). 
E por fim na linha 21 foi inserido o comando do script em Javascript 
“script.js”. 
 
 
4 
Dessa forma, este é o resultado do código em HTML: 
 
 
CSS: 
Todo o estilo da página foi configurado conforme a seguir: 
Fundo da página na cor branca, fundo do “container” na cor cinza 
bem escura, letras dos títulos do container em branco, fundo do 
campo onde o usuário informará o e-mail em branco, e a cor do 
botão “Enviar” em roxo. 
Também foram definidos os tipos e tamanhos das fontes, posição, 
tipo do cursor em cada elemento e etc. 
*{ 
 margin: 0; 
 padding: 0; 
 box-sizing: border-box; 
 color: #fff; 
 border: none; 
 text-align: center; 
} 
 
#container{ 
 background-color: rgb(14, 13, 13); 
 border-radius: 8px; 
 border-width: 50px solid #323232; 
 height: 280px; 
 width: 480px; 
 margin-left: auto; 
 margin-right: auto; 
 
5 
 padding: 20px 30px; 
 margin-top: 15vh; 
 text-align: center; 
 cursor: default; 
 
} 
 
h1{ 
 text-align: right; 
 font-family: georgia; 
 font-size: 1.2rem; 
 margin-top: 10px; 
} 
 
h2{ 
 font-family: arial; 
 text-align: right; 
 font-size: .8rem; 
 margin-top: 10px; 
} 
 
form{ 
 margin-top: 30px; 
 margin-bottom: 40px; 
} 
 
label, input{ 
 border-radius: 6px; 
 display: block; 
 width: 100%; 
 margin-left: auto; 
} 
 
label{ 
 text-align: left; 
 margin: 15px; 
 font-weight: none; 
 font-size: .9rem; 
 cursor: default; 
 font-family: Verdana; 
 margin-left: .8px; 
} 
 
input{ 
 border-bottom: 2px; 
 color:#323232; 
 padding: 10px; 
 font-size: 1rem; 
 margin-bottom: 20px; 
 text-align: left; 
} 
 
button{ 
 text-align: center; 
 
6 
 text-transform: uppercase; 
 font-weight: none; 
 border: none; 
 height: 30px; 
 width: 90px; 
 border-radius: 10px; 
 margin-top: 10px; 
 color: #fff; 
 background-color: rgb(69, 11, 122); 
 cursor: pointer; 
 font-family: verdana; 
} 
 
body{ 
 background-color: #fff; 
} 
 
JS: 
Realizada a configuração da lógica do funcionamento as ações a 
serem realizadas. As regras para fornecer um e-mail neste caso é 
possuir mais que 3 caracteres e possuir um “@”. 
Portando, foram criadas as variáveis, evento, função e condição. Se 
a regra for seguida será exibida um alerta informando que os 
campos foram preenchidos corretamente e se não forem seguidas 
será exibida uma mensagem de erro informando que devem ser 
seguidas as regras. 
 
 
 
 
7 
3. Resultados 
 
Iniciada a execução do projeto: 
 
Ao inserir um e-mail conforme as regas, foi exibida a mensagem: 
“E-mail preenchido corretamente!”. 
 
Ao inserir um e-mail contra as regas criadas é exibida a mensagem: 
“E-mail preenchido corretamente Seu e-mail deve ser maior que 3 
caracteres e possuir um "@".”. 
 
8 
 
Obs.: Note que não basta seguir apenas uma regra, é necessário 
que todas as regras sejam atendidas para que seja validado. 
 
Este foi o resultado do projeto realizado. 
 
 
 
9 
4. Conclusão 
 
 Este foi um exercício com uma função simples que vemos 
diariamente ao realizar cadastros em sites. 
 
 A realização deste exercício mostrou como tudo pode ser 
configurado de maneira minuciosa utilizando HTML, CSS e 
Javascript para a criação de páginas Web de forma dinâmica e 
interativa. 
 
 Com o uso do JavaScript pode-se criar validações poderosas 
com praticidade e com ótimo desempenho, existindo inúmeras 
maneiras de elaborar códigos simples ou complexos e aumentar a 
segurança não somente do formulário, mas em todo o projeto. 
 
 De modo geral, o JavaScript é uma das linguagens de 
programação relativamente mais fáceis de aprender sendo a melhor 
escolha para quem está planejando se tornar um desenvolvedor 
web. Desenvolvedores JavaScript também podem se inserir no 
mercado de trabalho como designers UI/UX, desenvolvedores full-
stack e engenheiros de software. 
 
 Executando este exercício foi possível aprimorar meus 
conhecimentos e habilidades nessa linguagem de forma que 
continuarei praticando para meu desenvolvimento profissional 
nessa área. 
 
 
 
10 
5. Referências 
 
JavaScript: o que é, como aprender e Guia da linguagem | 
Alura 
 
 
Validando e-mail em inputs HTML com Javascript 
(devmedia.com.br) 
 
Exercícios dos conteúdos webs da própria disciplina. 
https://www.alura.com.br/artigos/javascript?utm_term=&utm_campaign=%5BSearch%5D+%5BPerformance%5D+-+Dynamic+Search+Ads+-+Artigos+e+Conte%C3%BAdos&utm_source=adwords&utm_medium=ppc&hsa_acc=7964138385&hsa_cam=11384329873&hsa_grp=164068847699&hsa_ad=703853156311&hsa_src=g&hsa_tgt=aud-527303763294:dsa-2273097816642&hsa_kw=&hsa_mt=&hsa_net=adwords&hsa_ver=3&gad_source=1&gclid=Cj0KCQjwjY64BhCaARIsAIfc7YaF7pv0SyhudiJdpuOjBqDvOQ9yKkVYP_doa-7UTGsKqUVNkJ7iiQUaApAqEALw_wcB
https://www.alura.com.br/artigos/javascript?utm_term=&utm_campaign=%5BSearch%5D+%5BPerformance%5D+-+Dynamic+Search+Ads+-+Artigos+e+Conte%C3%BAdos&utm_source=adwords&utm_medium=ppc&hsa_acc=7964138385&hsa_cam=11384329873&hsa_grp=164068847699&hsa_ad=703853156311&hsa_src=g&hsa_tgt=aud-527303763294:dsa-2273097816642&hsa_kw=&hsa_mt=&hsa_net=adwords&hsa_ver=3&gad_source=1&gclid=Cj0KCQjwjY64BhCaARIsAIfc7YaF7pv0SyhudiJdpuOjBqDvOQ9yKkVYP_doa-7UTGsKqUVNkJ7iiQUaApAqEALw_wcBhttps://www.devmedia.com.br/validando-e-mail-em-inputs-html-com-javascript/26427
https://www.devmedia.com.br/validando-e-mail-em-inputs-html-com-javascript/26427