{"id":398,"date":"2019-07-04T22:48:02","date_gmt":"2019-07-04T20:48:02","guid":{"rendered":"http:\/\/disseny-test.uoc.edu\/materials\/programacio\/?page_id=398"},"modified":"2019-09-02T17:18:10","modified_gmt":"2019-09-02T15:18:10","slug":"2-3-1-repeticions","status":"publish","type":"page","link":"http:\/\/disseny-test.uoc.edu\/materials\/programacio\/2-3-1-repeticions\/","title":{"rendered":"2.3.1. Repeticions"},"content":{"rendered":"

Els exemples 4-5 i 4-6 del llibre s\u00f3n prou aclaridors. Si fem diverses coses que s\u2019assemblen molt, no cal escriure la mateixa instrucci\u00f3 amb petites variacions moltes vegades, sin\u00f3 que podem fer servir la instrucci\u00f3 for<\/span><\/strong> per a repetir-la sense haver d\u2019escriure-la repetida.<\/p>\n

A la instrucci\u00f3 for<\/span><\/strong> fem servir una variable (que sovint anomenem i<\/em>) que nom\u00e9s farem servir dins el bloc que conforma la instrucci\u00f3 for<\/span><\/strong> i que ens servir\u00e0 per a comptar quants cops repetim les instruccions del bloc.<\/p>\n

Com posa al llibre, la instrucci\u00f3 for<\/span> <\/strong>t\u00e9 la sintaxi seg\u00fcent:<\/p>\n

for (inici; test; increment) {\r\n\u00a0\u00a0\u00a0\u00a0 bloc d\u2019instruccions\r\n}<\/pre>\n
    \n
  • A l\u2019inici<\/strong> declarem la variable que farem servir per a comptar el nombre de repeticions i li donarem un valor inicial. Pot ser 1, o qualsevol altre.<\/li>\n
  • Al test<\/strong> comprovarem si ja hem fet totes les repeticions que calia. Per a fer-ho, compararem el valor actual de la variable comptadora amb un valor.<\/li>\n
  • Finalment, a l\u2019increment<\/strong> indicarem quin nombre hem de sumar a la variable cada cop que fem una volta.<\/li>\n<\/ul>\n
    Aix\u00ed, en l\u2019exemple 4-6 declarem la variable i<\/em> i la inicialitzem a 20<\/span>, repetirem les instruccions mentre el valor de la variable i<\/em> sigui menor que 400<\/span> i a cada volta sumarem 60 al valor que tenim a la variable i<\/em><\/span>.<\/p>\n
    for (var i = 20<\/span>; i < 400<\/span>; i += 60<\/span>) {<\/pre>\n
    Al final de l\u2019exemple 4-6 del llibre, tenim la llista de tots els operadors de comparaci\u00f3 que podem fer servir per a posar-los a l\u2019espai de test<\/strong>. Si us fixeu, per a comprovar si el contingut d\u2019una variable \u00e9s igual a un determinat valor, fem servir el s\u00edmbol ==. D\u2019aquesta manera diferenciem l\u2019assignaci\u00f3 (guardar) de la comparaci\u00f3 (igualtat).<\/p>\n
    Els exemples 4-7 a 4-13 ens permeten veure usos molt semblants de la repetici\u00f3. Val la pena provar tots els exemples i intentar entendre el que fan.<\/p>\n
    Vegem un exemple senzill:<\/p>\n
    Dibuixarem aix\u00f2:<\/p>\n
    \"\"<\/p>\n
    Com?, amb aquest codi:<\/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
    Com hem vist, si tenim una instrucci\u00f3 repetida molts cops potser ens va b\u00e9 fer servir un for<\/span>. Vegem quines difer\u00e8ncies hi ha entre les diferents crides a la funci\u00f3 ellipse()<\/span>.<\/p>\n
    Si ens fixem, nom\u00e9s varien les posicions. La primera t\u00e9 com a x<\/strong> 50 i com a y<\/strong> 50. La segona 100 i 100, la tercera 150 i 150, etc.<\/p>\n
    Podem dir que la primera x<\/strong> \u00e9s 50 * 1 (50), la segona 50 * 2 (100), la tercera 50 * 3 (150) i aix\u00ed fins a arribar a la darrera que \u00e9s 50 * 7 (350). Si f\u00e9ssim servir un for<\/span>, podr\u00edem tenir un comptador que a cada pas multipliqu\u00e9s la posici\u00f3 inicial dels cercles. Alguna cosa com aix\u00f2:<\/p>\n
    ellipse(50*i,50*i,50,50);<\/pre>\n
    B\u00e9, ho podem provar, aqu\u00ed tenim el codi complet:<\/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
    Ara els cercles es dibuixen amb el for<\/span> <\/strong>que, a cada pas, incrementa en 1 el valor de la variable i<\/em>. El codi ha quedat molt m\u00e9s redu\u00eft i, fins i tot, clar. M\u00e9s endavant veurem exemples m\u00e9s complexos en qu\u00e8 farem m\u00e9s coses, per\u00f2 la idea b\u00e0sica sempre \u00e9s la mateixa, repetir una instrucci\u00f3 amb petits canvis \u00abcontrolats\u00bb per l\u2019\u00edndex.<\/p>\n
    Nota<\/strong>: Sovint sentireu parlar de bucle<\/em> per a referir-se a un grup d\u2019instruccions que es repeteix. Si busquem la definici\u00f3 de bucle<\/em>, es defineix com un ris (r\u00ednxol) com el dels cabells o com les voltes que fa una molla. La similitud \u00e9s molt gran, ja que en un bucle<\/em> no ens limitem a repetir, tamb\u00e9 anem avan\u00e7ant cap al seu final. La instrucci\u00f3 for<\/span> <\/strong>genera un bucle<\/em>. I aquest bucle<\/em> \u00abavan\u00e7a\u00bb perqu\u00e8 la variable i<\/em> va canviant el seu valor, acostant-se cada cop m\u00e9s al valor m\u00e0xim que far\u00e0 que se surti del bucle<\/em>.<\/p>\n<\/div>\n
    <\/p>\n
    Un petit exemple en v\u00eddeo<\/strong><\/p>\n
    Per si encara teniu dubtes de com funciona la instrucci\u00f3 for<\/span>, us hem preparat un petit v\u00eddeo que explica, pas a pas, el funcionament de la instrucci\u00f3 for<\/span>.<\/p>\n