{"id":404,"date":"2022-10-06T09:34:34","date_gmt":"2022-10-06T07:34:34","guid":{"rendered":"http:\/\/quadern-programacio.recursos.uoc.edu\/?page_id=404"},"modified":"2022-10-06T09:34:34","modified_gmt":"2022-10-06T07:34:34","slug":"5-5-condicionales-switch","status":"publish","type":"page","link":"http:\/\/quadern-programacio.recursos.uoc.edu\/es\/5-5-condicionales-switch\/","title":{"rendered":"5.5. Condicionales switch"},"content":{"rendered":"<p>Hemos visto anteriormente que podemos encadenar varios <span class=\"courier\">if-else-if<\/span> cuando tengamos que elegir entre diversas opciones, algo as\u00ed:<\/p>\n<pre>if (option == 0) {\r\n    \/\/ Opci\u00f3n 0\r\n} else if (option == 1) {\r\n    \/\/ Opci\u00f3n 1\r\n} else if (option == 2) {\r\n   \/\/ Opci\u00f3n 2\r\n}\r\n\/\/ Y as\u00ed hasta el n\u00famero de opciones que necesitemos<\/pre>\n<p class=\"Cuerpo\"><span lang=\"ES-TRAD\">Para estos casos, contamos con otra estructura condicional que nos ofrece Javascript y para la que necesitamos usar la palabra clave <span class=\"courier\">switch<\/span>:<\/span><\/p>\n<pre>switch (option) {\r\n    case valor1:\r\n        \/\/Si option coincide con valor1\r\n        break;\r\n    case valor2:\r\n        \/\/Si option coincide con valor2\r\n        break;\r\n    ...\r\n    case valorN:\r\n        \/\/Si option coincide con valorN\r\n        break;\r\n    default:\r\n        \/\/Cuando option no coincide con ning\u00fan case\r\n        break;\r\n}<\/pre>\n<p>Aqu\u00ed observamos que el valor a evaluar es <span class=\"courier\">option<\/span> y se compara con cada uno de los \u00abcasos\u00bb <span class=\"courier\">case<\/span>. Pens\u00e9moslo de la siguiente manera: \u00abEn caso de que <span class=\"courier\">option<\/span> coincida con <span class=\"courier\">valor1<\/span>, ejecuto el c\u00f3digo que le corresponde a <span class=\"courier\">valor1<\/span>\u00bb, y as\u00ed para el resto de los casos. Al final del c\u00f3digo de cada <span class=\"courier\">case<\/span> necesitamos poner un <span class=\"courier\">break<\/span>, otra palabra clave que lo que hace es que cuando se ejecuta el c\u00f3digo y llega a un <span class=\"courier\">break<\/span>, la ejecuci\u00f3n sale del bloque en el que se encuentra, en nuestro caso hasta la llave de cierre al final del <span class=\"courier\">switch<\/span>.<\/p>\n<p>Tambi\u00e9n al final del <span class=\"courier\">switch<\/span> ponemos un caso especial: <span class=\"courier\">default<\/span>. Nos sirve para ejecutar c\u00f3digo en el supuesto de que <span class=\"courier\">option<\/span> no coincida con ninguno de los <span class=\"courier\">case<\/span>. Veamos un ejemplo pr\u00e1ctico:<\/p>\n<p><figure id=\"attachment_146\" aria-describedby=\"caption-attachment-146\" style=\"width: 800px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" class=\"size-full wp-image-146\" src=\"\/wp-content\/uploads\/2022\/10\/PID_00290094_056.jpg\" alt=\"\" width=\"800\" height=\"552\" srcset=\"\/wp-content\/uploads\/2022\/10\/PID_00290094_056.jpg 800w, \/wp-content\/uploads\/2022\/10\/PID_00290094_056-300x207.jpg 300w, \/wp-content\/uploads\/2022\/10\/PID_00290094_056-768x530.jpg 768w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><figcaption id=\"caption-attachment-146\" class=\"wp-caption-text\">Figura 57. Condicional <span class=\"courier\">switch<\/span><br \/>Fuente: elaboraci\u00f3n propia.<\/figcaption><\/figure>En este ejemplo estamos creando un n\u00famero aleatorio del 0 al 3 que almacenamos en <span class=\"courier\">randomOption<\/span>. A continuaci\u00f3n, en el <span class=\"courier\">switch<\/span> establecemos el color de relleno del c\u00edrculo en funci\u00f3n de ese n\u00famero aleatorio. En el ejemplo, como se puede ver en la consola, el n\u00famero aleatorio ha sido el 1, por lo que se ejecuta el <span class=\"courier\">case: 1<\/span>, que tiene un <span class=\"courier\">fill()<\/span> verde. Notemos tambi\u00e9n el <span class=\"courier\">noLoop()<\/span> que se ha puesto en el <span class=\"courier\">setup()<\/span>; de esta manera el c\u00f3digo del <span class=\"courier\">draw()<\/span> se ejecuta una \u00fanica vez y, por lo tanto, tenemos un \u00fanico valor aleatorio. Sin el <span class=\"courier\">noLoop()<\/span> el color de relleno cambiar\u00eda aleatoriamente 60 veces cada segundo.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Hemos visto anteriormente que podemos encadenar varios cuando tengamos que elegir entre diversas opciones, algo as\u00ed: if (option == 0) { \/\/ Opci\u00f3n 0 } else if (option == 1) { \/\/ Opci\u00f3n 1 } else if (option == 2) { \/\/ Opci\u00f3n 2 } \/\/ Y as\u00ed hasta el n\u00famero de opciones que necesitemos [&hellip;]<\/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\/404"}],"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=404"}],"version-history":[{"count":2,"href":"http:\/\/quadern-programacio.recursos.uoc.edu\/es\/wp-json\/wp\/v2\/pages\/404\/revisions"}],"predecessor-version":[{"id":744,"href":"http:\/\/quadern-programacio.recursos.uoc.edu\/es\/wp-json\/wp\/v2\/pages\/404\/revisions\/744"}],"wp:attachment":[{"href":"http:\/\/quadern-programacio.recursos.uoc.edu\/es\/wp-json\/wp\/v2\/media?parent=404"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}