ANÁLISE E DESENVOLVIMENTO DE SISTEMA
ALOISIO CARLOS CABRAL JUNIOR
DESENVOLVIMENTO JAVASCRIPT
Barueri - SP
2025
ALOISIO CARLOS CABRAL JUNIOR
DESENVOLVIMENTO JAVASCRIPT
Trabalho Portifólio apresentado como requisito
parcial para a obtenção de média semestral.
Tutor: Luis Gustavo Cardoso
Barueri - SP
2025
Sumário
1. Introdução ............................................................................................................. 4
2. Métodos ................................................................................................................ 5
3. Resultados ............................................................................................................ 5
3.1. Parte 1 – Código completo HTML ................................................................. 5
3.2. Parte 2 – Código completo CSS ................................................................... 6
3.3. Parte 3 – Código completo Formulário HTML ............................................... 8
3.4. Parte 4 – Código completo JavaScript .......................................................... 9
3.5. Execução e prints simulados ...................................................................... 11
4. Conclusão ........................................................................................................... 15
5. Referências......................................................................................................... 16
3
1. INTRODUÇÃO
O presente relatório descreve a criação de um formulário em HTML com validação de
e-mail utilizando JavaScript, executado na plataforma [Link].
O objetivo da atividade foi aplicar conceitos básicos de HTML, CSS e JavaScript para
validar entradas do usuário, exibindo mensagens de erro ou confirmação, além de
fornecer orientação sobre o formato correto de e-mail: usuario@[Link].
A prática permite compreender a interação entre estrutura, estilo e lógica de
programação, garantindo dados consistentes antes do envio.
4
2. MÉTODOS
O desenvolvimento da atividade foi realizado seguindo os passos abaixo:
1. Acesso à plataforma [Link] e criação de um projeto vazio (Empty Project).
2. Criação da estrutura HTML: inclusão do formulário, campo de e-mail, botão de
verificação e área de mensagens.
3. Aplicação do CSS para estilização do formulário, botão, campo de entrada e
mensagens.
4. Implementação do JavaScript, usando regex para validar o formato do e-mail e
controlar mensagens de erro e sucesso.
5. Testes práticos com diferentes tipos de entrada:
Campo vazio
E-mail com formato incorreto
E-mail com formato correto
6. Captura de prints de cada etapa, documentando visualmente o funcionamento do
código.
3. RESULTADOS
O código desenvolvido funcionou corretamente, exibindo mensagens conforme cada situação.
Abaixo está o código dividido por seções, com campos para os prints e descrições.
3.1. Parte 1 – Código completo HTML
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<title>Formulário de E-mail</title>
IMAGEM 1 – Estrutura HTML inicial
Fonte: Elaborado pelo autor – Estrutura HTML inicial
Descrição: Definição do tipo de documento, idioma e título da página no projeto [Link].
5
3.2. Parte 2 – Código completo CSS
/* ==== Define a aparência geral da página ==== */
body {
font-family: Arial, sans-serif;
background-color: #f5f6fa;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
/* ==== Título principal ==== */
h2 {
color: #333;
margin-bottom: 15px;
/* ==== Estrutura do formulário ==== */
form {
background-color: #fff;
padding: 20px 25px;
border-radius: 10px;
box-shadow: 0 3px 10px rgba(0,0,0,0.1);
text-align: center;
width: 340px;
/* ==== Campo de entrada ==== */
input {
width: 90%;
padding: 8px;
border-radius: 6px;
border: 1px solid #ccc;
6
margin-bottom: 10px;
font-size: 14px;
/* ==== Botão principal ==== */
button {
background-color: #0078d7;
color: #fff;
padding: 8px 15px;
border: none;
border-radius: 6px;
cursor: pointer;
font-weight: bold;
/* ==== Efeito de hover no botão ==== */
button:hover {
background-color: #005fa3;
/* ==== Área de mensagem ==== */
#mensagem {
margin-top: 10px;
font-size: 14px;
/* ==== Estilos para mensagens ==== */
.erro {
color: red;
.orientacao {
color: #555;
font-size: 13px;
.sucesso {
7
color: green;
</style>
</head>
<body>
IMAGEM 2 – Estilo do formulário
Fonte: Elaborado pelo autor – CSS aplicado ao formulário
Descrição: Apresenta a estilização do formulário, campo de entrada, botão e área de
mensagens.
3.3. Parte 3 – Código completo Formulário HTML
<!-- ==========================
SEÇÃO: CÓDIGO HTML
========================== -->
<!-- Estrutura principal do formulário -->
<form id="formEmail">
<h2>Formulário de E-mail</h2>
<!-- Campo de entrada de texto -->
<input type="text" id="email" placeholder="Digite seu e-mail">
<!-- Botão que dispara a validação -->
<button type="button" onclick="validarEmail()">Verificar</button>
8
<!-- Área que exibe mensagens de erro, orientação ou sucesso -->
<div id="mensagem" class="orientacao">
Exemplo correto: usuario@[Link]
</div>
</form>
IMAGEM 3 – Estrutura do formulário
Fonte: Elaborado pelo autor – HTML do formulário
Descrição: Formulário exibido no navegador com campo de e-mail, botão e área de
mensagens.
3.4. Parte 4 – Código completo JavaScript
<!-- ==========================
SEÇÃO: CÓDIGO JAVASCRIPT
========================== -->
<script>
// Função chamada quando o usuário clica no botão "Verificar"
function validarEmail() {
// Captura o valor digitado no campo de e-mail
const email = [Link]("email").[Link]();
// Captura o elemento onde será exibida a mensagem
const mensagem = [Link]("mensagem");
// Define o padrão de validação (regex)
const padrao = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-z]{2,}$/;
9
// === Verifica se o campo está vazio ===
if (email === "") {
[Link] = "O campo de e-mail não pode estar vazio.
Exemplo correto: usuario@[Link]";
[Link] = "erro";
}
// === Verifica se o formato está incorreto ===
else if () {
[Link] = "Formato inválido! O e-mail deve conter '@' e
um domínio. Exemplo: usuario@[Link]";
[Link] = "erro";
}
// === Caso o formato esteja correto ===
else {
[Link] = "E-mail válido! Formato correto:
usuario@[Link]";
[Link] = "sucesso";
}
}
</script>
</body>
</html>
IMAGEM 4 – Função JavaScript
Fonte: Elaborado pelo autor – Função de validação do e-mail
Descrição: Código JavaScript que valida o campo de e-mail, exibindo mensagens de erro ou
sucesso.
10
3.5. Execução e prints simulados
IMAGEM 5 – Criação do projeto no [Link]
Fonte: Elaborado pelo autor – Projeto “Empty” criado na plataforma [Link]
Descrição: Tela inicial do ambiente de desenvolvimento mostrando o projeto vazio antes da
inclusão do código HTML e JavaScript.
11
IMAGEM 6 – Estrutura do formulário exibida no navegador
Fonte: Elaborado pelo autor – Execução do código no navegador embutido do [Link]
Descrição: Captura de tela mostrando o formulário de e-mail com campo de entrada e botão
“Verificar”, conforme a estrutura HTML definida.
12
IMAGEM 7 – Mensagem de erro exibida
Fonte: Elaborado pelo autor – Execução do código com e-mail inválido
Descrição: Captura de tela exibindo a mensagem de erro em vermelho, indicando formato
incorreto e orientando sobre o padrão correto do e-mail.
13
IMAGEM 8 – Mensagem de sucesso exibida
Fonte: Elaborado pelo autor – Execução do código com e-mail válido
Descrição: Captura de tela mostrando a mensagem em verde confirmando que o formato de
e-mail está correto e validado com sucesso.
14
4. CONCLUSÃO
A prática permitiu integrar de forma prática conceitos de HTML, CSS e JavaScript para
criar um formulário funcional com validação de campo de e-mail.
O uso de regex mostrou-se eficiente para identificar formatos válidos e inválidos,
enquanto a exibição de mensagens visuais facilitou a orientação do usuário.
O projeto confirma a importância de validação de entradas e feedback ao usuário em
aplicações web.
15
5. REFERÊNCIAS
[Link]. Online Code Editor for HTML, CSS and JavaScript. Disponível em:
[Link] Acesso em: 17 out. 2025.
MDN WEB DOCS. HTML Forms Guide. Disponível em:
[Link] Acesso em: 17 out. 2025.
W3SCHOOLS. HTML Form Tutorial. Disponível em:
[Link] Acesso em: 17 out. 2025.
16