Relatório Desenvolvimento JavaScript

Prévia do material em texto

Desenvolvimento em Java Script
Desenvolvimento em JavaScript (Anhanguera)
Digitalizar para abrir em Studocu
A Studocu não é patrocinada ou endossada por nenhuma faculdade ou universidade
Desenvolvimento em Java Script
Desenvolvimento em JavaScript (Anhanguera)
Digitalizar para abrir em Studocu
A Studocu não é patrocinada ou endossada por nenhuma faculdade ou universidade
Baixado por Leticia Nazarko (leticianazarko@gmail.com)
lOMoARcPSD|47929343
https://www.studocu.com/pt-br?utm_campaign=shared-document&utm_source=studocu-document&utm_medium=social_sharing&utm_content=desenvolvimento-em-java-script
https://www.studocu.com/pt-br/document/anhanguera/desenvolvimento-em-javascript/desenvolvimento-em-java-script/110903390?utm_campaign=shared-document&utm_source=studocu-document&utm_medium=social_sharing&utm_content=desenvolvimento-em-java-script
https://www.studocu.com/pt-br/course/desenvolvimento-em-javascript/7255658?utm_campaign=shared-document&utm_source=studocu-document&utm_medium=social_sharing&utm_content=desenvolvimento-em-java-script
https://www.studocu.com/pt-br?utm_campaign=shared-document&utm_source=studocu-document&utm_medium=social_sharing&utm_content=desenvolvimento-em-java-script
https://www.studocu.com/pt-br/document/anhanguera/desenvolvimento-em-javascript/desenvolvimento-em-java-script/110903390?utm_campaign=shared-document&utm_source=studocu-document&utm_medium=social_sharing&utm_content=desenvolvimento-em-java-script
https://www.studocu.com/pt-br/course/desenvolvimento-em-javascript/7255658?utm_campaign=shared-document&utm_source=studocu-document&utm_medium=social_sharing&utm_content=desenvolvimento-em-java-script
Anhanguera Educacional
Ciências da Computação
Robson Cavalcanti Ambrosio Junior
Relatório de Aula Prática - Desenvolvimento em JavaScript
São Paulo – SP
2024
Baixado por Leticia Nazarko (leticianazarko@gmail.com)
lOMoARcPSD|47929343
https://www.studocu.com/pt-br?utm_campaign=shared-document&utm_source=studocu-document&utm_medium=social_sharing&utm_content=desenvolvimento-em-java-script
FACULDADE ANHANGUERA 
Robson Cavalcanti Ambrosio Junior
 RELATÓRIO DE AULA PRÁTICA: Lógica e Matemática Computacional Trabalho de portfólio
Professor: Anderson Emidio de Macedo Goncalves
Baixado por Leticia Nazarko (leticianazarko@gmail.com)
lOMoARcPSD|47929343
Sumário
1. Introdução ..................................................................................................................... 003
2. Método Científico .......................................................................................................... 004
3. Conclusão ..................................................................................................................... 010
Baixado por Leticia Nazarko (leticianazarko@gmail.com)
lOMoARcPSD|47929343
https://www.studocu.com/pt-br?utm_campaign=shared-document&utm_source=studocu-document&utm_medium=social_sharing&utm_content=desenvolvimento-em-java-script
Introdução
Este é um relatório que contém as informações e atividades propostas pelo Curso
Superior de Tecnologia em Desenvolvimento Web da Faculdade Anhanguera
Educacional, relatório que faz parte da disciplina de Desenvolvimento em
JavaScript, apresentado e ministrado pelo Prof. Dr. Diego Mariano, Osvaldo Tavares
Viana Júnior, Anderson Fonseca de Almeida e Flávio Ávila.
Baixado por Leticia Nazarko (leticianazarko@gmail.com)
lOMoARcPSD|47929343
Objetivo
O objetivo desta atividade consiste em desenvolver um código em JavaScript para
validação de um formulário simples contendo um campo de input, onde o usuário
deve informar um endereço de e-mail, a aplicação deve informar se este e-mail é
valido, caso o e-mail seja invalido, deve orientar o usuário preencher o campo
corretamente.
Baixado por Leticia Nazarko (leticianazarko@gmail.com)
lOMoARcPSD|47929343
https://www.studocu.com/pt-br?utm_campaign=shared-document&utm_source=studocu-document&utm_medium=social_sharing&utm_content=desenvolvimento-em-java-script
Método Científico
Para realização da atividade em questão, devemos ter o VSCode no nosso computador,
como a extensão Live Server para visualização do HTML no navegador.
Iremos seguir uma série de passo a passo que veremos mais abaixo:
 Criar um projeto (criar uma pasta com um nome do projeto).
 Criar um arquivo documento HTML dentro dessa pasta (no VSCode).
 Colocar um código em HTML simples e com ele um código em JavaScript que deverá
fazer validação de campo para coleta de e-mail.
 Mostrar mensagem de erro e de orientação (escolha a melhor forma de apresentar
essa mensagem), explicando a estrutura de um e-mail.
Procedimentos
Por questões de organização, iremos criar uma pasta com o nome do nosso projeto:
Exemplo de uma nova pasta criada no Windows 11
Baixado por Leticia Nazarko (leticianazarko@gmail.com)
lOMoARcPSD|47929343
No VSCode, devemos abrir pasta que foi criada no VSCode, neste caso em File > Open
Folder... ou Ctrl + K
Agora que temos acesso a pasta, iremos criar um documento HTML vazio em New File e
renomear o arquivo gerado, neste caso irei nomear como index.html (foi criado uma folha
de estilos CSS também, porém este assunto não será abordado neste momento.
Baixado por Leticia Nazarko (leticianazarko@gmail.com)
lOMoARcPSD|47929343
https://www.studocu.com/pt-br?utm_campaign=shared-document&utm_source=studocu-document&utm_medium=social_sharing&utm_content=desenvolvimento-em-java-script
Para iniciar nosso código de maneira simples e eficiente, devemos escrever html:5 no
documento, assim o Emmet Abreviation do VSCode reconhecerá que estamos criando uma
estrutura padrão HTML:
Para criar devemos apertar TAB, assim a estrutura HTML será criada:
Deve ser estruturado o formulário principal da aplicação, neste caso usaremos a tag ,
e dentro desta tag , criaremos um para informar do que se trata o nosso
input e em seguida a tag do tipo e-mail (type=”email”) e ao final iremos criar um
botão com a tag que receberá um evento onClick, onde o usuário após clicar neste
botão, acionara o evento onde deve ser chamado a função isEmailValid, está função será
implementada em breve.
Baixado por Leticia Nazarko (leticianazarko@gmail.com)
lOMoARcPSD|47929343
Resultado até o momento do FrontEnd já com seu CSS implementado:
A partir deste momento podemos iniciar a lógica com o JavaScript, iremos criar a tag
 e dentro da tag, todo nosso código JavaScript deverá ser escrito.
Primeiramente devemos realizar o DOM (Document Object Model), pois queremos o valor
do input e-mail que faz parte deste formulário, no exemplo abaixo utilizamos o
getElementById e salvamos na constante form.
A função tem uma constante onde acesso a constante form que foi criada anteriormente, e
em form iremos até o input email e teremos acesso ao valor dele utilizando o value,
novamente guardamos em uma constante o valor.
Com o valor "em mãos”, faremos a primeira verificação com if, neste caso estamos
verificando se o valor do email existe, porém utilizo o sinal de negação ! com a intenção de
inverter a lógica, então só entrará neste if, se o valor do email NÃO existe (input vazio),
caso verdadeiro, retorna um alerta no navegador para o usuário que o campo de input está
vazio, se não, retornará que o e-mail está válido.
Baixado por Leticia Nazarko (leticianazarko@gmail.com)
lOMoARcPSD|47929343
https://www.studocu.com/pt-br?utm_campaign=shared-document&utm_source=studocu-document&utm_medium=social_sharing&utm_content=desenvolvimento-em-java-script
Irei fazer mais uma verificação, aninhando um else if ao if anterior. Dessa vez usaremos o
método built-in do JavaScript match(), de acordo com a documentação o match retorna
uma correspondência entre string com uma expressão regular.
Neste exemplo vamos utilizar o “@” já que por padrão, os endereços de e-mail devem
conter o destinatário a esquerda do @ e a direita o domínio ou provedor
Caso existao “@” no valor da string do input, o match retornará o valor do input, se caso
não existir ira retornar null.
No exemplo abaixo, para satisfazer o bloco if, o valor do email NÃO (símbolo de negação)
deve existir o “@”, assim retornando um alerta no navegador que o endereço de e-mail está
incorreto.
Sendo assim temos duas verificações, onde um verifica se o campo está vazio e se contém o
caractere “@”, caso não satisfaça os dois if’s, exibira ao usuário que o e-mail é valido o
código no final ficou desta forma:
Baixado por Leticia Nazarko (leticianazarko@gmail.com)
lOMoARcPSD|47929343
Exemplo do campo vazio:
Exemplo do campo com endereço de e-mail incorreto:
Exemplo de endereço de e-mail válido:
Baixado por Leticia Nazarko (leticianazarko@gmail.com)
lOMoARcPSD|47929343
https://www.studocu.com/pt-br?utm_campaign=shared-document&utm_source=studocu-document&utm_medium=social_sharing&utm_content=desenvolvimento-em-java-script
Conclusão
De acordo com a atividade que foi proposta em realizar a validação de um campo de e-mail
de um determinado formulário, concluiu-se que a implementação de validações em
formulários com JavaScript é uma parte fundamental para um website, pois trata-se de boas
praticas de software, requisitos de segurança de dados e UX.
Baixado por Leticia Nazarko (leticianazarko@gmail.com)
lOMoARcPSD|47929343