Skip to content

Commit e9ea627

Browse files
EmmanuelArenasEmmanuelArenas
committed
Spanish translation day 13 of 30
1 parent 1ab1f3e commit e9ea627

File tree

3 files changed

+361
-3
lines changed

3 files changed

+361
-3
lines changed

‎Spanish/dia_11_Desestructuracion_y_Spreading/dia_11_desestructuracion_y_spreading.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -692,4 +692,4 @@ La salida del objeto copiado debería tener este aspecto:
692692

693693
🎉 ¡FELICITACIONES! 🎉
694694

695-
[<< Day 10](../dia_10_Sets_y_Maps/dia_10_sets_y_maps.md) | [Day 12 >>](../dia_12_Expresiones_Regulares/dia_12_expresiones_regulares.md)
695+
[<< Día 10](../dia_10_Sets_y_Maps/dia_10_sets_y_maps.md) | [Día 12 >>](../dia_12_Expresiones_Regulares/dia_12_expresiones_regulares.md)

‎Spanish/dia_12_Expresiones_Regulares/dia_12_expresiones_regulares.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@
1414

1515
</div>
1616

17-
[<< Day 11](../dia_11_Desestructuracion_y_Spreading/dia_11_desestructuracion_y_spreading.md) | [Day 13>>](..)
17+
[<< Día 11](../dia_11_Desestructuracion_y_Spreading/dia_11_desestructuracion_y_spreading.md) | [Día 13>>](../dia_13_Metodos_del_Objeto_Console/dia_13_metodos_del_objeto_console.md)
1818

1919
![Thirty Days Of JavaScript](../images/banners/day_1_12.png)
2020

@@ -537,4 +537,4 @@ console.log(cleanText(sentence));
537537
538538
🎉 ¡FELICITACIONES! 🎉
539539
540-
[<< Day 11](../dia_11_Desestructuracion_y_Spreading/dia_11_desestructuracion_y_spreading.md) | [Day 13 >>](..)
540+
[<< Día 11](../dia_11_Desestructuracion_y_Spreading/dia_11_desestructuracion_y_spreading.md) | [Día 13 >>](../dia_13_Metodos_del_Objeto_Console/dia_13_metodos_del_objeto_console.md)

‎Spanish/dia_13_Metodos_del_Objeto_Console/dia_13_metodos_del_objeto_console.md

Lines changed: 358 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,358 @@
1+
<div align="center">
2+
<h1> 30 Días de JavaScript: Métodos del Objeto Console</h1>
3+
<a class="header-badge" target="_blank" href="https://www.linkedin.com/in/asabeneh/">
4+
<img src="https://img.shields.io/badge/style--5eba00.svg?label=LinkedIn&logo=linkedin&style=social">
5+
</a>
6+
<a class="header-badge" target="_blank" href="https://twitter.com/Asabeneh">
7+
<img alt="Twitter Follow" src="https://img.shields.io/twitter/follow/asabeneh?style=social">
8+
</a>
9+
10+
<sub>Autor:
11+
<a href="https://www.linkedin.com/in/asabeneh/" target="_blank">Asabeneh Yetayeh</a><br>
12+
<small> Enero, 2020</small>
13+
</sub>
14+
15+
</div>
16+
17+
[<< Día 12](../dia_12_Expresiones_Regulares/dia_12_expresiones_regulares.md) | [Día 14>>](..)
18+
19+
![Thirty Days Of JavaScript](../images/banners/day_1_13.png)
20+
21+
- [Día 13](#día-13)
22+
- [Métodos del Objeto Console](#métodos-del-objeto-console)
23+
- [console.log()](#consolelog)
24+
- [console.warn()](#consolewarn)
25+
- [console.error()](#consoleerror)
26+
- [console.table()](#consoletable)
27+
- [console.time()](#consoletime)
28+
- [console.info()](#consoleinfo)
29+
- [console.assert()](#consoleassert)
30+
- [console.group()](#consolegroup)
31+
- [console.count()](#consolecount)
32+
- [console.clear()](#consoleclear)
33+
- [Ejercicios](#ejercicios)
34+
- [Ejercicios:Nivel 1](#ejerciciosnivel-1)
35+
- [Ejercicios:Nivel 2](#ejerciciosnivel-2)
36+
- [Ejercicios:Nivel 3](#ejerciciosnivel-3)
37+
38+
# Día 13
39+
40+
## Métodos del Objeto Console
41+
42+
En esta sección, trataremos sobre console y los métodos de los objetos console. Los principiantes generalmente no saben cuál usar: console.log(), document.write() o document.getElementById.
43+
44+
Usamos métodos de objetos console para mostrar la salida en la consola del navegador y usamos document.write para mostrar la salida en el documento del navegador (view port). Ambos métodos se utilizan únicamente con fines de prueba y depuración. El método console es la herramienta de prueba y depuración más popular en el navegador. Usamos document.getElementById() cuando queremos interactuar con el DOM usando JavaScript. Trataremos el tema del DOM en otra sección.
45+
46+
Además del famoso método console.log(), console proporciona otros métodos más.
47+
48+
### console.log()
49+
50+
Usamos console.log() para mostrar la salida en la consola del navegador. Podemos sustituir valores y también podemos estilizar la salida del registro usando %c.
51+
52+
- Mostrando la salida en la consola del navegador
53+
54+
```js
55+
console.log("30 Days of JavaScript");
56+
```
57+
58+
```sh
59+
30 Days of JavaScript
60+
```
61+
62+
- Sustitución
63+
64+
```js
65+
console.log("%d %s of JavaScript", 30, "Days");
66+
```
67+
68+
```sh
69+
30 Days of JavaScript
70+
```
71+
72+
- CSS
73+
74+
Podemos darle estilo al mensaje de registro usando css. Copia el siguiente código y pégalo en la consola del navegador para ver el resultado.
75+
76+
```js
77+
console.log("%c30 Days Of JavaScript", "color:green"); // la salida del registro es verde
78+
console.log(
79+
"%c30 Days%c %cOf%c %cJavaScript%c",
80+
"color:green",
81+
"",
82+
"color:red",
83+
"",
84+
"color:yellow"
85+
); // salida del registro texto verde rojo y amarillo
86+
```
87+
88+
### console.warn()
89+
90+
Usamos console.warn() para dar avisos en el navegador. Por ejemplo para informar o avisar de la depreciación de la versión de un paquete o de malas prácticas. Copia el siguiente código y pégalo en la consola del navegador para ver los mensajes de advertencia.
91+
92+
```js
93+
console.warn("This is a warning");
94+
console.warn(
95+
"You are using React. Do not touch the DOM. Virtual DOM will take care of handling the DOM!"
96+
);
97+
console.warn("Warning is different from error");
98+
```
99+
100+
### console.error()
101+
102+
El método console.error() muestra un mensaje de error.
103+
104+
```js
105+
console.error("This is an error message");
106+
console.error("We all make mistakes");
107+
```
108+
109+
### console.table()
110+
111+
El método console.table() muestra los datos como una tabla en la consola. Muestra los datos en forma de tabla. El método console.table() toma un argumento requerido data, que debe ser un array o un objeto, y un parámetro adicional opcional columns.
112+
113+
Empecemos con un simple array. El código siguiente muestra una tabla con dos columnas. Una columna índice para mostrar el índice y una columna valor para mostrar los nombres
114+
115+
```js
116+
const names = ["Asabeneh", "Brook", "David", "John"];
117+
console.table(names);
118+
```
119+
120+
Comprobemos también el resultado de un objeto. Esto crea una tabla con dos columnas: una columna índice que contiene las claves y una columna valor que contiene los valores del objeto.
121+
122+
```js
123+
const user = {
124+
name: "Asabeneh",
125+
title: "Programmer",
126+
country: "Finland",
127+
city: "Helsinki",
128+
age: 250,
129+
};
130+
console.table(user);
131+
```
132+
133+
Comprueba el resto de los ejemplos copiando y pegando en la consola del navegador.
134+
135+
```js
136+
const countries = [
137+
["Finland", "Helsinki"],
138+
["Sweden", "Stockholm"],
139+
["Norway", "Oslo"],
140+
];
141+
console.table(countries);
142+
```
143+
144+
```js
145+
const users = [
146+
{
147+
name: "Asabeneh",
148+
title: "Programmer",
149+
country: "Finland",
150+
city: "Helsinki",
151+
age: 250,
152+
},
153+
{
154+
name: "Eyob",
155+
title: "Teacher",
156+
country: "Sweden",
157+
city: "London",
158+
age: 25,
159+
},
160+
{
161+
name: "Asab",
162+
title: "Instructor",
163+
country: "Norway",
164+
city: "Oslo",
165+
age: 22,
166+
},
167+
{
168+
name: "Matias",
169+
title: "Developer",
170+
country: "Denmark",
171+
city: "Copenhagen",
172+
age: 28,
173+
},
174+
];
175+
console.table(users);
176+
```
177+
178+
### console.time()
179+
180+
Inicia un temporizador que se puede utilizar para controlar el tiempo que dura una operación. Puedes dar a cada temporizador un nombre único, y puedes tener hasta 10.000 temporizadores funcionando en una página determinada. Cuando llame a console.timeEnd() con el mismo nombre, el navegador mostrará el tiempo, en milisegundos, que ha transcurrido desde que se inició el temporizador.
181+
182+
```js
183+
const countries = [
184+
["Finland", "Helsinki"],
185+
["Sweden", "Stockholm"],
186+
["Norway", "Oslo"],
187+
];
188+
189+
console.time("Regular for loop");
190+
for (let i = 0; i < countries.length; i++) {
191+
console.log(countries[i][0], countries[i][1]);
192+
}
193+
console.timeEnd("Regular for loop");
194+
195+
console.time("for of loop");
196+
for (const [name, city] of countries) {
197+
console.log(name, city);
198+
}
199+
console.timeEnd("for of loop");
200+
201+
console.time("forEach loop");
202+
countries.forEach(([name, city]) => {
203+
console.log(name, city);
204+
});
205+
console.timeEnd("forEach loop");
206+
```
207+
208+
```sh
209+
Finland Helsinki
210+
Sweden Stockholm
211+
Norway Oslo
212+
Regular for loop: 0.34716796875ms
213+
Finland Helsinki
214+
Sweden Stockholm
215+
Norway Oslo
216+
for of loop: 0.26806640625ms
217+
Finland Helsinki
218+
Sweden Stockholm
219+
Norway Oslo
220+
forEach loop: 0.358154296875ms
221+
```
222+
223+
De acuerdo con la salida anterior, el bucle for regular es más lento que el bucle for of o forEach.
224+
225+
### console.info()
226+
227+
Muestra un mensaje de información en la consola del navegador.
228+
229+
```js
230+
console.info("30 Days Of JavaScript challenge is trending on Github");
231+
console.info("30 Days Of fullStack challenge might be released");
232+
console.info("30 Days Of HTML and CSS challenge might be released");
233+
```
234+
235+
### console.assert()
236+
237+
El método console.assert() escribe un mensaje de error en la consola si la afirmación es falsa. Si la afirmación es verdadera, no pasa nada. El primer parámetro es una expresión de aserción. Si esta expresión es falsa, se mostrará un mensaje de error de aserción fallida.
238+
239+
```js
240+
console.assert(4 > 3, "4 is greater than 3"); // no hay resultado
241+
console.assert(3 > 4, "3 is not greater than 4"); // Aserción fallida: 3 no es mayor que 4
242+
243+
for (let i = 0; i <= 10; i += 1) {
244+
let errorMessage = `${i} is not even`;
245+
console.log("the # is " + i);
246+
console.assert(i % 2 === 0, { number: i, errorMessage: errorMessage });
247+
}
248+
```
249+
250+
### console.group()
251+
252+
El console.group() puede ayudar a agrupar diferentes grupos de registro. Copie el siguiente código y péguelo en la consola del navegador para los grupos.
253+
254+
```js
255+
const names = ["Asabeneh", "Brook", "David", "John"];
256+
const countries = [
257+
["Finland", "Helsinki"],
258+
["Sweden", "Stockholm"],
259+
["Norway", "Oslo"],
260+
];
261+
const user = {
262+
name: "Asabeneh",
263+
title: "Programmer",
264+
country: "Finland",
265+
city: "Helsinki",
266+
age: 250,
267+
};
268+
const users = [
269+
{
270+
name: "Asabeneh",
271+
title: "Programmer",
272+
country: "Finland",
273+
city: "Helsinki",
274+
age: 250,
275+
},
276+
{
277+
name: "Eyob",
278+
title: "Teacher",
279+
country: "Sweden",
280+
city: "London",
281+
age: 25,
282+
},
283+
{
284+
name: "Asab",
285+
title: "Instructor",
286+
country: "Norway",
287+
city: "Oslo",
288+
age: 22,
289+
},
290+
{
291+
name: "Matias",
292+
title: "Developer",
293+
country: "Denmark",
294+
city: "Copenhagen",
295+
age: 28,
296+
},
297+
];
298+
299+
console.group("Names");
300+
console.log(names);
301+
console.groupEnd();
302+
303+
console.group("Countries");
304+
console.log(countries);
305+
console.groupEnd();
306+
307+
console.group("Users");
308+
console.log(user);
309+
console.log(users);
310+
console.groupEnd();
311+
```
312+
313+
### console.count()
314+
315+
Imprime el número de veces que se llama a console.count(). Toma un parámetro de etiqueta de cadena. Es muy útil para contar el número de veces que se llama a una función. En el siguiente ejemplo, el método console.count() se ejecutará tres veces
316+
317+
```js
318+
const func = () => {
319+
console.count("Function has been called");
320+
};
321+
func();
322+
func();
323+
func();
324+
```
325+
326+
```sh
327+
Function has been called: 1
328+
Function has been called: 2
329+
Function has been called: 3
330+
```
331+
332+
### console.clear()
333+
334+
El console.clear() limpia la consola del navegador.
335+
336+
🌕 Sigue con el buen trabajo. Sigue esforzándote, ¡el cielo es el límite! Acabas de completar el día 13 de desafíos y llevas 13 pasos de tu camino hacia la grandeza. Ahora haz algunos ejercicios para tu cerebro y para tus músculos.
337+
338+
## Ejercicios
339+
340+
### Ejercicios:Nivel 1
341+
342+
1. Mostrar la matriz de países como una tabla
343+
2. Mostrar el objeto países como una tabla
344+
3. Utilice console.group() para agrupar los registros
345+
346+
### Ejercicios:Nivel 2
347+
348+
1. 10 > 2 \* 10 use console.assert()
349+
2. Escribe un mensaje de advertencia utilizando console.warn()
350+
3. Escribe un mensaje de error utilizando console.error()
351+
352+
### Ejercicios:Nivel 3
353+
354+
1. Comprueba la diferencia de velocidad entre los siguientes bucles: while, for, for of, forEach
355+
356+
🎉 ¡FELICITACIONES! 🎉
357+
358+
[<< Día 12](../dia_12_Expresiones_Regulares/dia_12_expresiones_regulares.md) | [Día 14>>](..)

0 commit comments

Comments
 (0)