{"id":1278,"date":"2019-07-08T13:55:36","date_gmt":"2019-07-08T11:55:36","guid":{"rendered":"http:\/\/disseny-test.uoc.edu\/materials\/programacio\/?page_id=1278"},"modified":"2019-08-17T02:06:59","modified_gmt":"2019-08-17T00:06:59","slug":"1-7-deteccion-de-errores","status":"publish","type":"page","link":"http:\/\/disseny-test.uoc.edu\/materials\/programacio\/es\/1-7-deteccion-de-errores\/","title":{"rendered":"1.7. Detecci\u00f3n de errores"},"content":{"rendered":"<p>Dado que empezaremos a hacer programas con bastantes instrucciones, es m\u00e1s que posible que en alg\u00fan punto nos equivoquemos y no obtengamos el resultado deseado. \u00bfC\u00f3mo lo podemos comprobar?<\/p>\n<p>Recuperamos aqu\u00ed el apartado \u00abThe Console\u00bb del cap\u00edtulo 2 del libro.<\/p>\n<p>La consola nos permitir\u00e1, entre otras cosas, ver si hemos cometido alg\u00fan error en el c\u00f3digo. Vamos a verlo con un ejemplo.<\/p>\n<p>Copiamos el siguiente c\u00f3digo en el editor (es el c\u00f3digo del ejemplo 3-5 con una peque\u00f1a modificaci\u00f3n):<\/p>\n<pre>function <span style=\"color: #4a86e8; font-weight: bold;\">setup<\/span>() {\r\n  <span style=\"color: #4a86e8; font-weight: bold;\">createCanvas<\/span>(480, 120);\r\n}\r\nfunction <span style=\"color: #4a86e8; font-weight: bold;\">draw<\/span>() {\r\n  <span style=\"color: #4a86e8; font-weight: bold;\">background<\/span>(204);\r\n  <span style=\"color: #4a86e8; font-weight: bold;\">rec<\/span>(180, 60, 220, 40);\r\n}\r\n<\/pre>\n<p>Y lo ejecutamos. En principio, este c\u00f3digo nos tendr\u00eda que pintar un rect\u00e1ngulo en la pantalla. Pero no lo hace. \u00bfQu\u00e9 puede pasar?<\/p>\n<p>Si nos fijamos, el editor nos ha marcado en rojo la l\u00ednea de c\u00f3digo donde se ha producido el error. Adem\u00e1s, en la consola, nos da m\u00e1s informaci\u00f3n: <span style=\"font-family: Courier, Arial;\">rec<\/span> no est\u00e1 definido. No es una informaci\u00f3n muy completa, pero seguro que nos ser\u00e1 de ayuda en m\u00e1s de una ocasi\u00f3n.<\/p>\n<div class=\"featured featured-blue\"><p><strong>Nota<\/strong>: en el momento de escribir esta gu\u00eda de estudio, Firefox, Chrome y Edge marcan en rojo la l\u00ednea donde se produce el error. Otros navegadores, como Safari, pueden no hacerlo.<\/p>\n<\/div>\n<p>En la imagen pod\u00e9is ver una captura de lo que pasa al ejecutar este programa. El error dice:<\/p>\n<pre><span style=\"color: red;\">rec is not defined (sketch: line 6)<\/span><\/pre>\n<p>De aqu\u00ed lo que est\u00e1 m\u00e1s claro es la parte que dice \u00abrec is not defined\u00bb y la l\u00ednea donde se ha producido el error: en la l\u00ednea 6 tenemos la instrucci\u00f3n <span style=\"font-family: Courier, Arial;\">rec<\/span> que no existe en p5.js.<\/p>\n<p><img loading=\"lazy\" class=\"alignnone size-full wp-image-144\" src=\"http:\/\/disseny-test.uoc.edu\/materials\/programacio\/wp-content\/uploads\/sites\/17\/2019\/06\/PID_00258586_010.jpg\" alt=\"\" width=\"652\" height=\"380\" srcset=\"http:\/\/disseny-test.uoc.edu\/materials\/programacio\/wp-content\/uploads\/sites\/17\/2019\/06\/PID_00258586_010.jpg 652w, http:\/\/disseny-test.uoc.edu\/materials\/programacio\/wp-content\/uploads\/sites\/17\/2019\/06\/PID_00258586_010-300x175.jpg 300w\" sizes=\"(max-width: 652px) 100vw, 652px\" \/><\/p>\n<p>En el pr\u00f3ximo reto veremos que desde nuestros programas, usando la funci\u00f3n <span style=\"font-family: Courier, Arial;\">console.log()<\/span>, podremos escribir textos en la consola. Y esto nos servir\u00e1 para poder revisar m\u00e1s f\u00e1cilmente nuestros programas.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Dado que empezaremos a hacer programas con bastantes instrucciones, es m\u00e1s que posible que en alg\u00fan punto nos equivoquemos y no obtengamos el resultado deseado. \u00bfC\u00f3mo lo podemos comprobar? Recuperamos aqu\u00ed el apartado \u00abThe Console\u00bb del cap\u00edtulo 2 del libro. La consola nos permitir\u00e1, entre otras cosas, ver si hemos cometido alg\u00fan error en el [&hellip;]<\/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\/1278"}],"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=1278"}],"version-history":[{"count":12,"href":"http:\/\/disseny-test.uoc.edu\/materials\/programacio\/es\/wp-json\/wp\/v2\/pages\/1278\/revisions"}],"predecessor-version":[{"id":3645,"href":"http:\/\/disseny-test.uoc.edu\/materials\/programacio\/es\/wp-json\/wp\/v2\/pages\/1278\/revisions\/3645"}],"wp:attachment":[{"href":"http:\/\/disseny-test.uoc.edu\/materials\/programacio\/es\/wp-json\/wp\/v2\/media?parent=1278"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}