diff --git a/1-js/02-first-steps/09-comparison/article.md b/1-js/02-first-steps/09-comparison/article.md index 91e0a2838..a8d4abdd1 100644 --- a/1-js/02-first-steps/09-comparison/article.md +++ b/1-js/02-first-steps/09-comparison/article.md @@ -214,7 +214,7 @@ Obtenemos estos resultados porque: ## Resumen - Los operadores de comparación retornan un valor booleano. -- Las cadenas se comparan letra por letra en el orden del "diccionario". -- Cuando se comparan valores de diferentes tipos, se convierten en números (excepto un control de igualdad estricta). -- Los valores `null` y `undefined` son iguales `==` entre sí y no equivalen a ningún otro valor. -- 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. +- Las cadenas se comparan letra por letra en orden de diccionario. +- Cuando se comparan valores de diferentes tipos, se convierten en números (con la excepción de la igualdad estricta). +- 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. +- 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. diff --git a/1-js/09-classes/05-extend-natives/article.md b/1-js/09-classes/05-extend-natives/article.md index f3d2e9b80..404fa14b5 100644 --- a/1-js/09-classes/05-extend-natives/article.md +++ b/1-js/09-classes/05-extend-natives/article.md @@ -1,7 +1,7 @@ -# Ampliación de clases integradas +# Ampliación de clases nativas -Las clases integradas como Array, Map y otras también son extensibles. +Las clases nativas como Array, Map y otras también son extensibles. Por ejemplo, aquí `PowerArray` hereda del `Array` nativo: @@ -34,7 +34,7 @@ Aún más, podemos personalizar ese comportamiento. 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. -Si queremos que los métodos incorporados como `map` o `filter` devuelvan matrices regulares, podemos devolver `Array` en `Symbol.species`, como aquí: +Si queremos que los métodos nativos como `map` o `filter` devuelvan matrices regulares, podemos devolver `Array` en `Symbol.species`, como aquí: ```js run class PowerArray extends Array { @@ -43,7 +43,7 @@ class PowerArray extends Array { } *!* - // los métodos incorporados usarán esto como el constructor + // los métodos nativos usarán esto como el constructor static get [Symbol.species]() { return Array; } @@ -68,7 +68,7 @@ Como puede ver, ahora `.filter` devuelve un `Array`. Por lo tanto, la funcionali Otras colecciones, como `Map` y `Set`, funcionan igual. También usan `Symbol.species`. ``` -## Sin herencia estática en incorporados +## Sin herencia estática en nativos Los objetos nativos tienen sus propios métodos estáticos, por ejemplo, `Object.keys`, `Array.isArray`, etc. @@ -86,4 +86,4 @@ Imagen de la estructura para `Date` y `Object`: Como puede ver, no hay un vínculo entre `Date` y `Object`. Son independientes, solo `Date.prototype` hereda de `Object.prototype`. -Esa es una diferencia importante de herencia entre los objetos integrados en comparación con lo que obtenemos con 'extends`. +Esa es una diferencia importante de herencia entre los objetos nativos en comparación con lo que obtenemos con 'extends`. diff --git a/2-ui/1-document/03-dom-navigation/article.md b/2-ui/1-document/03-dom-navigation/article.md index 69cbca6e1..5cec620b2 100644 --- a/2-ui/1-document/03-dom-navigation/article.md +++ b/2-ui/1-document/03-dom-navigation/article.md @@ -167,7 +167,7 @@ Si mantenemos una referencia a `elem.childNodes`, y añadimos o quitamos nodos d ``` ````warn header="No uses `for..in` para recorrer colecciones" -Las colecciones son iterables usando `for..of`. Algunas veces las personas tratan de utilizar `for..in` para eso. +Las colecciones son iterables usando `for..of`. Hay quienes tratan de utilizar `for..in` para eso. 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: @@ -235,7 +235,7 @@ La propiedad `parentElement` devuelve el "elemento" padre, mientras `parentNode` Con la excepción de `document.documentElement`: ```js run -alert( document.documentElement.parentNode ); // documento +alert( document.documentElement.parentNode ); // document alert( document.documentElement.parentElement ); // null ``` diff --git a/2-ui/2-events/01-introduction-browser-events/article.md b/2-ui/2-events/01-introduction-browser-events/article.md index 89d7bb027..6fab8d8fd 100644 --- a/2-ui/2-events/01-introduction-browser-events/article.md +++ b/2-ui/2-events/01-introduction-browser-events/article.md @@ -332,7 +332,7 @@ Algunas propiedades del objeto `event`: : Tipo de evento, en este caso fue `"click"`. `event.currentTarget` -: 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`. +: 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. `event.clientX` / `event.clientY` : Coordenadas del cursor relativas a la ventana, para eventos de cursor. @@ -440,7 +440,7 @@ Hay tres formas de asignar handlers: 1. Atributos HTML: `onclick="..."`. 2. Propiedades del DOM: `elem.onclick = function`. -3. Métodos: `elem.addEventListener(event, handler[, phase])` para agregar ó `removeEventListener` para remover. +3. Métodos: `elem.addEventListener(event, handler[, phase])` para agregarlos ó `removeEventListener` para quitarlos. 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í. diff --git a/2-ui/2-events/02-bubbling-and-capturing/article.md b/2-ui/2-events/02-bubbling-and-capturing/article.md index 1ce058981..0ffc870d5 100644 --- a/2-ui/2-events/02-bubbling-and-capturing/article.md +++ b/2-ui/2-events/02-bubbling-and-capturing/article.md @@ -45,13 +45,12 @@ Un clic en el elemento del interior `

` primero ejecuta `onclick`: Así si hacemos clic en `

`, entonces veremos 3 alertas: `p` -> `div` -> `form`. -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. +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. ```warn header="*Casi* todos los elementos se propagan." La palabra clave en esta frase es "casi". - -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. +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. ``` ## event.target @@ -99,7 +98,7 @@ Si un elemento tiene múltiples manejadores para un solo evento, aunque uno de e En otras palabras, `event.stopPropagation()` detiene la propagación hacia arriba, pero todos los manejadores en el elemento actual se ejecutarán. -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. +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. ``` ```warn header="¡No detengas la propagación si no es necesario!" @@ -113,7 +112,7 @@ Por ejemplo: 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. 3. Nuestro análisis no funcionará sobre el área dónde los clics son detenidos por `stopPropagation`. Tristemente, tenemos una "zona muerta". -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. +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. ``` ## Captura @@ -201,7 +200,7 @@ elem.addEventListener("click", e => alert(2)); ``` ```` -```smart header="`event.stopPropagation()` durante la captura también evita la propagación" +```smart header="`event.stopPropagation()` durante la captura también impide la propagación" 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. 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. diff --git a/2-ui/3-event-details/1-mouse-events-basics/article.md b/2-ui/3-event-details/1-mouse-events-basics/article.md index 4da0838ad..794bac617 100644 --- a/2-ui/3-event-details/1-mouse-events-basics/article.md +++ b/2-ui/3-event-details/1-mouse-events-basics/article.md @@ -154,7 +154,7 @@ Mueve el mouse sobre el campo de entrada para ver `clientX/clientY` (el ejemplo ``` ```` -## Previniendo la selección en mousedown +## Impedir la selección en mousedown El doble clic del mouse tiene un efecto secundario que puede ser molesto en algunas interfaces: selecciona texto. @@ -166,9 +166,9 @@ Por ejemplo, un doble clic en el texto de abajo lo selecciona además de activar 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. -Hay varias maneras de evitar la selección, que se pueden leer en el capítulo . +Hay varias maneras de impedir la selección, que se pueden leer en el capítulo . -En este caso particular, la forma más razonable es evitar la acción del navegador `mousedown`. Esto evita ambas selecciones: +En este caso particular, la forma más razonable es impedir la acción del navegador `mousedown`. Esto impide ambas selecciones: ```html autorun height=50 Antes... @@ -182,17 +182,17 @@ Ahora el elemento en negrita no se selecciona con doble clic, y al mantener pres 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. -````smart header="Previniendo copias" -Si queremos inhabilitar la selección para proteger nuestro contenido de la página del copy-paste, entonces podemos utilizar otro evento: `oncopy`. +````smart header="Impedir copias" +Si queremos impedir la selección para proteger nuestro contenido de la página del copy-paste, entonces podemos utilizar otro evento: `oncopy`. ```html autorun height=80 no-beautify

Querido usuario, - El copiado está prohibida para ti. + El copiado está prohibido para ti. Si sabes JS o HTML entonces puedes obtener todo de la fuente de la página.
``` -Si intenta copiar un fragmento de texto en el `
` no va a funcionar porque la acción default de `oncopy` fue evitada. +Si intenta copiar un fragmento de texto en el `
` no va a funcionar porque la acción predeterminada de `oncopy` fue deshabilitada. 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. ```` @@ -208,6 +208,6 @@ Los eventos del mouse tienen las siguientes propiedades: - Coordenadas relativas a la ventana: `clientX/clientY`. - Coordenadas relativas al documento: `pageX/pageY`. -La acción predeterminada del navegador `mousedown` es la selección del texto, si no es bueno para la interfaz, entonces debe evitarse. +La acción predeterminada del navegador `mousedown` es la selección del texto, si no es bueno para la interfaz, entonces debe impedirse. 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. diff --git a/2-ui/99-ui-misc/01-mutation-observer/article.md b/2-ui/99-ui-misc/01-mutation-observer/article.md index 4b5ad7b14..1eafd5b34 100644 --- a/2-ui/99-ui-misc/01-mutation-observer/article.md +++ b/2-ui/99-ui-misc/01-mutation-observer/article.md @@ -1,7 +1,7 @@ # Mutation observer -`MutationObserver` es un objeto incorporado que observa un elemento DOM y dispara un callback cuando hay cambios en él. +`MutationObserver` es un objeto nativo que observa un elemento DOM y dispara un callback cuando hay cambios en él. Primero veremos su sintaxis, luego exploraremos un caso de la vida real para ver dónde puede ser útil.