Repetições (Parte 2) - Curso JavaScript #14

Estamos chegando há mais um vídeo do seu Curso em Vídeo de JavaScript e como é comum no início de cada aula, a gente vai fazer algumas perguntas. Em primeiro lugar, o que eu faço se eu quiser fazer uma determinada atividade acontecer várias vezes ? Se eu quiser que alguma coisa aconteça 10 vezes, eu vou ter que escrever mesmo código 10 vezes?

ou existem estruturas especiais para isso? Em segundo lugar, você sabe diferenciar o que é uma estrutura de condição e uma estrutura de repetição em uma linguagem de programação? E por falar em repetição, Você consegue dizer a diferença entre as estruturas while e do.

. while? Você sabia que elas existem e que tem diferença, sim, entre elas?

Você consegue dizer, sem olhar na internet, a diferença entre as duas? Pois, se para qualquer uma dessas perguntas, você não soube responder direito? Clique aqui em cima, veja o acesso ao curso completo, faça todos os exercícios e com certeza, mais pra frente você vai saber programar em JavaScript Agora, se você conseguiu mandar bem e responder todas as minhas perguntas, seja bem-vindo, seja bem-vinda à mais uma aula.

Legendas: Samara Affonso Olá. pequeno Gafanhoto! Tudo bem com você?

Seja bem-vindo à mais uma aula do seu Curso em Vídeo de JavaScript totalmente patrocinado pelo Google. O meu nome é Gustavo Guanabara, eu sou professor. E, nós estamos chegando à nossa 14º aula, onde a gente vai dar continuidade ao assunto repetições em JavaScript.

Essa é a segunda parte. E, eu não preciso ficar dizendo que já que essa é a segunda parte Você tem que ter assistido e feito os exercícios da parte 1. Ela está aqui em cima, é só você acessar o link do curso completo e fazer todas as aulas na sequência que a gente planejou.

Não adianta você tentar chegar no meio da festa e perguntar se está na hora de cantar parabéns. Eu tenho umas relações que só eu consigo entender. Mas, vamos dar uma relembrada no que a gente viu até aqui.

A gente viu as estruturas de controle. Em primeiro lugar, nós vimos as sequências, que são blocos executados um depois do outro, um depois do outro,independente desvio nenhum. Vai acontecer da primeira bolinha até a última bolinha.

Esses três blocos vão executar sempre. Só que como nem tudo na vida são sequências, eu apresentei para você as nossas tão queridas estruturas condicionais, que são testes lógicos que dão dois ou mais desvios. Agora, a gente tem a possibilidade de executar um bloco ou outro, nunca os dois.

A estrutura if, que está representada aqui do lado, te dá sempre uma ou duas possibilidades. A estrutura switch, que a gente viu logo em seguida, permite muitas outras oportunidades. E na aula anterior, no vídeo anterior, a gente viu as estruturas de repetição ou os laços.

A gente aprendeu que os códigos podem ser executados várias vezes. É só você olhar o desenho que acabou de ser montado aqui do lado. Teve código fazendo volta.

Esse looping, essa volta que acontece, são as estruturas que a gente diz como sendo estruturas de repetição. E a gente viu na anterior dois tipos: essa aqui, que a estrutura while ou enquanto, que faz o laço, mas testa antes. E nós temos também essa outra que está sendo montada aqui do lado que é a estrutura do.

. while, que vai fazer o bloco e testar depois. Então, a básica diferença entre o while e do.

. while, que eu perguntei a ele no início do vídeo e você me respondeu mandando muito bem, que a primeira o teste lógico é feito no início e a segunda, do. .

while, o teste lógico é feito no final. E isso nos traz à nova estrutura de repetição que a gente vai ver a partir de agora. A estrutura de repetição com variável de controle, que é representada pelo hexágono irregular.

Basicamente, neste hexágono são feitas três coisas: inicialização, um teste lógico e o incremento. Na primeira passagem, exatamente como está aqui, ele faz a inicialização e o teste lógico. Sendo esse teste lógico verdadeiro.

ele vai executar o bloco, exatamente como acabou de acontecer e nesse bloco pode ter um ou vários comandos, como a gente já viu. E feito o bloco, ele vai, automaticamente, voltar. Exatamente como a gente tinha feito nas estruturas while e do.

. while, só que dessa vez, no momento do looping, ele também vai fazer o incremento, uma das três partes que estão aqui em cima nesse hexágono irregular. O teste lógico, então, é feito mais uma vez.

E sendo verdadeiro mais uma vez esse bloco vai ser executado e o looping acontecerá novamente. Essa estrutura vai ficar acontecendo. Cada vez que voltar eu incremento e faço o teste lógico.

Quando esse teste lógico ficar falso, ele vai seguir esse caminho, que é o caminho de encerramento. Então, essa estrutura está aqui do lado é o que a gente chama de estrutura de repetição com variável de controle. E se essa explicação ficou meio confusa, é porque a gente não viu na prática.

Aguenta mais um pouquinho que a prática está vindo. E para poder praticar, a gente tem que entender como é que a gente faz desenho que a gente acabou de ver em JavaScript, já que a gente não trabalha por desenhos a gente trabalha por comandos escritos. E o comando escrito da vez é muito simples.

O comando que a gente vai utilizar, é o comando for, a estrutura for, exatamente como está representada aqui abaixo. Como eu disse anteriormente, a estrutura for tem três partes: o início (a inicialização), um teste lógico e um incremento. E, tem um bloco, que você viu: abre chave e fecha a chave.

Então, explicando mais uma vez: na primeira passagem pelo fórum, ele vai fazer a inicialização e o teste. Sendo esse teste verdadeiro, ele vai executar um bloco com quantidade de comandos que ele tiver. Inclusive, eu posso colocar dentro de um for, um while, um do.

. while, um if, um switch, eu posso colocar qualquer estrutura que a gente viu das aulas anteriores até aqui. Não existe limitação nenhuma para programação.

Uma vez executado esse bloco, ele vai voltar para cima, exatamente, como você acabou de ver na animação. Só que enquanto ele está voltando, ele vai fazer aquele incremento que está ali no final e de novo vai fazer o teste lógico. Sendo esse tecnológico verdadeiro, ele executa o bloco de novo e volta.

Nessa volta, ele faz um incremento de novo e faz o teste lógico mais uma vez. Isso vai acontecer enquanto esse teste lógico for verdadeiro. Se por acaso esse teste lógico for falso, ele vai sair da estrutura e segue se o fluxo natural de execução do nosso script.

E se ainda não ficou tão claro para você o funcionamento desse incremento, desse teste lógico, dessa inicialização, com certeza vou conseguir te provar agora. Eu vou escrever um código que é muito familiar à você, se você viu ao anterior principalmente, que é um código que utiliza a estrutura while, que é a estrutura enquanto. Comecei com var c=1.

Então, "c" recebe 1. Exatamente o que está escrito aqui do meu lado. Vou colocar um enquanto, uma estrutura enquanto e vou botar o teste lógico, c <=10.

Isto é, o "c" começa com 1. Enquanto "c" for menor ou igual a 10, ele vai fazer uma determinada coisa, vai fazer um bloco. e eu vou colocar c++.

Lembrando q que c++ significa c+ 1. O "c" que estava valendo 1, vai passar a valer 2. Vai voltar.

voltando ele testa, c >= 10? Sim. Ele vai fazer, vai virar 3 e vai voltar.

Ele vai fazer isso até passar de 10, quando ele passar de 10, ele sai. Se você ficou com dúvida nessa estrutura, é sinal de que você não assistiu à aula 13 direito. Não se esquece, volta aqui em cima a qualquer momento, acessa o link do curso completo e faça aula 13.

Ela é muito importante para você. Então você tem que ter entendido que essa estrutura está aqui do lado é uma estrutura que vai fazer esse bloco retangular acontecer dez vezes. Agora, eu vou te mostrar como é que a gente reescreve esse mesmo código só que utilizando a estrutura for.

Lembrando que for, como eu montei aqui embaixo, tem três áreas principais. A primeira área é a inicialização. E a inicialização do código de cima está ali.

Acabei de marcar pra você. var c=1. Sendo assim, a minha inicialização sendo essa, eu escrevo na linha do for, na primeira parte, o primeiro elemento é a inicialização.

Então inicializei o 'c" com o valor 1. A segunda parte do bloco é o teste lógico. Exatamente esse teste lógico aqui em cima.

c <= 10. Vou pegar esse mesmo elemento, vou escrever aqui embaixo. Então, c<=10 para a segunda parte.

A terceira parte é: o incremento. No nosso caso do código de cima, do meu incremento é o c++. Então, vou pegar exatamente esse c++ e vou escrever aqui do lado pertinho do meu braço, no for como sendo a terceira parte.

O que estou tentando explicar é que o código de cima e o código de baixo tem exatamente a mesma funcionalidade. Elas vão começar no 1 e vão terminar no 10. Então, tanto faz você escrever da maneira de cima, quanto da maneira de baixo.

E muitos programadores, eu incluído nesse grupo, preferem utilizar o tipo de estrutura de baixo para a grande maioria das vezes em que eu sei os limites das minhas execuções. Mas, você não precisa ficar acreditando 100% e nem ficar repetindo o que eu tô falando. O que você precisa é abrir o seu ambiente.

Abre o Visual Studio Code e vamos fazer os nossos testes práticos. Então, já estou aqui no nosso ambiente. Vou abrir o Visual Studio Code, ele vai abrir na tela de welcome, possa até fechar.

Já estou com o meu projeto aberto. Se você não estiver com o projeto aberto, é só você abrir Perceba que as aulas estão aqui, todos os exercícios que a gente vai fazendo durante as aulas, aula 12, aula 12 de exercícios. A gente tem bastante coisa aqui.

Se por acaso você não viu esses vídeos, em cima da minha cabeça tem um link para o curso completo. Eu nunca vou cansar de dizer isso, porque tem gente que gosta de pular as coisas e lá no final botar a culpa no aprendizado e você não fez o suficiente para conseguir aprender. Mas, botão direito, vamos criar um folder novo da aula 14.

E nessa aula 14, botão direito, new file e vou criar o ambiente. js, que és o nosso ambiente de teste Então, está lá dentro. Posso fechar aqui.

E foi isso que a gente viu, anteriormente. Vou fazer o exemplo que eu acabei de passar pra você, só que eu não vou fazer até 10. var c =1 while( c <= 5) { }.

Vimos isso na aula anterior, então não tem como dizer que você não treinou ainda Vamos escrever na tela: console. log(c). Só para ele escrever cada um deles.

E, eu tenho que fazer c++ ou c += 1 ou c = c+1. Tanto faz, eu gosto de escrever c++ que é muito mais simples de digitar. O que eu tenho que fazer?

Vou executar, vou apertar f8, nosso console vai abrir. Veja, 1, 2,3,4,5. e acabou o nosso programa.

Essa foi a maneira de escrever com o while. A gente pode fazer a mesma coisa com o do. .

while. É só pegar esse, copiar essa parte e colocar do. E, vou colocar aquela parte que estava lá em cima, aqui embaixo.

Faça enquanto c for maior ou igual à 5. Na hora de executar, ele fez a mesma coisa. Vou voltar para o while normal e então, nós vamos fazer o seguinte: daqui pra baixo, eu vou escrever o mesmo código em for.

Só que para ele não executar esse, eu vou criar um comentário de múltiplas linhas. A gente já fez isso. Então, tudo isso é comentário.

Nós vamos fazer a mesma coisa, lembre-se que o for têm três partes, a primeira, a segunda e a terceira. A primeira parte é a inicialização, essa é a minha inicialização. Vou trazê-lá para cá, vou colocar exatamente nesse bloco.

Então, já coloquei. Vou pegar a segunda parte que é essa, é o nosso teste lógico. Então, vou colocar c <= 5.

Essa última é o meu incremento e o incremento é essa parte. Então, vou colocar c++, ou seja, é mesma coisa. for(var c = 1; c<= 5; c++) { }.

Aqui dentro vai ser escrito apenas o consol. log. vou colocar: consol.

log (c). Se você analisar, aqui está a primeira linha, o teste lógico está aqui e o c++ está aqui. A única coisa que preciso mesmo adicionar dentro do bloco é o consul.

log (c). Então, esse conjunto aqui de cima tem a mesma funcionalidade desse conjunto de baixo. Vamos executar, F8.

Ele está fazendo sem problema nenhum, se você quiser aumentar pra 10, é só executar de novo. Foi de 1 até 10 Se eu quiser até 3, F8. Foi até 3.

Então, a facilidade é muito grande. Nesse exemplo, tudo o que eu colocar aqui dentro vai acontecer três vezes ou 10 vezes ou cem vezes ou mil vezes ou um milhão de vezes. Certo?

Então, você vai colocar aqui dentro o que você quer que aconteça múltiplas vezes. Essa é a nossa estrutura for. E eu poderia encerrar a aula aqui, só que eu tenho algumas coisas a mais para te mostrar.

Inclusive, uma coisa muito importante que é o modo de depuração. Me acompanhe para dentro do ambiente e você vai ver sobre o que eu estou falando. Então, o Visual Studio Code vêm com um depurador dentro.

Eu vou apagar essa parte de cima pra gente ficar só com o código que nos interessa, e vou colocar o console. log(`Vai começar. .

. `) . Eu não vou ser maluco de colocar até 1 milhão.

Vou fazer até 5. Ou melhor, até 4. Eu não preciso ter esse espaço, eu coloco por questões de organização, mas eu gosto de colocar.

E, aqui dentro vou botar: console. log(c). No final, eu vou colocar: console.

log (`FIM! `) Então, basicamente, ele vai escrever: "Vai começar". Ele vai contar até 4 e vai terminar.

Se eu executar com F8, "Vai começar". Contou de 1 à 4, terminou. Só que existe uma maneira em que gente vê passo a passo isso acontecendo.

Veja, vamos salvar tudo. Você vai clicar aqui em cima, em "Debug" e "Start Debugging". Você pode clicar aqui, ele vai abrir a nossa área de depuração.

Certo? Aqui eu tenho as variáveis, o que eu quero monitorar e tenho algumas coisas interessantes para saber. E ele abriu também, o Debug Console, o console de depuração.

Basicamente, eu vou fazer o seguinte: se você passar o mouse no lado esquerdo, você vai ver que é possível colocar bolinhas vermelhas, que são os nossos pontos de parada ou break points. Eu vou botar um break point logo aqui em cima. É só clicar e ele marca.

Está vendo? A linha 1 foi marcada. Então, o procedimento é esse.

Já fiz um break point, que você pode a qualquer momento marcar e desmarcar. Eu vou fazer o seguinte: eu tenha variável (c) ,que eu quero ficar monitorando. Para monitorar, eu irei na janela "watch", que é ficar assistindo, e vou clicar nesse sinal de mais (+).

E, ele vai me dizer: " Qual expressão você quer monitorar? ". " Eu quero monitorar a variável (c).

A variável c está " não disponível" no exato momento. Para que eu possa fazer a variável c aparecer, eu tenho que executar o meu programa. Para executar, eu vou apertar o play em verde que está aqui.

Executei. Ele vai abrir essa janela de cima, já me dando as opções: contínue e step over Para step over, aperte a tecla F10 do seu teclado. É muito mais prático.

Na verdade, nós vamos apertar aqui e o step over vai mudar o comando que está sendo executado. A bolinha vermelha marca o comando que eu criei como break point. A seta amarela indica, exatamente, onde ele vai executar.

Então, nós vamos fazer o seguinte: eu vou apertar step over( que é F10) e ele vai colocar a seta amarela. Ele vai escrever: "Vai começar". E isso vai aparecer aqui embaixo, no Debug Console.

Você pode estar, por exemplo, em algumas dessas outras abas. Você têm que vim para Debug Console e já fica com o dedo no teclado, no F10. Então, eu vou apertar o F10.

Quando eu apertar F10, ele vai aparecer aqui embaixo, onde está o mouse. Quer ver? Apertei F10.

. . "Vai começar".

A minha seta amarela veio aqui para o for. Agora, a minha variável c está como undefined, isto é, ainda não foi definida. Isso porque, eu te expliquei durante a aula, se você não prestou muita atenção assiste de novo.

Em primeiro lugar, nós vamos inicializar Olha onde cursor está piscando, c = 1. Vou apertar F10 e o "c", que era undefined, virou 1. Certo?

Agora eu vou fazer o teste, exatamente, como eu falei. Olha seta amarela acompanhando o cursor acompanhando também. c <= 4?

É só paraR o mouse em cima c que ele mostra, okay? Ou você olha em watch. Ele está valendo 1.

1<= 4? Verdade. Lembra?

Se é verdade, ele vai executar o bloco que está aqui em baixo Vou apertar F10. Ele vai escrever o valor de c na tela. Então, aqui vai aparecer 1.

Vou apertar F10. Então, já apareceu 1, e ele volta para cima. Quando ele vai fazer o looping, ele vai somar +1.

Está vendo aqui, o nosso incremento ? O c que estava valendo 1, vai passar valer 2. Quer ver?

Vou apertar F10. Passou a valer 2. Viu?

Exatamente aquilo que a gente acabou de ver. O modo depuração, que é esse inseto aqui do lado, facilita muito a execução dos nossos scripts. Principalmente, quando a gente quer ver se estão funcionando.

Próximo passo: olhar onde o cursor está piscando. Você também pode olhar aqui em cima Mas vou botar aqui no watch sempre. Vou até encolher para ficar visível.

Vou diminuir esse Call Steck também, vou deixar só o watch aqui. O c está valendo 2. 2<=4?

Verdade. Se é verdade, F10, ele vai executar e vai mostrar o c de novo. Só que dessa vez, o c está valendo 2.

Olhe lá, mostrou o 2 na tela, voltou pra cima e está prestes a somar +1 no c. O c que está valendo 2, F10, passou a valer 3. Viu como é fácil e prático?

3 <= 4? Verdade. Se é verdade, F10, ele mostra o 3.

Ele mostrou o 3 aqui embaixo no console e voltou, vai somar +1. O c que valia 3, vai passar a valer 4. F10, piscou e está valendo 4 c<=4?

Sim. "Menor ou igual", ele é igual. Verdade.

Se é verdade, ele vai escrever de novo. F10 de novo e ele escreveu 4, voltou pra cima e vai somar +1. O c que era 4, olhe onde está o mouse, vai virar 5.

Virou 5, ele vai testar de novo, c <= 4 ? Agora, infelizmente, não. O c agora, (para o mouse em cima) está valendo 5.

Viu o 5 aqui em cima? Ele está valendo 5. Então, isso se tornou um falso.

Lembra do desenho? Quando isso aqui se torna falso, ele sai. Saindo, ele vai vir para essa linha aqui, quer ver?

Apertei F10, ele veio pra essa linha e vai escrever "Fim! " F10 de novo, escreveu "FIM! ".

Meu programa acabou. Você pode apertar o stop e tudo está sendo executado. Viu como esse modo de depuração é muito útil ?

E apenas lembrando, um pequeno parêntesis, a gente já falou sobre isso anteriormente, quando você escreve um programa e não recebe mensagens de erro, é óbvio, isso é um ótimo começo. Mas, isso não garante que seu programa tá certo. Então, às vezes, o seu programa está funcionando, você não recebeu nenhuma mensagem de erro, mas ele está com um erro, ele só não está com o erro de sintaxe.

Mas, se ele está com erro de lógica, ele não vai dar erro aqui no meu console. Então, não entra nessa de: " Eu digitei e não recebi erro nenhum, mas meu programa não está funcionando. " Você não recebeu nenhum erro de sintaxe.

Você pode ter erros de lógica na sua programação. Então, é isso, meu querido, minha querida. Eu me despeço por aqui, já te deixando um convite.

Essa sessão está chegando ao fim. A gente aprendeu as estruturas de controle, já vimos como trabalhar com while, com do. .

while, com for e agora, os próximos vídeos vão ser resolução de exercícios. E têm gente que assim a a para e pensa: " se é exercício, eu posso pular. Eu quero é matéria, não quero exercício".

Pois, nunca se esqueça, você só aprende uma coisa quando você a pratica. E, é exatamente para isso que servem os próximos vídeos. Nunca se esqueça de assistir os nossos vídeos até o final.

A gente dá o maior número de informações possíveis de JavaScript. E sempre no final, a gente pede o mesmo de sempre: se inscreva no canal aqui embaixo, habilite o sininho, deixe o like, se essa aula serviu para alguma coisa na sua vida. Seja porque você não conhecia o for ou porque você não sabia do modo depuração.

E nunca se esqueça também, eu sei que você participa de um grupo do whatsapp, de um grupo de faculdade ou daquele grupo do facebook que as pessoas ficam perguntando: " Qual é a linguagem para programar? Onde têm um curso de JavaScript? Eu quero uma referência de JavaScript".

Chegou a sua hora de fazer valer tudo isso que a gente está construindo pra você. Vá nesses grupos. E sempre que uma pessoa perguntar : " Qual é a linguagem que eu devo começar?

". Coloca o link desse curso e diz assim: "aprende JavaScript com esse cara". E usa como propaganda assim: " Esse curso desse cara foi patrocinado pelo Google ".

E a gente está fazendo valer esse patrocínio. A gente se vê no próximo vídeo com muitas outras informações. Inclusive, a gente vai aprender como manipular mais controles HTML, utilizando JavaScript durante a resolução do exercício.

Esse vídeo está chegando ao fim, mas o próximo já está disponível para você assistir. Um grande abraço, boas práticas e até a próxima !