Exercícios JavaScript (Parte 3) - Curso JavaScript

Chegamos agora para a resolução desse exercício que você está vendo aqui do lado é o nosso verificador de idade. Por exemplo, vou colocar uma pessoa que nasceu em 1999 e é homem, 1999, homem, detectamos um homem com 20 anos. Se ele nasceu em 1975, detectamos um homem com 44 anos.

Você viu? Ele já mudou a foto, a imagem aqui. Se for feminino em 1945, uma mulher com 44 anos.

Se for mulher, 2000, uma mulher com 19 anos. Se foi 2015, masculino, um homem de 4 anos. Se foi 1954, feminino, nós temos uma mulher de 65 anos.

Você percebe que no início do exercício nem imagem eu tinha aqui, a gente criou ela de forma dinâmica utilizando JavaScript. Como a gente fez isso? Como isso foi possível?

É só você assistir esse vídeo até o final, porque a resposta está chegando. Legendas: Rayssa Victoria Olá, pequeno Gafanhoto! Seja bem vindo à resolução de mais um exercício aqui do seu curso de JavaScript totalmente patrocinado pelo Google.

O meu nome é Gustavo Guanabara, eu sou professor, e nós estamos de volta na nossa prática, mais uma hora de praticar, e eu não preciso nem dizer o que eu já disse algumas outras vezes: "Você precisa pegar essas aulas, principalmente esses vídeos, e criar na sua casa sua própria solução. " Na verdade, se você está iniciando ainda, provavelmente está sentindo muita dificuldade Então vai seguindo os meus passos que aos poucos você vai acostumando sozinho. O que não pode acontecer é você ficar só assistindo o vídeo e considerar que você sabe fazer, só porque você me viu fazer.

Se você só assistir a única coisa que você comprovou é que eu sei fazer você precisa provar para você mesmo que você também consegue. Então sem delongas, vamos abrir os nossos editores, o navegador, tudo bonitinho. Vamos pegar aquele modelo que a gente criou nas aulas anteriores, e vamos utilizar para a gente acelerar o processo de criação desse exercício Já estou aqui no Visual Studio Code, o que eu vou fazer o seguinte, dentro da aula12/exercícios vou pegar o modelo, que a gente tinha, a gente fez isso aqui no vídeo anterior.

Se você não assistiu ainda, se você clicar aqui em cima da minha cabeça você tem acesso a playlist. Vai lá na playlist. Só que eu não quero esse exercício 14, eu quero criar o exercício 15.

O que eu vou fazer é o seguinte, cliquei no modelo, vou dar Ctrl c Ctrl v, ele criou o modelo 1, pra eu poder mexer. Eu não vou mexer direto no modelo, então eu venho aqui, botão direito rename, ou aperta a tecla F2, e vou chamar de ex015. Eu tenho os mesmos documentos vou abrir os três, o arquivo HTML, cliquei duas vezes, vou abrir também o estilo, vou abrir também o Script.

No estilo a gente nem vai mexer nesse exercício. Já estou com os três abertos o Script, o estilo, e o HTML. O script está vazio, o HTML está com a base daquele modelo com os links, está ligando aqui com o estilo e com o JavaScript.

Enfim,se você não viu, assiste dois vídeos para trás, porque a gente criou esse documento base. Outra coisa que eu fiz também foi abrir o pexels, que a gente já viu, o pexels. com/pt-br/ A gente já acessou isso também no vídeo anterior, eu te mostrei.

E eu fiz uma busca lá, eu coloquei "jovem" e tem várias fotos de pessoas jovens. O que eu fiz foi o seguinte, eu tenho uma foto de adulto, a mulher adulta, o homem adulto bebê mulher, bebê homem ou idoso mulher, idoso homem, jovem mulher, jovem homem. Então, eu fiz essas imagens aqui, eu vou selecionar vou dar Ctrl c, vou vir aqui na pasta do JavaScript aula 12, no exercício 15 e vou dar Ctrl v para todas as fotos.

Na verdade, o que eu fiz foi pegar a foto lá do pexels, colocar redondo a gente fez isso no vídeo anterior também, redimensionei para ficar com 250 x 250, só para ficar organizado. Estou com as minhas imagens aqui também, já coloquei no meu sistema. Dentro da pasta do exercício 15 eu tenho os três arquivos padrões, os arquivos que a gente criou, e eu tenho as fotos que a gente vai usar nesse documento.

Você pode gerar as suas no banco de imagem pexels, que é uma das recomendações que a gente fez aqui, que é uma base gratuita. Se você perceber eu já estou com as imagens já previamente criadas. A primeira coisa que a gente vai fazer é nessa parte de cima, ter o formulário de entrada e nessa aqui ter a minha saída.

Eu vou até colocar um ID nessa outra div, que vai ser o resultado, vou chamar de res. Essa div aqui não precisa colocar nome porque não vou ter nada demais. Aqui eu vou colocar verificador de Idade e aqui, em vez de modelo de exercício, Verificador de idade.

Já posso fechar aqui, deu encolhida. Esqueci de colocar um coisa. Então dá uma olhada no meu código duas divs, coloquei aqui o h1 e tudo mais, tudo certo.

Vou abrir o Google Chrome,vou dividir a tela, vou colocar ele aqui como sempre fazemos, vou dar uma diminuída. Agora eu vou começar a criação, deixa eu dar Ctrl Shift p, Watching Chrome, pra ele ficar certo. "Verificador de Idade", aqui minha div está vazia ainda e nós vamos fazer o seguinte ,aqui em cima, vamos criar primeiro o ano de nascimento.

Vamos pedir aqui <p> Ano de Nascimento: <p> Vou colocar também dentro desse parágrafo um <input type="number" name="txtano" id="txtano"> Se você quiser você pode colocar o mínimo valor para 1 ou para 0, também tem o máximo valor, você pode fazer isso daqui em HTML. Já colocamos o ano de nascimento. Também vou pedir, em um parágrafo novo, o sexo.

E o sexo eu vou ter duas opções então vou ter o <input type="radio" que é aquela bola. Já criou a primeira bola, o nome vai ser radsex e o meu id vai ser masc, eu vou colocar o id diferente do name dessa vez. Vou criar também um <label for="masc"></label> ,que é exatamente o id daqui, que vai ser masculino.

Se eu quiser, eu facilito a vida, vou colocar um checked para ele já aparecer marcado masculino, para obrigar a marcar um ou outro. Outra coisa que vou fazer é o segundo input, o input radio, que é em ordem alfabética o meu name tem que ser o mesmo nome daqui de cima, senão eu marco os dois, depois a gente mostra para você e o meu id é fem, não vou colocar checked porque é só um que pode ser o checked. Vou colocar um label para fem que vai ser feminino.

Vou colocar aqui mas, é o meu toque, se aqui tem três letras aqui também tem que ter três, na minha cabeça. E por fim o último parágrafo que vai ser o botão. Aqui um <input type="button" vallue="verificar"> Aqui já está o meu formulário base, no resultado vou colocar: Preencha os dados acima para ver o resultado Só pra você ver qual a diferença entre as divs essa parte de cima é a dívida de cima e essa parte de baixo é a de baixo.

Então, eu tenho aqui o ano de nascimento e o sexo. Isso tudo é HTML bem simples, na verdade você pode acessar nossa playlist que está aqui em cima pra você poder ver o curso de HTML5 também, mas você com certeza está percebendo que é bem fácil você criar HTML, principalmente utilizando o Visual Studio Code que tem funcionalidades bem legais para isso. O que falta a gente fazer é colocar o onclick aqui, para disparar o JavaScript, eu vou chamar de verificar.

Então, eu tenho um método chamado verificar, quando eu clicar no botão ele vai disparar. Vou atualizar, e agora quando clicar aqui em verificar ele vai disparar um evento chamado verificar, para fazer isso eu venho aqui no script vou colocar function verificar( ) { , tudo em letra minúscula. Vou só colocar um alerta, só pra gente ver se funciona, vou colocar window.

alert('FUNCIONOU') Vamos ver se funcionou mesmo, vou atualizar, cliquei, funcionou. Então vai fazendo passo a passo não adianta tentar digitar o código inteiro e ver se funciona só no final. A primeira coisa que vou verificar aqui, eu tenho que pegar a data atual, então vou colocar aqui a minha data= new date() , a gente fez isso também no vídeo anterior e vou pegar o ano atual var ano = data.

getFullYear( ) FullYear é porque ele vai pegar com quatro dígitos, no momento eu tô gravando esse vídeo é 2019 então ele vai pegar 2 0 1 9, 2019, não vai pegar só 19. Então eu tenho aqui o FullYear que é o ano. atual Outra coisa que vou fazer é criar um Formulário ano.

Que foi o ano que veio aqui do formulário Vou chamar de Fano, esse Fano vai ser o document, pode ser window. document também, mas vamos simplificar getElementById('txtano') , que é exatamente o id desse cara aqui. No HTML, da minha caixa de texto é txtano, o meu id é esse aqui.

Já peguei, deixa eu salvar, atualizar. Se eu mandar verificar não adianta nada, porque eu não tenho o ano de nascimento. Outra coisa que eu vou pegar antes de fazer o teste, é o resultado, que vai ser var res = document.

getElementById('res') Que é o meu id daqui, dessa div. Outra forma de fazer para a gente não ficar igual, para dar um variada posso usar o . querySelector('div#res') Também dá no mesmo, vou até deixar essa segunda maneira que ela é um pouco mais moderna, tanto faz o de cima ou de baixo pra você selecionar A primeira coisa que vou fazer é verificar se esse ano está vazio ou se ele é maior do que o atual.

Não pode ser maior do que o ano atual, então eu vou verificar if(fano. value cuidado para ele não substituir com node. value, eu não quero .

length == 0) Isso é, se o cara não digitou o ano digitou ano ou então, a gente viu isso durante as aulas, fano. value > ano o ano atual, que eu peguei aqui em cima. Se ele estiver vazio ou o ano atual eu vou dar um window.

alert('[ERRO] Verifique os dados e tente novamente! ') vou dar um else { , por enquanto ,vou colocar window. aler('tudo ok') ,vamos atualizar Se eu vier aqui, não digitei e mandei verificar, "[ERRO] Verifique os dados e tente novamente!

". Se eu digitar 2000, "tudo ok" . Se eu digitar um ano, por exemplo, como eu falei estou em 2019 vou colocar 2022 Como uma pessoa nasceu em 2022 se ainda não chegou este ano?

Olha lá, "[ERRO] Verifique os dados e tente novamente! ". Se eu colocar um ano abaixo de 2019, por exemplo, 2000, "tudo ok".

Essa parte aqui, vou até tirar esse "tudo ok", que não é o meu objetivo, mas essa parte aqui fez uma micro validação, uma primeira avaliação dos dados, aqui ele verifica se a minha caixa está vazia, se o cumprimento do valor dele é igual a zero e aqui se o valor é acima de ano. Nota, que eu não precisei converter, mas eu poderia colocar Number(fano. value) > ano Ficaria até mais explícito, mas o JavaScript se virou aqui pra fazer essa conversão Agora que eu já tenho os dados e eu sei que os dados estão preenchidos eu vou ou pegar o sexo fsex, que é do formulário, só que eu vou pegar, presta atenção eu tenho dois radio buttons, dois rádios, com o mesmo nome, eles têm que ter o mesmo nome se eu não tiver, vou colocar radf e radm.

Se eu fizer isso vai dar problema, eu marco masculino marco feminino e e ele marca os dois não me deixa desmarcar isso acontece quando o name é diferente, aqui eu tenho que colocar radsex e aqui eu tenho que colocar radsex, exatamente o mesmo nome. Agora se eu clicar em masculino e feminino ele vai marcando um ou outro. Eles têm o mesmo nome então não dá para selecionar por id, não dá para selecionar por seletor.

Eu vou ter que fazer o seguinte document. getElementsByName e você percebe que ele está no plural e o meu name vai ser ('radsex') Eu vou ter o redsex 0 e o radsex 1, que são as duas bolas. O radsex 0 é a bola do masculino, radsex 1 é a bola do feminino.

Não colocar nada aqui, só vou colocar dessa maneira. Eu vou pegar e vou calcular a idade, não faz sentido calcular a idade se eu não digitei direito, a idade vai ser o valor do ano atual menos o valor digitado em fano , é o valor que está lá dentro. Aqui eu calculei a idade, que é o ano atual, que está aqui dentro de ano no getFullYear, que me diz o ano atual, e a idade.

Eu vou fazer o seguinte, vou colocar res. innerHTML = só para testar, colocar entre crase, Idade calculada: , colocar um placeholder, idade Vamos salvar, atualizar 2000, idade calculada: 19. Perfeito!

Se eu colocar 0, idade calculada 2019 1990, quem nasceu em 1990 tem 29 anos Então está tudo funcionado direito, mas isso aqui eu não quero que apareça , não é o meu caso agora, foi só para testar e ver se funciona. E nunca se esqueça! Você precisa testar o seu programa aos poucos, não adianta você achar que "Eu vou digitar tudo de uma vez só e meu programa funciona a maravilha.

" Vai aos poucos, porque qualquer erro você consegue perceber. Se a qualquer momento o seu código não funcionar lembre-se você tem a opção de clicar com o botão direito no navegador inspect, e verificar aqui embaixo no console se teve algum erro que foi detectado pelo navegador Agora nós vamos fazer o seguinte, vamos criar uma variável chamada gênero, pode até ser com acento, criei uma variável gênero que vai começar vazia, isso é, começou com uma string vazia. Vou verificar o sexo da pessoa, se ela foi selecionada masculino ou feminino, vou colocar o seguinte if (fsex[0] , que é o masculino, .

checked) { isso é, se oque estiver marcado, checado, for o fsex [0] é sinal de que ele é masculino Eu vou colocar aqui gênero = 'Homem' senão, Eu ainda vou colocar o seguinte, senão pra garantir else if (fsex[1]. checked) { você poderia usar só o else, eu vou colocar aqui só pra garantir gênero = mulher , se você quiser agora a gente pode colocar o rés ponto n res. innerHTML = 'Detectamos ${gênero} com $(idade) anos.

' Vamos rodar! Nasceu no ano 2000, é feminino, detectamos mulher com 19 anos Tranquilidade, já está funcionando. Se você quiser centralizar isso aqui você pode fazer por css, mas a gente já aprendeu no vídeo anterior vou te ensinar como é que centraliza isso utilizando o JavaScript res.

style. textAlign = 'center' eu peguei o res, coloquei o estilo Aling, gn. Vamos atualizar preenche os dados, 2010, masculino.

Detectamos homem 9 anos, você viu que ficou no meio só quando eu executei essa linha. Então essa linha também vai centralizar o texto. E outra coisa que a gente vai precisar é colocar a foto aqui embaixo.

Para eu colocar foto eu posso criar um img no HTML ou criar dinamicamente, criar no HTML a gente já fez no vídeo anterior, vou te ensinar como é que faz dinamicamente. Existem várias maneiras, a maneira que eu vou te ensinar é a seguinte, vou fazer var img = document. createElement('img') O meu elemento vai ser um img, ele vai criar uma tag img para mim.

Eu posso até colocar o id para ela assim img. set. Attribute('id' , 'foto') Então agora eu criei um img com id foto, é como se eu viesse na mão aqui no HTML e colocasse aqui em baixo assim <img id='foto'> É a mesma coisa, essa parte aqui eu estou fazendo pelo javascript.

Vou voltar aqui no código e nós vamos carregar a imagem de acordo com sexo e a idade. Se for homem, vamos testar se ele é uma criança, um jovem, um adulto ou um idos. o Para a criança nós vamos a seguinte faixa, cada um usa a faixa que achar melhor, para a criança eu vou colocar: if (idade >=0 && idade < 10) Isso é, se a idade estiver entre 0 e 10 ele é uma criança Vou colocar aqui, else if (idade >= 10 && idade < 21) e a gente já aprendeu durante a aula, se ele não está entre 0 e 10 ele está acima de 10 então, eu vou tirar isso daqui, posso tirar ou posso deixar, eu vou tirar.

Esse aqui é um jovem else if (idade >= 21 && idade < 50) É uma adulto Senão, se não for nem entre 0 e 10, nem abaixo de 21 e nem abaixo de 50, idoso. E eu vou fazer a mesma coisa do homem para a mulher. Eu vou pegar esse mesmo if, vou dar Ctrl c pegar, aqui embaixo da mulher e Ctrl v.

Eu peço que você preste atenção na hora de copiar e colar em código. principalmente quando você está aprendendo Ctrl c, Ctrl v vai acabar te prejudicando em certos momentos, então muito cuidado. Deixa eu te mostrar o nome dos meus arquivos, vou salvar tudo, para salvar tudo e dei Ctrl k s, ou vem aqui em file, save all, olha lá Ctrl k s aperta Ctrl k, solta tudo e aperta o s.

aqui dentro dos meus arquivos eu tenho uma foto adulto feminina foto, adulta masculina, foto bebê feminino, foto de bebê masculino, foto idoso feminino foto idoso masculinas Então, nós vamos fazer dessa maneira. Eu tenho aqui, vou pegar, se a idade for entre 0 e 10 dentro da área de homem eu vou fazer o seguinte img. setAtribute vou colocar o ('src', que é o surce da minha imagem, pra a foto 'foto-bebe-m.

png') Só olhar aqui do lado, foto-bebe-m. png É só colocar isso daqui e a imagem estando na mesma pasta, verifica se a imagem na mesma pasta. Vou fazer a mesma coisa para o jovem.

Fiz mesma coisa pro jovem, você não me viu digitando só por conta da aceleração da edição, para não levar muito tempo. Fiz o mesmo para adulto e vou fazer o mesmo para idoso, img. , fiz a mesma coisa para idoso Então, para homem tem que estar funcionando e para mulher ainda não Vamos atualizar, 2000, pessoa com 19 anos, masculino, "Detectamos homem com 19 anos" Ainda não apareceu a imagem porque eu não mandei aparecer.

para eu fazer aparecer vou colocar o seguinte res. , para eu colocar um conteúdo em baixo eu vou colocar, appendChild , adicionar um elemento que é o (img) Ele vai adicionar depois desse "Detectamos gênero. .

. " Executar de novo, 2000, masculino, verificar "Detectando os homens com 19 anos" ,está lá. Se eu colocar uma criancinha 2010 Se eu colocar uma criancinha 2010, masculino, "Detectamos homem com 9 anos.

" Vou colocar 1995 ,1995 é um homem com 24 anos 1900, masculino, é um homem com 119 anos. Para feminino não está mostrando ainda. Está vendo?

A mulher você 119 anos não mostrou nada porque ainda não fiz. Vou fazer a mesma coisa pra mulher, então olha aqui, fiz aqui a mesma coisa para mulher. Coloquei o src, foto do bebê feminino, foto do jovem feminino, adulto feminino.

Mais uma vez dizendo cuidado com o Ctrl c Ctrl v, nesse momento. Está aqui, ele verificou que o sexo se for homem ele verifica a idade e ceta a imagem certa , se não, se for mulher ele coloca mulher e ceta a imagem também. Vamos salvar tudo, Ctrl k s, vamos atualizar e está agora com as mulheres.

2001, feminino, verificar, uma mulher com 18 ano. Coloquei 2012, feminino, a mulher com sete anos. Se eu colocar 1905, feminino, mulher com 114 anos.

Se eu colocar 1975, feminino, mulher com 44 anos Teste todas as possibilidades para ver se está tudo funcionando certo. Então o nosso verificador de idade está completo No caso aqui, não dá pra deixar o código tudo na tela, mas vai analisando vai pausando o vídeo, vai digitando e o mais importante vai testado na sua casa, passo a passo para esse código funcionar tudo certo. Não adianta você tentar digitar tudo e colocar tudo para funcionar, vai dar problema mais cedo ou mais tarde Então é isso o pequeno gafanhoto eu me despeço por aqui a gente fez dois exercícios bem grandes, onde a gente mostrou a interatividade do JavaScript com objetos dom dentro de seus arquivos HTML.

Eu volto a dar aquele conselho de amigo, que eu sempre faço contigo, não adianta você prosseguir no curso se você não fizer esses exercícios só assistir o vídeo não treinar é a mesma coisa que assistir 200 vídeos das pessoas andando de skate e achar que você sabe andar de skate. Você tropeção vai ficar falando pra sempre que andar de skate é difícil. A mesma coisa acontece com programação quando você tenta aprender só assistindo o vídeo No próximo vídeo a gente vai dar continuidade à matéria.

Viu como o que eu disse anteriormente é bem verdade? Aquele negócio de aluno que chega quando assim "Guanabara, a aula é importante dessa vez ou é só exercício? " Na verdade exercício é até mais importante que a aula e eu provei isso pra você ensinando durante o exercício um monte de coisa nova.

Essas coisas não vão ser ensinadas durante a aula a coisa de criar uma imagem dinamicamente modificar as propriedades pegar os dados de um radio, nada disso vai ser ensinado durante as aulas porque o exercício te ensinou essa prática. Eu me despeço por aqui, a gente se vê no próximo vídeo onde a gente vai começar a falar sobre estruturas de repetição, mas não se esquece antes faz todos os exercícios. Um grande abraço, boas práticas e a gente se vê na próxima.