{"id":1953,"date":"2019-07-09T21:12:41","date_gmt":"2019-07-09T19:12:41","guid":{"rendered":"http:\/\/disseny-test.uoc.edu\/materials\/programacio\/?page_id=1953"},"modified":"2019-09-02T17:19:11","modified_gmt":"2019-09-02T15:19:11","slug":"2-3-1-repeticiones","status":"publish","type":"page","link":"http:\/\/disseny-test.uoc.edu\/materials\/programacio\/es\/2-3-1-repeticiones\/","title":{"rendered":"2.3.1. Repeticiones"},"content":{"rendered":"

Los ejemplos 4-5 y 4-6 del libro son bastante aclaratorios. Si hacemos varias cosas que se asemejan mucho, no hay que escribir la misma instrucci\u00f3n con peque\u00f1as variaciones muchas veces, sino que podemos usar la instrucci\u00f3n for<\/span><\/strong> para repetirla sin tener que escribirla repetida.<\/p>\n

En la instrucci\u00f3n for<\/span><\/strong> usamos una variable (que a menudo denominamos i<\/em>) que solo usaremos dentro del bloque que conforma la instrucci\u00f3n for<\/span><\/strong> y que nos servir\u00e1 para contar cu\u00e1ntas veces repetimos las instrucciones del bloque.<\/p>\n

Como pone en el libro, la instrucci\u00f3n for<\/span> <\/strong>tiene la siguiente sintaxis:<\/p>\n

for (inicio; test; incremento) {\r\n\u00a0\u00a0\u00a0\u00a0 bloque de instrucciones\r\n}<\/pre>\n
    \n
  • En el inicio<\/strong> declaramos la variable que usaremos para contar el n\u00famero de repeticiones y le daremos un valor inicial. Puede ser 1, o cualquier otro.<\/li>\n
  • En el test<\/strong> comprobaremos si hemos hecho ya todas las repeticiones que hac\u00eda falta. Para hacerlo, compararemos el valor actual de la variable contadora con un valor.<\/li>\n
  • Finalmente, en el incremento<\/strong> indicaremos qu\u00e9 n\u00famero tenemos que sumar a la variable cada vez que damos una vuelta.<\/li>\n<\/ul>\n
    As\u00ed, en el ejemplo 4-6 declaramos la variable i<\/em> y la inicializamos en 20<\/span>, repetiremos las instrucciones mientras el valor de la variable i<\/em> sea menor de 400<\/span> y en cada vuelta sumaremos 60 al valor que tenemos en la variable\u00a0i<\/em><\/span>.<\/p>\n
    for (var i = 20<\/span>; i < 400<\/span>; i += 60<\/span>) {<\/pre>\n
    Al final del ejemplo 4-6 del libro, tenemos la lista de todos los operadores de comparaci\u00f3n que podemos usar para ponerlos en el espacio de test<\/strong>. Si os fij\u00e1is, para comprobar si el contenido de una variable es igual a un determinado valor, usamos el s\u00edmbolo ==. De este modo diferenciamos la asignaci\u00f3n (guardar) de la comparaci\u00f3n (igualdad).<\/p>\n
    Los ejemplos 4-7 a 4-13 nos permiten ver usos muy parecidos de la repetici\u00f3n; vale la pena probar todos los ejemplos e intentar entender lo que hacen.<\/p>\n
    Vamos a ver un ejemplo sencillo.<\/p>\n
    Vamos a dibujar esto:<\/p>\n
    \"\"<\/p>\n
    \u00bfC\u00f3mo?, con este c\u00f3digo:<\/p>\n
    function setup() {\r\n  createCanvas(400, 400);\r\n}\r\n\r\nfunction draw() {\r\n  background(220);\r\n  ellipse(50,50,50,50);\r\n  ellipse(100,100,50,50);\r\n  ellipse(150,150,50,50);\r\n  ellipse(200,200,50,50);\r\n  ellipse(250,250,50,50);\r\n  ellipse(300,300,50,50);\r\n  ellipse(350,350,50,50);\r\n}<\/pre>\n
    Como hemos visto, si tenemos una instrucci\u00f3n repetida muchas veces quiz\u00e1s nos va bien usar un\u00a0for<\/span>. Vamos a ver qu\u00e9 diferencias hay entre los diferentes llamamientos a la funci\u00f3n ellipse()<\/span>.<\/p>\n
    Si nos fijamos, solo var\u00edan las posiciones. La primera tiene como x<\/strong> 50 y como y<\/strong> 50. La segunda 100 y 100, la tercera 150 y 150, etc.<\/p>\n
    Podemos decir que la primera x<\/strong> es 50 * 1 (50), la segunda 50 * 2 (100), la tercera 50 * 3\u00a0(150) y as\u00ed hasta llegar a la \u00faltima, que es 50 * 7 (350). Si us\u00e1ramos un for<\/span>, podr\u00edamos tener un contador que a cada paso multiplicara la posici\u00f3n inicial de los c\u00edrculos. Algo como esto:<\/p>\n
    ellipse(50*i,50*i,50,50);<\/pre>\n
    Bien, lo podemos probar, aqu\u00ed tenemos el c\u00f3digo completo:<\/p>\n
    function setup() {\r\n  createCanvas(400, 400);\r\n}\r\n\r\nfunction draw() {\r\n  background(220);\r\n  for (var i = 1; i <= 7; i++){\r\n\tellipse(50*i,50*i,50,50);\r\n  }\r\n}<\/pre>\n
    Ahora los c\u00edrculos se dibujan con el for<\/span> <\/strong>que\u00a0a cada paso incrementa en 1 el valor de la variable i<\/em>. El c\u00f3digo ha quedado mucho m\u00e1s reducido e incluso claro. M\u00e1s adelante veremos ejemplos m\u00e1s complejos donde haremos m\u00e1s cosas, pero la idea b\u00e1sica siempre es la misma, repetir una instrucci\u00f3n con peque\u00f1os cambios \u00abcontrolados\u00bb por el \u00edndice.<\/p>\n
    Nota<\/strong>: A menudo sentir\u00e9is hablar de bucle<\/em> para referirse a un grupo de instrucciones que se repite. Si buscamos la definici\u00f3n de bucle<\/em>, se define como un rizo, como los del cabello o como las vueltas que hace un resorte. La similitud es muy grande, pues en un bucle<\/em> no nos limitamos a repetir, tambi\u00e9n vamos avanzando hacia su final. La instrucci\u00f3n\u00a0for<\/span> <\/strong>genera un bucle<\/em>. Y este bucle<\/em> \u00abavanza\u00bb porque la variable i<\/em> va cambiando su valor, acerc\u00e1ndose cada vez m\u00e1s al valor m\u00e1ximo que har\u00e1 que se salga del bucle<\/em>.<\/p>\n<\/div>\n
    <\/p>\n
    Un peque\u00f1o ejemplo en v\u00eddeo<\/strong><\/p>\n
    Por si ten\u00e9is todav\u00eda dudas de c\u00f3mo funciona la instrucci\u00f3n\u00a0for<\/span>, os hemos preparado un peque\u00f1o v\u00eddeo que explica, paso a paso, el funcionamiento de esta instrucci\u00f3n.<\/p>\n