{"id":1946,"date":"2019-07-09T20:48:55","date_gmt":"2019-07-09T18:48:55","guid":{"rendered":"http:\/\/disseny-test.uoc.edu\/materials\/programacio\/?page_id=1946"},"modified":"2019-08-17T13:00:56","modified_gmt":"2019-08-17T11:00:56","slug":"2-2-1-variables","status":"publish","type":"page","link":"http:\/\/disseny-test.uoc.edu\/materials\/programacio\/es\/2-2-1-variables\/","title":{"rendered":"2.2.1. Variables"},"content":{"rendered":"

Las variables<\/strong> son un elemento fundamental en cualquier programa. Las usamos para almacenar valores, para hacer contadores, para guardar el resultado de un c\u00e1lculo y otras cosas que iremos viendo. A pesar de que hasta ahora no las hemos usado, a partir de ahora las usaremos siempre, en todos los programas que hagamos.<\/p>\n<\/div>\n

Podemos considerar las variables como un almac\u00e9n donde guardaremos un valor. Aunque a priori<\/em> parezca una cosa poco \u00fatil, la gracia est\u00e1 en que podremos modificar este valor con nuestro programa. Por ejemplo, si queremos contar algo, usaremos una variable para guardar el valor que tenga este contador. Y lo tendremos que modificar cada vez que necesitemos contar un elemento m\u00e1s.<\/p>\n

A pesar de ser muy importantes, usar variables es tan sencillo como parece.<\/p>\n

En los ejemplos 4-1 y 4-2 del libro encontramos un primer caso de trabajo con variables. En el 4-1 tenemos tres c\u00edrculos que dibujamos seg\u00fan las medidas que hemos guardado en dos variables. En el 4-2 tenemos el mismo c\u00f3digo, pero hemos modificado el valor de estas dos variables para modificar el tama\u00f1o de los tres c\u00edrculos sin necesidad de cambiar los valores en las tres instrucciones.<\/p>\n

Probad el programa del ejemplo 4-1 y modificad varias veces los valores que damos a las variables. Ver\u00e9is que cambian las tres elipses a la vez:<\/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

Para poder usar las variables, lo primero que tenemos que hacer es declararlas<\/strong>. La declaraci\u00f3n nos sirve para saber cu\u00e1les son las variables que estamos usando y evitar as\u00ed repetir variables o intentar usar variables donde no hemos guardado ning\u00fan valor.<\/p>\n

Siempre declararemos las variables usando la instrucci\u00f3n var<\/span> seguida del nombre de la variable.<\/p>\n

var <\/strong>x = 5;<\/pre>\n
Creamos la variable x<\/strong> y le damos el valor de 5.<\/p>\n
var <\/strong>x;\r\nx = 5;<\/pre>\n
Aqu\u00ed hacemos lo mismo pero en dos operaciones. En la pr\u00e1ctica, no hay ninguna diferencia a pesar de que es preferible hacerlo con una sola instrucci\u00f3n porque, de este modo, seguro que no olvidaremos dar a la variable un valor inicial<\/strong>.<\/p>\n
Como vemos, a la variable le hemos dado un nombre: x<\/strong>. Este nombre no ser\u00e1 habitualmente un buen nombre de variable y siempre ser\u00e1 mejor usar nombres de variables que describan el valor que estamos guardando dentro.<\/p>\n
\u00bfD\u00f3nde declaramos las variables? Pues depender\u00e1. De momento, lo haremos fuera de las dos funciones setup()<\/span> y draw()<\/span>, pero tambi\u00e9n declararemos variables en otros lugares. Ya lo veremos.<\/p>\n
JavaScript es un lenguaje que distingue may\u00fasculas de min\u00fasculas. Esto quiere decir que un nombre de variable como unContador<\/span> es diferente del nombre de variable Uncontador<\/span>. Los nombres de variable pueden tener cualquier longitud. Las reglas para crear nombres de variable v\u00e1lidos son las siguientes:<\/p>\n
    \n
  • El primer car\u00e1cter tiene que ser una letra (en may\u00fasculas o min\u00fasculas) o un car\u00e1cter de subrayado (_). No puede utilizarse un n\u00famero como primer car\u00e1cter.<\/li>\n
  • Los siguientes caracteres tienen que ser letras, n\u00fameros o caracteres de subrayado (_).<\/li>\n
  • El nombre de una variable no puede ser una palabra reservada (son palabras reservadas los nombres de las instrucciones JavaScript).<\/li>\n<\/ul>\n
    Como veis, las posibilidades para poner nombres de variables son muchas. Pero hace falta que seamos cuidadosos, por lo que habitualmente usaremos esta convenci\u00f3n:<\/p>\n
      \n
    • Empezaremos los nombres de variables siempre por letra min\u00fascula.<\/li>\n
    • Si queremos poner un nombre compuesto, usaremos las may\u00fasculas para separar, por ejemplo: unCoche<\/span>, MiVariable<\/span>.<\/li>\n
    • Normalmente, no usaremos ni n\u00fameros ni el car\u00e1cter de subrayado.<\/li>\n<\/ul>\n
      En el ejemplo 4-3 vemos algunas variables predefinidas de p5.js. Las variables predefinidas son variables que ya tienen un valor guardado.<\/p>\n","protected":false},"excerpt":{"rendered":"
      Podemos considerar las variables como un almac\u00e9n donde guardaremos un valor. Aunque a priori parezca una cosa poco \u00fatil, la gracia est\u00e1 en que podremos modificar este valor con nuestro programa. Por ejemplo, si queremos contar algo, usaremos una variable para guardar el valor que tenga este contador. Y lo tendremos que modificar cada vez […]<\/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\/es\/wp-json\/wp\/v2\/pages\/1946"}],"collection":[{"href":"http:\/\/disseny-test.uoc.edu\/materials\/programacio\/es\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"http:\/\/disseny-test.uoc.edu\/materials\/programacio\/es\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"http:\/\/disseny-test.uoc.edu\/materials\/programacio\/es\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/disseny-test.uoc.edu\/materials\/programacio\/es\/wp-json\/wp\/v2\/comments?post=1946"}],"version-history":[{"count":9,"href":"http:\/\/disseny-test.uoc.edu\/materials\/programacio\/es\/wp-json\/wp\/v2\/pages\/1946\/revisions"}],"predecessor-version":[{"id":3732,"href":"http:\/\/disseny-test.uoc.edu\/materials\/programacio\/es\/wp-json\/wp\/v2\/pages\/1946\/revisions\/3732"}],"wp:attachment":[{"href":"http:\/\/disseny-test.uoc.edu\/materials\/programacio\/es\/wp-json\/wp\/v2\/media?parent=1946"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}