Scribd
Carregar
18 visualizações10 páginas

Javascript 2.0

Código e relatório sobre fazer um email

Enviado por

ggiaculodarocha
Direitos autorais
© © All Rights Reserved
Levamos muito a sério os direitos de conteúdo. Se você suspeita que este conteúdo é seu, reivindique-o aqui.
Formatos disponíveis
Baixe no formato DOCX, PDF, TXT ou leia on-line no Scribd
18 visualizações10 páginas

Javascript 2.0

Código e relatório sobre fazer um email

Enviado por

ggiaculodarocha
Direitos autorais
© © All Rights Reserved
Levamos muito a sério os direitos de conteúdo. Se você suspeita que este conteúdo é seu, reivindique-o aqui.
Formatos disponíveis
Baixe no formato DOCX, PDF, TXT ou leia on-line no Scribd
Você está na página 1/ 10

UNIVERSIDADE ANHANGUERA

GABRIEL GIACULO DA ROCHA

Código e Relatório sobre JavaScript

SÃO PAULO
2024
UNIVERSIDADE ANHANGUERA

GABRIEL GIACULO DA ROCHA

Código e Relatório sobre JavaScript

Trabalho apresentado como

exigência à disciplina de:

Desenvolvimento em JavaScript.

Como nota de Portfólio pela

Universidade Anhanguera.

SÃO PAULO
2024
GABRIEL GIACULO DA ROCHA
Aprovados em ___/___/___.

BANCA EXAMINADORA

________________________________________________

Prof. (Nome do Orientador)

_________________________________________________

Prof. (Nome do Professor avaliador)

__________________________________________________

Prof. (Nome do avaliador)


ATIVIDADE PROPOSTA

- Criar um novo projeto dentro do Playcode.io composto por um pequeno


formulário com campo para colega de Email 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.

- Criar relatório final de atividades.

SUMÁRIO
3- Introdução- Código
………………………………..............................................6 e 7

2- Relatório............................................................................................................8 e 9

3- Considerações finais...........................................................................................10

INTRODUÇÃO – Código
<!DOCTYPE html>
<html lang=”pt-BR”>
<head>
<meta charset=”UTF-8”>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0”>
<title>Formulário de E-mail</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 20px;
}
.error {
color: red;
}
</style>
</head>
<body>
<h1>Formulário de E-mail</h1>
<form id=”emailForm”>
<label for=”email”>Colega de E-mail:</label>
<input type=”text” id=”email” name=”email” required>
<button type=”submit”>Enviar</button>
</form>
<p id=”message” class=”error”></p>

<script>
document.getElementById(‘emailForm’).addEventListener(‘submit’,
function(event) {
event.preventDefault(); // Impede o envio do formulário

const emailInput = document.getElementById(‘email’).value;


const messageElement = document.getElementById(‘message’);
const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; // Regex para
validação de e-mail
if (emailPattern.test(emailInput)) {
messageElement.textContent = “E-mail enviado com sucesso!”;
messageElement.classList.remove(‘error’);
messageElement.classList.add(‘success’);
} else {
messageElement.textContent = “Por favor, insira um e-mail válido.
Exemplo: [email protected]”;
messageElement.classList.add(‘error’);
messageElement.classList.remove(‘success’);
}
});
</script>
</body>
</html>

DESENVOLVIMENTO – Relatório
1 – Objetivo do código
O código tem como objetivo criar um formulário simples que permite ao
usuário inserir um endereço de e-mail. O formulário valida se o e-mail inserido
está em um formato correto e fornece feedback ao usuário, informando se o e-
mail foi enviado com sucesso ou se há um erro na entrada.

2- Estrutura do código
O código é composto por três partes principais: HTML, CSS e JavaScript.

2.1 HTML

Estrutura do Documento – O código começa com a declaração do tipo de


documento <!DOCTYPE html> e a definição do idioma da página <html
lang=”pt-BR”>
Cabeçalho (<head>): Contém metadados, como a codificação de caracteres e o
título da página.
Corpo (<body>): Inclui:
Um título (<h1>) que descreve o propósito da página.
Um formulário (<form>) com um campo de entrada para o e-mail e um botão de
envio.
Um parágrafo (<p>) para exibir mensagens de feedback ao usuário.

2.2. CSS

Estilos: O CSS é utilizado para definir a aparência do texto e das mensagens:


A fonte padrão é definida como Arial.
A classe. Error é estilizada com a cor vermelha para mensagens de erro.
A classe. Success é estilizada com a cor verde para mensagens de sucesso.
2.3. JavaScript

Validação do Formulário: O JavaScript é responsável pela lógica de validação


do e-mail:
Um event listener é adicionado ao formulário para interceptar o evento de
envio.
O método preventDefault() é utilizado para evitar que o formulário seja enviado
antes da validação.
O valor do campo de e-mail é capturado e verificado contra uma expressão
regular (emailPattern), que valida se o formato do e-mail está correto.
Dependendo do resultado da validação, uma mensagem de sucesso ou erro é
exibida no parágrafo designado.

3. Funcionamento do Código
O usuário insere um endereço de e-mail no campo de texto.
Ao clicar no botão “Enviar”, o JavaScript válida o formato do e-mail.
Se o e-mail for válido, uma mensagem de sucesso é exibida em verde. Se não
for válido, uma mensagem de erro é exibida em vermelho, instruindo o usuário
sobre o formato correto.

Considerações Finais – Usabilidade

O formulário é simples e fácil de usar, proporcionando feedback imediato ao


usuário.
Validação: A validação do e-mail é feita utilizando uma expressão regular, que
é uma abordagem comum e eficaz para verificar formatos de e-mail.
Estilo: O uso de cores diferentes para mensagens de erro e sucesso melhora a
experiência do usuário, tornando o feedback mais claro e intuitivo.

Você também pode gostar