ANALISE E DESENVOLVIMENTO DE SISTEMAS
FERNANDA NEVES DE SOUSA
FORMULÁRIO DE E-MAIL
Marabá- Pará
2025
FERNANDA NEVES DE SOUSA
FORMULÁRIO DE E-MAIL
Aula prática de Desenvolvimento em Javascript
apresentado como requisito parcial para a obtenção de
média semestral no curso Analise e Desenvolvimento de
sistema.
Orientador(a): Anderson Inacio Salata de Abreu
Marabá- Pará
2025
SUMÁRIO
1 INTRODUÇÃO ......................................................................................... 3
2 DESENVOLVIMENTO.............................................................................. 4
4 CONCLUSÃO........................................................................................ 10
5 REFERÊNCIAS ...................................................................................... 12
3
1 INTRODUÇÃO
Nesta Aula prática da matéria de Desenvolvimento de Javascript o
objetivo desse projeto é uma aplicação simples para a validação de e-mail, através do
“[Link]”, utilizando a linguagem Html e Javascript.
[Link] é uma página online que nos permite testar códigos, em
diversas linguagens, nesse caso foi efetuado o teste conforme orientação do roteiro.
4
2 DESENVOLVIMENTO
No início deste trabalho, foi necessário abrir o navegador de pesquisa
e acessar o playcode.
Em seguida escolher o HTML como linguagem:
5
Em continuação, foi criado o formulário de E-mail simples em HTML,
Javascript e CSS, para que houvesse uma interação válida.
6
RESULTADO
7
8
CÓDIGO UTILIZADO
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Formulário de E-mail</title>
<link
href="[Link]
rel="stylesheet">
</head>
<body>
<div class="container mt-5">
<div class="row justify-content-center">
<div class="col-md-6">
<div class="card p-4 shadow-sm">
<h2 class="text-center">Formulário de E-mail</h2>
<form id="emailForm">
<div class="mb-3">
9
<label for="email" class="form-label">E-mail</label>
<input type="text" class="form-control" id="email"
placeholder="Digite seu e-mail" required>
</div>
<button type="submit" class="btn btn-primary w-
100">Enviar</button>
</form>
</div>
</div>
</div>
</div>
<!-- Modal -->
<div class="modal fade" id="messageModal" tabindex="-1" aria-
labelledby="messageModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="messageModalLabel">Validação</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal"
aria-label="Close"></button>
</div>
<div class="modal-body" id="modalMessage">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-
dismiss="modal">Fechar</button>
</div>
</div>
</div>
</div>
<script>
[Link]('emailForm').addEventListener('submit',
10
function(event) {
[Link]();
const emailField = [Link]('email');
const emailRegex = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
const modalMessage = [Link]('modalMessage');
const messageModal = new
[Link]([Link]('messageModal'));
if ([Link]() === "") {
[Link] = 'O campo de e-mail não pode estar vazio.';
} else if () {
[Link] = 'Por favor, insira um e-mail válido.';
} else {
[Link] = 'E-mail válido! Formulário enviado com
sucesso.';
}
[Link]();
});
</script>
<script
src="[Link]
cript>
</body>
</html>
11
3 CONCLUSAO
Através da aula prática foi possível notar a importância da interação
das linguagens de programação, e quão importante é cada uma dentro da criação de
um projeto. Ao criar esse formulário que continha informações do e-mail do usuário,
foi possível inserir no HTML informações necessárias para a digitação do e-mail,
possibilitando utilizar propriedades do CSS para uma visualização mais estilosa na
página web, já em relação ao Javascript foi colocado os comandos de interações de
validação par os campos, alertando com mensagens de erro, em caso de digitação
fora do padrão.
12
4 REFERÊNCIAS BIBLIOGRAFICAS
[Link] acesso em 04/03/2025
[Link]
1066BR1066&sxsrf=AHTn8zqMW3BgSD2hBW7oxyR6c-
hmRBxzdg:1741097587613&q=o+que+%C3%A9+[Link]+para+que+serve&spe
ll=1&sa=X&ved=2ahUKEwjwjur5zfCLAxU8qJUCHR81EqUQBSgAegQICxAB&biw=1
536&bih=730&dpr=1.25 acesso em 04/03/2025