0:00:01.686,0:00:04.237
Uma Gema, uma gema muito bonita!
0:00:04.237,0:00:08.275
Mas sabe o que seria melhor que uma única [br]gema, uma fila de gemas!
0:00:08.275,0:00:12.562
E claro, agora já sabemos que a melhor [br]maneira para fazer isso é usando o for.
0:00:12.562,0:00:16.162
Então, vamos usar um laço para[br]desenhar 12 gemas em fila.
0:00:16.162,0:00:19.523
Atravessando a tela da[br]esquerda para a direita.
0:00:19.523,0:00:22.304
Desse jeito.[br]Então isso é um
0:00:22.304,0:00:31.186
for (var i = 0; i < 12; i++)
0:00:31.186,0:00:36.429
E vamos pegar essa linha[br]e colocar aqui dentro.
0:00:36.429,0:00:40.305
Agora temos 12 gemas, mas estão[br]colocadas uma sobre a outra.
0:00:40.305,0:00:43.401
Lembre-se, queremos que[br]elas atravessem a tela.
0:00:43.401,0:00:45.941
Para isso precisamos ir modificando o x,
0:00:45.941,0:00:49.524
que agora é 36, mas deve ser[br]diferente a cada vez.
0:00:49.524,0:00:51.859
Isso significa que ele deve depender de i.
0:00:51.859,0:00:56.329
Logo, podemos simplesmente [br]dizer, i vezes 36.
0:00:56.329,0:01:02.687
Assim o primeiro é 0, e então 36,[br]e então 72, e etc.
0:01:02.687,0:01:04.575
Agora temos uma fila de gemas.
0:01:04.575,0:01:07.997
Isso me lembra aquelas cenas dos [br]filmes de Indiana Jones ou Aladin
0:01:07.997,0:01:11.306
onde o heroi descobre que o tesouro[br]escondido está repleto de gemas
0:01:11.306,0:01:13.732
mas geralmente eles encontram[br]mais gemas que isso.
0:01:13.732,0:01:17.306
Não só uma fila, mas uma pilha de gemas!
0:01:17.306,0:01:21.609
como podemos fazer com que as gemas
0:01:21.609,0:01:23.956
também desçam pela tela?
0:01:24.806,0:01:30.639
Bem, podemos começar repetindo o [br]laço, apenas copiando e colando
0:01:30.639,0:01:34.565
e alterar o seu y em cada cópia.
0:01:34.565,0:01:37.688
Assim o alteraremos para 60, depois 90.
0:01:37.688,0:01:41.428
Agora temos 3 filas de gemas, muito bom.
0:01:42.218,0:01:45.495
Mas isso está ficando chato,[br]pois tudo que fazemos é
0:01:45.495,0:01:49.193
copiar e colar, mais uma[br]pequena alteração.
0:01:49.193,0:01:52.859
Antes, quando percebíamos que estávamos[br]escrevendo código repetitivo assim
0:01:52.859,0:01:57.025
tínhamos aquela sensação, "Ah, [br]talvez se usássemos um for aqui"
0:01:57.025,0:01:58.607
Mas já estamos usando um laço for
0:01:58.607,0:02:03.854
então qual a solução para evitar isso,[br]esse copiar e colar repetitivo?
0:02:03.854,0:02:09.518
É isso que chamamos de "laços for[br]aninhados" - Um laço dentro do outro.
0:02:09.518,0:02:12.132
Então teremos que fazer um laço por fora,
0:02:12.132,0:02:14.851
isso é o que fará com que[br]elas desçam pela tela,
0:02:14.851,0:02:19.234
enquanto nosso for interno cuidará para[br]elas façam o que já estão fazendo,
0:02:19.234,0:02:21.977
que é se enfilerar da esquerda[br]para a direita.
0:02:21.977,0:02:24.006
Deixe-me mostrar o que eu quis dizer.
0:02:24.006,0:02:29.851
for - usaremos uma variável diferente[br]dessa vez, chamada j, pois já usamos i
0:02:29.851,0:02:37.274
for (var j = 0; j < 13; j++)
0:02:37.524,0:02:41.999
Esse será nosso for externo, que faz [br]com que as gemas desçam.
0:02:41.999,0:02:48.237
então, pegaremos nosso antigo for e [br]colocaremos aqui dentro
0:02:48.237,0:02:52.374
corrigindo a indentação, vamos [br]apagar esses outros.
0:02:53.274,0:02:59.109
O que conseguimos agora é todas[br]as filas sobrepostas.
0:02:59.109,0:03:01.969
Então precisamos alterar o y, certo?
0:03:01.969,0:03:04.309
É o que estávamos alterando [br]antes ao copiar e colar,
0:03:04.309,0:03:06.108
e agora Y é sempre 90.
0:03:06.108,0:03:09.440
Queremos que ele seja [br]diferente para cada fila.
0:03:09.440,0:03:16.188
Da mesma forma que x depende de i,[br]queremos que y dependa de j.
0:03:16.188,0:03:24.663
Podemos tentar algo como,[br]talvez, j vezes 30.
0:03:26.433,0:03:28.864
Quantas gemas! Deu certo!
0:03:29.544,0:03:31.976
Vamos examinar de novo [br]como o código faz isso.
0:03:31.986,0:03:38.340
O laço externo cria a variável j[br]e a incrementa até 13.
0:03:38.340,0:03:44.340
Em cada execução, ele roda o laço interno.
0:03:44.340,0:03:48.673
O laço interno cria a variável i,[br]que vai até 12.
0:03:48.673,0:03:55.358
Para cada execução do laço interno, surge [br]uma imagem em (x,y), que depende de i e j.
0:03:55.358,0:03:59.607
Por isso o i muda mais vezes que o j.
0:03:59.607,0:04:05.238
Para entender isso ainda melhor, vamos [br]visualizar os valores de i e j.
0:04:05.238,0:04:09.277
Então vou comentar a imagem,
0:04:09.277,0:04:12.027
definir uma cor,
0:04:12.027,0:04:16.796
e usar o comando text para mostrar[br]os valores de j
0:04:16.796,0:04:22.025
e então vou destacar isso aqui.
0:04:22.025,0:04:26.009
Agora podemos ver j indo de 0 a 12.
0:04:26.009,0:04:32.019
Basicamente, é onde nossas filas de [br]gemas estão posicionadas.
0:04:32.019,0:04:35.684
E agora fazermos o mesmo com [br]i para ver como ele muda
0:04:35.684,0:04:43.066
Para i vamos escolher uma cor diferente.
0:04:43.066,0:04:46.475
Vamos colocar o i aqui.
0:04:46.475,0:04:50.271
E alterar seu x para que [br]ele atravesse a tela.
0:04:50.271,0:04:54.688
Faremos o mesmo com y.
0:04:54.688,0:04:59.561
Agora vemos que i vai de 0 a 11.
0:04:59.561,0:05:04.686
Como eu estava dizendo, o i muda[br]mais frequentemente
0:05:04.686,0:05:08.778
E essa linha de código é executada[br]mais vezes que essa
0:05:08.778,0:05:13.855
Porque essa linha de código é executada [br]para cada execução do laço interno
0:05:13.855,0:05:19.527
Enquanto essa outra é executada apenas[br]quando o laço externo executa.
0:05:19.527,0:05:22.140
Essa visualização do i e do j,
0:05:22.140,0:05:26.973
ajuda a entender melhor o funcionamento[br]do for aninhado.
0:05:26.973,0:05:30.475
Voltemos às gemas, porque[br]é mais divertido!
0:05:30.475,0:05:34.066
Voce pode fazer muitas coisas com[br]laços for aninhados
0:05:34.066,0:05:36.592
Basta pensar em quantas[br]coisas no mundo que
0:05:36.602,0:05:40.519
se parecem com uma matriz bidimensional, [br]como um tabuleiro de xadrez, um edredon,
0:05:40.529,0:05:44.564
as estrelas na bandeira dos EUA, [br]mozaicos e papéis de parede
0:05:44.564,0:05:47.462
Brinque um pouco com o código, [br]para aquecer a sua imaginação,
0:05:47.462,0:05:49.806
por exemplo, alterando a imagem.
0:05:49.806,0:05:53.796
Começarei mudando de gemas para corações!
0:05:53.796,0:05:57.366
Para te mostrar o quanto eu gosto de [br]laços for aninhados!
0:05:57.496,0:06:01.496
Traduzido por [João Pereira Júnior][br]Revisado por [Fernando dos Reis]