{"id":388,"date":"2019-07-04T21:45:42","date_gmt":"2019-07-04T19:45:42","guid":{"rendered":"http:\/\/disseny-test.uoc.edu\/materials\/programacio\/?page_id=388"},"modified":"2019-08-17T12:59:37","modified_gmt":"2019-08-17T10:59:37","slug":"2-2-primera-part-variables-i-operacions","status":"publish","type":"page","link":"http:\/\/disseny-test.uoc.edu\/materials\/programacio\/2-2-primera-part-variables-i-operacions\/","title":{"rendered":"2.2.1. Variables"},"content":{"rendered":"

Les variables<\/strong> s\u00f3n un element fonamental a qualsevol programa. Les fem servir per a emmagatzemar valors, fer comptadors, guardar el resultat d\u2019un c\u00e0lcul i altres coses que anirem veient. Tot i que fins ara no les hem usat, a partir d\u2019ara les farem servir sempre, a tots els programes que fem.<\/p>\n<\/div>\n

Podem considerar les variables com un magatzem on guardarem un valor. Encara que a priori<\/em> sembla una cosa poc \u00fatil, el fet \u00e9s que podrem modificar aquest valor amb el nostre programa. Per exemple, si volem comptar alguna cosa, farem servir una variable per a guardar el valor que tingui aquest comptador. I l\u2019haurem de modificar cada cop que ens calgui comptar un element m\u00e9s.<\/p>\n

Tot i ser molt importants, fer servir variables \u00e9s tan senzill com sembla.<\/p>\n

En els exemples 4-1 i 4-2 del llibre, trobem un primer cas de treball amb variables. En el 4-1 tenim tres cercles que dibuixem segons les mides que hem guardat a dues variables. En el 4-2 tenim el mateix codi, per\u00f2 hem modificat el valor d\u2019aquestes dues variables per a modificar la mida dels tres cercles sense necessitat de canviar els valors a les tres instruccions.<\/p>\n

Proveu el programa de l\u2019exemple 4-1 i modifiqueu diversos cops els valors que donem a les variables. Veureu que canvien les tres el\u00b7lipses alhora:<\/p>\n

y<\/em> = 60; d<\/em> = 80<\/p>\n

\"\"<\/p>\n

y<\/em> = 100; d<\/em> = 80<\/p>\n

\"\"<\/p>\n

y<\/em> = 60; d<\/em> = 150<\/p>\n

\"\"<\/p>\n

Per a poder fer servir les variables, el primer que hem de fer \u00e9s declarar-les<\/strong>. La declaraci\u00f3 ens serveix per a saber quines s\u00f3n les variables que estem fent servir i, aix\u00ed, evitar repetir variables o intentar fer servir variables on no hem guardat cap valor.<\/p>\n

Sempre declararem les variables fent servir la instrucci\u00f3 var<\/span> seguida del nom de la variable.<\/p>\n

var <\/strong>x = 5;<\/pre>\n
Creem la variable x<\/strong> i li donem el valor de 5.<\/p>\n
var <\/strong>x;\r\nx = 5;<\/pre>\n
Aqu\u00ed fem el mateix per\u00f2 en dues operacions. A la pr\u00e0ctica, no hi ha cap difer\u00e8ncia, tot i que \u00e9s preferible fer-ho amb una sola instrucci\u00f3 perqu\u00e8 d\u2019aquesta manera segur que no oblidarem donar un valor inicial a la variable<\/strong>.<\/p>\n
Com veiem, hem donat un nom a la variable: x<\/strong>. Aquest nom no \u00e9s habitualment un bon nom de variable i sempre ser\u00e0 millor fer servir noms de variables que descriguin el valor que estem guardant dins.<\/p>\n
On declarem les variables? Doncs dependr\u00e0. De moment, ho farem fora de les dues funcions setup()<\/span> i draw()<\/span>, per\u00f2 tamb\u00e9 declararem les variables en altres llocs. Ja ho veurem.<\/p>\n
JavaScript \u00e9s un llenguatge que distingeix les maj\u00fascules de les min\u00fascules. Aix\u00f2 vol dir que un nom de variable com unComptador<\/span> \u00e9s diferent del nom de variable Uncomptador<\/span>. Els noms de les variables poden tenir qualsevol longitud. Les regles per a crear noms de variables v\u00e0lids s\u00f3n les seg\u00fcents:<\/p>\n
    \n
  • El primer car\u00e0cter ha de ser una lletra (en maj\u00fascules o min\u00fascules) o un car\u00e0cter de subratllat (_). No es pot utilitzar un n\u00famero com a primer car\u00e0cter.<\/li>\n
  • Els car\u00e0cters seg\u00fcents han de ser lletres, n\u00fameros o car\u00e0cters de subratllat (_).<\/li>\n
  • El nom d’una variable no pot ser una paraula reservada (s\u00f3n paraules reservades els noms de les instruccions JavaScript).<\/li>\n<\/ul>\n
    Com veieu, les possibilitats per a posar noms de variables s\u00f3n moltes. Per\u00f2 ens cal ser endre\u00e7ats, per la qual cosa habitualment farem servir aquesta convenci\u00f3:<\/p>\n
      \n
    • Sempre comen\u00e7arem els noms de les variables amb lletra min\u00fascula.<\/li>\n
    • Si volem posar un nom compost, farem servir les maj\u00fascules per a separar: per exemple: unCotxe<\/span>, laMevaVariable<\/span>.<\/li>\n
    • Normalment, no farem servir ni n\u00fameros ni el car\u00e0cter de subratllat.<\/li>\n<\/ul>\n
      En l\u2019exemple 4-3 veiem algunes variables predefinides de p5.js. Les variables predefinides s\u00f3n variables que ja tenen un valor guardat.<\/p>\n","protected":false},"excerpt":{"rendered":"
      Podem considerar les variables com un magatzem on guardarem un valor. Encara que a priori sembla una cosa poc \u00fatil, el fet \u00e9s que podrem modificar aquest valor amb el nostre programa. Per exemple, si volem comptar alguna cosa, farem servir una variable per a guardar el valor que tingui aquest comptador. I l\u2019haurem de […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"inline_featured_image":false},"acf":[],"_links":{"self":[{"href":"http:\/\/disseny-test.uoc.edu\/materials\/programacio\/wp-json\/wp\/v2\/pages\/388"}],"collection":[{"href":"http:\/\/disseny-test.uoc.edu\/materials\/programacio\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"http:\/\/disseny-test.uoc.edu\/materials\/programacio\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"http:\/\/disseny-test.uoc.edu\/materials\/programacio\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/disseny-test.uoc.edu\/materials\/programacio\/wp-json\/wp\/v2\/comments?post=388"}],"version-history":[{"count":10,"href":"http:\/\/disseny-test.uoc.edu\/materials\/programacio\/wp-json\/wp\/v2\/pages\/388\/revisions"}],"predecessor-version":[{"id":3731,"href":"http:\/\/disseny-test.uoc.edu\/materials\/programacio\/wp-json\/wp\/v2\/pages\/388\/revisions\/3731"}],"wp:attachment":[{"href":"http:\/\/disseny-test.uoc.edu\/materials\/programacio\/wp-json\/wp\/v2\/media?parent=388"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}