{"id":400,"date":"2022-10-06T09:21:46","date_gmt":"2022-10-06T07:21:46","guid":{"rendered":"http:\/\/quadern-programacio.recursos.uoc.edu\/?page_id=400"},"modified":"2022-10-06T09:21:46","modified_gmt":"2022-10-06T07:21:46","slug":"5-3-condicionales-if-if-else","status":"publish","type":"page","link":"http:\/\/quadern-programacio.recursos.uoc.edu\/es\/5-3-condicionales-if-if-else\/","title":{"rendered":"5.3. Condicionales if, if-else"},"content":{"rendered":"

Comencemos por un ejemplo muy sencillo:<\/p>\n

\"\"
Figura 53. Estructura condicional
Fuente: elaboraci\u00f3n propia.<\/figcaption><\/figure>\n

Comenzamos definiendo una variable value<\/span> y asign\u00e1ndole el valor 0. A continuaci\u00f3n, en el draw()<\/span>, creamos una estructura condicional en la que dibujamos un c\u00edrculo \u00fanicamente cuando se cumple la condici\u00f3n de que el valor de variable value<\/span> sea igual a 0. Veamos qu\u00e9 ocurre si cambiamos al principio el valor de la variable a cualquier otro que no sea 0:<\/p>\n

\"\"
Figura 54. Estructura condicional
Fuente: elaboraci\u00f3n propia.<\/figcaption><\/figure>\n

Ahora, al no cumplirse la condici\u00f3n de que value == 0<\/span>, el c\u00f3digo que pinta el c\u00edrculo no se ejecuta nunca y por eso no lo vemos. Veamos con detalle la estructura condicional:<\/p>\n

if (condici\u00f3n) {\r\n    \/\/ C\u00f3digo a ejecutar si se cumple la condici\u00f3n\r\n}<\/pre>\n
Siempre empezaremos utilizando la palabra clave if<\/span>, seguida entre par\u00e9ntesis de la condici\u00f3n que debe cumplirse. A continuaci\u00f3n, entre llaves, el c\u00f3digo que se ejecutar\u00e1 en caso de cumplirse la condici\u00f3n. La condici\u00f3n se eval\u00faa y, en caso de que sea true<\/span>, se ejecutara el c\u00f3digo entre las llaves; en el caso de que sea false<\/span>, no llegar\u00e1 a entrar en el cuerpo del if<\/span>, de la misma manera que en los bucles for<\/span>, y continuar\u00e1 la ejecuci\u00f3n de manera normal.<\/p>\n
Dentro del bloque entre llaves del if<\/span> escribimos el c\u00f3digo que se ejecutar\u00e1 si se cumple la condici\u00f3n, pero tambi\u00e9n podemos especificar c\u00f3digo que se ejecute cuando no se cumpla la condici\u00f3n. Para ello, usaremos la palabra clave else<\/span> de la siguiente manera:<\/p>\n
if (condici\u00f3n) {\r\n    \/\/ C\u00f3digo a ejecutar si se cumple la condici\u00f3n\r\n} else {\r\n    \/\/ C\u00f3digo a ejecutar si no se cumple la condici\u00f3n\r\n}<\/pre>\n
Al cerrar el bloque del if<\/span> escribimos a continuaci\u00f3n la palabra clave else<\/span> y abrimos otro bloque de llaves donde escribiremos el c\u00f3digo que se ejecutar\u00e1 en el caso de que no se cumpla la condici\u00f3n definida en el if<\/span>.<\/p>\n
Veamos c\u00f3mo funciona un condicional if-else<\/span> continuando con el ejemplo visto anteriormente:<\/p>\n
\"\"
Figura 55. Estructura condicional if-else<\/span>
Fuente: elaboraci\u00f3n propia.<\/figcaption><\/figure>Ahora, como en el ejemplo anterior, tampoco entramos en el bloque de c\u00f3digo del if<\/span>, ya que 345 == 0 es false<\/span>, pero s\u00ed que entramos en el bloque del else<\/span>, pintando el cuadrado.<\/p>\n
Tambi\u00e9n podemos crear una estructura condicional que tenga cuenta distintas opciones, para lo que podemos encadenar varias estructuras if-else<\/span> de la siguiente manera:<\/p>\n
if (condici\u00f3n1) {\r\n    \/\/ C\u00f3digo a ejecutar si se cumple la condici\u00f3n 1\r\n} else if (condici\u00f3n2){\r\n    \/\/ C\u00f3digo a ejecutar si se cumple la condici\u00f3n 2\r\n} else {\r\n    \/\/ Si no se cumple ninguna de las condiciones\r\n}<\/pre>\n
Si justo a continuaci\u00f3n de un else<\/span> escribimos otro if<\/span>, podemos concatenar varias condiciones. Estas estructuras son \u00fatiles cuando tenemos un n\u00famero peque\u00f1o de opciones. Sin embargo, cuando el n\u00famero de opciones empieza a crecer, quiz\u00e1 no sea la opci\u00f3n m\u00e1s limpia para nuestro c\u00f3digo. M\u00e1s adelante estudiaremos una alternativa para estos casos. De momento, utilicemos otro if<\/span> en el ejemplo anterior para establecer una segunda condici\u00f3n:<\/p>\n
\"\"
Figura 56. Encadenando varias condiciones
Fuente: elaboraci\u00f3n propia.<\/figcaption><\/figure>\n
Ahora observamos que adem\u00e1s de la primera condici\u00f3n value == 0<\/span> hemos a\u00f1adido una nueva value == 1<\/span>. Como ninguna de estas se cumple, saltamos a la l\u00ednea 15 del c\u00f3digo, a partir de la cual se dibuja el c\u00edrculo rojo. Si cambi\u00e1semos el valor asignado al principio a la variable value<\/span>, podr\u00edamos ver los cambios en nuestro sketch<\/em>.<\/p>\n","protected":false},"excerpt":{"rendered":"
Comencemos por un ejemplo muy sencillo: Comenzamos definiendo una variable y asign\u00e1ndole el valor 0. A continuaci\u00f3n, en el , creamos una estructura condicional en la que dibujamos un c\u00edrculo \u00fanicamente cuando se cumple la condici\u00f3n de que el valor de variable sea igual a 0. Veamos qu\u00e9 ocurre si cambiamos al principio el valor […]<\/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\/400"}],"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=400"}],"version-history":[{"count":1,"href":"http:\/\/quadern-programacio.recursos.uoc.edu\/es\/wp-json\/wp\/v2\/pages\/400\/revisions"}],"predecessor-version":[{"id":401,"href":"http:\/\/quadern-programacio.recursos.uoc.edu\/es\/wp-json\/wp\/v2\/pages\/400\/revisions\/401"}],"wp:attachment":[{"href":"http:\/\/quadern-programacio.recursos.uoc.edu\/es\/wp-json\/wp\/v2\/media?parent=400"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}