Exercícios JavaScript (Parte 5) - Curso JavaScript

Chegamos à resolução do primeiro exercício que trata sobre estrutura de repetição e você já viu isso funcionando no vídeo anterior, então nem vou levar tanto tempo fazer uma contagem de 1 até 20 o pulando de 3 em 3. Olha lá, 1 até 20, que na verdade não apareceu 20 porque o próximo já ultrapassaria, mostrou com emoji, tudo bonitinho, também funciona de 100 até 20 voltando de 10 em 10, também faz olha, de 100 voltando tudo bem. Se eu tirar algum desses valores ele diz que é impossível contar e se por acaso eu colocar de 100 até 50, se eu botar o passo 0 aqui, ele considera que o passo é um e faz a contagem utilizando passo 1 porque não dá pra contar de 100 até 0 voltando de 0 a 0, não existe isso, então ele considera 1.

Você conseguiu fazer esse exercício? Não conseguiu 100%? talvez esteja faltando alguma coisa?

Um pequeno detalhe, como por exemplo mostrar o emoji? Pois saiba que eu estou aqui pra te ajudar e é só você assistir esse vídeo até o final que eu venho com a resposta completa pra você Legendas: Rayssa Victoria Olá pequeno gafanhoto! Seja bem vindo à resolução de mais um exercício aqui do seu curso em vídeo de JavaScript, totalmente patrocinado pelo Google, o meu nome é Gustavo Guanabara, eu sou professor e você acabou de ver o exercício funcionando e talvez tenha ficado com dúvida em como mostrar os emojis e como fazer a repetição.

E se você teve alguma dessas dificuldades não tem problema, eu estou aqui pra te ajudar, então abre o seu Visual Studio Code, abre o Google Chrome e vamos começar a trabalhar. Então no vídeo anterior a gente viu como fazer essa cópia aqui, utilizar o modelo para criar o exercício 16 e 17, nós já estamos com os arquivos aqui, nossos arquivos modelos e se por acaso você não viu como fazer isso, aqui em cima da minha cabeça você tem acesso ao curso completo, não pula nenhum vídeo porque todo o vídeo tem coisa importante para você. Mas então, vou até fechar essa tela de Welcome, vou abrir os arquivos estilo CSS do exercício 16, modelo HTML e a parte de JavaScript que está vazia o estilo eu não vou mexer em nada não, no modelo a gente vai criar isso aqui, o nosso exercício aqui vai ser o "Supercomputador" que tem nada demais, mas a gente tem que fazer propaganda, aqui no título vou colocar "Vamos contar" na primeira div eu vou ter o meu formulário, que vai pedir o início, vou colocar dentro do parágrafo, um parágrafo para início, um parágrafo para fim e um parágrafo para passo e essa div aqui de baixo eu vou colocar "Preparando a contagem" essa div de cima vou dar um nome pra ela, vou dar um id para ela, chamar de dados e essa qui eu vou dar um id de resultado ou de res Para gente ver como está tudo funcionando, você deve lembrar, é só apertar Ctrl p, watch in in Chrome se aparecer assim é só colocar o sinal de maior e colocar Watch in Chrome, ele vai abrir o Google Chrome, só não atualizou, deixa eu ver oque está acontecendo, salvar alterações agora está certo, deixa eu organizar a tela, meio a meio, na verdade não muito meio a meio, vou dar uma puxada para cá para organizar tudo.

Minha cabeça está aqui um pouco em cima, mas dá pra ver o que importa é o código, vou minimizar aqui, cliquei aqui no papelzinho e beleza, está tudo funcionando agora vou colocar uma caixa de início aqui, fim, passo. Vamos fazer o formulário aqui eu vou colocar um input um número, aqui, input number, ele já fez aqui pra mim vou colocar o nome início e o id txt e mais um input aqui number, aqui ,esse name, ele vai ser mais útil pro o PHP dá pra ser até útil pro JavaScript, mas linguagens como PHP aproveitam melhor o name. Então aqui, txt f e mais um input do tipo number, passo, o name e txt p.

Tem o início, fim e passo esses Ids vão ser importantes pra mim lá no JavaScript, JavaScript esse que está sendo chamada aqui na última linha a gente já fez um modelo várias vezes então fica mais fácil para a gente trabalhar. Também vou fazer um botão de confirmação, um parágrafo aqui e um input do tipo button que é para botão e o valor dele vai ser contar. Ele já criou o botão contar e vou chamar o método onclick, quando eu clicar ele vai chamar o contar lá no JavaScript.

Esse contar a gente vai fazer agora aqui dentro do JavaScript, então vamos salvar. Vou vir aqui no JavaScript e vamos criar uma function, uma função contar, já tô aqui com essa função, isso é, quando eu apertar esse botão aqui, que visualmente é esse botão que está perto de mim, quando eu clicar ele vai disparar o contar que é exatamente esse método, para isso vou ter que pegar os controles aqui pra mim, então eu vou ter aqui, vou criar algumas variáveis uma variável para início, uma variável para fim e uma variável para passo, essa variável pode ser feita com var ou com let, vou até fazer com let não tem diferença nenhuma na verdade tem a diferença de escopo e tudo mais, isso aqui foi introduzido nos JavScripts mais recentes. Vamos usar esse let, basicamente essa aqui facilita em relação ao escopo, essa essa variável início, fim e passo ela não vai existir quando a sair desse bloco.

Vamos lá, vamos fazer document. getElementById(' nós vamos pegar o id desse cara aqui que é o txti e vou pegar o texti vou jogar dentro de início, vou fazer a mesma coisa aqui pro txtf, não copia e cola, principalmente enquanto você está aprendendo. getElementById(' e eu vou ter o txtpasso.

Esses nomes que estou colocando aqui dentro pode ser entre aspas simples, pode ser entre aspas duplas, são esses nomes aqui, são os Id txti, txtf, txtp aqui a mesma coisa, txti, txtf, txtp. Já tem os três, a primeira coisa que eu vou fazer, e você viu isso funcionando, é verificar se os dados estão faltando, porque eu posso simplesmente não digitar nada aqui, nada aqui, nada aqui ou nada em uma delas e clicar em contar, ele vai dar um erro, porque não consegue contar, oque eu vou fazer é o seguinte se (ini. value.

length cuidado na hora de digitar length que é comprimento, quantas letras tem dentro == 0 , é uma maneira bem simples de testar depois a gente pode ver até uma das versões mais completas ou, a gente viu os operadores aqui, se o início estiver vazio ou o fim estiver vazio ou o passo estiver vazio eu vou dar um alerta, vou colocar window. alert ('ERRO] Faltam dados! ') } se não, vamos fazer um se não aqui bem simples só pra gente fazer uns testes vou colocar só alert( ' TUDO OK!

') só para fazer um teste e lembre-se do seguinte você nunca vai programar de uma vez só " Vou escrever o programa inteiro vou rodar ele vai funcionar de primeira. " , isso é uma grande falha que programadores iniciantes tem e que você tem que corrigir se você está tentando fazer dessa maneira. Vamos fazer o seguinte, vamos testar salvando aqui, vou até atualizar pra ficar tudo certinho vou deixar alguma coisa em branco 4, 9 e não vou colocar o passo, contar, olha lá, "Erro faltam dados", vou colocar passo 1, contar, "Tudo ok" .

Se eu deixar coisas em branco ele vai dizer que faltam dados não vou dizer qual dado que falta porque daria um trabalhão e esse exercício não é esse o objetivo, o objetivo é testar a estrutura de repetição e ele está aqui preparando a contagem. Olha só, o código estava assim eu vou tirar esse alert daqui porque não faz sentido ele me mostrar que está tudo ok. Para começar vamos fazer mais um let, resultado vai ser o doc - document.

getElementById e nós vamos pegar o res, o res é esse cara aqui, é essa div, tem uma dív chamada res e que é preparando a contagem, eu vou ter que mudar esse preparando a contagem, então aqui no JavaScript, vou criar uma variável chamada res, que vai ter a relação para essa div primeira coisa que vou fazer é colocar o res. innerHTML = 'Contando. .

' Isso é, vou colocar dois pontos, ele vai aparecer contando aqui embaixo se estiver tudo ok, vamos testar, contar, deu erro, agora se eu digitar os dados certo ele vai mudar pra contando, o que essa linha aqui fez acontecer. Agora vou contar de uma maneira simples, que geralmente é a primeira que as pessoas sempre fazem. Vamos fazer o seguinte, vou criar mais três variáveis, vão ser varíáveis numéricas o i vai ser o number que tá aqui dentro, lembrando que essa caixa de texto que por mais que seja numérica ele não está como um número, eu vou ter que converter ele pra cá pra fazer isso daqui (ini.

value) isso é, vou pegar o valor que está dentro de ini e vou converter para um número, vou fazer a mesma coisa para o fim é um number não se esquece que o N é maiúsculo aqui, fim. value e o passo vai ser Number(passo. value).

Já peguei os três, a contagem mais simples é você contar do início pro fim somando o passo e nesse caso a gente pode utilizar o while, o do. . .

while ou o for, a gente vai fazer com for. For, eu vou ter o contador, possa colocar var c ou let c, vamos usar let neste exercício o contador vai começar no início e enquanto o contador c <= f; c+= p). Se por acaso você está tendo problemas de montar essa linha daqui é porque você não assistiu nesse caso com o for a aula 14 direito, então assista à aula, faça os exercícios, para você poder entender como eu cheguei a essa linha.

Já fiz a contagem, vou fazer o for e eu vou fazer o seguinte o res. innerHTML vai ser o que ele já tem, que no caso é o contando, mais, então vou colocar +=, e se + não é a adição é concatenação, vou colocar as crases para poder colocar a string formatada, vou colocar aqui o c, inicialmente vamos fazer da maneira simples. Salvou, atualizou, se eu contar de 1 à 10 pulando de 2 em 2, olha lá, 1, 3, 5, 7, 9 e acabou ele não mostra 10 porque depois do 9 seria o 11 pulando de 2 em 2.

Se for pulando de 1 em 1 ele coloca 1, 2, 3, 4, 5. . .

Se eu colocar de 1 à 100 de 1 em 1, mostrou de 1 à 100 pulando de 1 em 1 e outra coisa que a gente fez foi colocar os emojis, que, talvez, seja por isso que você apareceu por aqui. Para eu colocar o emoji vou vir aqui no Google e vou procurar por unicode emoji list, você vai acessar o site do unicode. org/emoji/charts/full-emoji-list.

html no caso fica mais fácil pesquisar pelo Google. Já tenho aqui todos os emojis em vários formatos e tudo mais. Aqui na frente tem o código de cada um deles, por exemplo, se eu quiser uma carinha rindo, o código é esse aqui, carinha rindo eu vou até copiar ele pra gente poder ler direito, basicamente o código é esse U+1F603, no javascript a gente não vai fazer U+1F603 a gente vai colocar, tira esse U+, coloca \ u em minúsculo e esse 1F603 a gente coloca aqui dentro, essa é a formatação unicode para o JavaScript.

Você vai pegar lá no site esse código e vai colocar, ele vai ficar com uma carinha rindo depois de cada número. Vamos ver se funciona? Vou manda contar, salvei, vou atualizar aqui, 1 até 10 pulando lado de 2 em 2.

Olha lá, contei 1, uma carinha, 2, uma carinha, 3, uma carinha. Está funcionando sem problema nenhum, mas o que eu quero não é o 1F603, o que eu quero é o 1F449. Vamos salvar e atualizar 1, 10 pulando de 1 em 1, olha lá 1, 2, 3.

. . vou colocar até um espaço na frente só para ficar mais bonita.

Está aqui a contagem, vamos ver aqui para eu contar de 5 até 100 pulando de 10 em 10, olha lá 5, 15, 25 e 35 anos com seta e aqui no final eu quero uma bandeira, para eu mostrar a bandeira vou fazer é res. innerHTML, aqui fora, += ' ' , outra coisa importante esse código aqui \u e o código do unicode só funciona entre crases, vou colocar \u e aqui dentro vou colocar o código, o código da bandeirinha é só você procurar no site da unicode, é o código 1F3C1, vamos salvar e vamos ver se está funcionando. Quero de 3 até 20 pulando de 4 em 4, olha lá 3, 7, 11, 15, 19, bandeira cheguei até o final da contagem.

Só que aí a gente tem um pequeno problema, que é o seguinte, se eu colocar um valor maior eu quero contar de 10 à 0 voltando de um, sem problema nenhum não é? Quando eu clico em contar ele já mostra a bandeira, não funcionou direito e também pode ser esse o motivo de você ter chegado até aqui, basicamente o que eu vou fazer é o seguinte, seguinte essa contagem aqui só funciona se esse valor de cima for menor do que o valor de baixo, então eu vou fazer o seguinte, (i < f) então esse código faz sentido, vou pegar ele e vou arrastar pra cá pra dentro vou dar uma ajeitada na indentação, presta atenção na indentação do seu código, se não eu vou ter que fazer outro código que é o código de contar do maior para o menor então vamos fazer o seguinte, for (let c = i; começando no início que é o número maior c >=f; c -= p) { e aqui eu vou escrever a mesma coisa daqui de cima res. innerHTML += '$(c) \u{1F449} cara, vai por mim, enquanto você está aprendendo não tenta ganhar tempo, tenta ganhar experiência, digita de novo exatamente como estou fazendo aqui e você está vendo acontecer e aqui no final eu vou colocar o mesmo res.

innerHTML += aqui na verdade, se eu tenho esse comando aqui e eu tenho esse comando exatamente igual aqui eu posso pegar esse comando e colocar aqui fora uma vez só, eu posso até tirar esse aqui, fica mais inteligente inclusive. Então, se o i for menor do que f eu vou fazer essa contagem crescente, vou até colocar aqui um comentário, "Contagem crescente" aqui embaixo vou fazer uma "Contagem regressiva" comente sempre os seus códigos a gente já aprendeu isso também durante as aulas. Vou salvar, vamos testar agora, primeiro vamos fazer a contagem de 1 até 10 indo de 2 em 2 okay, funcionou.

Agora eu quero ir de 100 até 10 voltando 5 em 5, olha lá, 100 até 10 voltando de 5 em 5. Tudo funcionando aqui pra mim e se por acaso eu tirar um valor "Faltam dados" ok e não está funcionando, outra coisa se eu colocar aqui faltam dados o ideal seria eu limpar isso daqui, então no faltam dados eu vou fazer um res. innerHTML = "Impossível contar".

Vamos ver se está funcionando agora, vamos atualizar, faço uma contagem de 1 até 100 pulando de 10 em 10 ele faz a contagem e se por acaso eu eliminar um deles, mando contar "Faltam dados" e está aqui "Impossível contar" . Vamos inverter isso daqui, eu quero primeiro mostrar esse código e depois o alerta, salvando, vamos atualizar, vamos fazer conta 10 até 0 voltando de 1 em 1, contar. Se eu a pagar um desses, ele não tá fazendo antes, mas tudo bem o teve impossível contar ele ele fez um negócio chamado içamento, que não faz parte do nosso curso, mas infelizmente não deu pra fazer, mas na verdade funcionou ele coloca que é impossível contar e mostra pra mim.

Na verdade eu possa tirar esse alerta, colocar ele como comentário vamos ver se fica legal, de 1 até 100, calma que eu não salvei, tem que salvar e atualizar. 1 até 100, okay, "Impossível contar" ,agora, de 1 em 1. Outro problema que eu vou ter é, por exemplo, se eu mandar contar de 1 a 10 passo 0 ele vai ficar travado, já travou meu navegador, ele já vai reclamar, enquanto ele não reclama eu vou resolver esse problema que se o passo for 0 if (p == 0) ou if (p <= 0) ,melhor dizendo, eu vou colocar aqui window.

alert ('Passo inválido! está vendo? Já travou, vamos sair da página por que ele não está respondendo, vou colocar aqui ('Passo inválido!

Considerando PASSO 1') inválido e eu vou fazer com que p passe a valer 1. Se o passo for menor ou igual, se for 0 ou negativo ele vai considerar passo 1. Vamos salvar e vamos fazer um teste, de 1 até 10, passo 1 ele vai fazer de 1 até 10 passo 1, se por acaso eu colocar passo 0 ele vai mostrar "Passo inválido!

Considerando PASSO 1" e ele faz a contagem, vou colocar de 10 até 15 passo 0, "Considerando PASSO 1" olha lá, de 10 até 15 passo 1. Foi o que eu consegui fazer aqui, na verdade eu poderia dar um erro também exatamente como eu fiz aqui o "Impossível contar" , mas eu considerei diretamente aqui. Outra coisa que vou fazer é quebrar a linha entre o contando e a contagem, é só colocar aqui dentro <br> que é o break row em HTML, já que eu estou trabalhando com o innerHTML e não com o innerText, vamos atualizar, vamos colocar aqui de 1 à 20, pulando de 3 em 3 ele fez, 1 até 20 pulando de 3 em 3.

Então essa é a resolução do nosso exercício. Espero que você tenha entendido o código está tudo aqui, mas o ideal é que você faça o exercício, não entra nessa de você achar que "Eu assisti ele fazendo, eu já sei fazer. " e na verdade essa solução que está aparecendo aqui do lado não é a única solução correta, se você fez diferente e funcionou, parabéns você está no caminho certo.

E se por acaso você está pensando de "Espera aí, meu código não mostrou erro, então o código está certo. " Nem sempre, o JavaScript ele tenta evitar o máximo de erro possível durante a navegação, o que a gente já considera que se já está no navegador e já está em distribuição na web você não vai mostrar um erro para o usuário durante a execução do seu Script, então olha sempre o seu navegador, clique com o botão direito inspecionar e vê se na inspeção do código aconteceu algum problema. Então é isso pequeno gafanhoto!

Chegamos ao final da resolução de mais um exercício, espero sinceramente que você tenha conseguido fazer e não se esquece faz, não considera que só porque você entendeu eu fazendo está certo e você já pode passar o próximo passo, faz na sua casa porque os erros vão fazer você aprender pra caramba. Espero sinceramente que você tenha gostado, espero sinceramente que você mostre para as pessoas esse vídeo, compartilhar nas redes sociais, coloca no seu grupo do Whatapp, seu grupo do Facebook, a gente sempre pede isso no final de cada vídeo. E a sua tarefa ainda não acabou, existe ainda a resolução de mais exercício, então a gente se vê no próximo vídeo pra resolução de mais um desses desafios.

Um grande abraço, boas práticas só faça o próximo exercício se você fez esse e a gente se vê no próximo vídeo até lá!