WEBVTT 00:00:01.273 --> 00:00:04.238 Estamos de regreso con un programa que imprime el arreglo de mis amigos. 00:00:04.238 --> 00:00:07.007 Pero hay algo en esto que realmente me molesta. 00:00:07.007 --> 00:00:11.295 Cada vez que añado un nuevo amigo a mi arreglo, tengo que añadir un comando "text" aquí abajo. 00:00:11.295 --> 00:00:13.378 Digamos que añado a "Winston". 00:00:13.378 --> 00:00:15.211 Bueno, no se muestra automáticamente. 00:00:15.211 --> 00:00:23.130 Si quiero mostrarlo, tengo que ir aquí y escribir "text(myFriends[3]" , luego cambiar la posición de "y" y entonces vemos a "Winston". NOTE Paragraph 00:00:23.130 --> 00:00:24.852 Eso es mucho trabajo. 00:00:24.852 --> 00:00:31.687 Yo quisiera que cada vez que añado a alguien a mi arreglo se ejecute el comando "text" automáticamente. 00:00:31.687 --> 00:00:34.736 Bueno, ¿recuerdas cuando aprendimos de ciclos? 00:00:34.736 --> 00:00:38.378 Usar ciclos es una gran manera de repetir la misma porción de código muchas veces en una fila. 00:00:38.378 --> 00:00:43.273 Como si quisiéramos tener un montón de árboles en una fila o un montón de globos. 00:00:43.273 --> 00:00:49.628 Bueno, pues los ciclos también son una solución para correr una porción de código para cada elemento de un arreglo. 00:00:49.628 --> 00:00:57.068 De hecho, usarás un ciclo casi siempre que uses arreglos. Funcionan muy bien juntos. 00:00:57.068 --> 00:01:03.736 Así que para mostrarte lo que quiero decir, usemos un ciclo para desplegar los nombres de mis amigos, en lugar de tener todos estos comandos de texto. 00:01:03.736 --> 00:01:07.795 Así que empezaremos con las tres preguntas que siempre nos hacemos cuando queremos usar un ciclo. 00:01:07.795 --> 00:01:13.178 Primera, ¿qué es lo que quiero repetir? Bueno, revisemos aquí. ¿Qué es lo que se está repitiendo? El comando "text". 00:01:13.178 --> 00:01:26.069 ¿Qué es lo que quiero cambiar cada vez? Bueno, déjenme ver qué es diferente. La posición de "y" y el índice, ¿cierto? Así que lo que queremos cambiar es el número de amigo y la posición de "y". 00:01:26.069 --> 00:01:33.270 ¿Hasta cuándo quiero repetir? Bueno, queremos repetir hasta que no haya más amigos. 00:01:33.270 --> 00:01:37.440 Así que ahora sabemos lo que queremos, y podemos hacer el ciclo. 00:01:37.440 --> 00:01:44.378 Empezaremos con una variable que será un contador, para llevar un seguimiento de dónde estamos en el ciclo. Así que digamos "var friendNum = 0;" 00:01:44.378 --> 00:01:50.471 Vamos a empezar con 0 porque recuerden que 0 es el primer elemento del arrego, no 1. 00:01:50.548 --> 00:01:57.766 Luego tenemos nuestro ciclo "while". Así que diremos "while(friendNum < myFriends.lenght)". (Mientras la variable "friendNum" sea menor que "myFriends.lenght"). 00:01:57.766 --> 00:02:04.173 Así que vamos a comparar el contador actual con el total de elementos del arreglo. 00:02:04.173 --> 00:02:06.988 Y es dentro del ciclo, donde usamos el comando "text". 00:02:06.988 --> 00:02:14.590 Así que decimos "text(myFriends[" y aquí, en lugar de un número, ponemos la variable "friendNum" porque "friendNum" representa el elemento actual. 00:02:14.590 --> 00:02:17.961 Y luego voy a poner esta posición por ahora. 00:02:17.961 --> 00:02:25.710 Aquí nos marca un error de ciclo infinito porque en realidad no hemos cambiado nada en "friendNum". 00:02:25.710 --> 00:02:33.550 Recuerda, necesitamos incrementar "friendNum" cada vez, de otra manera el ciclo correrá de manera indefinida porque la condición siempre será verdadera. 00:02:33.550 --> 00:02:38.431 Veo que algo pasa. Voy a poner comentarios en el código anterior. Para que pueda ver realmente qué está pasando. 00:02:38.431 --> 00:02:43.607 Lo que tenemos aquí es que hemos mostrado todos los nombres, pero están unos encima de otros. 00:02:43.607 --> 00:02:45.706 Así que tenemos que cambiar la posición de "y". 00:02:45.706 --> 00:02:50.211 Digamos "friendNum" multiplicado por 30. 00:02:50.211 --> 00:02:55.129 Ok, eso está bien, pero "Sophia" está fuera de la pantalla, y "Sophia" no va a estar muy contenta si se da cuenta de esto. 00:02:55.129 --> 00:02:59.628 Así que sumemos 30 a esto. Ahora todos están recorridos en 30. 00:02:59.628 --> 00:03:04.294 ¡Hermoso! Ahora puedes ver que tenemos un ciclo que despliega nuestro arreglo. 00:03:04.294 --> 00:03:13.569 Y eso significa que si añadimos más personas como "OhNoes Guy", o tal vez a "Sal", si lo añado a mi arreglo entonces "Sal" va a ser mi amigo. ¡Impresionante! Ahora él es mi amigo. 00:03:13.569 --> 00:03:21.271 Y puedes ver que automáticamente se muestran los amigos nuevos, porque siempre se recorre todo el arreglo. 00:03:21.271 --> 00:03:24.296 Así que podemos borrar nuestro código anterior. Ya no lo necesitamos. 00:03:24.296 --> 00:03:28.237 Y vamos a recorrer el código y revisar lo que hace. 00:03:28.237 --> 00:03:31.628 Comenzamos con "friendNum" igual a cero. 00:03:31.628 --> 00:03:34.673 Verificamos si "friendNum" es menor que la longitud actual de arreglo. 00:03:34.673 --> 00:03:37.841 Así que sabemos que cero es menor que 6. Eso es verdad. 00:03:37.841 --> 00:03:42.202 Entonces vamos aquí dentro y decimos que imprima el elemento "friendNum" del arreglo "myFriends" 00:03:42.202 --> 00:03:44.294 Éste será cero, la primera vez. 00:03:44.294 --> 00:03:47.295 Y luego será igual a 30 más cero por 30. 00:03:47.295 --> 00:03:53.712 Así que despliega "Sophia" en 10 y 30. Es lo que hace. 00:03:53.712 --> 00:03:56.295 Y luego "friendNum++". Así que ahora "friendNum" es 1. 00:03:56.295 --> 00:04:00.241 Y luego regresa al principio y dice: "Ok, ¿1 es menor que 'myFriends.lenght'? Sí, sí lo es". 00:04:00.241 --> 00:04:02.458 Y continúa, continúa y continúa. 00:04:02.458 --> 00:04:10.944 Y finalmente llegamos a "Sal". Recuerda que "Sal" es el sexto elemento en el arreglo, pero su índice es 5, porque empezamos en cero. 00:04:10.944 --> 00:04:13.296 Entonces, ¿cinco es menor que seis? Sí. 00:04:13.296 --> 00:04:15.462 Así que despliega "myFriends" índice 5. 00:04:15.462 --> 00:04:21.628 Y luego esto es seis y decimos: "¿seis es menor que seis? No. Es igual. 00:04:21.628 --> 00:04:25.440 Entonces esto es falso. Así que nunca desplegará el sexto elemento, 00:04:25.440 --> 00:04:29.272 lo cual es bueno porque no hay nada en el índice seis. 00:04:29.272 --> 00:04:32.772 Hay un sexto elemento, pero no hay nada en el índice seis. 00:04:32.772 --> 00:04:38.570 Eso puede ser realmente confuso, el hecho de que haya un cero y un uno y todo eso, pero podrás manejarlo. 00:04:38.570 --> 00:04:41.402 Muy bien, éste es nuestro ciclo. 00:04:41.402 --> 00:04:45.045 Ahora, si quieres puedes usar un ciclo "for" si es que prefieres los ciclos "for". 00:04:45.045 --> 00:04:52.212 Para usar un ciclo "for", escribiremos "for" y luego, "var friendNum = 0;" y luego tenemos nuestra condición 00:04:52.212 --> 00:04:57.237 "friendNum < myFriend.lenght", 00:04:57.237 --> 00:05:01.672 y luego escribimos nuestro incremento "friendNum++". 00:05:01.672 --> 00:05:06.711 Y luego dentro del ciclo "for" ponemos esta línea de código aquí. 00:05:06.711 --> 00:05:09.711 Y sólo cambiaré la "x" para que puedas ver 00:05:09.711 --> 00:05:20.581 que hace exactamente lo mismo. Así que tú decides cuál ciclo usar, el punto es que uses un ciclo con tu arreglo, porque eso te hará muy poderoso.