Skip to content

Commit 1a0be8a

Browse files
authored
Merge PR #770 sync-5e893cff
2 parents 4ed0723 + 5537207 commit 1a0be8a

File tree

7 files changed

+28
-29
lines changed

7 files changed

+28
-29
lines changed

1-js/02-first-steps/09-comparison/article.md

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -214,7 +214,7 @@ Obtenemos estos resultados porque:
214214
## Resumen
215215

216216
- 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.

1-js/09-classes/05-extend-natives/article.md

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11

2-
# Ampliación de clases integradas
2+
# Ampliación de clases nativas
33

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.
55

66
Por ejemplo, aquí `PowerArray` hereda del `Array` nativo:
77

@@ -34,7 +34,7 @@ Aún más, podemos personalizar ese comportamiento.
3434

3535
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.
3636

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í:
3838

3939
```js run
4040
class PowerArray extends Array {
@@ -43,7 +43,7 @@ class PowerArray extends Array {
4343
}
4444

4545
*!*
46-
// los métodos incorporados usarán esto como el constructor
46+
// los métodos nativos usarán esto como el constructor
4747
static get [Symbol.species]() {
4848
return Array;
4949
}
@@ -68,7 +68,7 @@ Como puede ver, ahora `.filter` devuelve un `Array`. Por lo tanto, la funcionali
6868
Otras colecciones, como `Map` y `Set`, funcionan igual. También usan `Symbol.species`.
6969
```
7070

71-
## Sin herencia estática en incorporados
71+
## Sin herencia estática en nativos
7272

7373
Los objetos nativos tienen sus propios métodos estáticos, por ejemplo, `Object.keys`, `Array.isArray`, etc.
7474

@@ -86,4 +86,4 @@ Imagen de la estructura para `Date` y `Object`:
8686

8787
Como puede ver, no hay un vínculo entre `Date` y `Object`. Son independientes, solo `Date.prototype` hereda de `Object.prototype`.
8888

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`.

2-ui/1-document/03-dom-navigation/article.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -167,7 +167,7 @@ Si mantenemos una referencia a `elem.childNodes`, y añadimos o quitamos nodos d
167167
```
168168
169169
````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.
171171
172172
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:
173173
@@ -235,7 +235,7 @@ La propiedad `parentElement` devuelve el "elemento" padre, mientras `parentNode`
235235
Con la excepción de `document.documentElement`:
236236

237237
```js run
238-
alert( document.documentElement.parentNode ); // documento
238+
alert( document.documentElement.parentNode ); // document
239239
alert( document.documentElement.parentElement ); // null
240240
```
241241

2-ui/2-events/01-introduction-browser-events/article.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -332,7 +332,7 @@ Algunas propiedades del objeto `event`:
332332
: Tipo de evento, en este caso fue `"click"`.
333333
334334
`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.
336336
337337
`event.clientX` / `event.clientY`
338338
: Coordenadas del cursor relativas a la ventana, para eventos de cursor.
@@ -440,7 +440,7 @@ Hay tres formas de asignar handlers:
440440

441441
1. Atributos HTML: `onclick="..."`.
442442
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.
444444

445445
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í.
446446

2-ui/2-events/02-bubbling-and-capturing/article.md

Lines changed: 5 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -45,13 +45,12 @@ Un clic en el elemento del interior `<p>` primero ejecuta `onclick`:
4545

4646
Así si hacemos clic en `<p>`, entonces veremos 3 alertas: `p` -> `div` -> `form`.
4747

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.
4949

5050
```warn header="*Casi* todos los elementos se propagan."
5151
La palabra clave en esta frase es "casi".
5252
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.
5554
```
5655

5756
## event.target
@@ -99,7 +98,7 @@ Si un elemento tiene múltiples manejadores para un solo evento, aunque uno de e
9998
10099
En otras palabras, `event.stopPropagation()` detiene la propagación hacia arriba, pero todos los manejadores en el elemento actual se ejecutarán.
101100
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.
103102
```
104103

105104
```warn header="¡No detengas la propagación si no es necesario!"
@@ -113,7 +112,7 @@ Por ejemplo:
113112
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.
114113
3. Nuestro análisis no funcionará sobre el área dónde los clics son detenidos por `stopPropagation`. Tristemente, tenemos una "zona muerta".
115114
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.
117116
```
118117

119118
## Captura
@@ -201,7 +200,7 @@ elem.addEventListener("click", e => alert(2));
201200
```
202201
````
203202
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"
205204
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.
206205
207206
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.

2-ui/3-event-details/1-mouse-events-basics/article.md

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -154,7 +154,7 @@ Mueve el mouse sobre el campo de entrada para ver `clientX/clientY` (el ejemplo
154154
```
155155
````
156156

157-
## Previniendo la selección en mousedown
157+
## Impedir la selección en mousedown
158158

159159
El doble clic del mouse tiene un efecto secundario que puede ser molesto en algunas interfaces: selecciona texto.
160160

@@ -166,9 +166,9 @@ Por ejemplo, un doble clic en el texto de abajo lo selecciona además de activar
166166

167167
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.
168168

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>.
170170

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:
172172

173173
```html autorun height=50
174174
Antes...
@@ -182,17 +182,17 @@ Ahora el elemento en negrita no se selecciona con doble clic, y al mantener pres
182182

183183
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.
184184

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`.
187187
188188
```html autorun height=80 no-beautify
189189
<div *!*oncopy="alert('¡Copiado prohibido!');return false"*/!*>
190190
Querido usuario,
191-
El copiado está prohibida para ti.
191+
El copiado está prohibido para ti.
192192
Si sabes JS o HTML entonces puedes obtener todo de la fuente de la página.
193193
</div>
194194
```
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.
196196
197197
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.
198198
````
@@ -208,6 +208,6 @@ Los eventos del mouse tienen las siguientes propiedades:
208208
- Coordenadas relativas a la ventana: `clientX/clientY`.
209209
- Coordenadas relativas al documento: `pageX/pageY`.
210210

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.
212212

213213
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.

2-ui/99-ui-misc/01-mutation-observer/article.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11

22
# Mutation observer
33

4-
`MutationObserver` es un objeto incorporado que observa un elemento DOM y dispara un callback cuando hay cambios en él.
4+
`MutationObserver` es un objeto nativo que observa un elemento DOM y dispara un callback cuando hay cambios en él.
55

66
Primero veremos su sintaxis, luego exploraremos un caso de la vida real para ver dónde puede ser útil.
77

0 commit comments

Comments
 (0)