Baixe o app para aproveitar ainda mais
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 Será desenvolvido um formulário especificando ao usuário como deve preencher seu Email, e quando não especificado, mostrar que é obrigató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 códigos utilizados para montar o formulário solicitado no portifólio da Aula Prática. Minhas primeiras atividades me 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. <form> apresenta 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. <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 clicasse no 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. Antes de fechar 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 campo de digitação. 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: 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 HTML e Javascript não proporcionaram dificuldade para serem entendidas, já que todas as aulas do curso que foram apresentadas continham uma ótima explicação e resolução, todos os exercícios disponíveis serviram para construir toda informação aquirida. 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, a adaptação as novas tecnologias utilizadas na criação de código 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. 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
Compartilhar