Exercícios JavaScript (Parte 7) - Curso JavaScript

Chegamos a mais uma aula de exercícios. Mas, antes responda essas perguntas para você mesmo. Você já aprendeu a utilizar direito a extensão Watch in Chrome dentro do Visual Studio Code?

A gente está quase no final do curso, você tem que aprender a usar essa extensão, porque ela é muito útil. E, além do Watch in Chrome, você já aprendeu a usar o Modo de Depuração do Visual Studio Code ? Porque, na verdade, as mensagens de erro acabam sendo um pouco difíceis de encontrar.

Então, é muito importante você saber o modo depuração, o uso do inspecionar dentro do navegador quando estiver fazendo um projeto da web, como é esse que você vai ver daqui a pouco. E por fim, você já aprendeu, já treinou bastante a manipulação de arrays e a criação de fuctions? Isso tudo é muito importante para o encerramento do seu módulo básico do Curso de JavaScript Tudo isso que a gente viu até o momento, é sim, o módulo básico.

Só que a gente deu uma caprichada e vimos muitos conceitos. E agora, nessa reta final, a gente está prestes a resolver o nosso último exercício, mas eu quero te pedir o seguinte: que esse não seja o seu último exercício. Esse foi o último exercício planejado pela gente, mas que você possa praticar, criar suas próprias situações, resolver essas situações, porque é assim que se torna um programador.

Vamos para o último exercício desse módulo básico Olá, pequeno gafanhoto! Seja bem-vindo a mais um vídeo do seu Curso em Vídeo de JavaScript totalmente patrocinado pelo Google. O meu nome é Gustavo Guanabara, eu sou professor.

E agora, chegou a hora da gente resolver o nosso último exercício. Logo, a gente vai ver funcionando e você vai começar a ver como a gente solucionou esse problema. A resolução de exercícios é algo muito importante, muito valioso quando a gente está aprendendo a programar.

Ainda mais uma linguagem tão importante como JavaScript, que a gente passou vários vídeos estudando. É um curso bem completo. São os primeiros passos, é bem verdade.

Mas a gente foi bem longe, aprendeu muita coisa e para colocar em prática para não perder o costume, a gente vai utilizar aquele mesmo modelo que a gente criou de HTML, CSS e JavaScript. Três arquivos separados para você poder aprender como trabalhar separadamente com um conjunto de dados. Com um conjunto de arquivos, na verdade.

Esse modelo é composto de várias áreas, a área de cabeçalho, a área de cor, duas divs, um footer. Enfim, você já fez isso várias vezes. Então, acho que já está mais do que preparado, mais do que preparada para enfrentar esse último desafio.

E na verdade, ele nem é tão difícil assim. Mas, ele vai acabar juntando muitas coisas que a gente viu durante todas essas aulas da primeira parte do curso de JavaScript que a gente criou para você. E antes de nós começarmos a resolver esse problema, eu vou abrir o Chrome e vou colocar esse exercício para funcionar.

Então, vamos lá! O exercício que eu planejei para a gente poder exercitar o uso de arrays e o uso de fuctions, foi esse que está rodando aqui do lado. Basicamente, ele está solicitando um número entre 1 e 100.

Eu vou adicionando estes números, por exemplo, um número de 1 a 100. . .

7. Quando clicar em "Adicionar". .

. "O valor 7 foi adicionado". Ele foi adicionado aqui, visualmente e também em um array que está na memória do seu navegador.

Então, aqui você pode adicionar, por exemplo, 6. . .

9. Ele está me dando um retorno, um feedback. Olhe, 1.

. . 2.

Vamos tentar adicionar um valor que já está aqui, por exemplo, 9. Quando adicionar, ele vai dizer: " Valor inválido ou já encontrado na lista". Uma outra coisa que é valor inválido.

. . Entre 1 e 100, eu vou botar 222.

"Valor inválido". Ele não está adicionando aqui e no array. Se eu deixar a caixa vazia, a mesma mensagem.

Certo? Já adicionei esses valores. Adicionei um, dois, três, quatro, cinco valores.

Quando eu clicar em finalizar. . .

"Temos ao todo 5 números cadastrados" " O maior valor informado foi 9. " Realmente esse é o maior. " O menor valor informado foi 1" Realmente, o 1 está aqui.

"Somando todos os valores, temos 25". Pode fazer o seu trabalho de casa e somar " A média dos valores é 5". Se eu somar todos esses e dividir por 5, que é o número de elementos, eu tenho a média 5.

Se, por acaso, eu adicionar um outro valor, por exemplo, vou adicionar o 8, que não existe. Quando clicar em "Adicionar". .

. Viu? Já sumiu o resultado, porque aquele total que eu tinha feito era o total com aqueles cinco valores.

Agora, são seis valores. Vou adicionar o 4 também. (O 4 já está?

Não). Adicionei o 4 também. Agora, eu tenho sete valores.

Então, está lá. " Temos 7 números" . " O maior valor foi 9".

" O menor foi 1". A soma de todos os valores foi 37". " A média é 5,28".

Feito. Analisando tudo. Outra coisa que eu vou fazer é, por exemplo, quando eu executar esse programa e se eu não adicionar ninguém.

. . "Adicionar", não adicionei.

E eu tento finalizar, ele me diz: "Adicione valores antes de finalizar". Então, esse meu programa, além de fazer alguns cálculos, ele está validando os valores e as atitudes que o usuário está tendo com a aplicação. Então, a sua missão a partir de agora, é fazer esse exercício que está aparecendo aqui do meu lado funcionar.

Viu exercício funcionando? Você é capaz de fazê-lo, não é? Pois, então, vou recomendar o seguinte: pause esse vídeo agora e tente fazer isso na sua casa.

Se você não conseguir fazer todas as funcionalidades, não tem problema. Eu vou te mostrar, daqui a pouco, como a gente começa a resolução desse desafio, mas é muito importante que você tente fazer e não apenas copie a minha solução. Quando a gente copia uma solução, a gente treina, mas a gente não aprende como é pra aprender.

Então, tenta fazer na sua casa. Se por acaso, você não conseguir, dê uma olhada na solução e depois você fecha e tenta fazer a sua própria solução. Esse é o modo que demora mais, mas é o método que você mais aprende, pode confiar em mim.

Pausa o seu vídeo agora e tenta fazer sua solução. Agora, se você já tentou e está precisando, realmente, de uma mãozinha, não tem problema. Abre o Visual Studio Code, poque eu vou fazer passo a passo contigo para deixar a primeira parte pronta desse exercício.

Já estou com o Visual Studio Code aberto, vamos criar a aula 16, exercício. Botão direito, new folder ou clicar aqui em cima para criar um folder novo, esse aqui, new folder. E eu vou botar "aula 16ex".

É o último desafio. Aqui na aula 14ex, eu tenho a pasta de modelo, está vendo? Vou clicar, o modelo está azul, Ctrl+C ou no Command + C.

Vem na aula 16, Ctrl+V ou no Command + V. Bom, a gente já fez exercício 17. Vamos agora, fazer o exercício 18.

Cliquei em modelo, Ctrl+C, Ctrl+V para ele criar o modelo 1, vou clicar com o botão direito. . .

"Renomear", vou fazer o exercício 018 Já estou com o exercício 18 criado. Tem o estilo. css, tem um modelo.

html e tem o script. js Vou abrir os três arquivos, porque eu vou precisar deles. Inclusive, do CSS também.

Então, eu tenho CSS, HTML e JavaScript Vou botar o JavaScript no final, é só arrastar que você organiza. Então, vou fechar aqui. E, basicamente, nesse modelo.

html. . .

abra o HTML, aperte Ctrl+P e nele você vai colocar o sinal de maior (>) e procurar Watch in Chrome, que eu falei no início do vídeo para você aprender a usar. Ele vai abrir o Chrome com o meu projeto. Está vendo?

Ele está com os dois abertos. Vou organizar aqui na tela, vou arrastar o Chrome pra colar aqui do lado e clicar no Visual Studio Code. Vou diminuir, porque e não há a necessidade de ficar com o navegador, fica aqui perto da minha cabeça, e nós vamos ao último exercício, que é o analisador de números.

Estou alterando aqui e ele já está fazendo aqui em cima. Na 1ª div, nós vamos pedir um número entre 1 e 100, como você viu antes. Vou colocar: " Número (entre 1 e 100): ".

A gente vai, incusive, validar isso. Vou criar um input. .

. <input type= "number" name= "fnum" id= "fnum" > Lembrando que, no JavaScript, a gente vai usar o id. O name será usado em outras funcionalidades, em outras linguagens de programação, como por exemplo, o PHP.

Também vou criar <input type= "button" value= "Adicionar"> Esse "Adicionar", vai adicionar em uma lista que eu vou colocar aqui embaixo, em um select. Então, eu vou colocar <br><select name= "flista" id= "flista" size= "6"></select> Para ele ficar alto aqui. Para ele ficar largo, já que ele não tem conteúdo nenhum, eu quero que ele fique um pouco maior aqui, para ele ficar um pouco maior, eu vou ter que vir no CSS.

Então, eu tenho um select com o id ="flista". Então, eu vou vir depois de section e botar: select#flista {width: 150px;} Eu acho que está bom, vamos salvar e eu tenho que atualizar. E, atualizando, agora eu tenho a lista bonitinha.

Vou botar mais um <br>, para ter um espaço um pouco maior, só isso. Embaixo desse, eu vou colocar outro botão, que é o botão de finalizar. Então, vou ter dois botões, o botão de adicionar, como você viu, e o botão de finalizar, que vai me mostrar os dados aqui embaixo.

Vou tirar esse "Olá! ", poque não faz sentido. E, aqui eu vou colocar o <div id= "res">, que vai ser o resultado.

Então, basicamente, essa minha interface só vai mudar se tiver alguma coisa bem especial pra gente poder configurar, mas acredito que aqui está tudo certo. Vou botar o número, ele não deixa eu digitar letras. Vou digitar um número e quando clicar em "Adicionar".

. . Você viu funcionando, vem o valor adicionado aqui.

Nesse caso, ele não vai adicionar, porque deve ser entre 1 e 100. Por exemplo, se for 55, ele adiciona. Aquele outro número daria erro Se eu deixar vazio, ele também vai ter que dar erro.

Enfim, é exatamente isso que eu quero. Quando eu clicar em finalizar, ele vai mostrar os resultados. Você viu funcionando.

Em primeiro lugar, o que nós vamos fazer é o funcionamento disso. Quando eu digitar o número aqui dentro, eu adiciono e ele vem pra cá. Então, vamos começar com essa solução.

Em primeiro lugar, a gente tem que chamar a função básica, que é a resposta ao evento do adicionar, aqui no 'Adicionar". Vamos fazer o seguinte, no "Adicionar", eu vou escrever onclick= "adicionar ( )" sem parâmetros, sem nada. É a função básica, como a gente viu anteriormente.

Então, aqui eu vou ter que ter um function adicionar( ) { }. Antes de programar o adicionar, vamos pegar nossos controles básicos. Vamos fazer um pronumero, let num = document.

getElementById ou let num = document. querySelector( ), apenas uma questão de treinar outras opções. let num = document.

querySelector('input#fnum' ) id é a hashtag e o fnum é o id que está no meu HTML. Veja, fnum é o meu id. Então, eu tenho que usar isso no JavaScript.

Já vimos bastante isso. Outra coisa que eu vou criar, é uma relação à esse aqui, que eu chamei de flista (na minha cabeça é flista). Isso, flista é o id.

Então, vamos criar. let flista = document. Ok, então eu tenho num e flista, que são esses dois.

Também vou ter essa parte de resultado aqui de baixo. Então, vou criar uma variável res, poderia usar o var, sem problemas. Estou usando o let, porque a gente já está um pouco mais avançado.

let res = document. querySelector('div#res'). Ok, já fiz os três, já tenho os três componentes básicos.

Também vou criar, de forma global, um vetor, let valores= [ ]. Vou declarar um vetor vazio e é esse vetor que eu vou usar para analisar os dados. Ok?

Então, como a gente falou, a gente vai ter a análise de dados a partir de um vetor, de um array. Então, a primeira coisa que vou fazer. .

. para eu poder adicionar aqui, eu vou ter que verificar se ele é um número. E outra coisa, o número não pode estar na lista.

Você viu na demonstração. Então, eu vou ter que adicionar aqui. Ele só vai adicionar se for um número, vou chamar de isNumero.

Posso usar o nome que eu quiser, mas isNumero é um nome legal. Vou analisar o num. value.

O valor que está dentro de número vai ser analisado para ver se ele é um número. E, ele só vai adicionar se não estiver inLista. inLista também será uma análise minha para saber se o número foi digitado está em lista.

if(isNumero(num. value)) && inLista(num. value)) { }.

Então, ele só vai adicionar se os dois forem verdade. else{ window. alert('Valor inválido ou já encontrado na lista.

') } Essa é uma característica que eu impus no nosso exercício. E para eu fazer a adição do elemento, eu vou ter que fazer duas funções, pode ser em cima, pode ser baixo. Ele faz o içamento.

Vou botar em cima. function isNumero(n){ } e eu também tenho que fazer a function inLista{ }. Eu quero saber se o número está na determinada lista.

Vou fazer o seguinte, o meu inLista vai passar o valor e a lista. A minha é a lista valores, essa aqui. Ela é o meu vetor.

Então, ele vai receber um número e uma lista Essa função recebe um parâmetro, essa recebe dois. Vamos começar verificando de forma simples, se ele é ou não um número. E essa é fácil.

Vamos verificar o seguinte, eu quero verficar se n é um número. if(Number(n) >=1 && Number(n) <= 100 { } Ele só vai aceitar valores entre 0 e 100. .

. return true. .

. Ele não vai escrever nada na tela, ele vai ter um retorno verdadeiro. else { return false }.

Esse é simples. No inLista, eu tenho o número e a lista. Vamos verificar.

Quero verificar se o número está na lista. Eu poderia usar um for para analisar. Mas, eu ensinei durante a aula de array que existe isso aqui: if(l.

indeOf(number(n)) ! = -1){ } Faltou um parêntesis aqui. Confira.

Porque esse -1? Ele indica que o valor não foi encontrado na lista Você viu isso durante a aula. Se você não viu a aula de array, clique aqui em cima.

É ula 15 do nosso curso. Então, se isso for verdade. .

. return true. .

. else { return false } Você pode ter pensado várias maneiras de fazer isso, essa é apenas uma delas. Vou colocar: window.

alert('Tudo ok'). Vamos ver se vai funcionar. Vamos salvar, ver se têm algo por salvar, algo com bolinha.

Não tem. Vamos atualizar. Vou colocar um valor, 3.

"Adicionar", "Tudo ok". E se eu botar 1? "Tudo ok".

Se eu botar aqui 0? "Valor inválido ou já encontrado na lista" Se eu botar o valor 200, também é inválido. Então, está funcionando certo.

O número 54 também pode. Então, basicamente, eu estou com as coisas preparadas. Vou tirar esse alert daqui.

Estou com tudo preparado Para a gente poder colocar o valor dentro dessa lista. E, além de colocar dentro desse select, dentro dessa lista, eu também vou colocar dentro de valores, porque é um valor necessário aqui. Só que a continuação dessa solução fica para o próximo vídeo, porque a gente ainda tem bastante coisa para fazer.

E eu quero deixar um parêntesis muito importante, que eu já falei várias vezes, na resolução de vários exercícios. Durante o desenvolvimento de qualquer solução ou de qualquer exercício ou de qualquer aplicação, nenhum programador do mundo vai conseguir fazer uma solução digitando todo o código de uma vez só. Então, você percebeu que por várias vezes, em várias situações eu fui lá, digitei uma linha, meia linha, um pedacinho de nada fui lá e testei.

Isso é muito importante, porque se a linha que eu digitei, aquela pequena linha digitei, estiver com erro, eu já corrijo agora. Eu não espero chegar lá na frente para poder perceber que o código que eu escrevi está com um erro. Então é importantíssimo, durante o desenvolvimento de qualquer coisa, que você faça tudo gradativamente, passo a passo.

E outra coisa muito importante, tem aluno que começa a fazer exercício e dá erro, ele falou assim: " Dane -se, vou continuar fazendo". Parece que se você continuar digitando os problemas vão se resolver sozinhos. Não, se você começou a digitar uma solução e ela começou a dar problemas, resolva esses problemas antes de você continuar a desenvolver.

Por incrível que possa parecer, essa é uma falha muito comum de quem está começando. Então, resolva seus problemas antes de prosseguir. E antes de prosseguir, eu também me despeço por aqui para esse vídeo.

Eu vou te incentivar a mais uma coisa. Chega a esse ponto, se você tá fazendo a solução junto comigo, tenta resolver esse problema a partir daqui. Porque a partir de agora, a gente vai começar com a parte interativa de jogar o valor dentro do select, jogar dentro do vetor, analisar se esse valor está dentro do vetor e colocar ou não, mostrando uma mensagem de erro e também as totalizações, que são necessárias para a resolução do exercício.

Nunca se esqueça, aqui embaixo, se inscreva no canal, deixe o seu like, avise seus amigos. Não se esqueça de acompanhar sempre, aqui em cima, o curso completo. E também fazer o curso de HTML e CSS, que existe no canal também para complementar o seu aprendizado.

Eu me despeço por aqui. Pratique, faça esse exercício até o final, onde a gente parou. E se por acaso, você não conseguir terminá-lo, não tem problema.

O próximo vídeo vai te ajudar com isso. Um grande abraço, boas práticas e até a próxima.