From e4f60c32bbabad13abf69eab1d03454e3d25a03e Mon Sep 17 00:00:00 2001 From: vplentinax Date: Thu, 27 Aug 2020 23:16:57 -0400 Subject: [PATCH 1/5] sync27Agosto --- 1-js/01-getting-started/1-intro/article.md | 1 + .../11-logical-operators/article.md | 78 ++++++++----------- 1-js/05-data-types/04-array/article.md | 2 +- .../_js.view/solution.js | 2 +- .../03-closure/article.md | 10 ++- .../05-global-object/article.md | 4 +- .../03-debounce/task.md | 2 + .../04-throttle/task.md | 2 + .../01-prototype-inheritance/article.md | 3 + 1-js/09-classes/07-mixins/article.md | 4 +- 1-js/11-async/08-async-await/article.md | 13 ++-- 1-js/99-js-misc/04-reference-type/article.md | 5 -- 2-ui/1-document/11-coordinates/article.md | 4 +- .../02-bubbling-and-capturing/article.md | 2 +- .../4-mouse-drag-and-drop/article.md | 4 +- .../6-pointer-events/article.md | 2 +- .../8-onscroll/1-endless-page/solution.md | 8 +- 2-ui/3-event-details/8-onscroll/article.md | 2 +- 2-ui/4-forms-controls/2-focus-blur/article.md | 10 +-- .../01-popup-windows/article.md | 16 ++-- 5-network/01-fetch/01-fetch-users/solution.md | 2 +- 5-network/06-fetch-api/article.md | 10 +-- 5-network/11-websocket/article.md | 4 +- 6-data-storage/01-cookie/article.md | 4 +- .../03-regexp-unicode/article.md | 6 -- 25 files changed, 94 insertions(+), 106 deletions(-) diff --git a/1-js/01-getting-started/1-intro/article.md b/1-js/01-getting-started/1-intro/article.md index ce9474b8a..a586a5ea7 100644 --- a/1-js/01-getting-started/1-intro/article.md +++ b/1-js/01-getting-started/1-intro/article.md @@ -113,6 +113,7 @@ Ejemplos de tales lenguajes: - [TypeScript](http://www.typescriptlang.org/) se concentra en agregar "tipado estricto" ("strict data typing") para simplificar el desarrollo y soporte de sistemas complejos. Es desarrollado por Microsoft. -[FLow](https://flow.org/) también agrega la escritura de datos, pero de una manera diferente. Desarrollado por Facebook. - [Dart](https://www.dartlang.org/) es un lenguaje independiente que tiene su propio motor que se ejecuta en entornos que no son de navegador (como aplicaciones móviles), pero que también se puede convertir/transpilar a JavaScript. Desarrollado por Google. +- [Brython](https://brython.info/) es un transpilador de Python a JavaScript que permite escribir aplicaciones en Python puro sin JavaScript. Hay mas. Por supuesto, incluso si nosotros usamos alguno de estos lenguajes, deberíamos conocer también JavaScript para realmente entender qué estamos haciendo. diff --git a/1-js/02-first-steps/11-logical-operators/article.md b/1-js/02-first-steps/11-logical-operators/article.md index ca88dc510..430098ea2 100644 --- a/1-js/02-first-steps/11-logical-operators/article.md +++ b/1-js/02-first-steps/11-logical-operators/article.md @@ -1,6 +1,6 @@ # Operadores Lógicos -Hay tres operadores lógicos en JavaScript: `||` (OR (O)), `&&` (AND (Y)), `!` (NOT (NO)). +Hay tres operadores lógicos en JavaScript: `||` (O), `&&` (Y), `!` (NO). Aunque sean llamados lógicos, pueden ser aplicados a valores de cualquier tipo, no solo booleanos. El resultado también puede ser de cualquier tipo. @@ -39,7 +39,7 @@ if (1 || 0) { // Funciona como if( true || false ) } ``` -La mayoría de las veces, OR `||` es usado en una declaración `if` para probar si *cualquiera* de las condiciones dadas es `true`. +La mayoría de las veces, OR `||` es usado en una declaración `if` para probar si *alguna* de las condiciones dadas es `true`. Por ejemplo: @@ -64,7 +64,7 @@ if (hour < 10 || hour > 18 || isWeekend) { } ``` -## OR encuentra el primer valor verdadero +## OR "||" encuentra el primer valor verdadero La lógica descrita arriba es algo clásica. Ahora, mostremos las características "extra" de JavaScript. @@ -90,75 +90,61 @@ Por ejemplo: ```js run alert(1 || 0); // 1 (1 es un valor verdado) -alert(true || "cualquier valor"); // (true es un valor verdadero) alert(null || 1); // 1 (1 es el primer valor verdadero) alert(null || 0 || 1); // 1 (el primer valor verdadero) + alert(undefined || null || 0); // 0 (todos son valores falsos, retorna el último valor) ``` Esto brinda varios usos interesantes comparados al "OR puro, clásico, de solo booleanos". -1. **Consiguiendo el primer valor verdadero de una lista de variables o expresiones.** +1. **Obtener el primer valor verdadero de una lista de variables o expresiones.** - Imagina que tenemos múltiples variables que pueden contener datos o bien ser `null/undefined`. ¿Cómo podemos encontrar el primer valor que contenga datos? + Por ejemplo, tenemos las variables `firstName`, `lastName` y `nickName`, todas opcionales. - Podemos usar OR `||`: + Usemos OR `||` para elegir el que tiene los datos y mostrarlo (o anónimo si no hay nada configurado): ```js run - let currentUser = null; - let defaultUser = "John"; + let firstName = ""; + let lastName = ""; + let nickName = "SuperCoder"; *!* - let name = currentUser || defaultUser || "sin nombre"; + alert( firstName || lastName || nickName || "Anonymous"); // SuperCoder */!* - - alert( name ); // selecciona "John" – el primer valor verdadero ``` - Si tanto `currentUser` como `defaultUser` hubieran sido valores falsos, `"sin nombre"` hubiera sido el resultado. +Si todas las variables fueran falsas, aparecería Anónimo. 2. **Evaluación de cortocircuito.** - Los operandos no solo pueden ser valores, sino que tambien expresiones arbitrarias. OR los evalua y comprueba de izquierda a derecha. La evaluación termina cuando un valor verdadero es alcanzado, y dicho valor es retornado. Este proceso es llamado "evaluación de cortocircuito" porque avanza lo menos posible de izquierda a derecha. - - Esto se ve claramente cuando la expresión dada como segundo argumento tiene un efecto secundario como una asignación de variable. - - En el ejemplo debajo, `x` no es asignada: - - ```js run no-beautify - let x; - - *!*true*/!* || (x = 1); - - alert(x); // undefined, porque (x = 1) no es evaluado. - ``` - - Si, en cambio, el primer argumento fuera `false`, `||` evaluaría el segundo, realizando la asignación. +Otra característica de OR || operador es la evaluación de "cortocircuito". - ```js run no-beautify - let x; +Esto significa que `||` procesa sus argumentos hasta que se alcanza el primer valor verdadero, y luego el valor se devuelve inmediatamente, sin siquiera tocar el otro argumento. - *!*false*/!* || (x = 1); +La importancia de esta característica se vuelve obvia si un operando no es solo un valor, sino una expresión con un efecto secundario, como una asignación de variable o una llamada a función. - alert(x); // 1 - ``` +En el siguiente ejemplo, solo se imprime el segundo mensaje: - Una asignación es un caso simple. Puede haber efectos secundarios, los cuales no se notarán si la evaluación no los alcanza. + ```js run no-beautify + *!*true*/!* || alert("not printed"); + *!*false*/!* || alert("printed"); + ``` - Como podemos ver, tal caso de uso es una "manera más corta de usar `if`". El primer operando es convertido a booleano. Si el primero es falso, el segundo sera evaluado. +En la primera línea, el operador OR `||` detiene la evaluación inmediatamente después de ver que es verdadera, por lo que la alerta no se ejecuta. - La mayor parte del tiempo, es mejor usar un `if` "normal" para mantener el código fácil de entender, pero a veces esto puede ser útil. +A veces, las personas usan esta función para ejecutar comandos solo si la condición en la parte izquierda es falsa. ## && (AND) -El operador AND es representado con `&&`: +El operador AND es representado con dos ampersands `&&`: ```js result = a && b; ``` -En la programación clasica, AND retorna `true` si ambos operandos son valores verdaderos y falso en cualquier otro caso. +En la programación clasica, AND retorna `true` si ambos operandos son valores verdaderos y `falso` en cualquier otro caso. ```js run alert(true && true); // true @@ -186,7 +172,7 @@ if (1 && 0) { // evaluado como true && false } ``` -## AND encuentra el primer valor verdadero +## AND "&&" encuentra el primer valor falso Dado múltiples valores aplicados al operador AND: @@ -236,16 +222,18 @@ La precedencia del operador AND `&&` es mayor que la de OR `||`. Así que el código `a && b || c && d` es básicamente el mismo que si la expresiones `&&` estuvieran entre paréntesis: `(a && b) || (c && d)` ``` +``` -Justo como en OR, el operador AND `&&` puede reemplazar en ocasiones al `if`. +````warn header="No remplace *if* con || or &&" +A veces, la gente usa el operador AND `&&` como una "forma más corta de escribir `if`". Por ejemplo: ```js run let x = 1; -(x > 0) && alert("Mayor que cero!"); -```` +(x > 0) && alert( 'Greater than zero!' ); +``` La acción en la parte derecha de `&&` sería ejecutada sólo si la evaluación la alcanza. Eso es, solo si `(x > 0)` es verdadero. @@ -258,10 +246,8 @@ if (x > 0) { alert("Mayor que cero!"); } ``` - -La variante con `&&` parece más corta. Pero `if` es más obvio y tiende a ser un poco más legible. - -Así que recomendamos usar cada construcción para su propósito: usar `if` si queremos if y usar `&&` si queremos AND. +Aunque la variante con `&&` parece más corta, `if` es más obvia y tiende a ser un poco más legible. Por lo tanto, recomendamos usar cada construcción para su propósito: use `if` si queremos si y use` && `si queremos AND. +```` ## ! (NOT) diff --git a/1-js/05-data-types/04-array/article.md b/1-js/05-data-types/04-array/article.md index c15c93197..6319d5c28 100644 --- a/1-js/05-data-types/04-array/article.md +++ b/1-js/05-data-types/04-array/article.md @@ -193,7 +193,7 @@ Un array es una clase especial de objeto. Los corchetes usados para acceder a un Ellos extienden los objetos proveyendo métodos especiales para trabajar con colecciones ordenadas de datos y también la propiedad `length`. Pero en el corazón es aún un objeto. -Recuerda, hay solo 7 tipos basicos en JavaScript. Array es un objeto y se comporta como un objeto.. +Recuerde, solo hay ocho tipos de datos básicos en JavaScript (consulte el capítulo [Tipos de datos] (https://javascript.info/types) para obtener más información). Array es un objeto y, por tanto, se comporta como un objeto. Por ejemplo, es copiado por referencia: diff --git a/1-js/05-data-types/05-array-methods/6-calculator-extendable/_js.view/solution.js b/1-js/05-data-types/05-array-methods/6-calculator-extendable/_js.view/solution.js index 45ef1619d..1d210eec5 100644 --- a/1-js/05-data-types/05-array-methods/6-calculator-extendable/_js.view/solution.js +++ b/1-js/05-data-types/05-array-methods/6-calculator-extendable/_js.view/solution.js @@ -10,7 +10,7 @@ function Calculator() { let split = str.split(' '), a = +split[0], op = split[1], - b = +split[2] + b = +split[2]; if (!this.methods[op] || isNaN(a) || isNaN(b)) { return NaN; diff --git a/1-js/06-advanced-functions/03-closure/article.md b/1-js/06-advanced-functions/03-closure/article.md index ff77ca979..baef1ddfc 100644 --- a/1-js/06-advanced-functions/03-closure/article.md +++ b/1-js/06-advanced-functions/03-closure/article.md @@ -1,11 +1,15 @@ -# Ámbito de Variable +# Ámbito de Variable y el concepto "closure" -JavaScript es un lenguaje muy orientado a funciones. Nos da mucha libertad. Se puede crear una función dinámicamente, pasarla como argumento a otra función y llamarla desde un lugar de código totalmente diferente más adelante. +JavaScript es un lenguaje muy orientado a funciones. Nos da mucha libertad. Una función se puede crear en cualquier momento, pasar como argumento a otra función y luego llamar desde un lugar de código totalmente diferente más tarde. Ya sabemos que una función puede acceder a variables fuera de ella. -Ahora ampliemos nuestro conocimiento para incluir escenarios más complejos. +Pero, ¿qué sucede si estas variables "externas" cambian desde que se crea una función? ¿La función verá los valores nuevos o los antiguos? + +Y si una función se pasa como parámetro y se llama desde otro lugar del código, ¿tendrá acceso a las variables externas en el nuevo lugar? + +Ampliemos nuestro conocimiento para comprender estos escenarios y otros más complejos. ```smart header="Hablaremos de las variables let / const aquí" En JavaScript, hay 3 formas de declarar una variable: `let`, `const` (las modernas) y `var` (más antigua). diff --git a/1-js/06-advanced-functions/05-global-object/article.md b/1-js/06-advanced-functions/05-global-object/article.md index bfbb48975..c92e05f97 100644 --- a/1-js/06-advanced-functions/05-global-object/article.md +++ b/1-js/06-advanced-functions/05-global-object/article.md @@ -5,7 +5,7 @@ El objeto global proporciona variables y funciones que están disponibles en cua En un navegador se denomina `window`, para Node.js es` global`, para otros entornos puede tener otro nombre. -Recientemente, `globalThis` se agregó al lenguaje, como un nombre estandarizado para un objeto global, que debería ser compatible con todos los entornos. En algunos navegadores, como Chromium Edge, `globalThis` aún no es compatible, pero se puede usar mediante *polyfill*. +Recientemente, se agregó `globalThis` al lenguaje, como un nombre estandarizado para un objeto global, que debería ser compatible con todos los entornos al igual que con los principales navegadores. Aquí usaremos `window`, suponiendo que nuestro entorno sea un navegador. Si su script puede ejecutarse en otros entornos, es mejor usar `globalThis` en su lugar. @@ -83,7 +83,7 @@ if (!window.Promise) { - El objeto global tiene un nombre universal: `globalThis`. - ... Pero con mayor frecuencia se hace referencia a nombres específicos del entorno de la "vieja escuela", como `window` (navegador) y `global` (Node.js). Como `globalThis` es una propuesta reciente, no es compatible con Chromium Edge (pero sí mediante *polyfill*). + ... Pero con mayor frecuencia se hace referencia a nombres específicos del entorno de la "vieja escuela", como `window` (navegador) y `global` (Node.js). - Deberíamos almacenar valores en el objeto global solo si son verdaderamente globales para nuestro proyecto. Y manteniendo su uso al mínimo. - En el navegador, a menos que estemos utilizando [módulos](info:modules), las funciones globales y las variables declaradas con `var` se convierten en una propiedad del objeto global. diff --git a/1-js/06-advanced-functions/09-call-apply-decorators/03-debounce/task.md b/1-js/06-advanced-functions/09-call-apply-decorators/03-debounce/task.md index ad5368ca3..a4acc9289 100644 --- a/1-js/06-advanced-functions/09-call-apply-decorators/03-debounce/task.md +++ b/1-js/06-advanced-functions/09-call-apply-decorators/03-debounce/task.md @@ -6,6 +6,8 @@ importance: 5 El resultado del decorador `debounce(f, ms)` es un contenedor que suspende las llamadas a `f` hasta que haya `ms` milisegundos de inactividad (sin llamadas, "período de enfriamiento"), luego invoca `f` una vez con los últimos argumentos. +En otras palabras, `debounce` es como una secretaria que acepta "llamadas telefónicas" y espera hasta que haya `ms` milisegundos de silencio. Y solo entonces transfiere la información de la última llamada al "jefe" (llama a la "f" real). + Por ejemplo, teníamos una función `f` y la reemplazamos con `f = debounce(f, 1000)`. Entonces, si la función contenedora se llama a 0ms, 200ms y 500ms, y luego no hay llamadas, entonces la 'f' real solo se llamará una vez, a 1500ms. Es decir: después del período de enfriamiento de 1000 ms desde la última llamada. diff --git a/1-js/06-advanced-functions/09-call-apply-decorators/04-throttle/task.md b/1-js/06-advanced-functions/09-call-apply-decorators/04-throttle/task.md index 076798757..feaad79a9 100644 --- a/1-js/06-advanced-functions/09-call-apply-decorators/04-throttle/task.md +++ b/1-js/06-advanced-functions/09-call-apply-decorators/04-throttle/task.md @@ -12,6 +12,8 @@ La diferencia con *debounce* es que es un decorador completamente diferente: - `debounce` ejecuta la función una vez después del período de `enfriamiento`. Es bueno para procesar el resultado final. - `throttle` lo ejecuta no más de lo que se le da en el tiempo `ms`. Es bueno para actualizaciones regulares que no deberían ser muy frecuentes. +En otras palabras, "throttle" es como una secretaria que acepta llamadas telefónicas, pero molesta al jefe (llama a la "f" real) no más de una vez por milisegundos `ms`. + Revisemos una aplicación de la vida real para comprender mejor ese requisito y ver de dónde proviene. **Por ejemplo, queremos rastrear los movimientos del mouse.** diff --git a/1-js/08-prototypes/01-prototype-inheritance/article.md b/1-js/08-prototypes/01-prototype-inheritance/article.md index 8da13cd92..1c9017d21 100644 --- a/1-js/08-prototypes/01-prototype-inheritance/article.md +++ b/1-js/08-prototypes/01-prototype-inheritance/article.md @@ -197,6 +197,9 @@ alert(admin.fullName); // John Smith (*) // disparadores setter! admin.fullName = "Alice Cooper"; // (**) + +alert(admin.fullName); // Alice Cooper , estado de admin modificado +alert(user.fullName); // John Smith , estado de user protegido ``` Aquí en la línea `(*)` la propiedad `admin.fullName` tiene un getter en el prototipo `user`, por lo que es llamado. Y en la línea `(**)` la propiedad tiene un setter en el prototipo, por lo que es llamado. diff --git a/1-js/09-classes/07-mixins/article.md b/1-js/09-classes/07-mixins/article.md index 1f1f1a233..1ecd0448d 100644 --- a/1-js/09-classes/07-mixins/article.md +++ b/1-js/09-classes/07-mixins/article.md @@ -154,11 +154,11 @@ let eventMixin = { * this.trigger('select', data1, data2); */ trigger(eventName, ...args) { - if (!this._eventHandlers || !this._eventHandlers[eventName]) { + if (!this._eventHandlers?.[eventName]) { return; // no hay controladores para ese nombre de evento } - // call the handlers + // Llama al controlador this._eventHandlers[eventName].forEach(handler => handler.apply(this, args)); } }; diff --git a/1-js/11-async/08-async-await/article.md b/1-js/11-async/08-async-await/article.md index eae99ee92..1487ae1b7 100644 --- a/1-js/11-async/08-async-await/article.md +++ b/1-js/11-async/08-async-await/article.md @@ -67,11 +67,11 @@ f(); La ejecución de la función es pausada en la línea `(*)` y se reanuda cuando la promesa responde, con `result` volviéndose su resultado. Entonces el código arriba muestra "¡Hecho!" en un segundo. -Enfaticemos: `await` literalmente hace que JavaScript espere hasta que la promesa responda, entonces sigue con el resultado. No tiene costo en recursos de CPU, porque mientras tanto el motor puede hacer otros trabajos: ejecutar otros scripts, manejar eventos, etc. +Enfaticemos: `await` literalmente suspende la ejecución de la función hasta que se establezca la promesa, y luego la reanuda con el resultado de la promesa. Eso no cuesta ningún recurso de CPU, porque el motor de JavaScript puede hacer otros trabajos mientras tanto: ejecutar otros scripts, manejar eventos, etc. Es simplemente una sintaxis más elegante para tener el resultado de una promesa que `promise.then`, es más facil de leer y de escribir. -````warn header="No se puede usar `await` en funciones regulares" +````warn header="No se puede usar *await* en funciones regulares" Si tratamos de usar `await` en una función no async, habría un error de sintaxis: ```js run @@ -83,7 +83,7 @@ function f() { } ``` -Obtendremos este error si no ponemos `async` delante de una función. Como se dijo, `await` solo funciona dentro de una `función async`. +Es posible que obtengamos este error si olvidamos poner `async` antes de una función. Como se dijo, "await" solo funciona dentro de una función `async`. ```` Tomemos el ejemplo `showAvatar()` del capítulo y rescribámoslo usando `async/await`: @@ -139,13 +139,12 @@ Pero podemos envolverlo dentro de una función async anónima, como esto: ... })(); ``` - - ```` -````smart header="`await` acepta \"thenables\"" + +````smart header="*await* acepta \"thenables\"" Tal como `promise.then`, `await` nos permite el uso de objetos "thenable" (aquellos con el método `then`). La idea es que un objeto de terceras partes pueda no ser una promesa, sino compatible con una: si soporta `.then`, es suficiente para el uso con `await`. -Aquí hay una clase `Thenable` de demo; el `await` debajo acepta sus instancias: +Aquí hay una demostración de la clase `Thenable`; el `await` debajo acepta sus instancias: ```js run class Thenable { diff --git a/1-js/99-js-misc/04-reference-type/article.md b/1-js/99-js-misc/04-reference-type/article.md index 1bb3fc482..90b3e3729 100644 --- a/1-js/99-js-misc/04-reference-type/article.md +++ b/1-js/99-js-misc/04-reference-type/article.md @@ -107,8 +107,3 @@ Para todas las demás operaciones, el tipo de referencia se convierte automátic Toda la mecánica está oculta a nuestros ojos. Solo importa en casos sutiles, como cuando un método se obtiene dinámicamente del objeto, usando una expresión. - - - - -El resultado del punto `.` no es en realidad un método, pero un valor de `` necesita una manera de pasar la información sobre `obj`. diff --git a/2-ui/1-document/11-coordinates/article.md b/2-ui/1-document/11-coordinates/article.md index fb55edf57..4775ff0eb 100644 --- a/2-ui/1-document/11-coordinates/article.md +++ b/2-ui/1-document/11-coordinates/article.md @@ -88,8 +88,8 @@ As you can see, `left/top` do not equal `x/y` in such case. In practice though, `elem.getBoundingClientRect()` always returns positive width/height, here we mention negative `width/height` only for you to understand why these seemingly duplicate properties are not actually duplicates. ``` -```warn header="Internet Explorer and Edge: no support for `x/y`" -Internet Explorer and Edge don't support `x/y` properties for historical reasons. +```warn header="Internet Explorer: no support for `x/y`" +Internet Explorer doesn't support `x/y` properties for historical reasons. So we can either make a polyfill (add getters in `DomRect.prototype`) or just use `top/left`, as they are always the same as `x/y` for positive `width/height`, in particular in the result of `elem.getBoundingClientRect()`. ``` 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 ac0186f42..decc25154 100644 --- a/2-ui/2-events/02-bubbling-and-capturing/article.md +++ b/2-ui/2-events/02-bubbling-and-capturing/article.md @@ -181,7 +181,7 @@ The code sets click handlers on *every* element in the document to see which one If you click on `

`, then the sequence is: 1. `HTML` -> `BODY` -> `FORM` -> `DIV` (capturing phase, the first listener): -2. `P` (target phrase, triggers two times, as we've set two listeners: capturing and bubbling) +2. `P` (target phase, triggers two times, as we've set two listeners: capturing and bubbling) 3. `DIV` -> `FORM` -> `BODY` -> `HTML` (bubbling phase, the second listener). There's a property `event.eventPhase` that tells us the number of the phase on which the event was caught. But it's rarely used, because we usually know it in the handler. diff --git a/2-ui/3-event-details/4-mouse-drag-and-drop/article.md b/2-ui/3-event-details/4-mouse-drag-and-drop/article.md index a47bfade6..6cb1152c1 100644 --- a/2-ui/3-event-details/4-mouse-drag-and-drop/article.md +++ b/2-ui/3-event-details/4-mouse-drag-and-drop/article.md @@ -276,7 +276,7 @@ function onMouseMove(event) { } ``` -In the example below when the ball is dragged over the soccer gate, the gate is highlighted. +In the example below when the ball is dragged over the soccer goal, the goal is highlighted. [codetabs height=250 src="ball4"] @@ -300,4 +300,4 @@ We can lay a lot on this foundation. - We can use event delegation for `mousedown/up`. A large-area event handler that checks `event.target` can manage Drag'n'Drop for hundreds of elements. - And so on. -There are frameworks that build architecture over it: `DragZone`, `Droppable`, `Draggable` and other classes. Most of them do the similar stuff to what's described above, so it should be easy to understand them now. Or roll your own, as you can see that that's easy enough to do, sometimes easier than adapting a third-part solution. +There are frameworks that build architecture over it: `DragZone`, `Droppable`, `Draggable` and other classes. Most of them do the similar stuff to what's described above, so it should be easy to understand them now. Or roll your own, as you can see that that's easy enough to do, sometimes easier than adapting a third-party solution. diff --git a/2-ui/3-event-details/6-pointer-events/article.md b/2-ui/3-event-details/6-pointer-events/article.md index 63c1743d7..5dfa9cf06 100644 --- a/2-ui/3-event-details/6-pointer-events/article.md +++ b/2-ui/3-event-details/6-pointer-events/article.md @@ -84,7 +84,7 @@ Tenga en cuenta: el `pointerId` no se asigna a todo el dispositivo, sino a cada Los eventos asociados con el primer dedo siempre tienen `isPrimary = true`. -Podemos rastrear el toque de varios dedos usando sus `pointerId`. Cuando el usuario mueve y luego levanta un dedo, obtenemos los eventos `pointermove` y `pointerup` con el mismo `pointerId` que teníamos en `pointerdown`. +Podemos rastrear múltiples dedos en contacto usando su `pointerId`. Cuando el usuario se mueve y luego quita un dedo, obtenemos eventos `pointermove` y `pointerup` con el mismo `pointerId` que teníamos en `pointerdown`. ```online Aquí está la demostración que registra los eventos `pointerdown` y `pointerup`: diff --git a/2-ui/3-event-details/8-onscroll/1-endless-page/solution.md b/2-ui/3-event-details/8-onscroll/1-endless-page/solution.md index 5f4e5d5f2..ce4fb3ee4 100644 --- a/2-ui/3-event-details/8-onscroll/1-endless-page/solution.md +++ b/2-ui/3-event-details/8-onscroll/1-endless-page/solution.md @@ -51,15 +51,15 @@ Así que aquí está la función: ```js function populate() { - while(true) { + while(true) + { // final del documento let windowRelativeBottom = document.documentElement.getBoundingClientRect().bottom; - // si el usuario se desplaza lo suficiente (<100px hasta el final) - if (windowRelativeBottom < document.documentElement.clientHeight + 100) { + // si el usuario no se ha desplazado lo suficiente (> 100px hasta el final) + if (windowRelativeBottom > document.documentElement.clientHeight + 100) break; // vamos añadir más datos document.body.insertAdjacentHTML("beforeend", `

Date: ${new Date()}

`); - } } } ``` diff --git a/2-ui/3-event-details/8-onscroll/article.md b/2-ui/3-event-details/8-onscroll/article.md index 1b1efeb52..0a8ab8f6f 100644 --- a/2-ui/3-event-details/8-onscroll/article.md +++ b/2-ui/3-event-details/8-onscroll/article.md @@ -34,4 +34,4 @@ Si añadimos un manejador de eventos a estos eventos y un `event.preventDefault( Hay muchas maneras de iniciar un desplazamiento, la más fiable es usar CSS, la propiedad `overflow`. -Aquí hay algunas tareas que puedes resolver o mirar para ver las aplicaciones de `onscroll`. +Aquí hay algunas tareas que puede resolver o revisar para ver aplicaciones de `onscroll`. diff --git a/2-ui/4-forms-controls/2-focus-blur/article.md b/2-ui/4-forms-controls/2-focus-blur/article.md index d42013e5b..d4348d25b 100644 --- a/2-ui/4-forms-controls/2-focus-blur/article.md +++ b/2-ui/4-forms-controls/2-focus-blur/article.md @@ -1,6 +1,6 @@ # Focusing: focus/blur -An element receives a focus when the user either clicks on it or uses the `key:Tab` key on the keyboard. There's also an `autofocus` HTML attribute that puts the focus into an element by default when a page loads and other means of getting a focus. +An element receives the focus when the user either clicks on it or uses the `key:Tab` key on the keyboard. There's also an `autofocus` HTML attribute that puts the focus onto an element by default when a page loads and other means of getting the focus. Focusing on an element generally means: "prepare to accept the data here", so that's the moment when we can run the code to initialize the required functionality. @@ -18,7 +18,7 @@ Let's use them for validation of an input field. In the example below: -- The `blur` handler checks if the field the email is entered, and if not -- shows an error. +- The `blur` handler checks if the field has an email entered, and if not -- shows an error. - The `focus` handler hides the error message (on `blur` it will be checked again): ```html run autorun height=60 @@ -108,7 +108,7 @@ By default many elements do not support focusing. The list varies a bit between browsers, but one thing is always correct: `focus/blur` support is guaranteed for elements that a visitor can interact with: `