DESENVOLVIMENTO WEB
NOME: JONAS MARCELO GOMES
RA: 3548927805
PORTIFÓLIO – RELATÓRIO DE AULA PRÁTICA
DISCIPLINA: DESENVOLVIMENTO E JAVASCRIPT
Passo Fundo/RS
2025
Introdução
Nesta aula prática da disciplina de Desenvolvimento em JavaScript, foi proposto o desenvolvimento
de um formulário HTML com um campo para inserção de e-mail, utilizando a plataforma online
Playcode.io. A atividade teve como foco aplicar os conceitos de validação com JavaScript para
garantir que os dados fornecidos pelo usuário estejam no formato correto.
Métodos
- Criar um novo projeto (abrir o editor) no Playcode.io.
- Escolher um projeto vazio (empty).
- Colocar um código em HTML simples com JavaScript que fará a validação de campo para coleta
de e-mail.
- Mostrar mensagem de erro e de orientação explicando a estrutura correta de um e-mail (ex:
nome@dominio.com).
- Testar o funcionamento do formulário diretamente na plataforma.
Código HTML + JavaScript
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<title>Validação de E-mail</title>
<style>
body { font-family: Arial; padding:
20px; } .erro { color: red; }
.sucesso { color: green; }
</style>
</head>
<body>
<h2>Formulário de E-mail</h2>
<form id="formulario">
<label for="email">Digite o e-mail do colega:</label><br><br>
<input type="text" id="email" name="email"><br><br>
<input type="submit" value="Validar">
<p id="mensagem"></p>
</form>
<script>
document.getElementById("formulario").addEventListener("submit", function(e)
{ e.preventDefault();
const email = document.getElementById("email").value;
const mensagem = document.getElementById("mensagem");
const regex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
if (!regex.test(email)) {
mensagem.textContent = "Por favor, insira um e-mail válido no formato
nome@dominio.com";
mensagem.className =
"erro"; } else {
mensagem.textContent = "E-mail válido!";
mensagem.className = "sucesso";
} })
;
</script>
</body>
</html>
Resultados
Durante a execução da atividade no Playcode.io, foi criado com sucesso um formulário com campo
para inserção de e-mail. O JavaScript utilizado identificou corretamente entradas inválidas e
forneceu mensagens de feedback ao usuário, orientando sobre o preenchimento adequado do
campo de e-mail.
Conclusão
A prática proporcionou uma aplicação real dos conhecimentos sobre validação de formulários com
JavaScript. Com o apoio da ferramenta Playcode.io, foi possível implementar, testar e corrigir
rapidamente o código. A validação de dados é essencial para garantir que informações sejam
processadas corretamente, melhorando a experiência do usuário.