Desenvolvimento em Javascript

•

Escola Tecnica Estadual Jornalista Cyl Gallindo

0

Ellen Rebeca

29/04/2024

E aí, curtiu este material?

Ajude a incentivar outros estudantes a melhorar o conteúdo

Gostou desse material? Compartilhe! 🧡

Enem

270.867 Materiais compartilhados

Baixe o app para aproveitar ainda mais

Leia os materiais offline, sem usar a internet. Além de vários outros recursos!

Prévia do material em texto

7
 (
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 
D
ESENVOLVIMENTO EM JAVASCRIPT
 apresentado como requisito parcial para a obtenção de média 
semestral
 n
o 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
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.
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>
2.Utilização da função:
<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>somando numeros</title>
    <style>
        body {
            font: normal 18pt Arial;
        }
        input {
font: normal 18pt Arial;
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>
3.Utilizando função em formulário:
<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Você é BRASILEIRO ou ESTRANGEIRO?</title>
    <style>
        body {
            background-color: hotpink;
            color: black;
            font: normal 20pt Arial;
        }
    </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>
Resultado dos códigos apresentados:
1.
2.
3.
 
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>
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; 
      }
    }
   
 function Aparecer(){
        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 campode digitação e não será deletada, até que o formulário seja enviado. 
Código completo:
 <!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 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
      }
    }
    function Aparecer(){
        var menssagemaviso = document.getElementById('menssagemaviso');
        menssagemaviso.textContent= 'Seu email deve conter: A-Z/0-9 + @ + gmail/outlook/hotmail + .com, exemplo: exemplo@gmail.com';
    }
    </script>
</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>
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:
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.
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. 
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.
image1.png
image2.png
image3.png
image4.png
image5.png
image6.png
image7.png
image8.png
image9.png
image10.png
image11.png
image12.png
image13.png
image14.png