En los siguientes capítulos vamos a ver algunos objetos que son propios de Javascript, que cuando estamos haciendo proyectos reales, son muy útiles e importante conocerlos. En este primer capítulo vamos a ver el objeto console.
En estos capítulos hemos estado utilizando el objeto console para realizar muchos ejms.
console es un objeto que ya reconoce Javascript, pero si mandamos a la misma consola la siguiente sintaxis.
console.log(console);
Podemos ver todas las características que tiene. Todas las propiedades, los métodos como pueden ser memory, que es el espacio en memoria que está usando en máquina, debug, error, info… Salvo la propiedad memory, el resto son métodos.
La consola de Javascript también nos permite mandar mensajes como si fueran alertas, errores, información, y por supuesto, logs, que es el tipo de console que hemos visto hasta ahora.
Ejm
console.log("Esto es un registro de lo que ha pasado");
console.error("Esto es un error");
console.warn("Esto es un aviso");
console.info("Esto es información");Nota: console.info() es muy parecido a console.log().
Veamos un ejm para ver características.
Ejm
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Objeto console</title>
</head>
<body>
<h1>Objeto console</h1>
<script>
let nombre = "Francisco",
apellido = "Paredes",
edad = 51;
console.log(nombre);
console.log(apellido);
console.log(edad);
// Podemos pasar todas las variables en un mismo console
console.log(nombre, apellido, edad);
// Interpolar texto con variables
console.log(
`Hola, mi nombre es ${nombre} ${apellido} y tengo ${edad} años`
);
// Uso de comodines como en otros lenguajes de programación
console.log(
"Hola, mi nombre es %s %s y tengo %d",
nombre,
apellido,
edad,
"años"
);
</script>
</body>
</html>Existe otra característica que es console.clear() que lo que va a hacer es limpiar todo lo que haya estado en la consola.
Veamos más ejms.
Ejm
console.log(document); // Muestra el documento HTML literalmente console.dir(window): // Muestra las propiedades, métodos y constructores del objeto window console.dir(document); // Muestra como en el window todas las propiedades, objetos, métodos, atributos que tiene el document
Hacer grupos en la consola
Podemos iniciar un grupo en la consola, vamos a verlo con un ejm.
Ejm
console.group("Cursos"); // Empieza el grupo de consoles
console.log("Curso Javascript");
console.log("Curso de PHP");
console.groupEnd(); // Termina el grupo de consolesHacer tablas
Lo haríamos con la siguiente sintaxis.
Ejm
console.table(Object.entries(console).sort());
Lo que hace es mostrarme una tabla ordenada alfabéticamente con todas las propiedades y métodos del objeto console.
Mostrar arrays en forma de tabla
La sintaxis sería la siguiente.
Ejm
const numeros = [1, 2, 3, 4, 5], vocales = ["a", "e", "i", "o", "u"]; console.table(numeros); console.table(vocales);
Mostrar objetos en forma de tabla
Se haría de forma parecida a como se hace con los arrays.
const francisco = {
nombre: "Francisco",
apellido: "Paredes",
edad: 51,
};
console.table(francisco);Mostrar tiempo que tarda el código
Veamos un ejm
Ejm
console.time("Cuanto tiempo tarda el código en cargarse");
const arr = Array(1000000);
for (let i = 0; i < arr.length; i++) {
arr[i] = i;
}
console.timeEnd("Cuanto tiempo tarda el código en cargarse");
// Tanto en console.time() como en console.timeEnd hay que poner el mismo parámetro para que funcioneCuantas veces se repite una línea de código
Veamos un ejm.
Ejm
for (i = 0; i <= 100; i++) {
console.count("Código for: ");
console.log(i);
}console.assert()
Se trata como de una mini librería para hacer pruebas. Veamos un ejm.
Ejm
let x = 3,
y = 2,
pruebaXY = "Se espera que X sea siempre menor que Y";
console.assert(x < y, { x, y, pruebaXY });Estos son algunos de los métodos más importantes a la hora en que estemos trabajando con nuestra consola.
Ejercicio completo
He aquí la sintaxis de un ejercicio completo con los diferentes console.
Ejm
// Ejercicio: Uso de los diferentes tipos de console
// Paso 1: Declarar variables
const nombre = "Juan";
const edad = 30;
const listaCompras = ["Manzanas", "Plátanos", "Leche", "Pan"];
const persona = {
nombre: "María",
edad: 25,
ocupacion: "Ingeniera",
};
// Paso 2: Utilizar diferentes métodos de console
// Método console.log() para mostrar mensajes informativos
console.log("Bienvenido a la aplicación.");
console.log("El nombre es:", nombre);
console.log("La edad es:", edad);
// Método console.error() para mostrar mensajes de error
console.error("¡Error! La operación no se pudo completar.");
// Método console.warn() para mostrar advertencias
console.warn("¡Atención! Quedan pocos productos en el inventario.");
// Método console.info() para mostrar información detallada
console.info("La persona es:", persona);
// Método console.table() para mostrar datos en forma de tabla
console.table(listaCompras);
// Método console.group() y console.groupEnd() para agrupar mensajes
console.group("Detalles de la persona:");
console.log("Nombre:", persona.nombre);
console.log("Edad:", persona.edad);
console.log("Ocupación:", persona.ocupacion);
console.groupEnd();
// Método console.time() y console.timeEnd() para medir el tiempo de ejecución
console.time("Tiempo de ejecución");
for (let i = 0; i < 1000000; i++) {
// Simulamos un bucle para medir el tiempo de ejecución
}
console.timeEnd("Tiempo de ejecución");