Modelo Relatório Aula Pratica - Desenvolvimento Java Script

O documento apresenta um roteiro prático para o desenvolvimento de um formulário em JavaScript, focando na validação de e-mails. Ele destaca a importância do HTML na estruturação de páginas web e do JavaScript na adição de interatividade e feedback em tempo real. A plataforma playcode.io é mencionada como uma ferramenta útil para testar e implementar essas interações diretamente no navegador.

Enviado por

Emanuel Corbini

Direitos autorais

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 DOC, PDF, TXT ou leia on-line no Scribd

0% acharam este documento útil (0 voto)

15 visualizações8 páginas

Modelo Relatório Aula Pratica - Desenvolvimento Java Script

Enviado por

Emanuel Corbini

Direitos autorais

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 DOC, PDF, TXT ou leia on-line no Scribd

Você está na página 1/ 8

CIÊNCIAS DA COMPUTAÇÃO

BACHARELADO

EMANUEL SCHERRER CORBINI

ROTEIRO AULA PRÁTICA:

Desenvolvimento em Java Script

Limeira SP
2024
SUMÁRIO

1 INTRODUÇÃO......................................................................................................3
2 DESENVOLVIMENTO..........................................................................................4
3 MÉTODOS........................................................................................................... 5
4 RESULTADOS.......................................................................................................6
CONCLUSÃO.............................................................................................................. 7
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.
2 DESENVOLVIMENTO

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.
3 MÉTODOS

Código para a criação do formulário e validação do e-mail.

<form id="emailForm">
<label for="email">Informe seu e-mail:</label>
<input type="text" id="email" name="email"
placeholder="[email protected]">
<button type="submit">Enviar</button>
</form>
<p id="message"></p>

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 é: [email protected]";
message.className = "error";
}
});
</script>
4 RESULTADO

Mensagem de erro ao digitar e-mail.

Mensagem de validação do e-mail.

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:
[email protected]). 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.