1
00:00:01,686 --> 00:00:04,237
Uma Gema, uma gema muito bonita!
2
00:00:04,237 --> 00:00:08,275
Mas sabe o que seria melhor que uma única
gema, uma fila de gemas!
3
00:00:08,275 --> 00:00:12,562
E claro, agora já sabemos que a melhor
maneira para fazer isso é usando o for.
4
00:00:12,562 --> 00:00:16,162
Então, vamos usar um laço para
desenhar 12 gemas em fila.
5
00:00:16,162 --> 00:00:19,523
Atravessando a tela da
esquerda para a direita.
6
00:00:19,523 --> 00:00:22,304
Desse jeito.
Então isso é um
7
00:00:22,304 --> 00:00:31,186
for (var i = 0; i < 12; i++)
8
00:00:31,186 --> 00:00:36,429
E vamos pegar essa linha
e colocar aqui dentro.
9
00:00:36,429 --> 00:00:40,305
Agora temos 12 gemas, mas estão
colocadas uma sobre a outra.
10
00:00:40,305 --> 00:00:43,401
Lembre-se, queremos que
elas atravessem a tela.
11
00:00:43,401 --> 00:00:45,941
Para isso precisamos ir modificando o x,
12
00:00:45,941 --> 00:00:49,524
que agora é 36, mas deve ser
diferente a cada vez.
13
00:00:49,524 --> 00:00:51,859
Isso significa que ele deve depender de i.
14
00:00:51,859 --> 00:00:56,329
Logo, podemos simplesmente
dizer, i vezes 36.
15
00:00:56,329 --> 00:01:02,687
Assim o primeiro é 0, e então 36,
e então 72, e etc.
16
00:01:02,687 --> 00:01:04,575
Agora temos uma fila de gemas.
17
00:01:04,575 --> 00:01:07,997
Isso me lembra aquelas cenas dos
filmes de Indiana Jones ou Aladin
18
00:01:07,997 --> 00:01:11,306
onde o heroi descobre que o tesouro
escondido está repleto de gemas
19
00:01:11,306 --> 00:01:13,732
mas geralmente eles encontram
mais gemas que isso.
20
00:01:13,732 --> 00:01:17,306
Não só uma fila, mas uma pilha de gemas!
21
00:01:17,306 --> 00:01:21,609
como podemos fazer com que as gemas
22
00:01:21,609 --> 00:01:23,956
também desçam pela tela?
23
00:01:24,806 --> 00:01:30,639
Bem, podemos começar repetindo o
laço, apenas copiando e colando
24
00:01:30,639 --> 00:01:34,565
e alterar o seu y em cada cópia.
25
00:01:34,565 --> 00:01:37,688
Assim o alteraremos para 60, depois 90.
26
00:01:37,688 --> 00:01:41,428
Agora temos 3 filas de gemas, muito bom.
27
00:01:42,218 --> 00:01:45,495
Mas isso está ficando chato,
pois tudo que fazemos é
28
00:01:45,495 --> 00:01:49,193
copiar e colar, mais uma
pequena alteração.
29
00:01:49,193 --> 00:01:52,859
Antes, quando percebíamos que estávamos
escrevendo código repetitivo assim
30
00:01:52,859 --> 00:01:57,025
tínhamos aquela sensação, "Ah,
talvez se usássemos um for aqui"
31
00:01:57,025 --> 00:01:58,607
Mas já estamos usando um laço for
32
00:01:58,607 --> 00:02:03,854
então qual a solução para evitar isso,
esse copiar e colar repetitivo?
33
00:02:03,854 --> 00:02:09,518
É isso que chamamos de "laços for
aninhados" - Um laço dentro do outro.
34
00:02:09,518 --> 00:02:12,132
Então teremos que fazer um laço por fora,
35
00:02:12,132 --> 00:02:14,851
isso é o que fará com que
elas desçam pela tela,
36
00:02:14,851 --> 00:02:19,234
enquanto nosso for interno cuidará para
elas façam o que já estão fazendo,
37
00:02:19,234 --> 00:02:21,977
que é se enfilerar da esquerda
para a direita.
38
00:02:21,977 --> 00:02:24,006
Deixe-me mostrar o que eu quis dizer.
39
00:02:24,006 --> 00:02:29,851
for - usaremos uma variável diferente
dessa vez, chamada j, pois já usamos i
40
00:02:29,851 --> 00:02:37,274
for (var j = 0; j < 13; j++)
41
00:02:37,524 --> 00:02:41,999
Esse será nosso for externo, que faz
com que as gemas desçam.
42
00:02:41,999 --> 00:02:48,237
então, pegaremos nosso antigo for e
colocaremos aqui dentro
43
00:02:48,237 --> 00:02:52,374
corrigindo a indentação, vamos
apagar esses outros.
44
00:02:53,274 --> 00:02:59,109
O que conseguimos agora é todas
as filas sobrepostas.
45
00:02:59,109 --> 00:03:01,969
Então precisamos alterar o y, certo?
46
00:03:01,969 --> 00:03:04,309
É o que estávamos alterando
antes ao copiar e colar,
47
00:03:04,309 --> 00:03:06,108
e agora Y é sempre 90.
48
00:03:06,108 --> 00:03:09,440
Queremos que ele seja
diferente para cada fila.
49
00:03:09,440 --> 00:03:16,188
Da mesma forma que x depende de i,
queremos que y dependa de j.
50
00:03:16,188 --> 00:03:24,663
Podemos tentar algo como,
talvez, j vezes 30.
51
00:03:26,433 --> 00:03:28,864
Quantas gemas! Deu certo!
52
00:03:29,544 --> 00:03:31,976
Vamos examinar de novo
como o código faz isso.
53
00:03:31,986 --> 00:03:38,340
O laço externo cria a variável j
e a incrementa até 13.
54
00:03:38,340 --> 00:03:44,340
Em cada execução, ele roda o laço interno.
55
00:03:44,340 --> 00:03:48,673
O laço interno cria a variável i,
que vai até 12.
56
00:03:48,673 --> 00:03:55,358
Para cada execução do laço interno, surge
uma imagem em (x,y), que depende de i e j.
57
00:03:55,358 --> 00:03:59,607
Por isso o i muda mais vezes que o j.
58
00:03:59,607 --> 00:04:05,238
Para entender isso ainda melhor, vamos
visualizar os valores de i e j.
59
00:04:05,238 --> 00:04:09,277
Então vou comentar a imagem,
60
00:04:09,277 --> 00:04:12,027
definir uma cor,
61
00:04:12,027 --> 00:04:16,796
e usar o comando text para mostrar
os valores de j
62
00:04:16,796 --> 00:04:22,025
e então vou destacar isso aqui.
63
00:04:22,025 --> 00:04:26,009
Agora podemos ver j indo de 0 a 12.
64
00:04:26,009 --> 00:04:32,019
Basicamente, é onde nossas filas de
gemas estão posicionadas.
65
00:04:32,019 --> 00:04:35,684
E agora fazermos o mesmo com
i para ver como ele muda
66
00:04:35,684 --> 00:04:43,066
Para i vamos escolher uma cor diferente.
67
00:04:43,066 --> 00:04:46,475
Vamos colocar o i aqui.
68
00:04:46,475 --> 00:04:50,271
E alterar seu x para que
ele atravesse a tela.
69
00:04:50,271 --> 00:04:54,688
Faremos o mesmo com y.
70
00:04:54,688 --> 00:04:59,561
Agora vemos que i vai de 0 a 11.
71
00:04:59,561 --> 00:05:04,686
Como eu estava dizendo, o i muda
mais frequentemente
72
00:05:04,686 --> 00:05:08,778
E essa linha de código é executada
mais vezes que essa
73
00:05:08,778 --> 00:05:13,855
Porque essa linha de código é executada
para cada execução do laço interno
74
00:05:13,855 --> 00:05:19,527
Enquanto essa outra é executada apenas
quando o laço externo executa.
75
00:05:19,527 --> 00:05:22,140
Essa visualização do i e do j,
76
00:05:22,140 --> 00:05:26,973
ajuda a entender melhor o funcionamento
do for aninhado.
77
00:05:26,973 --> 00:05:30,475
Voltemos às gemas, porque
é mais divertido!
78
00:05:30,475 --> 00:05:34,066
Voce pode fazer muitas coisas com
laços for aninhados
79
00:05:34,066 --> 00:05:36,592
Basta pensar em quantas
coisas no mundo que
80
00:05:36,602 --> 00:05:40,519
se parecem com uma matriz bidimensional,
como um tabuleiro de xadrez, um edredon,
81
00:05:40,529 --> 00:05:44,564
as estrelas na bandeira dos EUA,
mozaicos e papéis de parede
82
00:05:44,564 --> 00:05:47,462
Brinque um pouco com o código,
para aquecer a sua imaginação,
83
00:05:47,462 --> 00:05:49,806
por exemplo, alterando a imagem.
84
00:05:49,806 --> 00:05:53,796
Começarei mudando de gemas para corações!
85
00:05:53,796 --> 00:05:57,366
Para te mostrar o quanto eu gosto de
laços for aninhados!
86
00:05:57,496 --> 00:06:01,496
Traduzido por [João Pereira Júnior]
Revisado por [Fernando dos Reis]