Aula Pratica

Ciências da Computação – Bacharelado
ELLEN REBECA SIMÕES DE ALBUQUERQUE
AULA PRÁTICA CIÊNCIAS DA COMPUTAÇÃO
Buíque-PE
2023
ELLEN REBECA SIMÕES DE ALBUQUERQUE
AULA PRÁTICA CIÊNCIAS DA COMPUTAÇÃO
Aula prática de DESENVOLVIMENTO EM JAVASCRIPT

apresentado como requisito parcial para a obtenção de
média semestral no curso CIÊNCIAS DA
COMPUTAÇÃO.
Orientador(a): Nome do professor(a) da disciplina

Tutor: Moacy Flavio Farias de Castro
Buíque-PE
2023
SUMÁRIO
CIÊNCIAS DA COMPUTAÇÃO............................................................................0
1 INTRODUÇÃO...........................................................................................3
2 DESENVOLVIMENTO...............................................................................4
3 RESULTADOS...........................................................................................6
4 CONCLUSÃO............................................................................................9
5 REFERÊNCIAS....................................................................................... 10
3
1 INTRODUÇÃO
Esse projeto desenvolvido a partir do Playcode.io, tendo

sua fundamentação em HTML e Javascript e nas videoaulas oferecidas
neste curso e no canal “Curso em Vídeo” por Gustavo Guanabara,
apresentará um formulário especificando ao usuário como deve
preencher seu Email, da forma apropriada, onde aparecerá uma
mensagem com os informativos adequados, e quando não
especificado, na tentativa de envio do Email, mostrará que é
obrigatório. Na interface exibida ao usuário, terá apenas a solicitação
do Email, visto que foi o único campo a ser pedido pela aula prática,
com a adição de um “reset”, caso seja necessário deletar os dados
informados. No desenvolvimento, será mostrado a resolução e os
métodos utilizados para criação do código, mostrando também,
atividades extras, necessárias para descoberta dos elementos e
atributos precisos na criação desse formulário.
4
2 DESENVOLVIMENTO
Com auxílio dos conteúdos web disponíveis, do Visual

Studio Code, e os cursos de Javascript, HTML5 e CSS3 do canal
“Curso em vídeo” por Gustavo Guanabara, desenvolvi atividades que
continham os elementos de código utilizados para montar o formulário
solicitado no portifólio da Aula Prática.
Nas primeiras atividades apresentaram códigos básicos
de HTML desenvolvidos em linguagem Javascript, segue uma
exemplificação de códigos usados que foram criados no VScode:
1.Primeiro código em HTML:

<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>meu primeiro programa</title>
<style>
body {
background-color: rgb(137, 170, 233);
color: white;
font: normal 20pt arial;
</style>
</head>
<body>
<h1>Desenvolvendo em Javascript</h1>
<p>Hello, World!</p>
<script>
alert("Hello World") // janela só com ok
confirm("Você confirma?") // janela com botão ok e comentar
prompt("Escreva algo?") // escrever
</script>
</body>
</html>
5
2.Utilização da função:
<!DOCTYPE html>
<html lang="pt-br">
<head>
<title>somando numeros</title>
<style>
body {
font: normal 18pt Arial;
}
input {
width: 100px;
div#res {
margin-top: 20px;
}
</style>
</head>
<body>
<h1>somando valores</h1>
<input type="number" name="txtn1" id="txtn1">
<input type="number" name="txtn2" id="txtn2">
<input type="button" value="somar" onclick="somar()">
<div id="res"> Resultado </div>
<script>
function somar() {
var tn1 = document.getElementById('txtn1')
var tn2 = document.getElementById('txtn2')
var res= document.getElementById('res')
// ou queryselector('input#txtn1')
var n1 = Number(tn1.value)
var n2 = Number(tn2.value)
var s = n1 + n2
res.innerHTML = `A soma entre ${n1} e ${n2} é igual a <strong>$
{s}</strong>`
}
</script>
</body>
</html>
6
3.Utilizando função em formulário:

<!DOCTYPE html>
<html lang="pt-br">
<head>
<title>Você é BRASILEIRO ou ESTRANGEIRO?</title>
<style>
body {
background-color: hotpink;
color: black;
}
</style>
</head>
<body>
<h1>Qual a sua nacionalidade?</h1>
Seu país: <input type="string" name="txtnome" id="txtnome"
onclick="Aparecer()">
<input type="button" value="checar" onclick="checar()" >
<p id="nomechec" style="color: red;"></p>
<div id = res>
</div>
<script>
function Aparecer(){
var nomechec = document.getElementById('nomechec');
nomechec.textContent= 'Você deve escrever o nome do país em letra
maiúscula'
}
var txtnn = document.getElementById ('txtnome')
function checar(){
var hu = String(txtnome.value)
var res = document.querySelector ('div#res')
res.innerHTML = (`Você mora nesse país: ${hu}. Logo`)
if ( hu == 'Brasil') {
res.innerHTML += (', você é brasileiro')
} else {
res.innerHTML += (', você é estrangeiro')
}
}
</script>
</body>
</html>
7
Resultado dos códigos apresentados:

1.
8
2.
9
3.
10
11
O formulário da aula prática foi criado a partir dos códigos mostrados

e de anotações a parte que foram feitas nas aulas do canal “Curso em
Vídeo”.
Resolução e Código desenvolvido:
PARTE 1:
<body>
<h1>Formulário de E-mail</h1>
<form onsubmit="return validarFormulario()" method="post">
<fieldset>
<legend> Insira aqui os seus dados: </legend>
<label for="email">E-mail:</label>
<input type="email" id="email" name="email" onclick="Aparecer()"
placeholder="Digite aqui o seu email">
<button type="submit">Enviar</button>
<button type="reset">Limpar</button>
</fieldset>
</form>
<p id="mensagemErro" style="color: red;"></p>
<p id="menssagemaviso" style="color: red;"> </p>
</body>
12
Ao iniciar um arquivo em .HTML, utilizei o campo do <body> para

criar o formulário. O <form> mostra a função que irá validar se o
formulário deve ser enviado ou não, caso seja falsa, retornará, e se for
verdadeira, será validado. Enquanto, o <fieldset> foi usado para
encapsular as informações que serão solicitadas. Em seguida, os
botões e os campos de texto foram criados para inserção de dados do
usuário. A função “onclick” localizada no <input type”email”>, foi
utilizada para avisar como seria a estrutura de um Email, assim que o
usuário pressionar o campo de digitação. Ainda dentro do campo
<form>, estão os botões: “enviar”, com o tipo de submissão ao
<form>, e o “limpar”, disponibilizando a função de apagar tudo que o
usuário havia digitado. Após fechar o elemento <form> e antes de
finalizar o <body> estão os parágrafos que aparecerão em execução as
funções criadas.
PARTE 2:
A função “validarFormulario()”, vista no inicio do código em <form>,
foi utilizada para mostrar ao usuário, que ao clicar em enviar, e o
campo estiver vazio, aparecerá a mensagem de “erro”, solicitando que
o campo de digitação seja preenchido, “return false” impede o envio
do formulário caso esteja errado, “return true” junto ao “textContent”
vazio, permite que a mensagem de erro seja limpa, e o envio do
formulário seja concedido.
<script>
function validarFormulario() {
var email = document.getElementById("email").value;
var mensagemErro = document.getElementById("mensagemErro");
if (email === "") {

mensagemErro.textContent = "O campo de e-mail precisa ser
preenchido.";
return false;
} else {
mensagemErro.textContent = "";
return true;
}
}
13
var menssagemaviso = document.getElementById('menssagemaviso');
menssagemaviso.textContent= 'Seu email deve conter: A-Z/0-9 + @ +

gmail/outlook/hotmail + .com, exemplo: exemplo@gmail.com';
}
</script>
Já a função “Aparecer()” encontrada em “onclick” apenas serve para

lembrar ao usuário como é a estruturação de um Email. Ela aparecerá
assim que o usuário clicar no campo de digitação e não será deletada,
até que o formulário seja enviado.
Código completo:
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<title>Formulário UNOPAR</title>
<script>
function validarFormulario() {
var email = document.getElementById("email").value;
var mensagemErro = document.getElementById("mensagemErro");
if (email === "") {

mensagemErro.textContent = "O campo de e-mail precisa ser
preenchido.";
return false
} else {
mensagemErro.textContent = "";
return true
}
}
var menssagemaviso = document.getElementById('menssagemaviso');
menssagemaviso.textContent= 'Seu email deve conter: A-Z/0-9 + @ +

gmail/outlook/hotmail + .com, exemplo: exemplo@gmail.com';
}
</script>
14
</head>
<body>
<h1>Formulário de E-mail</h1>
<form onsubmit="return validarFormulario()" method="post">
<fieldset>
<legend> Insira aqui os seus dados: </legend>
<label for="email">E-mail:</label>
<input type="email" id="email" name="email" onclick="Aparecer()"
placeholder="Digite aqui o seu email">
<button type="submit">Enviar</button>
<button type="reset">Limpar</button>
</fieldset>
</form>
<p id="mensagemErro" style="color: red;"></p>
<p id="menssagemaviso" style="color: red;"> </p>
</body>
</html>
15
3 RESULTADOS
As plataformas utilizadas para adquirir conhecimento sobre

HTML e Javascript, por serem de fácil manipulação e entendimento,
foram fundamentais na minha evolução com a criação do formulário,
em pouco tempo consegui desenvolver códigos básicos e cria-los sem
auxílio das notas feitas em aula, concluindo tudo sem dificuldades ou
dúvidas.
Código no site do Playcode.io:
Executando o código:
Ao clicar no campo de digitação:

16
Ao enviar sem conter nada no campo de digitação:
Código numa página:
Ao clicar no campo de digitação:

17
Ao enviar sem conter nada no campo de digitação:
Quando enviado corretamente, a página volta ao seu estado original.

18
19
4 CONCLUSÃO
Portanto, esse trabalho de apresentação de HTML em

linguagem Javascript me proporcionou melhor aprofundamento no
assunto, visto que já tinha um conhecimento básico em linguagem de
programação, afirmo, que não houve dificuldades para serem
questionadas, já que todas as aulas do curso disponibilizadas no canal
“Curso em Vídeo” por Gustavo Guanabara, e as documentações do
Portal Colaborar do curso de Ciências da Computação, continham
uma ótima explicação e resolução, e ainda mais, todos os exercícios
disponíveis serviram para construir toda informação necessária para
produção dos códigos. Acredito que toda essa experiência me ajudará
com o desenvolvimento em front-end, que desejo moldar durante todo
o curso de Ciência da Computação, e a adaptação as novas tecnologias
utilizadas na criação de código que também são de grande importância
para esse desenvolvimento.
20
5 – REFERÊNCIAS BIBLIOGRAFICAS
Curso em Vídeo. Playlist: Curso completo e atual de HTML5 E CSS3 – Módulo

1 de 5 . Youtube, 13 de outubro de 2020. Disponível em:
<https://www.youtube.com/watch?
v=Ejkb_YpuHWs&list=PLHz_AreHm4dkZ9-atkcmcBaMZdmLHft8n>
Javascript Playgroung. Playcode. c2016. Disponível em: <https://playcode.io/ >.
Acesso em: 22 de ago. de 2023.
Colaborar – Cursos. Portal Digital do Aluno. Disponível em:
<https://www.colaboraread.com.br/> Acesso em: 22 de ago. de 2023.
Visual Studio Code – Vscode. Disponível em: < https://code.visualstudio.com/>.
Acesso em> 22 de ago. 2023.

Aula Pratica

Enviado por

Direitos autorais:

Formatos disponíveis

Aula Pratica

Enviado por

Dados do documento

Descrição original:

Título original

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

Aula Pratica

Enviado por

Direitos autorais:

Formatos disponíveis

Ciências da Computação – Bacharelado

ELLEN REBECA SIMÕES DE ALBUQUERQUE

AULA PRÁTICA CIÊNCIAS DA COMPUTAÇÃO

AULA PRÁTICA CIÊNCIAS DA COMPUTAÇÃO

Aula prática de DESENVOLVIMENTO EM JAVASCRIPT

Orientador(a): Nome do professor(a) da disciplina

Esse projeto desenvolvido a partir do Playcode.io, tendo

Com auxílio dos conteúdos web disponíveis, do Visual

1.Primeiro código em HTML:

3.Utilizando função em formulário:

Resultado dos códigos apresentados:

O formulário da aula prática foi criado a partir dos códigos mostrados

Ao iniciar um arquivo em .HTML, utilizei o campo do <body> para

if (email === "") {

menssagemaviso.textContent= 'Seu email deve conter: A-Z/0-9 + @ +

Já a função “Aparecer()” encontrada em “onclick” apenas serve para

if (email === "") {

menssagemaviso.textContent= 'Seu email deve conter: A-Z/0-9 + @ +

As plataformas utilizadas para adquirir conhecimento sobre

Código no site do Playcode.io:

Ao clicar no campo de digitação:

Ao enviar sem conter nada no campo de digitação:

Código numa página:

Ao clicar no campo de digitação:

Ao enviar sem conter nada no campo de digitação:

Quando enviado corretamente, a página volta ao seu estado original.

Portanto, esse trabalho de apresentação de HTML em

Curso em Vídeo. Playlist: Curso completo e atual de HTML5 E CSS3 – Módulo

Você também pode gostar