From 234b41944a7e1ff427ca8f1dca9930f90af8f6e6 Mon Sep 17 00:00:00 2001 From: joaquinelio Date: Fri, 21 Aug 2020 01:18:36 -0300 Subject: [PATCH 01/26] Event delegation --- .../1-hide-message-delegate/task.md | 8 +- .../2-sliding-tree/solution.md | 6 +- .../2-sliding-tree/task.md | 10 +- .../3-sortable-table/task.md | 14 +- .../4-behavior-tooltip/task.md | 34 ++-- 2-ui/2-events/03-event-delegation/article.md | 152 +++++++++--------- 6 files changed, 112 insertions(+), 112 deletions(-) diff --git a/2-ui/2-events/03-event-delegation/1-hide-message-delegate/task.md b/2-ui/2-events/03-event-delegation/1-hide-message-delegate/task.md index 62c0a8ab0..1b29127e2 100644 --- a/2-ui/2-events/03-event-delegation/1-hide-message-delegate/task.md +++ b/2-ui/2-events/03-event-delegation/1-hide-message-delegate/task.md @@ -2,12 +2,12 @@ importance: 5 --- -# Hide messages with delegation +# Ocultar mensajes con delegación -There's a list of messages with removal buttons `[x]`. Make the buttons work. +Hay una lista de mensajes con botones para borrarlos `[x]`. Haz que funcionen. -Like this: +Como esto: [iframe src="solution" height=420] -P.S. Should be only one event listener on the container, use event delegation. +P.D. Debe haber solamente un _event lintener_ en el contenedor, usa delegación de eventos. diff --git a/2-ui/2-events/03-event-delegation/2-sliding-tree/solution.md b/2-ui/2-events/03-event-delegation/2-sliding-tree/solution.md index 09c14a08c..2ef1d81c5 100644 --- a/2-ui/2-events/03-event-delegation/2-sliding-tree/solution.md +++ b/2-ui/2-events/03-event-delegation/2-sliding-tree/solution.md @@ -1,4 +1,4 @@ -The solution has two parts. +La solución tiene dos partes. -1. Wrap every tree node title into ``. Then we can CSS-style them on `:hover` and handle clicks exactly on text, because `` width is exactly the text width (unlike without it). -2. Set a handler to the `tree` root node and handle clicks on that `` titles. +1. Envuelve cada nodo de título del árbol dentro de ``. Luego podemos aplicarles CSS-style en `:hover` y manejar los clics exactamente sobre el texto, porque el ancho de `` es exactamente el ancho del texto (no lo será si no lo tiene). +2. Establece el manejador al nodo raíz del `tree` y maneja los clics en aquellos títulos ``. diff --git a/2-ui/2-events/03-event-delegation/2-sliding-tree/task.md b/2-ui/2-events/03-event-delegation/2-sliding-tree/task.md index bdcf2a510..e09f644ac 100644 --- a/2-ui/2-events/03-event-delegation/2-sliding-tree/task.md +++ b/2-ui/2-events/03-event-delegation/2-sliding-tree/task.md @@ -2,13 +2,13 @@ importance: 5 --- -# Tree menu +# Menú de árbol -Create a tree that shows/hides node children on click: +Crea un árbol que muestre y oculte nodos hijos con clics: [iframe border=1 src="solution"] -Requirements: +Requerimientos: -- Only one event handler (use delegation) -- A click outside the node title (on an empty space) should not do anything. +- Solamente un manejador de elementos (usa delegación) +- Un clic fuera de los nodos de títulos (en un espacio vacío) no debe hacer nada. diff --git a/2-ui/2-events/03-event-delegation/3-sortable-table/task.md b/2-ui/2-events/03-event-delegation/3-sortable-table/task.md index ec85a473c..798b29ba0 100644 --- a/2-ui/2-events/03-event-delegation/3-sortable-table/task.md +++ b/2-ui/2-events/03-event-delegation/3-sortable-table/task.md @@ -2,11 +2,11 @@ importance: 4 --- -# Sortable table +# Tabla ordenable -Make the table sortable: clicks on `` elements should sort it by corresponding column. +Haz que la tabla se pueda ordenar: los clics en elementos `` deberían ordenarla por la columna correspondiente. -Each `` has the type in the attribute, like this: +Cada `` tiene su tipo en el atributo, como esto: ```html @@ -32,12 +32,12 @@ Each `
` has the type in the attribute, like this:
``` -In the example above the first column has numbers, and the second one -- strings. The sorting function should handle sort according to the type. +En el ejemplo anterior la primera columna tiene números y la segunda cadenas. La función de ordenamiento debe manejar el orden de acuerdo al tipo. -Only `"string"` and `"number"` types should be supported. +Solamente los tipos `"string"` y `"number"` deben ser soportados. -The working example: +Ejemplo en funcionamiento: [iframe border=1 src="solution" height=190] -P.S. The table can be big, with any number of rows and columns. +P.D. La tabla puede ser grande, con cualquier cantidad de filas y columnas. diff --git a/2-ui/2-events/03-event-delegation/4-behavior-tooltip/task.md b/2-ui/2-events/03-event-delegation/4-behavior-tooltip/task.md index 3001b9915..0b5edcf5b 100644 --- a/2-ui/2-events/03-event-delegation/4-behavior-tooltip/task.md +++ b/2-ui/2-events/03-event-delegation/4-behavior-tooltip/task.md @@ -2,37 +2,37 @@ importance: 5 --- -# Tooltip behavior +# Comportamiento Tooltip -Create JS-code for the tooltip behavior. +Crea código JS para el comportamiento "tooltip". -When a mouse comes over an element with `data-tooltip`, the tooltip should appear over it, and when it's gone then hide. +Cuando un mouse pasa sobre un elemento con `data-tooltip`, el tooltip debe aparecer sobre él, y ocultarse cuando se va. -An example of annotated HTML: +Un ejemplo en HTML anotado: ```html ``` -Should work like this: +Debe funcionar así: [iframe src="solution" height=200 border=1] -In this task we assume that all elements with `data-tooltip` have only text inside. No nested tags (yet). +En esta tarea asumimos que todos los elementos con `data-tooltip` solo tienen texto dentro. Sin tags anidados (todavía). -Details: +Detalles: -- The distance between the element and the tooltip should be `5px`. -- The tooltip should be centered relative to the element, if possible. -- The tooltip should not cross window edges. Normally it should be above the element, but if the element is at the page top and there's no space for the tooltip, then below it. -- The tooltip content is given in the `data-tooltip` attribute. It can be arbitrary HTML. +- La distancia entre el elemento y el tooltip debe sesr `5px`. +- El tooltip debe ser centrado relativo al elemento si es posible. +- El tooltip no debe cruzar los bordes de la ventana. Normalmente debería etar sobre el elemento, pero si el elemento está en la parte superior de la págino y no hay espacio para el tooltip, entonces debajo de él. +- El contenido del tooltip está dado en el atributo `data-tooltip`. Este puede ser HTML arbitrario. -You'll need two events here: -- `mouseover` triggers when a pointer comes over an element. -- `mouseout` triggers when a pointer leaves an element. +Necesitarás dos eventos aquí: +- `mouseover` se dispara cuanto el puntero pasa sobre el elemento. +- `mouseout` se dispara cuando el puntero deja el elemento. -Please use event delegation: set up two handlers on `document` to track all "overs" and "outs" from elements with `data-tooltip` and manage tooltips from there. +Usa delegación de eventos: establede hasta dos manejadores sobre `document` para rastrear todos los "overs" y "outs" de los elementos con `data-tooltip` y administra los tooltips desde allí. -After the behavior is implemented, even people unfamiliar with JavaScript can add annotated elements. +Después de implementar el comportamiento, hasta gente no familiarizada con JavaScript puede agregar elementos anotados. -P.S. Only one tooltip may show up at a time. +P.D. Solamente un tooltip puede mostrarse a la vez. diff --git a/2-ui/2-events/03-event-delegation/article.md b/2-ui/2-events/03-event-delegation/article.md index df086f24b..2c656e4bf 100644 --- a/2-ui/2-events/03-event-delegation/article.md +++ b/2-ui/2-events/03-event-delegation/article.md @@ -1,19 +1,19 @@ -# Event delegation +# Delegación de eventos -Capturing and bubbling allow us to implement one of most powerful event handling patterns called *event delegation*. +La captura y el burbujeo nos permiten implementar uno de los más poderosos patrones de manejo de eventos llamado *delegación de eventos*. -The idea is that if we have a lot of elements handled in a similar way, then instead of assigning a handler to each of them -- we put a single handler on their common ancestor. +La idea es que si tenemos montones de elementos manejados de manera similar podemos, en lugar de asignar un manejador a cada uno de ellos, poner un único manejador a su ancestro común. -In the handler we get `event.target`, see where the event actually happened and handle it. +Del manejador obtenemos `event.target`, vemos dónde ocurrió realmente el evento y lo manejamos. -Let's see an example -- the [Ba-Gua diagram](http://en.wikipedia.org/wiki/Ba_gua) reflecting the ancient Chinese philosophy. +Veamos un ejemplo: El [diagrama Ba-Gua](https://es.wikipedia.org/wiki/Pa_kua) que refleja la antigua filosofía china. -Here it is: +Aquí está: [iframe height=350 src="bagua" edit link] -The HTML is like this: +El HTML es este: ```html @@ -30,45 +30,45 @@ The HTML is like this:
``` -The table has 9 cells, but there could be 99 or 9999, doesn't matter. +La tabla tiene 9 celdas, pero puede haber 99 o 999, eso no importa. -**Our task is to highlight a cell `` on click.** +**Nuestra tarea es realzar (highlight) una celda `` al hacer clic en ella.** -Instead of assign an `onclick` handler to each `` (can be many) -- we'll setup the "catch-all" handler on `` element. +En lugar de asignar un manejador `onclick` a cada `
` (puede haber muchos), configuramos un manejador "atrapa-todo" en el elemento ``. -It will use `event.target` to get the clicked element and highlight it. +Este usará `event.target` para obtener el elemento del clic y realzarlo . -The code: +El código: ```js let selectedTd; *!* table.onclick = function(event) { - let target = event.target; // where was the click? + let target = event.target; // ¿dónde fue el clic? - if (target.tagName != 'TD') return; // not on TD? Then we're not interested + if (target.tagName != 'TD') return; // ¿no es un TD? No nos interesa - highlight(target); // highlight it + highlight(target); // realzarlo }; */!* function highlight(td) { - if (selectedTd) { // remove the existing highlight if any + if (selectedTd) { // quitar cualquier realzado que hubiera antes selectedTd.classList.remove('highlight'); } selectedTd = td; - selectedTd.classList.add('highlight'); // highlight the new td + selectedTd.classList.add('highlight'); // y realzar el nuevo td } ``` -Such a code doesn't care how many cells there are in the table. We can add/remove `
` dynamically at any time and the highlighting will still work. +A tal código no le interesa cuántas celdas hay en la tabla. Podemos agregar y quitar `` dinámicamente en cualquier momento y el realzado aún funcionará. -Still, there's a drawback. +Pero hay una contra. -The click may occur not on the ``, but inside it. +El clic puede ocurrir no sobre ``, sino dentro de él. -In our case if we take a look inside the HTML, we can see nested tags inside ``, like ``: +En nuetro caso, si miramos dentro del HTML, podemos ver tags anidados dentro de ``, como ``: ```html @@ -79,13 +79,13 @@ In our case if we take a look inside the HTML, we can see nested tags inside ` ``` -Naturally, if a click happens on that `` then it becomes the value of `event.target`. +Naturalmente, si el clic ocurre en ``, este se vuelve el valor de `event.target`. ![](bagua-bubble.svg) -In the handler `table.onclick` we should take such `event.target` and find out whether the click was inside `` or not. +En el manejador `table.onclick` debemos tomar tal `event.target` e indagar si el clic fue dentro de `` o no. -Here's the improved code: +Aquí el código mejorado: ```js table.onclick = function(event) { @@ -99,27 +99,27 @@ table.onclick = function(event) { }; ``` -Explanations: -1. The method `elem.closest(selector)` returns the nearest ancestor that matches the selector. In our case we look for `` on the way up from the source element. -2. If `event.target` is not inside any ``, then the call returns immediately, as there's nothing to do. -3. In case of nested tables, `event.target` may be a ``, but lying outside of the current table. So we check if that's actually *our table's* ``. -4. And, if it's so, then highlight it. +Explicación: +1. El método `elem.closest(selector)` devuelve el ancestro más cercano que coincide con el selector. En nuestro caso buscamos `` hacia arriba desde el elemento de origen. +2. Si `event.target` no ocurrió dentro de algún ``, el llamado retorna inmediatamente pues no hay nada que hacer. +3. En caso de tablas anidadas, `event.target` podría ser un `` pero fuera de la tabla actual. Entonces verificamos que sea realmente un `` de *nuestra tabla*. +4. Y, si es así, realzarlo. -As the result, we have a fast, efficient highlighting code, that doesn't care about the total number of `` in the table. +Como resultado, tenemos un código de realzado rápido y eficiente al que no le afecta la cantidad total de `` en le tabla. -## Delegation example: actions in markup +## Ejemplo de delegación: acciones en markup -There are other uses for event delegation. +Hay otros usos para la delegación de eventos. -Let's say, we want to make a menu with buttons "Save", "Load", "Search" and so on. And there's an object with methods `save`, `load`, `search`... How to match them? +Digamos que queremos hacer un menú con los botones "Save", "Load", "Search" y así. Y hay objetos con los métodos `save`, `load`, `search`... ¿Cómo asociarlos? -The first idea may be to assign a separate handler to each button. But there's a more elegant solution. We can add a handler for the whole menu and `data-action` attributes for buttons that has the method to call: +La primera idea podría ser asignar un manejador separado para cada botón. Pero hay una solución más elegante. Podemos agregar un manejador para el menú completo y un atributo `data-action` a los botones con el método a llamar: ```html ``` -The handler reads the attribute and executes the method. Take a look at the working example: +El manejador lee el atributo y ejecuta el método. Puedes ver el siguiente ejemplo en funcionamiento: ```html autorun height=60 run untrusted ` tiene su tipo en el atributo, como esto:
``` -En el ejemplo anterior la primera columna tiene números y la segunda cadenas. La función de ordenamiento debe manejar el orden de acuerdo al tipo. +En el ejemplo anterior la primera columna tiene números y la segunda cadenas. La función de ordenamiento debe manejar el orden de acuerdo al tipo de dato. Solamente los tipos `"string"` y `"number"` deben ser soportados. From ff39c369327e7b280fb8c871f9c19df580964e78 Mon Sep 17 00:00:00 2001 From: joaquinelio Date: Sat, 29 Aug 2020 01:55:31 -0300 Subject: [PATCH 04/26] Update 2-ui/2-events/03-event-delegation/3-sortable-table/task.md Co-authored-by: Ezequiel Castellanos <51804994+EzequielCaste@users.noreply.github.com> --- 2-ui/2-events/03-event-delegation/3-sortable-table/task.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/2-ui/2-events/03-event-delegation/3-sortable-table/task.md b/2-ui/2-events/03-event-delegation/3-sortable-table/task.md index 6fe71c566..e0f31505c 100644 --- a/2-ui/2-events/03-event-delegation/3-sortable-table/task.md +++ b/2-ui/2-events/03-event-delegation/3-sortable-table/task.md @@ -6,7 +6,7 @@ importance: 4 Haz que la tabla se pueda ordenar: los clics en elementos `		` deberían ordenarla por la columna correspondiente. -Cada `` tiene su tipo en el atributo, como esto: +Cada `` tiene su tipo de datos en el atributo, como esto: ```html From 475c3e7c9eacc4fc6bdb60b504eb1db706825179 Mon Sep 17 00:00:00 2001 From: joaquinelio Date: Sat, 29 Aug 2020 01:59:16 -0300 Subject: [PATCH 05/26] Update 2-ui/2-events/03-event-delegation/4-behavior-tooltip/task.md Co-authored-by: Ezequiel Castellanos <51804994+EzequielCaste@users.noreply.github.com> --- 2-ui/2-events/03-event-delegation/4-behavior-tooltip/task.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/2-ui/2-events/03-event-delegation/4-behavior-tooltip/task.md b/2-ui/2-events/03-event-delegation/4-behavior-tooltip/task.md index 0b5edcf5b..6b085265d 100644 --- a/2-ui/2-events/03-event-delegation/4-behavior-tooltip/task.md +++ b/2-ui/2-events/03-event-delegation/4-behavior-tooltip/task.md @@ -24,7 +24,7 @@ Detalles: - La distancia entre el elemento y el tooltip debe sesr `5px`. - El tooltip debe ser centrado relativo al elemento si es posible. -- El tooltip no debe cruzar los bordes de la ventana. Normalmente debería etar sobre el elemento, pero si el elemento está en la parte superior de la págino y no hay espacio para el tooltip, entonces debajo de él. +- El tooltip no debe cruzar los bordes de la ventana. Normalmente debería estar sobre el elemento, pero si el elemento está en la parte superior de la págino y no hay espacio para el tooltip, entonces debajo de él. - El contenido del tooltip está dado en el atributo `data-tooltip`. Este puede ser HTML arbitrario. Necesitarás dos eventos aquí: From 5e45108e021f85e409274a30fc8825004686df98 Mon Sep 17 00:00:00 2001 From: joaquinelio Date: Sat, 29 Aug 2020 01:59:43 -0300 Subject: [PATCH 06/26] Update 2-ui/2-events/03-event-delegation/4-behavior-tooltip/task.md Co-authored-by: Ezequiel Castellanos <51804994+EzequielCaste@users.noreply.github.com> --- 2-ui/2-events/03-event-delegation/4-behavior-tooltip/task.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/2-ui/2-events/03-event-delegation/4-behavior-tooltip/task.md b/2-ui/2-events/03-event-delegation/4-behavior-tooltip/task.md index 6b085265d..d7fb45a8c 100644 --- a/2-ui/2-events/03-event-delegation/4-behavior-tooltip/task.md +++ b/2-ui/2-events/03-event-delegation/4-behavior-tooltip/task.md @@ -31,7 +31,7 @@ Necesitarás dos eventos aquí: - `mouseover` se dispara cuanto el puntero pasa sobre el elemento. - `mouseout` se dispara cuando el puntero deja el elemento. -Usa delegación de eventos: establede hasta dos manejadores sobre `document` para rastrear todos los "overs" y "outs" de los elementos con `data-tooltip` y administra los tooltips desde allí. +Usa delegación de eventos: prepare dos manejadores en el `document` para rastrear todos los "overs" y "outs" de los elementos con `data-tooltip` y administra los tooltips desde allí. Después de implementar el comportamiento, hasta gente no familiarizada con JavaScript puede agregar elementos anotados. From 84c78f0b8070fde1570c02c447e2482e893ad93b Mon Sep 17 00:00:00 2001 From: joaquinelio Date: Sat, 29 Aug 2020 02:19:46 -0300 Subject: [PATCH 07/26] Update 2-ui/2-events/03-event-delegation/4-behavior-tooltip/task.md Co-authored-by: Ezequiel Castellanos <51804994+EzequielCaste@users.noreply.github.com> --- 2-ui/2-events/03-event-delegation/4-behavior-tooltip/task.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/2-ui/2-events/03-event-delegation/4-behavior-tooltip/task.md b/2-ui/2-events/03-event-delegation/4-behavior-tooltip/task.md index d7fb45a8c..75307480c 100644 --- a/2-ui/2-events/03-event-delegation/4-behavior-tooltip/task.md +++ b/2-ui/2-events/03-event-delegation/4-behavior-tooltip/task.md @@ -8,7 +8,7 @@ Crea código JS para el comportamiento "tooltip". Cuando un mouse pasa sobre un elemento con `data-tooltip`, el tooltip debe aparecer sobre él, y ocultarse cuando se va. -Un ejemplo en HTML anotado: +Un ejemplo en HTML comentado: ```html From b23c55e4de2d3cc937b73cbdb28d0a806ca577ec Mon Sep 17 00:00:00 2001 From: joaquinelio Date: Sat, 29 Aug 2020 02:20:07 -0300 Subject: [PATCH 08/26] Update 2-ui/2-events/03-event-delegation/4-behavior-tooltip/task.md Co-authored-by: Ezequiel Castellanos <51804994+EzequielCaste@users.noreply.github.com> --- 2-ui/2-events/03-event-delegation/4-behavior-tooltip/task.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/2-ui/2-events/03-event-delegation/4-behavior-tooltip/task.md b/2-ui/2-events/03-event-delegation/4-behavior-tooltip/task.md index 75307480c..6931cd132 100644 --- a/2-ui/2-events/03-event-delegation/4-behavior-tooltip/task.md +++ b/2-ui/2-events/03-event-delegation/4-behavior-tooltip/task.md @@ -18,7 +18,7 @@ Debe funcionar así: [iframe src="solution" height=200 border=1] -En esta tarea asumimos que todos los elementos con `data-tooltip` solo tienen texto dentro. Sin tags anidados (todavía). +En esta tarea suponemos que todos los elementos con `data-tooltip` solo tienen texto dentro. Sin tags anidados (todavía). Detalles: From 9517ef9370266b7cbfdc1fa294a8cba40d5979e9 Mon Sep 17 00:00:00 2001 From: joaquinelio Date: Sat, 29 Aug 2020 02:20:28 -0300 Subject: [PATCH 09/26] Update 2-ui/2-events/03-event-delegation/4-behavior-tooltip/task.md Co-authored-by: Ezequiel Castellanos <51804994+EzequielCaste@users.noreply.github.com> --- 2-ui/2-events/03-event-delegation/4-behavior-tooltip/task.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/2-ui/2-events/03-event-delegation/4-behavior-tooltip/task.md b/2-ui/2-events/03-event-delegation/4-behavior-tooltip/task.md index 6931cd132..b0f7420e2 100644 --- a/2-ui/2-events/03-event-delegation/4-behavior-tooltip/task.md +++ b/2-ui/2-events/03-event-delegation/4-behavior-tooltip/task.md @@ -28,7 +28,7 @@ Detalles: - El contenido del tooltip está dado en el atributo `data-tooltip`. Este puede ser HTML arbitrario. Necesitarás dos eventos aquí: -- `mouseover` se dispara cuanto el puntero pasa sobre el elemento. +- `mouseover` se dispara cuando el puntero pasa sobre el elemento. - `mouseout` se dispara cuando el puntero deja el elemento. Usa delegación de eventos: prepare dos manejadores en el `document` para rastrear todos los "overs" y "outs" de los elementos con `data-tooltip` y administra los tooltips desde allí. From 7e24604632bae2f52ae83f9b64c3ff0db8df734e Mon Sep 17 00:00:00 2001 From: joaquinelio Date: Sat, 29 Aug 2020 02:22:57 -0300 Subject: [PATCH 10/26] Update 2-ui/2-events/03-event-delegation/article.md Co-authored-by: Ezequiel Castellanos <51804994+EzequielCaste@users.noreply.github.com> --- 2-ui/2-events/03-event-delegation/article.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/2-ui/2-events/03-event-delegation/article.md b/2-ui/2-events/03-event-delegation/article.md index 2c656e4bf..ef1920a23 100644 --- a/2-ui/2-events/03-event-delegation/article.md +++ b/2-ui/2-events/03-event-delegation/article.md @@ -7,7 +7,7 @@ La idea es que si tenemos montones de elementos manejados de manera similar pode Del manejador obtenemos `event.target`, vemos dónde ocurrió realmente el evento y lo manejamos. -Veamos un ejemplo: El [diagrama Ba-Gua](https://es.wikipedia.org/wiki/Pa_kua) que refleja la antigua filosofía china. +Veamos un ejemplo: El [diagrama Pa kua](https://es.wikipedia.org/wiki/Pa_kua) que refleja la antigua filosofía china. Aquí está: From f1cf397e205070309d024913decc6fdc32ec6d6a Mon Sep 17 00:00:00 2001 From: joaquinelio Date: Sat, 29 Aug 2020 03:03:18 -0300 Subject: [PATCH 11/26] Update article.md --- 2-ui/2-events/03-event-delegation/article.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/2-ui/2-events/03-event-delegation/article.md b/2-ui/2-events/03-event-delegation/article.md index ef1920a23..352063c51 100644 --- a/2-ui/2-events/03-event-delegation/article.md +++ b/2-ui/2-events/03-event-delegation/article.md @@ -209,7 +209,7 @@ Cuando asignamos un manejador de evento al objeto `document`, debemos usar siemp En proyectos reales es normal que haya muchos manejadores en `document`, asignados en diferentes partes del código. ``` -### Comportamiento: Alternador (toggle) +### Comportamiento: Conmutador (toggle) Un ejemplo más de comportamiento. Un clic en un elemento con el atributo `data-toggle-id` mostrará/ocultará el elemento con el `id` recibido: @@ -236,7 +236,7 @@ Un ejemplo más de comportamiento. Un clic en un elemento con el atributo `data- ``` -Veamos una vez más lo que hicimos aquí: ahora, para agregar la funcionalidad de alternancia a un elemento, no hay necesidad de conocer JavaScript, simplemente usamos el atributo `data-toggle-id`. +Veamos una vez más lo que hicimos aquí: ahora, para agregar la funcionalidad de conmutación a un elemento, no hay necesidad de conocer JavaScript, simplemente usamos el atributo `data-toggle-id`. Esto puede ser muy conveniente: no hay necesidad de escribir JavaScript para cada elemento. Simplemente usamos el comportamiento. El manejador a nivel de documento hace el trabajo para cualquier elemento de la página. From 031c98a003b332b200501f1d10dde47d82bd0aef Mon Sep 17 00:00:00 2001 From: joaquinelio Date: Sat, 29 Aug 2020 03:04:11 -0300 Subject: [PATCH 12/26] Update task.md --- 2-ui/2-events/03-event-delegation/4-behavior-tooltip/task.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/2-ui/2-events/03-event-delegation/4-behavior-tooltip/task.md b/2-ui/2-events/03-event-delegation/4-behavior-tooltip/task.md index b0f7420e2..09c93d0c0 100644 --- a/2-ui/2-events/03-event-delegation/4-behavior-tooltip/task.md +++ b/2-ui/2-events/03-event-delegation/4-behavior-tooltip/task.md @@ -2,7 +2,7 @@ importance: 5 --- -# Comportamiento Tooltip +# Comportamiento: Tooltip Crea código JS para el comportamiento "tooltip". From c2138102b3cb9a969296715285a394704dae768e Mon Sep 17 00:00:00 2001 From: joaquinelio Date: Sun, 30 Aug 2020 02:46:01 -0300 Subject: [PATCH 13/26] Update 2-ui/2-events/03-event-delegation/article.md Co-authored-by: Ezequiel Castellanos <51804994+EzequielCaste@users.noreply.github.com> --- 2-ui/2-events/03-event-delegation/article.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/2-ui/2-events/03-event-delegation/article.md b/2-ui/2-events/03-event-delegation/article.md index 352063c51..07b8348df 100644 --- a/2-ui/2-events/03-event-delegation/article.md +++ b/2-ui/2-events/03-event-delegation/article.md @@ -58,7 +58,7 @@ function highlight(td) { selectedTd.classList.remove('highlight'); } selectedTd = td; - selectedTd.classList.add('highlight'); // y realzar el nuevo td + selectedTd.classList.add('highlight'); // y destacar el nuevo td } ``` From 4848363502ba2e70c11d7d1d8061336e0d2c4434 Mon Sep 17 00:00:00 2001 From: joaquinelio Date: Sun, 30 Aug 2020 02:49:24 -0300 Subject: [PATCH 14/26] Update 2-ui/2-events/03-event-delegation/article.md Co-authored-by: Ezequiel Castellanos <51804994+EzequielCaste@users.noreply.github.com> --- 2-ui/2-events/03-event-delegation/article.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/2-ui/2-events/03-event-delegation/article.md b/2-ui/2-events/03-event-delegation/article.md index 07b8348df..acf311219 100644 --- a/2-ui/2-events/03-event-delegation/article.md +++ b/2-ui/2-events/03-event-delegation/article.md @@ -182,7 +182,7 @@ El patrón tiene dos partes: ### Comportamiento: Contador -Por ejemplo, aquí el atributo `data-counter` agrega un comportamiento: "incrementa el valor con un clic" a los botones: +Por ejemplo, aquí el atributo `data-counter` agrega un comportamiento: "incrementar el valor con un clic" a los botones: ```html run autorun height=60 Counter: From 4c69af1aa8e9db298f58de198b2af98504db50f9 Mon Sep 17 00:00:00 2001 From: joaquinelio Date: Sun, 30 Aug 2020 02:50:13 -0300 Subject: [PATCH 15/26] Update 2-ui/2-events/03-event-delegation/article.md Co-authored-by: Ezequiel Castellanos <51804994+EzequielCaste@users.noreply.github.com> --- 2-ui/2-events/03-event-delegation/article.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/2-ui/2-events/03-event-delegation/article.md b/2-ui/2-events/03-event-delegation/article.md index acf311219..a26944d6a 100644 --- a/2-ui/2-events/03-event-delegation/article.md +++ b/2-ui/2-events/03-event-delegation/article.md @@ -3,7 +3,7 @@ La captura y el burbujeo nos permiten implementar uno de los más poderosos patrones de manejo de eventos llamado *delegación de eventos*. -La idea es que si tenemos montones de elementos manejados de manera similar podemos, en lugar de asignar un manejador a cada uno de ellos, poner un único manejador a su ancestro común. +La idea es que si tenemos muchos elementos manejados de manera similar podemos, en lugar de asignar un manejador a cada uno de ellos, poner un único manejador a su ancestro común. Del manejador obtenemos `event.target`, vemos dónde ocurrió realmente el evento y lo manejamos. From 41c7660c6858ee7a7a882259de4c40fd27a4e2d0 Mon Sep 17 00:00:00 2001 From: joaquinelio Date: Sun, 30 Aug 2020 02:52:50 -0300 Subject: [PATCH 16/26] Apply suggestions from code review Co-authored-by: Ezequiel Castellanos <51804994+EzequielCaste@users.noreply.github.com> --- 2-ui/2-events/03-event-delegation/article.md | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/2-ui/2-events/03-event-delegation/article.md b/2-ui/2-events/03-event-delegation/article.md index a26944d6a..3f84c6e84 100644 --- a/2-ui/2-events/03-event-delegation/article.md +++ b/2-ui/2-events/03-event-delegation/article.md @@ -32,11 +32,11 @@ El HTML es este: La tabla tiene 9 celdas, pero puede haber 99 o 999, eso no importa. -**Nuestra tarea es realzar (highlight) una celda `
` al hacer clic en ella.** +**Nuestra tarea es destacar una celda `` al hacer clic en ella.** En lugar de asignar un manejador `onclick` a cada `` (puede haber muchos), configuramos un manejador "atrapa-todo" en el elemento ``. -Este usará `event.target` para obtener el elemento del clic y realzarlo . +Este usará `event.target` para obtener el elemento del clic y destacarlo. El código: @@ -49,12 +49,12 @@ table.onclick = function(event) { if (target.tagName != 'TD') return; // ¿no es un TD? No nos interesa - highlight(target); // realzarlo + highlight(target); // destacarlo }; */!* function highlight(td) { - if (selectedTd) { // quitar cualquier realzado que hubiera antes + if (selectedTd) { // quitar cualquier celda destacada que hubiera antes selectedTd.classList.remove('highlight'); } selectedTd = td; @@ -68,7 +68,7 @@ Pero hay una contra. El clic puede ocurrir no sobre `
`, sino dentro de él. -En nuetro caso, si miramos dentro del HTML, podemos ver tags anidados dentro de ``, como ``: +En nuestro caso, si miramos dentro del HTML, podemos ver tags anidados dentro de ``, como ``: ```html @@ -103,9 +103,9 @@ Explicación: 1. El método `elem.closest(selector)` devuelve el ancestro más cercano que coincide con el selector. En nuestro caso buscamos `` hacia arriba desde el elemento de origen. 2. Si `event.target` no ocurrió dentro de algún ``, el llamado retorna inmediatamente pues no hay nada que hacer. 3. En caso de tablas anidadas, `event.target` podría ser un `` pero fuera de la tabla actual. Entonces verificamos que sea realmente un `` de *nuestra tabla*. -4. Y, si es así, realzarlo. +4. Y, si es así, destacarla. -Como resultado, tenemos un código de realzado rápido y eficiente al que no le afecta la cantidad total de `` en le tabla. +Como resultado, tenemos un código de realzado rápido y eficiente al que no le afecta la cantidad total de `` en la tabla. ## Ejemplo de delegación: acciones en markup From 789814dddecbff67e2b041ba452ef9dd6753eade Mon Sep 17 00:00:00 2001 From: joaquinelio Date: Sun, 30 Aug 2020 05:27:40 -0300 Subject: [PATCH 17/26] =?UTF-8?q?"propagaci=C3=B3n"=20de=20eventos?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- 2-ui/2-events/03-event-delegation/article.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/2-ui/2-events/03-event-delegation/article.md b/2-ui/2-events/03-event-delegation/article.md index 3f84c6e84..e6ad95a01 100644 --- a/2-ui/2-events/03-event-delegation/article.md +++ b/2-ui/2-events/03-event-delegation/article.md @@ -1,7 +1,7 @@ # Delegación de eventos -La captura y el burbujeo nos permiten implementar uno de los más poderosos patrones de manejo de eventos llamado *delegación de eventos*. +La captura y el propagación nos permiten implementar uno de los más poderosos patrones de manejo de eventos llamado *delegación de eventos*. La idea es que si tenemos muchos elementos manejados de manera similar podemos, en lugar de asignar un manejador a cada uno de ellos, poner un único manejador a su ancestro común. @@ -267,6 +267,6 @@ Beneficios: La delegación tiene sus limitaciones por supuesto: ```compare -- Primero, el evento debe "burbujear". Algunos eventos no lo hacen. Además manejadores de bajo nivel no deben usar `event.stopPropagation()`. +- Primero, el evento debe "propagarse". Algunos eventos no lo hacen. Además manejadores de bajo nivel no deben usar `event.stopPropagation()`. - Segundo, la delegación puede agregar carga a la CPU, porque el manejador a nivel de contenedor reacciona a eventos en cualquier lugar del mismo, no importa si nos interesan o no. Pero usualmente la carga es imperceptible y no la tomamos en cuenta. ``` From 2ec19791f863f4575cadf8658350053af7eef8bc Mon Sep 17 00:00:00 2001 From: Ezequiel Castellanos <51804994+EzequielCaste@users.noreply.github.com> Date: Sun, 30 Aug 2020 10:30:37 -0300 Subject: [PATCH 18/26] Update 2-ui/2-events/03-event-delegation/article.md --- 2-ui/2-events/03-event-delegation/article.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/2-ui/2-events/03-event-delegation/article.md b/2-ui/2-events/03-event-delegation/article.md index e6ad95a01..b78a37df2 100644 --- a/2-ui/2-events/03-event-delegation/article.md +++ b/2-ui/2-events/03-event-delegation/article.md @@ -268,5 +268,5 @@ La delegación tiene sus limitaciones por supuesto: ```compare - Primero, el evento debe "propagarse". Algunos eventos no lo hacen. Además manejadores de bajo nivel no deben usar `event.stopPropagation()`. -- Segundo, la delegación puede agregar carga a la CPU, porque el manejador a nivel de contenedor reacciona a eventos en cualquier lugar del mismo, no importa si nos interesan o no. Pero usualmente la carga es imperceptible y no la tomamos en cuenta. +- Segundo, la delegación puede agregar carga a la CPU, porque el controlador a nivel de contenedor reacciona a eventos en cualquier lugar del mismo, no importa si nos interesan o no. Pero usualmente la carga es imperceptible y no la tomamos en cuenta. ``` From 1f09fd16aa719ad9d416f883c90d16af81950b8e Mon Sep 17 00:00:00 2001 From: Ezequiel Castellanos <51804994+EzequielCaste@users.noreply.github.com> Date: Sun, 30 Aug 2020 10:30:46 -0300 Subject: [PATCH 19/26] Update 2-ui/2-events/03-event-delegation/article.md --- 2-ui/2-events/03-event-delegation/article.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/2-ui/2-events/03-event-delegation/article.md b/2-ui/2-events/03-event-delegation/article.md index b78a37df2..aab17865e 100644 --- a/2-ui/2-events/03-event-delegation/article.md +++ b/2-ui/2-events/03-event-delegation/article.md @@ -260,7 +260,7 @@ Beneficios: ```compare + Simplifica la inicialización y ahorra memoria: no hay necesidad de agregar muchos manejadores. -+ Menos código: cuando agregamos o quitamos elementos, no hay necesidad de agregar y quitar manejadores. ++ Menos código: cuando agregamos o quitamos elementos, no hay necesidad de agregar y quitar controladores. + Modificaciones del DOM: podemos agregar y quitar elementos en masa con `innerHTML` y similares. ``` From 37fc3f3c5520ce88da82b12882944113738dca34 Mon Sep 17 00:00:00 2001 From: Ezequiel Castellanos <51804994+EzequielCaste@users.noreply.github.com> Date: Sun, 30 Aug 2020 10:30:58 -0300 Subject: [PATCH 20/26] Update 2-ui/2-events/03-event-delegation/article.md --- 2-ui/2-events/03-event-delegation/article.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/2-ui/2-events/03-event-delegation/article.md b/2-ui/2-events/03-event-delegation/article.md index aab17865e..33cf15fd8 100644 --- a/2-ui/2-events/03-event-delegation/article.md +++ b/2-ui/2-events/03-event-delegation/article.md @@ -259,7 +259,7 @@ El algoritmo: Beneficios: ```compare -+ Simplifica la inicialización y ahorra memoria: no hay necesidad de agregar muchos manejadores. ++ Simplifica la inicialización y ahorra memoria: no hay necesidad de agregar muchos controladores. + Menos código: cuando agregamos o quitamos elementos, no hay necesidad de agregar y quitar controladores. + Modificaciones del DOM: podemos agregar y quitar elementos en masa con `innerHTML` y similares. ``` From 69391c0469a11d2b6e2d25935c6aa249de01485d Mon Sep 17 00:00:00 2001 From: Ezequiel Castellanos <51804994+EzequielCaste@users.noreply.github.com> Date: Sun, 30 Aug 2020 10:34:06 -0300 Subject: [PATCH 21/26] Update 2-ui/2-events/03-event-delegation/article.md --- 2-ui/2-events/03-event-delegation/article.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/2-ui/2-events/03-event-delegation/article.md b/2-ui/2-events/03-event-delegation/article.md index 33cf15fd8..dddb538f1 100644 --- a/2-ui/2-events/03-event-delegation/article.md +++ b/2-ui/2-events/03-event-delegation/article.md @@ -5,7 +5,7 @@ La captura y el propagación nos permiten implementar uno de los más poderosos La idea es que si tenemos muchos elementos manejados de manera similar podemos, en lugar de asignar un manejador a cada uno de ellos, poner un único manejador a su ancestro común. -Del manejador obtenemos `event.target`, vemos dónde ocurrió realmente el evento y lo manejamos. +Del controlador obtenemos `event.target`, vemos dónde ocurrió realmente el evento y lo controlamos. Veamos un ejemplo: El [diagrama Pa kua](https://es.wikipedia.org/wiki/Pa_kua) que refleja la antigua filosofía china. From 0d26d8e9cfd334811ace59d2137c6f7e8d82ef79 Mon Sep 17 00:00:00 2001 From: Ezequiel Castellanos <51804994+EzequielCaste@users.noreply.github.com> Date: Sun, 30 Aug 2020 10:34:57 -0300 Subject: [PATCH 22/26] Update 2-ui/2-events/03-event-delegation/article.md --- 2-ui/2-events/03-event-delegation/article.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/2-ui/2-events/03-event-delegation/article.md b/2-ui/2-events/03-event-delegation/article.md index dddb538f1..b991545dc 100644 --- a/2-ui/2-events/03-event-delegation/article.md +++ b/2-ui/2-events/03-event-delegation/article.md @@ -113,7 +113,7 @@ Hay otros usos para la delegación de eventos. Digamos que queremos hacer un menú con los botones "Save", "Load", "Search" y así. Y hay objetos con los métodos `save`, `load`, `search`... ¿Cómo asociarlos? -La primera idea podría ser asignar un manejador separado para cada botón. Pero hay una solución más elegante. Podemos agregar un manejador para el menú completo y un atributo `data-action` a los botones con el método a llamar: +La primera idea podría ser asignar un controlador separado para cada botón. Pero hay una solución más elegante. Podemos agregar un controlador para el menú completo y un atributo `data-action` a los botones con el método a llamar: ```html From e92bf90d41f4e23d62e6660906dfc9caf4e92504 Mon Sep 17 00:00:00 2001 From: joaquinelio Date: Fri, 4 Sep 2020 19:17:50 -0300 Subject: [PATCH 23/26] Update 2-ui/2-events/03-event-delegation/4-behavior-tooltip/task.md Co-authored-by: Valentina VP <34555644+vplentinax@users.noreply.github.com> --- 2-ui/2-events/03-event-delegation/4-behavior-tooltip/task.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/2-ui/2-events/03-event-delegation/4-behavior-tooltip/task.md b/2-ui/2-events/03-event-delegation/4-behavior-tooltip/task.md index 09c93d0c0..4ddcd154d 100644 --- a/2-ui/2-events/03-event-delegation/4-behavior-tooltip/task.md +++ b/2-ui/2-events/03-event-delegation/4-behavior-tooltip/task.md @@ -22,7 +22,7 @@ En esta tarea suponemos que todos los elementos con `data-tooltip` solo tienen t Detalles: -- La distancia entre el elemento y el tooltip debe sesr `5px`. +- La distancia entre el elemento y el tooltip debe ser `5px`. - El tooltip debe ser centrado relativo al elemento si es posible. - El tooltip no debe cruzar los bordes de la ventana. Normalmente debería estar sobre el elemento, pero si el elemento está en la parte superior de la págino y no hay espacio para el tooltip, entonces debajo de él. - El contenido del tooltip está dado en el atributo `data-tooltip`. Este puede ser HTML arbitrario. From 82ef753ee94d4cbde6c50dba781a3528dda409e1 Mon Sep 17 00:00:00 2001 From: joaquinelio Date: Fri, 4 Sep 2020 19:18:30 -0300 Subject: [PATCH 24/26] Update 2-ui/2-events/03-event-delegation/4-behavior-tooltip/task.md Co-authored-by: Valentina VP <34555644+vplentinax@users.noreply.github.com> --- 2-ui/2-events/03-event-delegation/4-behavior-tooltip/task.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/2-ui/2-events/03-event-delegation/4-behavior-tooltip/task.md b/2-ui/2-events/03-event-delegation/4-behavior-tooltip/task.md index 4ddcd154d..7a4497a7d 100644 --- a/2-ui/2-events/03-event-delegation/4-behavior-tooltip/task.md +++ b/2-ui/2-events/03-event-delegation/4-behavior-tooltip/task.md @@ -24,7 +24,7 @@ Detalles: - La distancia entre el elemento y el tooltip debe ser `5px`. - El tooltip debe ser centrado relativo al elemento si es posible. -- El tooltip no debe cruzar los bordes de la ventana. Normalmente debería estar sobre el elemento, pero si el elemento está en la parte superior de la págino y no hay espacio para el tooltip, entonces debajo de él. +- El tooltip no debe cruzar los bordes de la ventana. Normalmente debería estar sobre el elemento, pero si el elemento está en la parte superior de la página y no hay espacio para el tooltip, entonces debajo de él. - El contenido del tooltip está dado en el atributo `data-tooltip`. Este puede ser HTML arbitrario. Necesitarás dos eventos aquí: From 204f06aedb3405995b9facd2c59bf1d751ff86cc Mon Sep 17 00:00:00 2001 From: joaquinelio Date: Fri, 4 Sep 2020 19:19:26 -0300 Subject: [PATCH 25/26] Update 2-ui/2-events/03-event-delegation/4-behavior-tooltip/task.md Co-authored-by: Valentina VP <34555644+vplentinax@users.noreply.github.com> --- 2-ui/2-events/03-event-delegation/4-behavior-tooltip/task.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/2-ui/2-events/03-event-delegation/4-behavior-tooltip/task.md b/2-ui/2-events/03-event-delegation/4-behavior-tooltip/task.md index 7a4497a7d..ff50e6aa1 100644 --- a/2-ui/2-events/03-event-delegation/4-behavior-tooltip/task.md +++ b/2-ui/2-events/03-event-delegation/4-behavior-tooltip/task.md @@ -33,6 +33,6 @@ Necesitarás dos eventos aquí: Usa delegación de eventos: prepare dos manejadores en el `document` para rastrear todos los "overs" y "outs" de los elementos con `data-tooltip` y administra los tooltips desde allí. -Después de implementar el comportamiento, hasta gente no familiarizada con JavaScript puede agregar elementos anotados. +Después de implementar el comportamiento, incluso gente no familiarizada con JavaScript puede agregar elementos anotados. P.D. Solamente un tooltip puede mostrarse a la vez. From 91d487415d17bc0da2878677e1e14d43168cb409 Mon Sep 17 00:00:00 2001 From: joaquinelio Date: Fri, 4 Sep 2020 19:37:28 -0300 Subject: [PATCH 26/26] Update article.md --- 2-ui/2-events/03-event-delegation/article.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/2-ui/2-events/03-event-delegation/article.md b/2-ui/2-events/03-event-delegation/article.md index b991545dc..609709d9c 100644 --- a/2-ui/2-events/03-event-delegation/article.md +++ b/2-ui/2-events/03-event-delegation/article.md @@ -64,7 +64,7 @@ function highlight(td) { A tal código no le interesa cuántas celdas hay en la tabla. Podemos agregar y quitar `` dinámicamente en cualquier momento y el realzado aún funcionará. -Pero hay una contra. +Pero hay un inconveniente. El clic puede ocurrir no sobre ``, sino dentro de él.