Desenvolvimento Em Javascript

Prévia do material em texto

1 
 
 
 
 
 
 
 
Análise e Desenvolvimento de Sistemas 
POLO CENTRO SUL TERESINA-PI 
Walison Rodrigo Soares Da Silva- RA-3606901502 
 
 
 
 
 
 
 
PORTFÓLIO – RELATÓRIO DE AULA PRÁTICA: 
 
 
DISCIPLINA: 
Desenvolvimento Em Javascript 
 
 
 
 
 
 
 
 
 
TERESINA-PI 
2025 
2 
 
 
 
 
 
 
 
 
 
 
 
PORTFÓLIO – RELATÓRIO AULA PRÁTICA 
DISCIPLINA: 
Desenvolvimento Em Javascript 
 
 
 
 
 
 
 
Trabalho de portfólio apresentado como requisito parcial 
para a obtenção de pontos para a média semestral 
na matéria Desenvolvimento Em Javascript 
 
 
 
 
 
 
 
 
 
 
 
 
 
Teresina – PI 
2025 
3 
 
SUMÁRIO 
1 Introdução ........................................................................................................................................................................ 4 
2 Método ............................................................................................................................................................................. 5 
3 Resultados ........................................................................................................................................................................ 6 
4 conclusão .......................................................................................................................................................................... 7 
4 
 
1 INTRODUÇÃO 
 
Java Script é uma linguagem de programação interpretada, utilizada principalmente no 
desenvolvimento web para criar páginas dinâmicas e interativas. Originalmente foi criada 
para ser executada no lado do cliente (navegador), permitindo que desenvolvedores 
incluam funcionalidades interativas, como validação de formulários, animações, interações 
com elementos da página, etc., sem a necessidade de recarregar a página. 
-Criar um novo projeto dentro do Playcode.io composto por um pequeno 
formulário com campo para colega de e-mail que deve ser informado 
pelo usuário. 
- Escrever código que deverá verificar se o campo de e-mail está preenchido 
corretamente, mostrar uma mensagem ao usuário informando a composição 
correta de um e- mail. 
 
Nesta atividade será criado um novo projeto dentro do Playcode.io composto 
por um pequeno formulário com campo para colega de e-mail que deve ser 
informado pelo usuário. - Escrever código que deverá verificar se o campo de 
e-mail está preenchido corretamente, caso não esteja correto mostrar uma 
mensagem ao usuário informando a composição correta de um e-mail. 
5 
 
 
 
 
3 MÉTODO 
 
Para criar um formulário de e-mail simples em HTML e Java Script, 
para orientação do usuário, será necessário abrir o navegador, entrar no site da 
plataforma playcode.io (https://playcode.io/). Na opção 
Aquivo+, ir em "Novo", criar o nome index.html e inserir o código em HTML contendo 
as informações para validação de e-mail. 
Em seguida criar um código Java Script com as interações contendo validação do e-
mail digitado pelo usuário. Caso o usuário digite um e-mail 
divergente, fora do padrão, será mostrado uma mensagem informando a composição correta 
de um e-mail para ser digitada. 
 
Código para a criação do formulário e validação do e-mail. 
 
 
 
 
 
 
 
 
 
 
 
 Informe seu e-mail: 
 
 Enviar 
 
 
document.getElementById('emailForm').addEventListener('submit', 
function(event) { 
 event.preventDefault(); // Evita o envio do 
formulário 
 const email = document.getElementById('email').value; 
const message = document.getElementById('message'); 
 // Expressão regular simples para validação de e-mail 
 const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; 
 if (emailPattern.test(email)) { 
 message.textContent = "E-mail válido!"; 
 message.className = "success"; 
 } else { 
 message.textContent = "E-mail inválido! A 
composição correta é: seuemail@exemplo.com"; 
message.className = "error"; 
 } 
}); 
 
6 
 
 
 
4 RESULTADOS 
 
 
Mensagem de erro ao digitar e-mail. 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
Mensagem de validação do e-mail. 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
7 
 
 
 
 
5 CONCLUSÃO 
 
 
O Java Script é uma ferramenta poderosa que permite criar efeitos e interações que deixam um site 
mais dinâmico e atraente. Ele permite que desenvolvedores web aprimorem a experiência do 
usuário, fornecendo feedback em tempo real, executando instruções com base nas ações do 
visitante e tornando o site mais interativo sem a necessidade de recarregar a página. Um exemplo 
comum de uso é a validação de dados inseridos em formulários, como a verificação de um e-mail. 
Por outro lado, o HTML, ou HyperText Markup Language, é a base da construção de qualquer 
página web. Ele define a estrutura da página e organiza os elementos visuais, como texto, 
imagens, vídeos, tabelas, entre outros. Sem o HTML, não seria possível exibir conteúdo de forma 
organizada na web. Ele funciona como o esqueleto de uma página, permitindo que todos os 
recursos sejam inseridos, como links e formulários. 
Agora, ao utilizar uma plataforma como playcode.io, que permite testar código Java Script 
diretamente no navegador, podemos criar um formulário simples para o usuário inserir seu e-mail. 
No HTML, são definidos os elementos necessários, como o campo de entrada e o botão de envio. 
Já no Java Script, podemos adicionar a lógica de validação, que verifica se o e-mail está no 
formato correto (exemplo: nome@dominio.com). Caso o usuário insira um e-mail incorreto, uma 
mensagem de erro é exibida, informando o erro e orientando-o sobre a forma correta de 
preenchimento. 
Essa prática demonstra o potencial do Java Script, pois ele não só ajuda a criar interações e 
efeitos visuais, mas também permite uma interação direta e eficiente com os usuários. Ao validar 
informações e fornecer respostas em tempo real, o processo de navegação e preenchimento de 
formulários se torna mais fluido, dinâmico e profissional. Isso reflete diretamente na qualidade de 
um site, melhorando tanto sua usabilidade quanto sua aparência, tornando-o mais atraente e 
funcional para os visitantes. 
 
Resumo: 
 
 
• HTML: Estrutura e organiza os elementos da página, como textos, imagens, 
vídeos e formulários. 
• Java Script: Adiciona interatividade e efeitos dinâmicos, permitindo, por exemplo, 
a validação de formulários e a exibição de mensagens de erro em tempo real. 
• playcode.io: Uma plataforma que facilita a experimentação de código, permitindo 
testar rapidamente interações Java Script e HTML diretamente no navegador. 
Ao combinar essas ferramentas, os desenvolvedores conseguem criar páginas mais modernas, 
intuitivas e eficazes, impactando diretamente na experiência do usuário final. 
 
mailto:nome@dominio.com