{"id":390,"date":"2022-10-04T16:05:50","date_gmt":"2022-10-04T14:05:50","guid":{"rendered":"http:\/\/quadern-programacio.recursos.uoc.edu\/?page_id=390"},"modified":"2022-10-07T13:05:58","modified_gmt":"2022-10-07T11:05:58","slug":"4-3-bucles-for","status":"publish","type":"page","link":"http:\/\/quadern-programacio.recursos.uoc.edu\/es\/4-3-bucles-for\/","title":{"rendered":"4.3. Bucles for"},"content":{"rendered":"

Veamos c\u00f3mo podr\u00edamos resolver el problema planteado en el dibujo anterior:<\/p>\n

\"\"
Figura 44. Bucle for<\/span>
Fuente: elaboraci\u00f3n propia.<\/figcaption><\/figure>Como pod\u00e9is observar, con un par de l\u00edneas de c\u00f3digo se puede resolver lo que antes hac\u00edamos con m\u00e1s de veinte. Exploremos con detalle la estructura de un bucle for<\/span>:<\/p>\n
\/\/ Un bucle for siempre tendr\u00e1 \r\n\/\/ la siguiente estructura:\r\n\r\n\/*\r\nfor (estado inicial; test; actualizaci\u00f3n) {\r\n    Aqu\u00ed el c\u00f3digo a ejecutar\r\n}\t\r\n*\/<\/pre>\n
Siempre empezaremos utilizando la palabra clave for<\/span>; a continuaci\u00f3n y entre par\u00e9ntesis, escribiremos las siguientes instrucciones, separadas por punto y coma:<\/p>\n
    \n
  • Estado inicial<\/strong>: aqu\u00ed declaramos y asignamos un valor inicial a una variable que nos va a servir de contador para el n\u00famero de repeticiones que queramos realizar. Por ejemplo, podemos definir el estado inicial con let i = 0;<\/span>, aunque puede ser cualquier otro valor.<\/li>\n
  • Test<\/strong>: aqu\u00ed definiremos la condici\u00f3n que se tiene que cumplir para que el bucle contin\u00fae ejecut\u00e1ndose o termine. Para ello, compararemos el valor de la variable que hemos declarado en el estado inicial con otro valor a trav\u00e9s de los operadores de comparaci\u00f3n<\/strong>.<\/li>\n
  • Actualizaci\u00f3n<\/strong>: cuando el bucle haya completado una iteraci\u00f3n, actualizaremos el valor de nuestra variable de inicio.<\/li>\n<\/ul>\n
    Si la condici\u00f3n que hemos definido en test<\/em> se cumple, pasaremos a ejecutar el c\u00f3digo que tengamos en el cuerpo del bucle for<\/span>, entre las llaves. Si no se cumple, el bucle termina.<\/p>\n
    \"\"
    Figura 45. Diagrama de flujo de un bucle for
    Fuente: adaptaci\u00f3n de L. McCarthy; A. P. C. Reas; B. Fry (2015). Getting Started with P5.Js: Making Interactive Graphics in JavaScript and Processing<\/em>. Make Community, LLC.<\/figcaption><\/figure>\n
    Veamos un ejemplo pr\u00e1ctico:<\/p>\n
    console.log(\"Comienza el bucle\");\r\nfor (let i = 0; i < 5; i ++) {\r\n    console.log(\"La variable i vale: \" + i);\r\n}\r\nconsole.log(\"Termina el bucle\");<\/pre>\n
    Como estado inicial<\/strong> estamos declarando la variable i<\/span> y asign\u00e1ndole el valor 0. Pod\u00e9is usar cualquier nombre para esta variable, pero es bastante com\u00fan utilizar i<\/span> cuando estamos iterando en un bucle (i<\/span> de index<\/em> o \u00edndice para llevar la cuenta).<\/p>\n
    A continuaci\u00f3n, la condici\u00f3n<\/strong> que establecemos es i < 5<\/span>, lo que traducido a lenguaje natural ser\u00eda: mientras i<\/span> sea menor que 5. Para definir la condici\u00f3n, utilizamos los denominados operadores de comparaci\u00f3n. Los m\u00e1s usados son los siguientes:<\/p>\n
    Tabla 1. Principales operadores de comparaci\u00f3n<\/p>\n<\/div>\n\n\n\n\n\n\n\n\n\n
    Operador<\/strong><\/td>\nDescripci\u00f3n<\/strong><\/td>\nEjemplo<\/strong><\/td>\n<\/tr>\n
    ><\/strong>\u00a0<\/strong><\/td>\nMayor que<\/td>\n5 > 2 Verdadero<\/p>\n
    5 > 5 Falso<\/td>\n<\/tr>\n
    <<\/strong>\u00a0<\/strong><\/td>\nMenor que<\/td>\n0 < 5 Verdadero<\/p>\n
    7 < 5 Falso<\/td>\n<\/tr>\n
    >=<\/strong><\/td>\nMayor o igual que<\/td>\n5 >= 5 Verdadero<\/p>\n
    0 >= 5 Falso<\/td>\n<\/tr>\n
    <=<\/strong><\/td>\nMenor o igual que<\/td>\n10 <= 10 Verdadero<\/p>\n
    11 <= 10 Falso<\/td>\n<\/tr>\n
    ==<\/strong><\/td>\nIgual que<\/td>\n5 == 5 Verdadero<\/p>\n
    0 == 5 Falso<\/td>\n<\/tr>\n
    !=<\/strong><\/td>\nDistinto que<\/td>\n0 != 5 Verdadero<\/p>\n
    3 != 3 Falso<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
    Fuente: elaboraci\u00f3n propia.<\/p>\n<\/div>\n
    Por lo tanto, el c\u00f3digo del cuerpo de nuestro bucle se ejecutar\u00e1 mientras nuestra variable i<\/span> sea menor que 5.<\/p>\n
    Por \u00faltimo, debemos definir cu\u00e1l va a ser el incremento<\/strong> de nuestra variable cada vez que se ejecute el bucle. En el ejemplo hemos establecido i ++<\/span>, lo que \u2013si recordamos del tema anterior\u2013 es un atajo equivalente a si escribi\u00e9semos i = i + 1<\/span>, o lo que es lo mismo: la variable i aumentar\u00e1 de uno en uno cada vez que se ejecute el bucle. Si volvemos a nuestro ejemplo, al ejecutarlo ver\u00edamos en la consola lo siguiente:<\/p>\n
    Comienza el bucle\r\nLa variable i vale: 0\r\nLa variable i vale: 1\r\nLa variable i vale: 2\r\nLa variable i vale: 3\r\nLa variable i vale: 4\r\nTermina el bucle<\/pre>\n
    La primera vez que se entra en el bucle la variable i<\/span> vale 0, por lo que se cumple la condici\u00f3n i < 5<\/span> y se ejecuta el c\u00f3digo dentro de las llaves (que imprime en la consola el valor de i<\/span>). Una vez que ha terminado de ejecutar este c\u00f3digo, pasa a la fase del incremento, suma 1 a la variable i<\/span> y vuelve a hacer la comprobaci\u00f3n de la condici\u00f3n; ahora i<\/span> vale 1 (0 + 1) y se sigue cumpliendo la condici\u00f3n. As\u00ed hasta que llegamos a la quinta ejecuci\u00f3n del bucle, en la que i<\/span> vale 4. Cuando termina de imprimir en la consola el valor de i<\/span>, pasa de nuevo a la fase de incremento, i<\/span> pasa a valer 5 y la condici\u00f3n ya no se cumple porque 5 < 5<\/span> es falso<\/strong>. Al no cumplirse la condici\u00f3n, sale del bucle y ejecuta el c\u00f3digo que tiene a continuaci\u00f3n, que imprime en la consola que el bucle ya ha terminado.<\/p>\n
    Si volvemos al bucle que nos dibujaba los c\u00edrculos de la figura 44, nos encontramos el siguiente c\u00f3digo:<\/p>\n
    for(let i = 0; i <= width; i += 20) {\r\n    circle(i, height * 0.5, 15);\r\n}<\/pre>\n
    Aqu\u00ed estamos iniciando el bucle tambi\u00e9n asignando a la variable i<\/span> el valor de 0. Variamos la condici\u00f3n que se debe cumplir porque ahora para que se ejecute el c\u00f3digo del cuerpo del bucle, el valor de i<\/span> deber\u00e1 ser menor o igual que el ancho de nuestro canvas <\/em>y el incremento esta vez en lugar de ir aumentando de uno en uno aumenta de veinte en veinte.<\/p>\n
    En el cuerpo del bucle utilizamos la variable i<\/span> para determinar la posici\u00f3n horizontal de los c\u00edrculos, mientras que la posici\u00f3n vertical es fija, por lo que esta ir\u00e1 aumentando de veinte en veinte hasta llegar al final del canvas<\/em>. El primer c\u00edrculo se dibujar\u00e1 en las coordenadas (0, 200), el segundo en (20, 200), el tercero en (40, 200) y as\u00ed sucesivamente hasta llegar a la coordenada (200, 200), en la que se dibujar\u00e1 el \u00faltimo c\u00edrculo.<\/p>\n
    Para observar mejor el funcionamiento del bucle, podemos cambiar la condici\u00f3n que cumplir introduciendo una variable que nos permita cambiar hasta qu\u00e9 valor en horizontal queremos dibujar los c\u00edrculos:<\/p>\n
    let limit = 100;\r\nfor(let i = 0; i <= limit; i += 20) {\r\n    circle(i, height * 0.5, 15);\r\n}<\/pre>\n
    \"\"
    Figura 46. Bucle for con el l\u00edmite en 100
    Fuente: elaboraci\u00f3n propia.<\/figcaption><\/figure>\n
    Dentro del cuerpo de los bucles, podemos insertar el c\u00f3digo que queramos. Podr\u00edamos por ejemplo usar la funci\u00f3n eye()<\/span> del tema anterior para dibujar una sucesi\u00f3n de ojos:<\/p>\n
    \"\"
    Figura 47. La funci\u00f3n eye()<\/span> utilizada dentro de un bucle
    Fuente: elaboraci\u00f3n propia.<\/figcaption><\/figure>En este ejemplo, antes del bucle hemos creado una variable para determinar el n\u00famero de ojos que queremos dibujar. Esa variable es usada a continuaci\u00f3n en el test<\/em> del bucle. Dentro del bucle creamos tambi\u00e9n un par de variables que nos sirven para espaciar los ojos entre s\u00ed y determinar su tama\u00f1o en funci\u00f3n de esta separaci\u00f3n.<\/p>\n","protected":false},"excerpt":{"rendered":"
    Veamos c\u00f3mo podr\u00edamos resolver el problema planteado en el dibujo anterior: Como pod\u00e9is observar, con un par de l\u00edneas de c\u00f3digo se puede resolver lo que antes hac\u00edamos con m\u00e1s de veinte. Exploremos con detalle la estructura de un bucle : \/\/ Un bucle for siempre tendr\u00e1 \/\/ la siguiente estructura: \/* for (estado inicial; […]<\/p>\n","protected":false},"author":2,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":[],"acf":[],"_links":{"self":[{"href":"http:\/\/quadern-programacio.recursos.uoc.edu\/es\/wp-json\/wp\/v2\/pages\/390"}],"collection":[{"href":"http:\/\/quadern-programacio.recursos.uoc.edu\/es\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"http:\/\/quadern-programacio.recursos.uoc.edu\/es\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"http:\/\/quadern-programacio.recursos.uoc.edu\/es\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"http:\/\/quadern-programacio.recursos.uoc.edu\/es\/wp-json\/wp\/v2\/comments?post=390"}],"version-history":[{"count":2,"href":"http:\/\/quadern-programacio.recursos.uoc.edu\/es\/wp-json\/wp\/v2\/pages\/390\/revisions"}],"predecessor-version":[{"id":560,"href":"http:\/\/quadern-programacio.recursos.uoc.edu\/es\/wp-json\/wp\/v2\/pages\/390\/revisions\/560"}],"wp:attachment":[{"href":"http:\/\/quadern-programacio.recursos.uoc.edu\/es\/wp-json\/wp\/v2\/media?parent=390"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}