Repetições (Parte 1) - Curso JavaScript #13

E ai, completou todos os exercícios da sessão anterior? Eu espero sinceramente que sim, porque não adianta nada você e na sequência fazendo todas as aulas, todos os vídeos, só assistindo, lembra que quando você quer andar de skate ou fazer manobra de bicicleta você precisa ter a bicicleta ou skate e treinar isso, só assistir vídeo de skate e de bicicleta não te faz aprender, não é isso? Então por que você faz a mesma coisa com programação?

Então se por acaso você pulou os exercícios ou se até assistiu o vídeo mas ainda não fez volta lá, aqui em cima você tem a playlist é só clicar aqui em cima no veja mais e escolher a primeira playlist ela é sempre o curso completo e a melhor maneira de você acessar as aulas. Mas antes de começar esse vídeo a gente vai para as perguntas de sempre: você sabe mudar a cor de fundo de um site dinamicamente utilizando JavaScript? E eu não tô falando aquilo que a gente fez lá no início do curso, de pegar o site do Google e mudar a tela preto, eu tô falando do exercício que a gente fez anteriormente de que se tiver de manhã a tela fica de uma cor, se estiver de tarde fica de outra e de noite fica de outra isso é automaticamente calculado e definido pelo script.

Outra coisa você sabe em um site que não tem uma imagem, por exemplo, vamos supor que eu não coloquei lá no HTML o img, que é essa tag está aparecendo aqui, você sabe em JavaScript criaram um img e colocar uma imagem nele? A gente também aprendeu anteriormente e outra coisa, você já treinou a criação de condições simples, compostas e múltiplas? Neste vídeo a gente vai começar a falar sobre repetições e é muito importante que você entenda condição para poder fazer uma repetição.

Agora se você já fez tudo isso, essas perguntas que a gente acabou de fazer não te dá um problema nenhum? Então seja bem-vindo, seja bem-vinda a mais uma aula! Legendas: Tainá Bandeira Olá pequeno Gafanhoto, seja bem-vindo a mais uma aula do seu Curso em Vídeo de JavaScript totalmente patrocinado pelo Google.

O meu nome é Gustavo Guanabara, eu sou professor e como eu acabei de falar ali neste vídeo, a gente já viu no seu curso de JavaScript até agora o uso de comandos simples, o uso de operadores: os relacionais, os lógicos e os operadores aritméticos, aprendemos a fazer algumas contas simples, nós vimos três tipos de condições e agora nós chegamos à 13º aula onde a gente vai falar sobre: Repetições, essa é a primeira parte do assunto e nós vamos começar a aprender essas estruturas que a gente também pode chamar de: laços ou interações. Mas não se preocupa com essa questão de nomenclatura ainda não, porque é muito simples você entender, é tão simples que eu vou te explicar com uma coisa que você faz constantemente na sua vida, na nossa vida existem vários momentos em que a gente faz repetições e um dos exemplos que eu coloco aqui pra aula é por exemplo como uma pizza, comer uma pizza é uma atividade que requer repetições, vamos supor que você é guloso, você é gulosa e vai querer começa a pizza inteira pensando nisso eu já criei aqui embaixo a minha function "comer pizza", a minha function é uma função que eu faço constantemente, uma vez por mês eu como uma pizza inteira. Então vou criar uma função comer pizza pra mim, essa função ela vai ter um bloco então eu abro e fecho chaves, está vendo?

Está amarelinho aqui do lado e eu vou começar minha atividade de comer essa pizza inteira e pra começar a pizza inteira, eu tenho que fazer alguns passos: primeiro passo que eu vou fazer aqui é comer a primeira fatia, quando eu como a primeira fatia, já não está mais lá, o próximo passo da minha atividade é comer outra fatia, então ele já comeu a segunda fatia ali, vamos fazer mais um comando que a é comer mais uma fatia e assim sucessivamente até a pizza acabar. Eu vou fazer a minha função de comer a pizza é exatamente essa daqui de baixo, você percebe que a minha pizza tinha oito pedaços, então aqui embaixo eu tenho oito comandos comer pizza. Então assim a minha atividade é partir do primeiro comando até o último comando para cumprir a minha missão que foi comer essa pizza inteira e com a programação também assim a gente parte de um ponto a e vai até um ponto b, a sua tarefa na hora de programar é conseguir escrever os programas pra que você saia do ponto a e chegue ao ponto b que é o seu objetivo e para conseguir atingir os nossos objetivos, existem várias formas que a gente chama de Estruturas de Controle.

Primeira estrutura de controle, a mais simples de todas é a sequência onde eu vou desde o ponto a até o ponto b executando tarefas sequencialmente até chegar ao objetivo que foi exatamente o que aconteceu na hora de comer pizza eu coloquei um passo depois do outro várias vezes até o momento em que eu comia a pizza inteira, só que nem tudo é uma maravilha como isso daqui, às vezes existem desvios, existem possibilidades e então a gente viu lá durante a aula 12 e todos os exercícios as condições onde eu tenho um teste lógico que é representado por esse losango aqui e esse teste ele tem duas possibilidades: verdade ou falso. E de acordo com esse valor vão ser executadas tarefas específicas, você vê aqui do lado por exemplo: imagina que eu tenho uma pizza de oito pedaços mas existe um pedaço de pizza de marguerita e eu não gosto de margarita, então se a pizza não for de marguerita eu como, se não eu não como e eu consigo também chegar de um ponto a outro, nem tudo na programação é feita de uma sequência como a gente viu anteriormente, às vezes é necessário isso daqui mas o nosso assunto não é as condições, se condição é um problema pra você, você assiste as aulas anteriores, porque nessa a gente vai ver um novo tipo de estrutura de controle que são as repetições ou como eu chamei anteriormente os laços. Um laço ele começa exatamente como uma condição ele vai testar uma expressão e assim como acontecia nas expressões de condição eu tenho duas possibilidades: ou esse teste é verdadeiro ou ele é falso, só que o comportamento aqui é um pouquinho diferente.

Se essa condição, se esse teste lógico for verdade ele vai executar um bloco só que ele não vai seguir desse bloco para o ponto final que está aqui embaixo, ele vai voltar ele vai fazer um looping, ele vai fazer um laço, uma repetição. Voltando para o losango ele vai testar de novo essa condição, se essa condição for verdadeira de novo, ele vai executar tarefa e fazer outro laço como acabou de acontecer e vai testar mais uma vez, testando sendo verdadeiro ele vai executar esse bloquinho o novo e mais uma vez vai voltar e ele vai fazer isso enquanto essa condição for verdadeira, percebe na minha frase: enquanto essa condição (que é esse losango) for verdade, a partir do momento em que esse losango não for verdade, for mentira o laço é quebrado e eu sigo o meu fluxo natural, então essa estrutura daqui de cima é a nossa estrutura de laço principal, ela é a primeira que a gente sempre vê quando a gente vai estudar programação, existem outras? Existem, mas essa é a mais comum de todas.

E agora você pode estar se perguntando: "tá Guanabara como é que eu escrevo essa estrutura que você acabou de apresentar pra mim no JavaScript? " Se você já tem conhecimento em outras linguagens de programação principalmente linguagem C ou linguagem Java é exatamente da mesma maneira, lembra que quando eu li essa estrutura eu coloquei: "enquanto alguma coisa for verdade", essa palavra "enquanto" em inglês ela se escreve while, ela se diz while. Então vou colocar while e uma condição que é exatamente a condição que eu testaria que dentro desse losango, quando eu escrevo um while eu tenho que colocar um bloco, lembrando em JavaScript blocos são sinais de chaves, tudo que estiver entre chaves é um bloco, então esse bloco que está relacionado a esse enquanto vai acontecer enquanto essa condição for verdadeira, sendo ela verdadeira todo o comando que foi escrito aqui dentro vai ser executado, depois que esse bloco foi executado, chegando na chave aqui de baixo ele vai voltar pro while, ele vai voltar pro enquanto e vai testar de novo a condição, se ela for verdadeira, mais uma vez ele vai executar esse bloco e voltar.

É assim que funciona e a partir do momento em que essa condição deixa de ser verdadeira e passa a ser falsa, o fluxo desviado pelo lado de fora. Compara essa parte daqui de baixo com a parte de cima é exatamente o mesmo diagrama, é exatamente a mesma estrutura de laço mas vamos voltar a nossa história de comer pizza, comer pizza é uma repetição, a gente está colocando a pizza aqui e vamos montar a nossa estrutura da função mais uma vez, lembra que antigamente era comer fatia 8 vezes e se eu dividir essa pizza em 16 vezes? E se eu dividir essa pizza em 20 vezes?

Aquele meu algoritmo anterior, aquele meu programa anterior onde tinha comer fatia 8 vezes já não serve mais e isso sem falar que tem uma repetição de comandos desnecessária, na verdade desnecessária não, chata de fazer mas agora que você conhece a estrutura enquanto a estrutura, a estrutura while tudo vai ficar mais fácil, dá uma olhada aqui: sempre que você encontrar a palavra while, leia como enquanto, então dá uma olhada aqui: enquanto tem fatia, certo? Fiz um, teste dá uma olhada em cima tem fatia? Sim, tem fatia, então eu vou criar um bloco e dentro desse bloco eu vou colocar o comando comer fatia, então olhando aqui em cima tem fatia?

Tem, ele come uma fatia e chegando no final do bloco, ele vai fazer o nosso looping ,ele vai fazer a repetição como a gente representou aqui agora, o teste vai ser feito de novo, ainda tem fatia em cima? Tem, então ele come a fatia e volta de novo, então esse mesmo processo de repetição está acontecendo, enquanto tem fatia ele está comendo as fatias até chegar o momento em que só tem uma fatia. Vamos fazer o teste de novo enquanto tem fatia, tem fatia?

Tem uma fatia, ele vai comer a fatia e voltar de novo, pergunto mais uma vez tem fatia? Agora não tem fatia, ficou falso então ele vai sair e terminou a minha função de comer pizza. Então a primeira coisa que a gente vai fazer é, esse programa é muito mais eficiente que o anterior, eu vou colocar o anterior na tela só para você comparar, dá uma olhada na parte de cima e dá uma olhada na parte de baixo e mais importante: o de baixo só serve para eu comer oito fatias, o de cima serve para qualquer tamanho de pizza, 2 fatias, 4 fatias, 20 fatias, esse programa de cima é muito mais eficiente.

E se nesse momento você está pensando: "Ah Guanabara é só pegar o debaixo dar um CTRL+C e CTRL+V se for 20 fatias" e for por exemplo 50 fatias, você vai ter que pegar comer fatias e copiar 50 vezes, aqui em cima funciona sem alterações, para 1, para 2, para 50, pra 500 fatias. Deu para entender a utilidade de uma estrutura de repetição como essa que a gente tá acabando de ver? Eu espero sinceramente que sim mas mais uma vez eu digo não acredite em mim não, vamos abrir o nosso sistema operacional, vamos abrir o Visual Studio Code e fazer os nossos primeiros testes.

♫ Então vamos lá vamos abrir o Visual Studio Code, estamos na Aula 13 então vamos criar que os arquivos próprios para a Aula 13 olha já aqui, já tem todos os folders organizados, vamos criar uma pasta nova, cliquei aqui "Aula 13", dentro da Aula 13 vamos criar um arquivo que é o arquivo ambiente de teste, ambiente. js, já estou com o arquivo ambiente. js, primeira coisa que a gente vai fazer, vamos fazer da forma sem repetição.

Vamos fazer o seguinte aqui: console. log('Tudo bem? '), se eu executar esse comando, F8, ele escreveu "Tudo bem?

", sem problemas e agora você vem espertão e vamos fazer o seguinte: vou copiar, CTRL+C e vou colar 6 vezes, F8 de novo, olha lá 6 vezes, ele escreveu "Tudo bem? " 6 vezes, sem problema nenhum, então você vai falar assim: "ah, beleza é só copiar e colar que funciona bem" e se eu quisesse escrever "tudo bem? " 500 vezes?

Você ia ter que ficar copiando isso daqui sem necessidade, claro que eu não vou escrever 500 vezes, vamos fazer o seguinte: isso aqui são 6 vezes certo vou colocar um comentário, vou colocar esse código dentro de um comentário, lembrando */, ele não vai executar nada se apertar F8 nada vai acontecer porque eu coloquei todos os comandos como comentário, vou jogar esse código para baixo e vamos fazer um código aqui em cima para escrever "Tudo bem? " várias vezes sem precisar utilizar o CTRL+C e CTRL+V, utilizando de inteligência e da estrutura que a gente acabou de aprender, então o seguinte: eu vou criar uma variável que é um contador, esse contador vai começar com 1, é a primeira vez que eu vou escrever "Tudo bem? ", enquanto o contador for menor 6, que é 6 vezes eu abro bloco e fecho o bloco, tudo que eu escrevi aqui dentro vai acontecer enquanto isso aqui for verdade, agora eu vou colar aquele comando console.

log('Tudo bem? '), vou colocar aquele comando que está aqui embaixo só uma vez e vou fazer o seguinte aqui: c++, esse c++ significa a mesma coisa que c = c+1, a gente viu isso durante as aulas de operadores, então é basicamente ele era um, vai passar a valer 2, chegando aqui embaixo ele vai voltar o c valendo 2 é menor do que 6? Sim, ele vai escrever de novo e vai somar mais um.

E vai voltando até o c não ser menor do que 6, na verdade aqui ele vai fazer 5 vezes quer ver? Vou executar, 5 vezes, porque deu 5 vezes se eu coloquei de 1 à 6? Por que eu não coloquei menor ou igual a 6, vou colocar aqui e ele vai fazer isso até que ele faça seis vezes, F8, agora ele escreveu "Tudo bem?

" 6 vezes é só contar, esse é o laço mais simples que existe é quando você escolhe quantas vezes uma coisa vai acontecer. Aqui, lembrando: se eu quiser escrever isso aqui 500 vezes eu tenho que ficar copiando e colando isso aqui, se eu quiser 500 vezes aqui é só colocar 500 sem problema, vou executar, ele escreveu 500 vezes se você tiver um tempo para contar, está aqui embaixo, pode acreditar que tem 500 vezes escrito "Tudo bem? ", assim como se eu quiser escrever só 3 vezes .

Se você quiser você ainda pode aprimorar mais ainda essa mensagem olha, vou usar crases pra gente poder fazer a interpolação por placeholders e vou fazer o seguinte: passo e vou escrever o valor de c em um placeholder, então na hora que eu executo ele colocou: passo 1, passo 2 e passo 3 porque foram 3 passos, ele começa com 1 e vai até 3 se você quiser até 10, F8, passo 1 até passo 10 está tudo funcionando sem problema nenhum e se você quiser as 500 vezes, vou até colocar em tela cheia, vamos executar, passo 1 até o 500, está lá até o 500 aqui embaixo. Dá uma olhada e vê se isso é complicado, viu é simplesinho, isso daqui vou colocar aqui 6, esse código de cima tem a mesma funcionalidade do código de baixo, só que o código de cima é usando a cabeça, é usando técnica, o passo debaixo é usando a força bruta e se você quer ser programador, se você quer ser programadora use muito mais a cabeça do que a força bruta, fica a dica. Sendo assim essa estrutura daqui de cima que é o wille ela é classificada como estrutura de repetição com teste lógico no início, isso porque ele faz o teste sendo verdadeiro ele faz o bloco, só que existe uma outra possibilidade, existe também a possibilidade em vez de fazer o teste lógico no inicio que é testa, executa e faz looping eu posso fazer também a estrutura ao contrário, primeiro eu executo bloco e depois eu faço teste, exatamente como acabou de aparecer aqui, então ele primeiro executa o bloco depois ele faz o teste e a linha de raciocínio igual, se o teste lógico for verdadeiro ele faz o looping e executa o bloco de novo e ele vai ficar nesse looping enquanto esse teste for verdade, a partir do momento em que esse teste não é mais verdade é mentira o fluxo sai da estrutura de repetição.

Compare esse diagrama de cima com o diagrama debaixo, eles são essencialmente estruturas de repetição mas eles têm comportamentos diferentes: o bloco de cima ele primeiro testa e depois executa o bloco, aqui embaixo ele primeiro executa o bloco e depois ele testa e para fazer essa estrutura aqui debaixo é muito simples em vez de while alguma coisa você vai fazer do, "do" quer dizer "faça" então escrever do, abre e fecha o bloco faça. Esse bloco que eu acabei de desenhar aqui enquanto a condição, enquanto essa condição for verdadeira ele vai fazendo o bloco exatamente como acabou de representar aqui do lado vai ficar repetindo e a partir do momento em que aquela condição passar a ser falsa ele sai do bloco e segue sua vida normal na execução do programa. Dessa maneira essas duas estruturas que estão representadas aqui do lado são as minhas duas primeiras estruturas de repetição dentro do JavaScript, a de cima que é a while, a gente chama de estrutura de repetição com teste lógico no início a de baixo que é do wille a gente chama de estrutura de repetição com teste lógico no final e como já é de costume, antes da gente encerrar a aula vamos fazer uns testes nessa segunda estrutura também.

Então olha só, vou criar um outro comentário aqui e vou colocar o código que a gente acabou de criar aqui em cima, vou alterar esse código, esse código é: testa primeiro e executa o bloco depois, eu posso transformar isso aqui da seguinte maneira: vou tirar esse wille daqui e vou substituir por um do, isso é: faça isso tudo enquanto o contador for menor ou igual a 6, a execução ela é essencialmente a mesma coisa, os resultados são muito semelhantes e eu não vou ficar entrando em detalhes aqui, em que momento é melhor usar um ou em que momento que é melhor usar outra que existem situações específicas elas vão aparecer na sua vida, mas a gente aqui, só lembrando, está num curso introdutório então não vou entrar muito em detalhes não, vamos executar esse código aqui, executando esse código, F8 você vai ver que ele fez um passo 1até passo 6 sem problema nenhum e aqui se eu quiser só 2 vezes, executei ele fez só até 2 vezes, se eu colocar aqui 10, executei e ele fez 10 vezes. Então essencialmente (vou colocar 6 aqui) esse programa de cima, esse programa do meio e esse programa debaixo, tem basicamente a mesma funcionalidade, escrever 6 vezes uma determinada mensagem, na verdade esse debaixo aqui está "Tudo bem? ", seria passo 1 até o passo 6.

Essa aqui é a pior solução de todas quando a gente quer repetir uma coisa e essas daqui de cima pra essa funcionalidade tanto faz você escrever de um jeito ou de outro vai dar aquela que você se sentir mais à vontade mas a do meio que usa a estrutura wille é a mais encontrada dentro dos programas. ♫ Então é isso o pequeno Gafanhoto, espero que você tenha entendido as estruturas básicas de repetição mais pra frente a gente volta pra colocar isso em prática a gente vai ter exercício de estrutura de repetição aqui dentro do canal também, na verdade a gente já tem é só você assistir a playlist completa, mas faz seus experimentos dentro do ambiente, faz uns testes e com certeza você vai se acostumar de como funciona esse tipo de estrutura. Eu vou ficando por aqui, mas eu sempre vou lembrar pra você, aqui embaixo você clica para se inscrever, habilita o sininho de notificação, aqui em cima você acessa várias playlists e vários cursos que existem no nosso canal aqui do Curso em Vídeo e como eu sempre peço para você se você faz parte de um grupo da faculdade ou de um grupo de programadores dentro do Facebook qualquer rede social que você use, compartilha o link desse curso completo com a galera porque com certeza esse curso vai ajudar muita gente principalmente quem está iniciando em programação que é sempre a galera do foco aqui desse canal, eu me despeço por aqui mas eu já deixo encontro marcado para a 14ª aula onde a gente vai ver mais um tipo de estrutura de repetição, a Estrutura For.

Um grande abraço pra você continue praticando e a gente se vê no próximo vídeo, até lá!