You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: 1-js/02-first-steps/09-comparison/article.md
+4-4Lines changed: 4 additions & 4 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -214,7 +214,7 @@ Obtenemos estos resultados porque:
214
214
## Resumen
215
215
216
216
- Los operadores de comparación retornan un valor booleano.
217
-
- Las cadenas se comparan letra por letra en el orden del "diccionario".
218
-
- Cuando se comparan valores de diferentes tipos, se convierten en números (excepto un control de igualdad estricta).
219
-
- Los valores `null` y `undefined` son iguales `==` entre sí y no equivalen a ningún otro valor.
220
-
- Ten cuidado al usar comparaciones como `>` o `<` con variables que ocasionalmente pueden ser `null/undefined`. Revisar por separado si hay `null/undefined`es una buena idea.
217
+
- Las cadenas se comparan letra por letra en orden de diccionario.
218
+
- Cuando se comparan valores de diferentes tipos, se convierten en números (con la excepción de la igualdad estricta).
219
+
- Los valores `null` y `undefined` son iguales `==` entre sí y también iguales a sí mismos, pero no son iguales a ningún otro valor.
220
+
- Ten cuidado al usar comparaciones como `>` o `<` con variables que ocasionalmente pueden ser `null/undefined`. Comprobar `null/undefined`por separado suele ser una buena idea.
Copy file name to clipboardExpand all lines: 1-js/09-classes/05-extend-natives/article.md
+6-6Lines changed: 6 additions & 6 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -1,7 +1,7 @@
1
1
2
-
# Ampliación de clases integradas
2
+
# Ampliación de clases nativas
3
3
4
-
Las clases integradas como Array, Map y otras también son extensibles.
4
+
Las clases nativas como Array, Map y otras también son extensibles.
5
5
6
6
Por ejemplo, aquí `PowerArray` hereda del `Array` nativo:
7
7
@@ -34,7 +34,7 @@ Aún más, podemos personalizar ese comportamiento.
34
34
35
35
Podemos agregar un `getter` estático especial `Symbol.species` a la clase. Si existe, debería devolver el constructor que JavaScript usará internamente para crear nuevas entidades en `map`, `filter` y así sucesivamente.
36
36
37
-
Si queremos que los métodos incorporados como `map` o `filter` devuelvan matrices regulares, podemos devolver `Array` en `Symbol.species`, como aquí:
37
+
Si queremos que los métodos nativos como `map` o `filter` devuelvan matrices regulares, podemos devolver `Array` en `Symbol.species`, como aquí:
38
38
39
39
```js run
40
40
classPowerArrayextendsArray {
@@ -43,7 +43,7 @@ class PowerArray extends Array {
43
43
}
44
44
45
45
*!*
46
-
// los métodos incorporados usarán esto como el constructor
46
+
// los métodos nativos usarán esto como el constructor
47
47
staticget [Symbol.species]() {
48
48
returnArray;
49
49
}
@@ -68,7 +68,7 @@ Como puede ver, ahora `.filter` devuelve un `Array`. Por lo tanto, la funcionali
68
68
Otras colecciones, como `Map` y `Set`, funcionan igual. También usan `Symbol.species`.
69
69
```
70
70
71
-
## Sin herencia estática en incorporados
71
+
## Sin herencia estática en nativos
72
72
73
73
Los objetos nativos tienen sus propios métodos estáticos, por ejemplo, `Object.keys`, `Array.isArray`, etc.
74
74
@@ -86,4 +86,4 @@ Imagen de la estructura para `Date` y `Object`:
86
86
87
87
Como puede ver, no hay un vínculo entre `Date` y `Object`. Son independientes, solo `Date.prototype` hereda de `Object.prototype`.
88
88
89
-
Esa es una diferencia importante de herencia entre los objetos integrados en comparación con lo que obtenemos con 'extends`.
89
+
Esa es una diferencia importante de herencia entre los objetos nativos en comparación con lo que obtenemos con 'extends`.
Copy file name to clipboardExpand all lines: 2-ui/1-document/03-dom-navigation/article.md
+2-2Lines changed: 2 additions & 2 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -167,7 +167,7 @@ Si mantenemos una referencia a `elem.childNodes`, y añadimos o quitamos nodos d
167
167
```
168
168
169
169
````warn header="No uses `for..in` para recorrer colecciones"
170
-
Las colecciones son iterables usando `for..of`. Algunas veces las personas tratan de utilizar `for..in` para eso.
170
+
Las colecciones son iterables usando `for..of`. Hay quienes tratan de utilizar `for..in` para eso.
171
171
172
172
Por favor, no lo hagas. El bucle `for..in` itera sobre todas las propiedades enumerables. Y las colecciones tienen unas propiedades "extra" raramente usadas que normalmente no queremos obtener:
173
173
@@ -235,7 +235,7 @@ La propiedad `parentElement` devuelve el "elemento" padre, mientras `parentNode`
Copy file name to clipboardExpand all lines: 2-ui/2-events/01-introduction-browser-events/article.md
+2-2Lines changed: 2 additions & 2 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -332,7 +332,7 @@ Algunas propiedades del objeto `event`:
332
332
: Tipo de evento, en este caso fue `"click"`.
333
333
334
334
`event.currentTarget`
335
-
: Elemento que maneja el evento. Lo que exactamente igual a `this`, a menos que el handler sea una función de flecha o su `this` esté vinculado a otra cosa, entonces podemos obtener el elemento desde `event.currentTarget`.
335
+
: Elemento que maneja el evento. Lo que es exactamente igual a `this`, a menos que `this` haya cambiado por ser el handler una función de flecha, o su `this` esté vinculado a otra cosa. event.currentTarget`siempre apunta al elemento.
336
336
337
337
`event.clientX` / `event.clientY`
338
338
: Coordenadas del cursor relativas a la ventana, para eventos de cursor.
@@ -440,7 +440,7 @@ Hay tres formas de asignar handlers:
440
440
441
441
1. Atributos HTML: `onclick="..."`.
442
442
2. Propiedades del DOM: `elem.onclick = function`.
443
-
3. Métodos: `elem.addEventListener(event, handler[, phase])` para agregar ó `removeEventListener` para remover.
443
+
3. Métodos: `elem.addEventListener(event, handler[, phase])` para agregarlos ó `removeEventListener` para quitarlos.
444
444
445
445
Los atributos HTML se usan con moderación, porque JavaScript en medio de una etiqueta HTML luce un poco extraño y ajeno. Además no podemos escribir montones de código ahí.
Copy file name to clipboardExpand all lines: 2-ui/2-events/02-bubbling-and-capturing/article.md
+5-6Lines changed: 5 additions & 6 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -45,13 +45,12 @@ Un clic en el elemento del interior `<p>` primero ejecuta `onclick`:
45
45
46
46
Así si hacemos clic en `<p>`, entonces veremos 3 alertas: `p` -> `div` -> `form`.
47
47
48
-
Este proceso se conoce como "propagación" porque los eventos "se propagan" desde el elemento más al interior, a través de los padres, como una burbuja en el agua.
48
+
Este proceso se conoce como "propagación" (bubbling, burbujeo) porque los eventos "se propagan" desde el elemento más al interior, a través de los padres, como una burbuja en el agua.
49
49
50
50
```warn header="*Casi* todos los elementos se propagan."
51
51
La palabra clave en esta frase es "casi".
52
52
53
-
54
-
Por ejemplo, un evento `focus` no se propaga. Hay otros ejemplos también, los veremos. Pero aún así, esta es la excepción a la regla, la mayoría de eventos sí se propagan.
53
+
Por ejemplo, un evento `focus` no se propaga. Hay otros ejemplos que veremos también. Pero aún así, esta es la excepción a la regla, la mayoría de eventos sí se propagan.
55
54
```
56
55
57
56
## event.target
@@ -99,7 +98,7 @@ Si un elemento tiene múltiples manejadores para un solo evento, aunque uno de e
99
98
100
99
En otras palabras, `event.stopPropagation()` detiene la propagación hacia arriba, pero todos los manejadores en el elemento actual se ejecutarán.
101
100
102
-
Para detener la propagación y prevenir que los manejadores del elemento actual se ejecuten, hay un método `event.stopImmediatePropagation()`. Después de él, ningún otro manejador será ejecutado.
101
+
Para detener la propagación e impedir que los manejadores del elemento actual se ejecuten, hay un método `event.stopImmediatePropagation()`. Después de él, ningún otro manejador será ejecutado.
103
102
```
104
103
105
104
```warn header="¡No detengas la propagación si no es necesario!"
@@ -113,7 +112,7 @@ Por ejemplo:
113
112
2. Luego decidimos atrapar los clic en toda la ventana, para seguir el rastro del comportamiento del usuario (donde hacen clic). Algunos sistemas de análisis hacen eso. Usualmente el código usa `document.addEventListener('click'…)` para atrapar todos los clics.
114
113
3. Nuestro análisis no funcionará sobre el área dónde los clics son detenidos por `stopPropagation`. Tristemente, tenemos una "zona muerta".
115
114
116
-
Usualmente no hay una necesidad real para prevenir la propagación, pero una tarea que aparentemente lo requiera puede ser resuelta por otros medios. Uno de ellos es usar eventos personalizados, cubriremos eso más tarde. También podemos escribir nuestros datos en el objeto `event` en un manejador y leerlo en otro, para así poder pasar información sobre el proceso de abajo a los manejadores en los padres.
115
+
Usualmente no hay una necesidad real para impedir la propagación. Cuando algo parece necesitarlo, existen otros medios para resolverlo. Uno es usar eventos personalizados, que cubriremos más adelante. Otro es escribir datos en event en un manejador y leerlos en otro, para pasar información a los manejadores padres.
117
116
```
118
117
119
118
## Captura
@@ -201,7 +200,7 @@ elem.addEventListener("click", e => alert(2));
201
200
```
202
201
````
203
202
204
-
```smart header="`event.stopPropagation()` durante la captura también evita la propagación"
203
+
```smart header="`event.stopPropagation()` durante la captura también impide la propagación"
205
204
El método `event.stopPropagation()` y su hermano `event.stopImmediatePropagation()` también pueden ser llamados en la fase de captura. En este caso no solo se detienen las capturas sino también la propagación.
206
205
207
206
En otras palabras, normalmente el evento primero va hacia abajo ("captura") y luego hacia arriba ("propagación"). Pero si se llama a `event.stopPropagation()` durante la fase de captura, se detiene la travesía del evento, y la propagación no volverá a ocurrir.
Copy file name to clipboardExpand all lines: 2-ui/3-event-details/1-mouse-events-basics/article.md
+8-8Lines changed: 8 additions & 8 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -154,7 +154,7 @@ Mueve el mouse sobre el campo de entrada para ver `clientX/clientY` (el ejemplo
154
154
```
155
155
````
156
156
157
-
## Previniendo la selección en mousedown
157
+
## Impedir la selección en mousedown
158
158
159
159
El doble clic del mouse tiene un efecto secundario que puede ser molesto en algunas interfaces: selecciona texto.
160
160
@@ -166,9 +166,9 @@ Por ejemplo, un doble clic en el texto de abajo lo selecciona además de activar
166
166
167
167
Si se pulsa el botón izquierdo del ratón y, sin soltarlo, mueve el ratón, también hace la selección, a menudo no deseado.
168
168
169
-
Hay varias maneras de evitar la selección, que se pueden leer en el capítulo <info:selection-range>.
169
+
Hay varias maneras de impedir la selección, que se pueden leer en el capítulo <info:selection-range>.
170
170
171
-
En este caso particular, la forma más razonable es evitar la acción del navegador `mousedown`. Esto evita ambas selecciones:
171
+
En este caso particular, la forma más razonable es impedir la acción del navegador `mousedown`. Esto impide ambas selecciones:
172
172
173
173
```html autorun height=50
174
174
Antes...
@@ -182,17 +182,17 @@ Ahora el elemento en negrita no se selecciona con doble clic, y al mantener pres
182
182
183
183
Tenga en cuenta: el texto dentro de él todavía es seleccionable. Sin embargo, la selección no debe comenzar en el texto en sí, sino antes o después. Por lo general, eso está bien para los usuarios.
184
184
185
-
````smart header="Previniendo copias"
186
-
Si queremos inhabilitar la selección para proteger nuestro contenido de la página del copy-paste, entonces podemos utilizar otro evento: `oncopy`.
185
+
````smart header="Impedir copias"
186
+
Si queremos impedir la selección para proteger nuestro contenido de la página del copy-paste, entonces podemos utilizar otro evento: `oncopy`.
Si sabes JS o HTML entonces puedes obtener todo de la fuente de la página.
193
193
</div>
194
194
```
195
-
Si intenta copiar un fragmento de texto en el `<div>` no va a funcionar porque la acción default de `oncopy` fue evitada.
195
+
Si intenta copiar un fragmento de texto en el `<div>` no va a funcionar porque la acción predeterminada de `oncopy` fue deshabilitada.
196
196
197
197
Seguramente el usuario tiene acceso a la fuente HTML de la página, y puede tomar el contenido desde allí, pero no todos saben cómo hacerlo.
198
198
````
@@ -208,6 +208,6 @@ Los eventos del mouse tienen las siguientes propiedades:
208
208
- Coordenadas relativas a la ventana: `clientX/clientY`.
209
209
- Coordenadas relativas al documento: `pageX/pageY`.
210
210
211
-
La acción predeterminada del navegador `mousedown` es la selección del texto, si no es bueno para la interfaz, entonces debe evitarse.
211
+
La acción predeterminada del navegador `mousedown` es la selección del texto, si no es bueno para la interfaz, entonces debe impedirse.
212
212
213
213
En el próximo capítulo veremos más detalles sobre los eventos que siguen al movimiento del puntero y cómo rastrear los cambios de elementos debajo de él.
0 commit comments