{"id":701,"date":"2024-07-30T20:19:08","date_gmt":"2024-07-30T18:19:08","guid":{"rendered":"https:\/\/blog.sutilweb.eu\/?page_id=701"},"modified":"2024-07-30T20:19:08","modified_gmt":"2024-07-30T18:19:08","slug":"001-objeto-console","status":"publish","type":"page","link":"https:\/\/sutilweb.eu\/index.php\/lenguajes\/javascript\/javascript-practico\/06-objetos-y-funciones-del-lenguaje\/001-objeto-console\/","title":{"rendered":"001. Objeto console"},"content":{"rendered":"\n

En los siguientes cap\u00edtulos vamos a ver algunos objetos que son propios de Javascript<\/strong>, que cuando estamos haciendo proyectos reales, son muy \u00fatiles e importante conocerlos. En este primer cap\u00edtulo vamos a ver el objeto console<\/em><\/strong>.<\/p>\n\n\n\n\n\n\n\n

En estos cap\u00edtulos hemos estado utilizando el objeto console<\/em> <\/strong>para realizar muchos ejms.<\/p>\n\n\n\n

console<\/em> <\/strong>es un objeto que ya reconoce Javascript<\/strong>, pero si mandamos a la misma consola la siguiente sintaxis.<\/p>\n\n\n\n

console.log(console);<\/pre>\n\n\n\n
Podemos ver todas las caracter\u00edsticas que tiene. Todas las propiedades<\/strong>, los m\u00e9todos<\/strong> como pueden ser memory<\/em><\/strong>, que es el espacio en memoria que est\u00e1 usando en m\u00e1quina, debug<\/em><\/strong>, error<\/em><\/strong>, info<\/em><\/strong>… Salvo la propiedad memory<\/em><\/strong>, el resto son m\u00e9todos<\/strong>.<\/p>\n\n\n\n
La consola de Javascript<\/strong> tambi\u00e9n nos permite mandar mensajes como si fueran alertas<\/strong>, errores<\/strong>, informaci\u00f3n<\/strong>, y por supuesto, logs<\/strong>, que es el tipo de console<\/em> <\/strong>que hemos visto hasta ahora.<\/p>\n\n\n\n
Ejm<\/strong><\/p>\n\n\n\n
console.log(\"Esto es un registro de lo que ha pasado\");\nconsole.error(\"Esto es un error\");\nconsole.warn(\"Esto es un aviso\");\nconsole.info(\"Esto es informaci\u00f3n\");<\/pre>\n\n\n\n
\n
Nota<\/strong>: console.info()<\/strong> es muy parecido a console.log()<\/strong>.<\/p>\n<\/blockquote>\n\n\n\n
Veamos un ejm para ver caracter\u00edsticas.<\/p>\n\n\n\n
Ejm<\/strong><\/p>\n\n\n\n
<!DOCTYPE html>\n<html lang=\"en\">\n  <head>\n    <meta charset=\"UTF-8\" \/>\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" \/>\n    <title>Objeto console<\/title>\n  <\/head>\n\n  <body>\n    <h1>Objeto console<\/h1>\n\n    <script>\n      let nombre = \"Francisco\",\n        apellido = \"Paredes\",\n        edad = 51;\n\n      console.log(nombre);\n      console.log(apellido);\n      console.log(edad);\n\n      \/\/ Podemos pasar todas las variables en un mismo console\n      console.log(nombre, apellido, edad);\n\n      \/\/ Interpolar texto con variables\n      console.log(\n        `Hola, mi nombre es ${nombre} ${apellido} y tengo ${edad} a\u00f1os`\n      );\n\n      \/\/ Uso de comodines como en otros lenguajes de programaci\u00f3n\n      console.log(\n        \"Hola, mi nombre es %s %s y tengo %d\",\n        nombre,\n        apellido,\n        edad,\n        \"a\u00f1os\"\n      );\n    <\/script>\n  <\/body>\n<\/html><\/pre>\n\n\n\n
Existe otra caracter\u00edstica que es console.clear()<\/em><\/strong> que lo que va a hacer es limpiar todo lo que haya estado en la consola.<\/p>\n\n\n\n
Veamos m\u00e1s ejms.<\/p>\n\n\n\n
Ejm<\/strong><\/p>\n\n\n\n
console.log(document); \/\/ Muestra el documento HTML literalmente\nconsole.dir(window): \/\/ Muestra las propiedades, m\u00e9todos y constructores del objeto window\nconsole.dir(document); \/\/ Muestra como en el window todas las propiedades, objetos, m\u00e9todos,\natributos que tiene el document<\/pre>\n\n\n\n
Hacer grupos en la consola<\/h2>\n\n\n\n
Podemos iniciar un grupo en la consola, vamos a verlo con un ejm.<\/p>\n\n\n\n
Ejm<\/strong><\/p>\n\n\n\n
console.group(\"Cursos\"); \/\/ Empieza el grupo de consoles\nconsole.log(\"Curso Javascript\");\nconsole.log(\"Curso de PHP\");\nconsole.groupEnd(); \/\/ Termina el grupo de consoles<\/pre>\n\n\n\n
Hacer tablas<\/h2>\n\n\n\n
Lo har\u00edamos con la siguiente sintaxis.<\/p>\n\n\n\n
Ejm<\/strong><\/p>\n\n\n\n
console.table(Object.entries(console).sort());<\/pre>\n\n\n\n
Lo que hace es mostrarme una tabla ordenada alfab\u00e9ticamente con todas las propiedades<\/strong> y m\u00e9todos<\/strong> del objeto console<\/em><\/strong>.<\/p>\n\n\n\n
Mostrar arrays en forma de tabla<\/h2>\n\n\n\n
La sintaxis ser\u00eda la siguiente.<\/p>\n\n\n\n
Ejm<\/strong><\/p>\n\n\n\n
      const numeros = [1, 2, 3, 4, 5],\n        vocales = [\"a\", \"e\", \"i\", \"o\", \"u\"];\n\n      console.table(numeros);\n      console.table(vocales);<\/pre>\n\n\n\n
Mostrar objetos en forma de tabla<\/h2>\n\n\n\n
Se har\u00eda de forma parecida a como se hace con los arrays<\/strong>.<\/p>\n\n\n\n
      const francisco = {\n        nombre: \"Francisco\",\n        apellido: \"Paredes\",\n        edad: 51,\n      };\n\n      console.table(francisco);<\/pre>\n\n\n\n
Mostrar tiempo que tarda el c\u00f3digo<\/h2>\n\n\n\n
Veamos un ejm<\/p>\n\n\n\n
Ejm<\/strong><\/p>\n\n\n\n
      console.time(\"Cuanto tiempo tarda el c\u00f3digo en cargarse\");\n\n      const arr = Array(1000000);\n      for (let i = 0; i < arr.length; i++) {\n        arr[i] = i;\n      }\n\n      console.timeEnd(\"Cuanto tiempo tarda el c\u00f3digo en cargarse\");\n      \/\/ Tanto en console.time() como en console.timeEnd hay que poner el mismo par\u00e1metro para que funcione<\/pre>\n\n\n\n
Cuantas veces se repite una l\u00ednea de c\u00f3digo<\/h2>\n\n\n\n
Veamos un ejm.<\/p>\n\n\n\n
Ejm<\/strong><\/p>\n\n\n\n
      for (i = 0; i <= 100; i++) {\n        console.count(\"C\u00f3digo for: \");\n        console.log(i);\n      }<\/pre>\n\n\n\n
console.assert()<\/h2>\n\n\n\n
Se trata como de una mini librer\u00eda para hacer pruebas. Veamos un ejm.<\/p>\n\n\n\n
Ejm<\/strong><\/p>\n\n\n\n
      let x = 3,\n        y = 2,\n        pruebaXY = \"Se espera que X sea siempre menor que Y\";\n\n      console.assert(x < y, { x, y, pruebaXY });<\/pre>\n\n\n\n
Estos son algunos de los m\u00e9todos<\/strong> m\u00e1s importantes a la hora en que estemos trabajando con nuestra consola.<\/p>\n\n\n\n
Ejercicio completo<\/h2>\n\n\n\n
He aqu\u00ed la sintaxis de un ejercicio completo con los diferentes console.<\/em><\/strong><\/p>\n\n\n\n
Ejm<\/strong><\/p>\n\n\n\n
\/\/ Ejercicio: Uso de los diferentes tipos de console\n\n\/\/ Paso 1: Declarar variables\nconst nombre = \"Juan\";\nconst edad = 30;\nconst listaCompras = [\"Manzanas\", \"Pl\u00e1tanos\", \"Leche\", \"Pan\"];\nconst persona = {\nnombre: \"Mar\u00eda\",\nedad: 25,\nocupacion: \"Ingeniera\",\n};\n\n\/\/ Paso 2: Utilizar diferentes m\u00e9todos de console\n\n\/\/ M\u00e9todo console.log() para mostrar mensajes informativos\nconsole.log(\"Bienvenido a la aplicaci\u00f3n.\");\nconsole.log(\"El nombre es:\", nombre);\nconsole.log(\"La edad es:\", edad);\n\n\/\/ M\u00e9todo console.error() para mostrar mensajes de error\nconsole.error(\"\u00a1Error! La operaci\u00f3n no se pudo completar.\");\n\n\/\/ M\u00e9todo console.warn() para mostrar advertencias\nconsole.warn(\"\u00a1Atenci\u00f3n! Quedan pocos productos en el inventario.\");\n\n\/\/ M\u00e9todo console.info() para mostrar informaci\u00f3n detallada\nconsole.info(\"La persona es:\", persona);\n\n\/\/ M\u00e9todo console.table() para mostrar datos en forma de tabla\nconsole.table(listaCompras);\n\n\/\/ M\u00e9todo console.group() y console.groupEnd() para agrupar mensajes\nconsole.group(\"Detalles de la persona:\");\nconsole.log(\"Nombre:\", persona.nombre);\nconsole.log(\"Edad:\", persona.edad);\nconsole.log(\"Ocupaci\u00f3n:\", persona.ocupacion);\nconsole.groupEnd();\n\n\/\/ M\u00e9todo console.time() y console.timeEnd() para medir el tiempo de ejecuci\u00f3n\nconsole.time(\"Tiempo de ejecuci\u00f3n\");\nfor (let i = 0; i < 1000000; i++) {\n\/\/ Simulamos un bucle para medir el tiempo de ejecuci\u00f3n\n}\nconsole.timeEnd(\"Tiempo de ejecuci\u00f3n\");<\/pre>\n","protected":false},"excerpt":{"rendered":"
En los siguientes cap\u00edtulos vamos a ver algunos objetos que son propios de Javascript, que cuando estamos haciendo proyectos reales, son muy…<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":697,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_uag_custom_page_level_css":"","footnotes":""},"class_list":["post-701","page","type-page","status-publish","hentry"],"uagb_featured_image_src":{"full":false,"thumbnail":false,"medium":false,"medium_large":false,"large":false,"1536x1536":false,"2048x2048":false},"uagb_author_info":{"display_name":"Sutil Web","author_link":"https:\/\/sutilweb.eu\/index.php\/author\/sutilweb\/"},"uagb_comment_info":0,"uagb_excerpt":"En los siguientes cap\u00edtulos vamos a ver algunos objetos que son propios de Javascript, que cuando estamos haciendo proyectos reales, son muy...","_links":{"self":[{"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/701","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/comments?post=701"}],"version-history":[{"count":2,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/701\/revisions"}],"predecessor-version":[{"id":703,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/701\/revisions\/703"}],"up":[{"embeddable":true,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/697"}],"wp:attachment":[{"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/media?parent=701"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}