{"id":114,"date":"2019-06-27T12:38:59","date_gmt":"2019-06-27T10:38:59","guid":{"rendered":"http:\/\/disseny-test.uoc.edu\/materials\/programacio\/?page_id=114"},"modified":"2019-08-17T02:05:20","modified_gmt":"2019-08-17T00:05:20","slug":"1-7-deteccio-derrors","status":"publish","type":"page","link":"http:\/\/disseny-test.uoc.edu\/materials\/programacio\/1-7-deteccio-derrors\/","title":{"rendered":"1.7. Detecci\u00f3 d&#8217;errors"},"content":{"rendered":"<p>At\u00e8s que comen\u00e7arem a fer programes amb for\u00e7a instruccions, \u00e9s m\u00e9s que possible que en algun punt ens equivoquem i no obtinguem el resultat desitjat. Com ho podem comprovar?<\/p>\n<p>Recuperem aqu\u00ed l\u2019apartat \u00abThe Console\u00bb del cap\u00edtol 2 del llibre.<\/p>\n<p>La consola ens permetr\u00e0, entre d\u2019altres coses, veure si hem com\u00e8s algun error en el codi. Vegem-ho amb un exemple.<\/p>\n<p>Copiem el codi seg\u00fcent a l\u2019editor (\u00e9s el codi de l\u2019exemple 3-5 amb una petita modificaci\u00f3):<\/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>I l\u2019executem. En principi, aquest codi ens hauria de pintar un rectangle a la pantalla. Per\u00f2 no ho fa. Qu\u00e8 pot passar?<\/p>\n<p>Si ens fixem, l\u2019editor ens ha marcat en vermell la l\u00ednia de codi on s\u2019ha produ\u00eft l\u2019error. A m\u00e9s, la consola ens dona m\u00e9s informaci\u00f3: <span style=\"font-family: Courier, Arial;\">rec<\/span> no est\u00e0 definit. No \u00e9s una informaci\u00f3 molt completa per\u00f2 segur que ens ser\u00e0 d\u2019ajut m\u00e9s d\u2019una vegada.<\/p>\n<div class=\"featured featured-blue\"><p><strong>Nota<\/strong>: en el moment d\u2019escriure aquesta Guia d\u2019estudi, Firefox, Chrome i Edge marquen en vermell la l\u00ednia on es produeix l\u2019error. Altres navegadors, com ara Safari, poden no fer-ho.<\/p>\n<\/div>\n<p>A la imatge, podeu veure una captura del que passa a l\u2019executar aquest programa. L\u2019error diu:<\/p>\n<pre><span style=\"color: red;\">rec is not defined (sketch: line 6)<\/span><\/pre>\n<p>D\u2019aqu\u00ed el que \u00e9s m\u00e9s clar \u00e9s la part que diu \u00abrec is not defined\u00bb i la l\u00ednia on s\u2019ha produ\u00eft l\u2019error: A la l\u00ednia 6 tenim la instrucci\u00f3 <span style=\"font-family: Courier, Arial;\">rec<\/span> que no existeix a 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 proper repte veurem que des dels nostres programes, fent servir la funci\u00f3 <span style=\"font-family: Courier, Arial;\">console.log()<\/span>, podem escriure textos a la consola. I aix\u00f2 ens servir\u00e0 per a poder revisar m\u00e9s f\u00e0cilment els nostres programes.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>At\u00e8s que comen\u00e7arem a fer programes amb for\u00e7a instruccions, \u00e9s m\u00e9s que possible que en algun punt ens equivoquem i no obtinguem el resultat desitjat. Com ho podem comprovar? Recuperem aqu\u00ed l\u2019apartat \u00abThe Console\u00bb del cap\u00edtol 2 del llibre. La consola ens permetr\u00e0, entre d\u2019altres coses, veure si hem com\u00e8s algun error en el codi. [&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\/wp-json\/wp\/v2\/pages\/114"}],"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=114"}],"version-history":[{"count":19,"href":"http:\/\/disseny-test.uoc.edu\/materials\/programacio\/wp-json\/wp\/v2\/pages\/114\/revisions"}],"predecessor-version":[{"id":3644,"href":"http:\/\/disseny-test.uoc.edu\/materials\/programacio\/wp-json\/wp\/v2\/pages\/114\/revisions\/3644"}],"wp:attachment":[{"href":"http:\/\/disseny-test.uoc.edu\/materials\/programacio\/wp-json\/wp\/v2\/media?parent=114"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}