La wiki de TempWin

Herramientas de usuario

Herramientas del sitio

Traza: • linkding • newsboat • guacamole • plausible_analytics • sftpgo • linkwarden • gotify • webtop • frigate • netalertx
informatica:programacion:cursos:programacion_avanzada_javascript:eventos_navegadores

Diferencias

Muestra las diferencias entre dos versiones de la página.

Enlace a la vista de comparación

Ambos lados, revisión anteriorRevisión previa
Próxima revisión		Revisión previa
informatica:programacion:cursos:programacion_avanzada_javascript:eventos_navegadores [2024/10/11 15:29] – [Valor devuelto por un evento] tempwininformatica:programacion:cursos:programacion_avanzada_javascript:eventos_navegadores [2024/10/30 15:45] (actual) – [Prácticas propuestas para el módulo] tempwin
Línea 7: Línea 7:
 Hasta ahora hemos visto muchísimas cosas sobre JavaScript. Con los conocimientos adquiridos podemos **crear algoritmos, modificar los contenidos de una página, acceder a cualquier elemento**… Pero, todo eso nos sirve de poco si no podemos **hacerlo en el momento preciso**. Al final, JavaScript dentro de una página web se utiliza casi siempre para interactuar con el usuario. Y precisamente eso es lo que nos proporcionan los eventos. Con lo que veremos en este módulo estaremos cerrando el círculo y llegando a lo que más nos interesa: los usuarios. Hasta ahora hemos visto muchísimas cosas sobre JavaScript. Con los conocimientos adquiridos podemos **crear algoritmos, modificar los contenidos de una página, acceder a cualquier elemento**… Pero, todo eso nos sirve de poco si no podemos **hacerlo en el momento preciso**. Al final, JavaScript dentro de una página web se utiliza casi siempre para interactuar con el usuario. Y precisamente eso es lo que nos proporcionan los eventos. Con lo que veremos en este módulo estaremos cerrando el círculo y llegando a lo que más nos interesa: los usuarios.
  
-<WRAP center round todo 60%> +{{ :informatica:programacion:cursos:programacion_avanzada_javascript:07-bang-gun.jpg |}}
-pistola +
-</WRAP>+
  
 Un documento HTML consta de un amplio conjunto de elementos, como párrafos, enlaces, formularios, tablas o divs. Una vez que se ha cargado una página web comienza la actividad por parte **del usuario**, que realiza todo tipo de acciones sobre dichos elementos: **pulsarlos**, **seleccionarlos**, **pasarles por encima**... Estas acciones son **eventos: acciones que ocurren en la página**, y el navegador los transmite a nuestro código por si queremos gestionarlos y responder a ellos con alguna acción. Casi todos los eventos que se generan en una página son provocados por la acción del usuario, con la notable excepción de los eventos que se generan tras la carga de la página y de sus elementos constituyentes. Un documento HTML consta de un amplio conjunto de elementos, como párrafos, enlaces, formularios, tablas o divs. Una vez que se ha cargado una página web comienza la actividad por parte **del usuario**, que realiza todo tipo de acciones sobre dichos elementos: **pulsarlos**, **seleccionarlos**, **pasarles por encima**... Estas acciones son **eventos: acciones que ocurren en la página**, y el navegador los transmite a nuestro código por si queremos gestionarlos y responder a ellos con alguna acción. Casi todos los eventos que se generan en una página son provocados por la acción del usuario, con la notable excepción de los eventos que se generan tras la carga de la página y de sus elementos constituyentes.
Línea 414: Línea 412:
 Como vemos es un simple ''%%<div>%%'' que contiene a un enlace. Dado que todos los elementos del DOM forman una jerarquía, es decir, están contenidos unos en otros, **cuando generamos un evento** en uno de ellos (por ejemplo, pulsar el enlace), **el evento se propaga por toda la jerarquía del DOM** como si fueran las ondas que deja una piedra al tirarla a un estanque: Como vemos es un simple ''%%<div>%%'' que contiene a un enlace. Dado que todos los elementos del DOM forman una jerarquía, es decir, están contenidos unos en otros, **cuando generamos un evento** en uno de ellos (por ejemplo, pulsar el enlace), **el evento se propaga por toda la jerarquía del DOM** como si fueran las ondas que deja una piedra al tirarla a un estanque:
  
-<WRAP center round todo 60%> +{{ :informatica:programacion:cursos:programacion_avanzada_javascript:07-flujo-eventos-dom.png |}}
-Flujo-Eventos +
-</WRAP>+
  
 Si pulsamos en el enlace, al estar contenido dentro del ''div'' es como si pulsásemos también en el ''div'', y a su vez en el cuerpo de la página, el elemento ''<html>'' (''documentElement'') y finalmente en el propio documento que siempre lo contiene a todo. Si pulsamos en el enlace, al estar contenido dentro del ''div'' es como si pulsásemos también en el ''div'', y a su vez en el cuerpo de la página, el elemento ''<html>'' (''documentElement'') y finalmente en el propio documento que siempre lo contiene a todo.
Línea 428: Línea 424:
 Lo cierto es que **es algo más complicado que esto**, y un poco antiintuitivo a la vez. En realidad, cuando se produce un evento en un elemento de la página **se producen tres fases diferenciadas a la hora de gestionar y lanzar el evento**. Estas tres fases se ilustran bien en la figura siguiente: Lo cierto es que **es algo más complicado que esto**, y un poco antiintuitivo a la vez. En realidad, cuando se produce un evento en un elemento de la página **se producen tres fases diferenciadas a la hora de gestionar y lanzar el evento**. Estas tres fases se ilustran bien en la figura siguiente:
  
-<WRAP center round todo 60%> +{{ :informatica:programacion:cursos:programacion_avanzada_javascript:07-fase-eventos-dom.png |}}
-fase-eventos +
-</WRAP>+
  
   * **Fase de captura**: en esta fase se comienza a detectar el evento desde el elemento más alto en la jerarquía (el documento), hacia abajo, hasta llegar justo antes del elemento donde realmente se ha generado el evento. En nuestro símil con el estanque es como si las ondas comenzasen a formarse desde fuera hacia adentro, cerrándose sobre el punto de impacto de la piedra en lugar de al contrario. Bastante poco intuitivo, su origen se remonta a la guerra de los navegadores, como veremos enseguida.   * **Fase de captura**: en esta fase se comienza a detectar el evento desde el elemento más alto en la jerarquía (el documento), hacia abajo, hasta llegar justo antes del elemento donde realmente se ha generado el evento. En nuestro símil con el estanque es como si las ondas comenzasen a formarse desde fuera hacia adentro, cerrándose sobre el punto de impacto de la piedra en lugar de al contrario. Bastante poco intuitivo, su origen se remonta a la guerra de los navegadores, como veremos enseguida.
Línea 716: Línea 710:
 | ''stopPropagation()''  | función    | Si la propiedad ''bubbles'' es ''true'', entonces llamando a este evento se cancela la transmisión a la jerarquía del DOM, es decir, no sigue la fase de captura ni el "burbujeo" de la fase de convergencia y no se detecta en los siguientes nodos del DOM. Por ejemplo, si capturamos el clic en un enlace y en su div contenedor, pero no queremos capturarlo en ambos a la vez, podemos cancelar la propagación en el manejador del enlace y así no se detectará también en el ''div''.  | | ''stopPropagation()''  | función    | Si la propiedad ''bubbles'' es ''true'', entonces llamando a este evento se cancela la transmisión a la jerarquía del DOM, es decir, no sigue la fase de captura ni el "burbujeo" de la fase de convergencia y no se detecta en los siguientes nodos del DOM. Por ejemplo, si capturamos el clic en un enlace y en su div contenedor, pero no queremos capturarlo en ambos a la vez, podemos cancelar la propagación en el manejador del enlace y así no se detectará también en el ''div''.  |
 | ''stop​Immediate​Propagation()''  | function  | Como sabemos, cuando un mismo elemento tiene más de un manejador asociado para el mismo evento, éstos se ejecutan en el orden en el que fueron especificados. Si desde alguno de ellos llamamos a este método, los demás manejadores posteriores que no se hayan ejecutado todavía, no se ejecutarán, pues cancela toda llamada posterior.  | | ''stop​Immediate​Propagation()''  | function  | Como sabemos, cuando un mismo elemento tiene más de un manejador asociado para el mismo evento, éstos se ejecutan en el orden en el que fueron especificados. Si desde alguno de ellos llamamos a este método, los demás manejadores posteriores que no se hayan ejecutado todavía, no se ejecutarán, pues cancela toda llamada posterior.  |
-| ''target''               | elemento  | El elemento de la página que realmente ha producido el evento. En nuestro ejemplo, si pulsamos el enlace pero capturamos en el div, esta propiedad apuntaría al enlace que es el que ha provocado el evento. Es una de las propiedades más importantes de un evento.  |+| ''target''               | elemento  | El elemento de la página que realmente ha producido el evento. En nuestro ejemplo, si pulsamos el enlace pero capturamos en el ''div'', esta propiedad apuntaría al enlace que es el que ha provocado el evento. Es una de las propiedades más importantes de un evento.  |
 | ''type''               | texto       | El tipo de evento que se ha lanzado. Es la misma cadena que usamos para declarar el evento: "click", "load", focus"… Nos sirve para distinguir el tipo de evento cuando varios comparten el mismo manejador.  | | ''type''               | texto       | El tipo de evento que se ha lanzado. Es la misma cadena que usamos para declarar el evento: "click", "load", focus"… Nos sirve para distinguir el tipo de evento cuando varios comparten el mismo manejador.  |
 | ''view''                | objeto     | Es un objeto de tipo ''AbstractView'' definido por la W3C y que es de donde derivan todas las posibles vistas del documento (se refiere a documentos XML genéricos, que pueden visualizarse de modo diferente según su XSLT). En este caso se refiere a la vista actual del documento, lo cual implica la página actual. Es decir, en la práctica con ella lo que obtenemos es una referencia al objeto ''window'' actual. Más información [[http://www.w3.org/TR/DOM-Level-2-Views/views.html|aquí]]. Solo se ofrece en eventos de interfaz de usuario, o sea, de tipo UIEvent.  | | ''view''                | objeto     | Es un objeto de tipo ''AbstractView'' definido por la W3C y que es de donde derivan todas las posibles vistas del documento (se refiere a documentos XML genéricos, que pueden visualizarse de modo diferente según su XSLT). En este caso se refiere a la vista actual del documento, lo cual implica la página actual. Es decir, en la práctica con ella lo que obtenemos es una referencia al objeto ''window'' actual. Más información [[http://www.w3.org/TR/DOM-Level-2-Views/views.html|aquí]]. Solo se ofrece en eventos de interfaz de usuario, o sea, de tipo UIEvent.  |
Línea 888: Línea 882:
 Además, otra página interesante para tener como referencia, aunque ya tiene unos años, es [[http://help.dottoro.com/|Dottoro]]. Esta página nos permite localizar cualquier elemento, bien mediante la búsqueda integrada, bien recurriendo al índice, y nos proporciona información detallada y ejemplos de cada uno, indicando además los atributos y propiedades de cada uno, los eventos que soporta... y además muestra mediante iconos el soporte que ofrece cada navegador para el miembro consultado (si bien no la actualizan a menudo y puede que haya algún dato erróneo, pero aún así merece mucho la pena como primer filtro): Además, otra página interesante para tener como referencia, aunque ya tiene unos años, es [[http://help.dottoro.com/|Dottoro]]. Esta página nos permite localizar cualquier elemento, bien mediante la búsqueda integrada, bien recurriendo al índice, y nos proporciona información detallada y ejemplos de cada uno, indicando además los atributos y propiedades de cada uno, los eventos que soporta... y además muestra mediante iconos el soporte que ofrece cada navegador para el miembro consultado (si bien no la actualizan a menudo y puede que haya algún dato erróneo, pero aún así merece mucho la pena como primer filtro):
  
-<WRAP center round todo 60%> +{{ :informatica:programacion:cursos:programacion_avanzada_javascript:07-dottoro.gif |}}
-Dottoro - Buscar elementos en índice +
-</WRAP>+
  
 Las principales herramientas de escritura de código ofrecen también ayuda contextual mientras escribimos, por lo que nos facilitarán mucho asignar eventos, propiedades y saber qué parámetros utilizar. Aprovecha su potencia. Las principales herramientas de escritura de código ofrecen también ayuda contextual mientras escribimos, por lo que nos facilitarán mucho asignar eventos, propiedades y saber qué parámetros utilizar. Aprovecha su potencia.
Línea 1651: Línea 1643:
 ==== Eventos de formularios y controles de entrada ==== ==== Eventos de formularios y controles de entrada ====
  
-<WRAP center round todo 60%> +{{ :informatica:programacion:cursos:programacion_avanzada_javascript:07-formulario-icono.jpg |}}
-formulario +
-</WRAP>+
  
 Para el caso del formulario ya hemos visto el más importante de ellos, ''submit'', que salta cuando se intenta enviar el formulario al servidor (y que ya hemos visto en algún vídeo práctico). También dispone de otro relacionado llamado ''reset'' que se notifica cuando se inicializa el formulario pulsando sobre un botón de tipo ''reset''. Para el caso del formulario ya hemos visto el más importante de ellos, ''submit'', que salta cuando se intenta enviar el formulario al servidor (y que ya hemos visto en algún vídeo práctico). También dispone de otro relacionado llamado ''reset'' que se notifica cuando se inicializa el formulario pulsando sobre un botón de tipo ''reset''.
Línea 2341: Línea 2331:
 ==== Ejemplo: eventos para detectar la aparición y desaparición de elementos en la página ==== ==== Ejemplo: eventos para detectar la aparición y desaparición de elementos en la página ====
  
-Una cuestión que puede resultar muy útil en una página o aplicación web es la posibilidad de detectar cuándo aparece o desaparece de la pantalla un elemento determinado debido a las acciones del usuario, tanto total como parcialmente.+Una cuestión que puede resultar muy útil en una página o aplicación web es la posibilidad de detectar **cuándo aparece o desaparece de la pantalla un elemento determinado debido a las acciones del usuario**, tanto total como parcialmente.
  
 Por ejemplo, si desaparece una pieza de información importante porque el usuario hace scroll moviendo los contenidos podemos sacar una nota resumen, recordatorio o acceso directo para poder verla de nuevo, y ocultarlo otra vez cuando vuelva a aparecer. Cosas por el estilo. Por ejemplo, si desaparece una pieza de información importante porque el usuario hace scroll moviendo los contenidos podemos sacar una nota resumen, recordatorio o acceso directo para poder verla de nuevo, y ocultarlo otra vez cuando vuelva a aparecer. Cosas por el estilo.
  
-Para conseguir algo así nos vendría muy bien disponer de eventos para los elementos que nos informasen de cuándo aparecen o desaparecen de la parte visible de la página. Nos suscribiríamos a este evento de la manera convencional y recibiríamos automáticamente notificaciones si el elemento aparece o desaparece.+Para conseguir algo así nos vendría muy bien disponer de eventos para los elementos que **nos informasen de cuándo aparecen o desaparecen de la parte visible de la página**. Nos suscribiríamos a este evento de la manera convencional y recibiríamos automáticamente notificaciones si el elemento aparece o desaparece.
  
-El problema es que no existe ningún evento como este en HTML/JavaScript. No nos queda más remedio que crear alguno propio para poder disponer de una funcionalidad similar a esta.+El problema es que **no existe ningún evento como este** en HTML/JavaScript. No nos queda más remedio que crear alguno propio para poder disponer de una funcionalidad similar a esta.
  
 En esta lección y un próximo vídeo práctico vamos a aprovechar lo que conocemos de creación de eventos para desarrollar desde cero la funcionalidad necesaria para conseguir tener varios eventos relacionados con la visibilidad, listos para ser utilizados en cualquier página. Nos servirá de práctica de varios de los conceptos aprendidos a lo largo del curso. En esta lección y un próximo vídeo práctico vamos a aprovechar lo que conocemos de creación de eventos para desarrollar desde cero la funcionalidad necesaria para conseguir tener varios eventos relacionados con la visibilidad, listos para ser utilizados en cualquier página. Nos servirá de práctica de varios de los conceptos aprendidos a lo largo del curso.
Línea 2353: Línea 2343:
 En concreto vamos a crear 4 eventos para cualquier elemento de una página relacionados con su visibilidad, a saber: En concreto vamos a crear 4 eventos para cualquier elemento de una página relacionados con su visibilidad, a saber:
  
-    show: que se lanza cuando un elemento aparece por completo (no solo una parte) en el viewport de la página. Si el elemento está ya visible por completo inicialmente no se notifica el evento. Solo se notifica cuando cambia el estado de visibilidad, es decir, no está visible por completo y pasa a estarlo. +  * ''show'': que se lanza cuando un elemento aparece **por completo** (no solo una parte) en el viewport de la página. Si el elemento está ya visible por completo inicialmente no se notifica el evento. Solo se notifica **cuando cambia el estado de visibilidad**, es decir, no está visible por completo y pasa a estarlo. 
-    hide: se lanza cuando el elemento pasa a estar completamente fuera del área visible. +  * ''hide'': se lanza cuando el elemento pasa a estar **completamente fuera** del área visible. 
-    showpart: se lanza cuando el elemento estaba oculto por completo y cualquier parte del mismo entra en el área visible, es decir, se muestra parcialmente tras haber estado oculto. +  * ''showpart'': se lanza cuando el elemento estaba oculto por completo y cualquier parte del mismo entra en el área visible, es decir, se muestra parcialmente tras haber estado oculto. 
-    hidepart: se lanza cuando el elemento estaba completamente visible y cualquier parte del mismo sale de la zona visible, es decir, cuando se oculta, aunque sea una fracción pequeña del mismo.+  * ''hidepart'': se lanza cuando el elemento estaba completamente visible y cualquier parte del mismo sale de la zona visible, es decir, cuando se oculta, aunque sea una fracción pequeña del mismo.
  
-Los eventos añaden una propiedad visible al objeto estándar details del objeto event del manejador del evento, de modo que puedas usar el mismo manejador para gestionar varios de ellos (por ejemplo, el mismo para show y hidepart que tenderán a ir relacionados).+Los eventos añaden una propiedad ''visible'' al objeto estándar ''details'' del objeto ''event'' del manejador del evento, de modo que puedas usar el mismo manejador para gestionar varios de ellos (por ejemplo, el mismo para ''show'' y ''hidepart'' que tenderán a ir relacionados).
  
 En esta lección vamos a ver algunos detalles generales de la "fontanería" necesaria para la implementación y luego en el vídeo asociado veremos cuestiones específicas sobre cómo generar y gestionar esos eventos, además de cómo usar la biblioteca. En esta lección vamos a ver algunos detalles generales de la "fontanería" necesaria para la implementación y luego en el vídeo asociado veremos cuestiones específicas sobre cómo generar y gestionar esos eventos, además de cómo usar la biblioteca.
  
-    Esta biblioteca de eventos la he creado como un proyecto Open Source que puedes encontrar en GitHub, no solo como un ejemplo del curso. Por ello, su documentación en Github al igual que sus comentarios están en inglés. Lo he incluido en los ejemplos del ZIP de este módulo por lo que si lo prefieres puedes verlo y usarlo directamente desde ahí, aunque en GitHub también hay una versión minimizada que ocupa mucho menos, pero a efectos de aprendizaje debes usar la que tiene todos los comentarios.+<WRAP center round info 60%> 
 +Esta biblioteca de eventos la he creado como un proyecto Open Source que puedes [[https://github.com/jmalarcon/visibilityEvents.js|encontrar en GitHub]], no solo como un ejemplo del curso. Por ello, su documentación en Github al igual que sus comentarios están en inglés. Lo he incluido en los ejemplos del ZIP de este módulo por lo que si lo prefieres puedes verlo y usarlo directamente desde ahí, aunque en GitHub también hay una versión minimizada que ocupa mucho menos, pero a efectos de aprendizaje debes usar la que tiene todos los comentarios. 
 +</WRAP>
  
 La funcionalidad la vamos a dividir en varios bloques independientes que, en conjunto, nos permitirán obtener lo que necesitamos. La funcionalidad la vamos a dividir en varios bloques independientes que, en conjunto, nos permitirán obtener lo que necesitamos.
-1.- Detectar la ubicación relativa de cualquier elemento de la página 
  
-En HTML la forma de detectar la ubicación real de un elemento en la página es utilizar el método getBoundingClientRect() del que disponen todos los elementos del DOM.+=== 1.- Detectar la ubicación relativa de cualquier elemento de la página ===
  
-Este método no toma ningún parámetro y devuelve un objeto especial de tipo DOMRect que, como se puede deducir de su nombre, contiene información sobre los bordes que definen el área del elemento en cuestión. En concreto dispone de 4 propiedades que marcan la posición de cada uno de los bordes del modelo de caja del elemento respecto al viewport actual: left, top, right y bottom:+En HTML la forma de detectar la ubicación real de un elemento en la página es utilizar el método ''getBoundingClientRect()'' del que disponen todos los elementos del DOM.
  
 +Este método no toma ningún parámetro y devuelve un objeto especial de tipo ''DOMRect'' que, como se puede deducir de su nombre, contiene información sobre los bordes que definen el área del elemento en cuestión. En concreto dispone de 4 propiedades que marcan la posición de cada uno de los bordes del modelo de caja del elemento **respecto al viewport actual**: ''left'', ''top'', ''right'' y ''bottom'':
 +
 +<code javascript>
 var caja = elto.getBoundingClientRect(); var caja = elto.getBoundingClientRect();
 console.log(caja.top); console.log(caja.top);
 +</code>
  
 En este caso se mostraría en la consola la posición del borde superior del elemento respecto a la parte de arriba del viewport. En este caso se mostraría en la consola la posición del borde superior del elemento respecto a la parte de arriba del viewport.
-2.- Determinar si el elemento está visible en la página o no 
  
-Como las coordenadas anteriores son relativas al área visible (o viewport) de la página, esto quiere decir que varían en cada momento en función de donde esté colocado el elemento. Si hacemos scroll irán cambiando, al igual que con otras acciones posibles en la página por parte del usuario. Si el elemento desaparece por la parte superior de la página, la propiedad top devuelta por esta función empezará a ser negativa, por ejemplo.+=== 2.- Determinar si el elemento está visible en la página o no ===
  
-Podríamos determinar fácilmente si el elemento está o no por completo dentro de la página en un momento dado definiendo una función como esta:+Como las coordenadas anteriores son relativas al área visible (o viewport) de la página, esto quiere decir que varían en cada momento en función de donde esté colocado el elemento. Si hacemos scroll irán cambiando, al igual que con otras acciones posibles en la página por parte del usuario. Si el elemento desaparece por la parte superior de la página, la propiedad ''top'' devuelta por esta función empezará a ser negativa, por ejemplo.
  
 +Podríamos determinar fácilmente **si el elemento está o no por completo dentro de la página** en un momento dado definiendo una función como esta:
 +
 +<code javascript>
 function isElementTotallyVisible(elt) { function isElementTotallyVisible(elt) {
     var viewportWidth = window.innerWidth || document.documentElement.clientWidth;     var viewportWidth = window.innerWidth || document.documentElement.clientWidth;
Línea 2391: Línea 2388:
              box.right <= viewportWidth );              box.right <= viewportWidth );
 } }
 +</code>
  
-Lo que hacemos es, antes de nada, determinar el ancho y el alto del área visible actual, para lo cual usamos la propiedad innerWidth e innerHeight de la ventana.+Lo que hacemos es, antes de nada, **determinar el ancho y el alto del área visible** actual, para lo cual usamos la propiedad ''innerWidth'' e ''innerHeight'' de la ventana.
  
-    Nota: Se incluye también el clientWidht y clientHeight del documento en caso de que no esté soportado lo anterior para dar soporte a versiones antiguas de Internet Explorer (anteriores a la 9). Si no te interesa puedes obviarlo y dejar solo las innerX. getBoundingClientRect() está soportado incluso en versiones muy antiguas de IE porque es un invento inicial de Microsoft que luego incorporaron los demás navegadores.+<WRAP center round info 60%> 
 +Nota: Se incluye también el ''clientWidht'' y ''clientHeight'' del documento en caso de que no esté soportado lo anterior para dar soporte a versiones antiguas de Internet Explorer (anteriores a la 9). Si no te interesa puedes obviarlo y dejar solo las ''innerX''. ''getBoundingClientRect()'' está soportado incluso en versiones muy antiguas de IE porque es un invento inicial de Microsoft que luego incorporaron los demás navegadores. 
 +</WRAP>
  
-A continuación se obtienen los límites de la caja del elemento, y se comparan con los bordes del viewport para ver si el elemento está totalmente contenido dentro de éste o no. Devuelve true en caso afirmativo y false en caso de que se salga, aunque sea un poco, por cualquier lado.+A continuación se obtienen los límites de la caja del elemento, y se comparan con los bordes del viewport para ver si el elemento está totalmente contenido dentro de éste o no. Devuelve ''true'' en caso afirmativo y ''false'' en caso de que se salga, aunque sea un poco, por cualquier lado.
  
-Es un poco más complicado determinar si el elemento está contenido parcialmente en la página o no. A lo mejor nos interesa determinar no solo cuándo cualquier parte del elemento se sale de la vista (que sería lo anterior) sino cuándo se sale de la vista por completo. En este caso sería útil averiguar si el elemento está dentro del área visible, aunque sea parcialmente. Es decir, con que se vea aunque sea un fragmento minúsculo del elemento, poder saberlo.+Es un poco más complicado determinar **si el elemento está contenido parcialmente en la página o no**. A lo mejor nos interesa determinar no solo cuándo cualquier parte del elemento se sale de la vista (que sería lo anterior) sino cuándo **se sale de la vista por completo**. En este caso sería útil averiguar si el elemento está dentro del área visible, aunque sea parcialmente. Es decir, con que se vea aunque sea un fragmento minúsculo del elemento, poder saberlo.
  
 Tendríamos que crear una versión alternativa de la función anterior cambiando la comprobación final, que ahora sería como esta: Tendríamos que crear una versión alternativa de la función anterior cambiando la comprobación final, que ahora sería como esta:
  
 +<code javascript>
 function isElementPartiallyVisible(elt) { function isElementPartiallyVisible(elt) {
     var viewportWidth = window.innerWidth || document.documentElement.clientWidth;     var viewportWidth = window.innerWidth || document.documentElement.clientWidth;
Línea 2413: Línea 2414:
     return (insideBoxH && insideBoxV);     return (insideBoxH && insideBoxV);
 } }
 +</code>
  
-En este caso las condiciones son más complicadas, pero tampoco nada fuera de lo común. Básicamente vemos, por un lado, si está dentro del área visible horizontalmente, y por otro si está dentro (aunque sea por poco) en el eje vertical. Se considera que está dentro si hay algo del elemento dentro del viewport tanto en horizontal como en vertical. Esto es así ya que no llega solo con que esté en uno de los ejes. Por ejemplo, si está en el eje vertical, pero no en el horizontal significa que está a la altura correcta pero con un scroll horizontal que lo ha sacado de la parte visible. Puede parecer lioso, por eso lo he puesto en la parte escrita del ejemplo, pero es fácil de ver si haces unas pruebas. +En este caso las condiciones son más complicadas, pero tampoco nada fuera de lo común. Básicamente vemos, por un lado, si está dentro del área visible horizontalmente, y por otro si está dentro (aunque sea por poco) en el eje vertical. **Se considera que está dentro si hay algo del elemento dentro del viewport tanto en horizontal como en vertical**. Esto es así ya que no llega solo con que esté en uno de los ejes. Por ejemplo, si está en el eje vertical, pero no en el horizontal significa que está a la altura correcta pero con un scroll horizontal que lo ha sacado de la parte visible. Puede parecer lioso, por eso lo he puesto en la parte escrita del ejemplo, pero es fácil de ver si haces unas pruebas.
-3.- Detectar automáticamente si el elemento aparece o desaparece del área visible+
  
-    IMPORTANTE: en este ejemplo utilizo eventos del navegador de forma que practicaquemos también su uso, pero no sería la manera más adecuada de hacer esto. Existe una API específica del navegador, la Intersection Observer API, que sirve para hacer esto de forma eficiente.+=== 3.- Detectar automáticamente si el elemento aparece o desaparece del área visible === 
 + 
 +<WRAP center round important 60%> 
 +    IMPORTANTE: en este ejemplo utilizo eventos del navegador de forma que practicaquemos también su uso, pero no sería la manera más adecuada de hacer esto. Existe una API específica del navegador, la [[https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API|Intersection Observer API]], que sirve para hacer esto de forma eficiente. 
 +</WRAP>
  
 Ahora que ya sabemos determinar si el elemento está total o parcialmente dentro del área visible, lo primero es determinar por qué motivos es posible que un elemento se desplace y, por lo tanto, pueda aparecer o desaparecer de dentro del área visible de la página. Ahora que ya sabemos determinar si el elemento está total o parcialmente dentro del área visible, lo primero es determinar por qué motivos es posible que un elemento se desplace y, por lo tanto, pueda aparecer o desaparecer de dentro del área visible de la página.
Línea 2423: Línea 2428:
 Existen varias causas para la modificación de la posición de un elemento y por lo tanto para su posible cambio de visibilidad: Existen varias causas para la modificación de la posición de un elemento y por lo tanto para su posible cambio de visibilidad:
  
-    Scroll de la página. Este es el más evidente. Lo podemos detectar gracias al evento scroll del mismo nombre de la ventana. +  * **Scroll de la página**. Este es el más evidente. Lo podemos detectar gracias al **evento ''scroll''** del mismo nombre de la ventana. 
-    Cambio de tamaño: si la ventana cambia de tamaño, la página se redibuja ("refluyen" los elementos) y la posición de todos ellos cambia. Esto se puede detectar con el evento resize de la ventana. +  * **Cambio de tamaño**: si la ventana cambia de tamaño, la página se redibuja ("refluyen" los elementos) y la posición de todos ellos cambia. Esto se puede detectar con el **evento ''resize''** de la ventana. 
-    Carga de la página: la carga de la página se produce realmente en dos fases. Primero se carga su código y se interpreta (el DOM estaría listo) y luego se acaban de cargar los elementos externos, como por ejemplo las imágenes. Si alguna de estas imágenes no tiene especificadas sus dimensiones, no ocupará su verdadero sitio hasta que acabe de cargar, desplazando otros elementos al fijarse su tamaño final. Así que, para evitar este posible efecto, lo detectaríamos en el evento load de la página y no en DOMContentLoaded.+  * **Carga de la página**: la carga de la página se produce realmente en dos fases. Primero se carga su código y se interpreta (el DOM estaría listo) y luego se acaban de cargar los elementos externos, como por ejemplo las imágenes. Si alguna de estas imágenes no tiene especificadas sus dimensiones, no ocupará su verdadero sitio hasta que acabe de cargar, desplazando otros elementos al fijarse su tamaño final. Así que, para evitar este posible efecto, lo detectaríamos en el **evento ''load''** de la página y no en ''DOMContentLoaded''.
  
 Hay algún caso más que veremos un poco después, pero con estos 3 sería suficiente para la mayor parte de las necesidades, y serán los que utilicemos. Hay algún caso más que veremos un poco después, pero con estos 3 sería suficiente para la mayor parte de las necesidades, y serán los que utilicemos.
-4.- Determinar si el elemento ha aparecido o desaparecido del área visible+ 
 +=== 4.- Determinar si el elemento ha aparecido o desaparecido del área visible ===
  
 Vamos a definir una función que nos va a permitir determinar si un elemento está parcialmente en el área visible y poder ejecutar una función en dicho caso: Vamos a definir una función que nos va a permitir determinar si un elemento está parcialmente en el área visible y poder ejecutar una función en dicho caso:
  
 +<code javascript>
 function inViewportPartially(elt, handler) { function inViewportPartially(elt, handler) {
     var prevVisibility = isElementPartiallyVisible(elt);     var prevVisibility = isElementPartiallyVisible(elt);
Línea 2450: Línea 2457:
     return detectPossibleChange;    //Para poder luego retirar el manejador con removeEventLister     return detectPossibleChange;    //Para poder luego retirar el manejador con removeEventLister
 } }
 +</code>
  
 Al llevar "parcial" en el nombre quiere decir que con que esté parcialmente dentro de la página, se considerará que está dentro del área visible. Es decir, que para que nos diga que el elemento NO está visible, deberá desaparecer totalmente, y para decirnos que está visible llega con que se vea aunque solo sea un píxel del mismo. Al llevar "parcial" en el nombre quiere decir que con que esté parcialmente dentro de la página, se considerará que está dentro del área visible. Es decir, que para que nos diga que el elemento NO está visible, deberá desaparecer totalmente, y para decirnos que está visible llega con que se vea aunque solo sea un píxel del mismo.
Línea 2459: Línea 2467:
 Lo primero que hacemos es establecer el estado inicial de la visibilidad del elemento, es decir, si cuando se llama a esta función el elemento está visible o no, que será nuestro estado de base para el mismo. Se consigue con la función vista en el paso 2, y en este caso consideramos elementos parcialmente visibles. Lo primero que hacemos es establecer el estado inicial de la visibilidad del elemento, es decir, si cuando se llama a esta función el elemento está visible o no, que será nuestro estado de base para el mismo. Se consigue con la función vista en el paso 2, y en este caso consideramos elementos parcialmente visibles.
  
-Definimos también una función dentro de esta función que será la que se llamará ante cualquiera de los 3 eventos que hemos considerado que cambian el estado de visibilidad del elemento (load, resize y scroll). Esta función (detectarPosibleCambio()) lo único que hace es comprobar el estado actual de visibilidad del elemento y compararlo con el estado de base. Si ha cambiado, anota el nuevo estado base (para la siguiente comparación, cuando proceda), y llama al manejador que hemos especificado (handler) pasándole como parámetros un booleano que indica si el elemento está en el área visible o no, y una referencia al elemento cuyo estado ha cambiado (para poder usar el mismo manejador para varios elementos).+Definimos también una función dentro de esta función que será la que se llamará ante cualquiera de los 3 eventos que hemos considerado que cambian el estado de visibilidad del elemento (''load'', ''resize'' y ''scroll''). Esta función (''detectarPosibleCambio()'') lo único que hace es comprobar el estado actual de visibilidad del elemento y compararlo con el estado de base. Si ha cambiado, anota el nuevo estado base (para la siguiente comparación, cuando proceda), y llama al manejador que hemos especificado (''handler'') pasándole como parámetros un booleano que indica si el elemento está en el área visible o no, y una referencia al elemento cuyo estado ha cambiado (para poder usar el mismo manejador para varios elementos).
  
-    Nota: Este método interno tiene acceso a los parámetros de la función (elemento y manejador) y al estado de base gracias a la clausura a la que pertenece, al ser una función interna a la otra.+<WRAP center round info 60%> 
 +Nota: Este método interno tiene acceso a los parámetros de la función (elemento y manejador) y al estado de base gracias a la clausura a la que pertenece, al ser una función interna a la otra. 
 +</WRAP>
  
 Finalmente, lo único que se hace es definir estos tres eventos que habíamos identificado para que llamen a esta función interna ante cualquier cambio que se produzca. Finalmente, lo único que se hace es definir estos tres eventos que habíamos identificado para que llamen a esta función interna ante cualquier cambio que se produzca.
  
-Existe otra función gemela de esta, inViewportTotally(), que es igual a esta pero comprueba si el elemento está dentro del área visible en su totalidad, y no solo parcialmente. En este caso, en cuanto el elemento desaparece de la vista, aunque sea un poco, se notifica que ha desaparecido (pero todavía se verá parcialmente), y cuando vuelva a estar completamente dentro del área visible se notificará que ha vuelto a aparecer. Es mucho más estricto que el evento anterior al tener que estar todo dentro de la página.+Existe otra función gemela de esta, ''inViewportTotally()'', que es igual a esta pero comprueba si el elemento está dentro del área visible en su totalidad, y no solo parcialmente. En este caso, en cuanto el elemento desaparece de la vista, aunque sea un poco, se notifica que ha desaparecido (pero todavía se verá parcialmente), y cuando vuelva a estar completamente dentro del área visible se notificará que ha vuelto a aparecer. Es mucho más estricto que el evento anterior al tener que estar todo dentro de la página.
  
 Bien, esto es el código de "fontanería" que no tiene que ver con la definición de eventos propios, sino con las cosas fundamentales que necesitamos para detectar los cambios de visibilidad. Ahora, en el vídeo práctico, veremos cómo implementar los 4 eventos propios que nos interesan, basándonos en todo esto. Asegúrate de haber entendido bien todo lo anterior antes de continuar. Bien, esto es el código de "fontanería" que no tiene que ver con la definición de eventos propios, sino con las cosas fundamentales que necesitamos para detectar los cambios de visibilidad. Ahora, en el vídeo práctico, veremos cómo implementar los 4 eventos propios que nos interesan, basándonos en todo esto. Asegúrate de haber entendido bien todo lo anterior antes de continuar.
-Anexo: Otras formas de cambiar la disposición de la página 
  
-Además de los 3 eventos que hemos considerado para detectar cambios, existen otras maneras menos frecuentes de que se modifique la posición de los elementos de la página. Concretamente 3 casos que no vamos a utilizar en la biblioteca por no mermar el rendimiento de la página:+==== Anexo: Otras formas de cambiar la disposición de la página ====
  
-    La modificación mediante código del árbol de elementos de la página (DOM): si metemos o quitamos elementos, éstos podrían provocar el reflujo de la misma y por lo tanto cambiar la posición de un elemento que nos interese. Si tuviésemos interés en detectar este hecho podríamos usar el evento DOMSubtreeModified() o sus relacionados (DOMNodeInserted() y DOMNodeRemoved()). Lo consideraremos un caso poco frecuente y no lo incluiremos en la biblioteca. +Además de los 3 eventos que hemos considerado para detectar cambios, existen otras maneras menos frecuentes de que se modifique la posición de los elementos de la página. Concretamente **3 casos que no vamos a utilizar** en la biblioteca por no mermar el rendimiento de la página: 
-    Cambio dinámico de la propiedad display de algún elemento: si cambiamos mediante JavaScript el modo de visualización de algún elemento de la página (por ejemplo para ocultarlo y que no ocupe espacio en la página, o hacer que se comporte como elemento de bloque cuando antes era inline). No existe ningún evento que nos informe de un cambio como este, por lo que no quedaría más remedio que usar un temporizador y verificar dentro de éste la posición de los elementos que nos interesen. Muy poco eficiente y malo para el rendimiento, y además si lo ocultamos así también sabremos cuando, por lo que no nos haría falta el evento tampoco. Lo dejamos fuera. + 
-    Zoom de la página: si el usuario hace zoom en la página, el tamaño de los elementos cambia y por lo tanto cambian de posición. Esto es más común en navegadores móviles, donde se puede hacer zoom con los dedos (si se le permite), pero en los navegadores de escritorio también ocurre. No hay manera de detectar esto con garantías en un navegador. Por lo tanto deberíamos recurrir también a un temporizador que cada medio segundo (o el periodo que nos sirva para nuestro caso) usara las funciones descritas en el paso 2 para ver si el elemento está en el viewport o no. Poco recomendable para el beneficio que obtenemos.+  * **La modificación mediante código del árbol de elementos de la página (DOM)**: si metemos o quitamos elementos, éstos podrían provocar el reflujo de la misma y por lo tanto cambiar la posición de un elemento que nos interese. Si tuviésemos interés en detectar este hecho podríamos usar el evento ''DOMSubtreeModified()'' o sus relacionados (''DOMNodeInserted()'' y ''DOMNodeRemoved()''). Lo consideraremos un caso poco frecuente y no lo incluiremos en la biblioteca. 
 +  * **Cambio dinámico de la propiedad ''display'' de algún elemento**: si cambiamos mediante JavaScript el modo de visualización de algún elemento de la página (por ejemplo para ocultarlo y que no ocupe espacio en la página, o hacer que se comporte como elemento de bloque cuando antes era inline). No existe ningún evento que nos informe de un cambio como este, por lo que no quedaría más remedio que usar un temporizador y verificar dentro de éste la posición de los elementos que nos interesen. Muy poco eficiente y malo para el rendimiento, y además si lo ocultamos así también sabremos cuando, por lo que no nos haría falta el evento tampoco. Lo dejamos fuera. 
 +  * **Zoom de la página**: si el usuario hace zoom en la página, el tamaño de los elementos cambia y por lo tanto cambian de posición. Esto es más común en navegadores móviles, donde se puede hacer zoom con los dedos (si se le permite), pero en los navegadores de escritorio también ocurre. [[https://github.com/tombigel/detect-zoom|No hay manera de detectar esto con garantías en un navegador]]. Por lo tanto deberíamos recurrir también a un temporizador que cada medio segundo (o el periodo que nos sirva para nuestro caso) usara las funciones descritas en el paso 2 para ver si el elemento está en el viewport o no. Poco recomendable para el beneficio que obtenemos.
  
 Aunque nuestro código no detecta estos tres casos marginales, en cuanto el usuario mueva mínimamente la página el evento de scroll detectará la posición y nos notificará de cualquier posible cambio que hubiese usando el evento personalizado pertinente, así que en la práctica no compensa preocuparse por ellos salvo quizá en algún caso muy particular. Aunque nuestro código no detecta estos tres casos marginales, en cuanto el usuario mueva mínimamente la página el evento de scroll detectará la posición y nos notificará de cualquier posible cambio que hubiese usando el evento personalizado pertinente, así que en la práctica no compensa preocuparse por ellos salvo quizá en algún caso muy particular.
 +
 +==== Funcionamiento práctico ====
 +
 +==== DEMO: Explicación del código ====
 ===== Prácticas propuestas para el módulo ===== ===== Prácticas propuestas para el módulo =====
  
 +ste módulo se ha centrado en las diversas maneras que tenemos desde JavaScript para gestionar interacciones de los usuarios con el navegador. Esto nos permitirá crear todo tipo de aplicaciones prácticas basadas en lo que hemos aprendido antes sobre el lenguaje. En definitiva, llevar lo aprendido más cerca de la práctica real. Aunque los ejemplos que hemos realizado son intencionadamente sencillos para no desenfocarnos de lo que se pretendía enseñar, ahora tienes prácticamente todas las herramientas que necesitas para crear cualquier aplicación web que puedas necesitar. Es cuestión de juntar las piezas.
 +
 +Para reforzar los conceptos de este módulo y practicar un poco más te propongo los siguientes ejercicios:
 +
 +  * En el ejemplo de la etiqueta que persigue al ratón mostrando sus coordenadas, haz que cuando esté cerca del borde derecho de la página, lo suficiente como para que tape todo o parte de la etiqueta, ésta se muestre hacia el otro lado, de modo que siempre quede dentro del área visible de la página y no salgan barras de scroll.
 +  * Añade a una página cualquiera (que tenga al menos varios elementos ''div'', ''input'' de tipo ''text'' y párrafos de texto) la capacidad de detectar la pulsación de determinadas teclas que actuarán como atajos o teclas rápidas para un hipotético programa que tienes en esta página. Por ejemplo, que se detecte la pulsación de la tecla F1 y que esto haga que se muestre un ''div'' con ayuda, o la combinación de teclas <kbd>CTRL</kbd> + <kbd>T</kbd> para hacer cualquier otra cosa (en nuestro ejemplo, simplemente mostrará un ''alert''). Debes asegurarte de un par de cosas:
 +    * Que las teclas rápidas se detecten pulsándolas cuando el foco esté en cualquier parte de la página. 
 +    * Que si el foco está en algún elemento que acepte entrada de texto (un ''input'' de tipo ''text'', por ejemplo) que no tengan efecto dichas teclas.
 +
 +Una pregunta importante: ¿Funcionan todas las combinaciones? Por ejemplo, realmente eres capaz de detectar y responder a <kbd>CTRL</kbd> + <kbd>T</kbd> siempre. Prueba con <kbd>CTRL</kbd> + <kbd>Q</kbd> a ver si pasa lo mismo...
 +
 +  * En el ejemplo de control básico de un marcianito que hemos desarrollado en este módulo, hemos visto que hay un pequeño problema: la imposibilidad de detectar la pulsación de dos teclas a la vez. El efecto de esto es que si queremos que el marcianito se mueva en diagonal, lo conseguiremos pero veremos que lo hace "a saltos" como si pulsásemos las dos flechas (por ejemplo abajo y a la izquierda) de manera alternativa, y no a la vez.
 +
 +Además, si esto fuese un juego real existiría otro problema más sutil pero importante: los movimientos no estarían sincronizados con el resto de movimientos de otros elementos del juego. Normalmente los juegos tienen un bucle de ejecución y redibujan todos los elementos del mismo a la vez a intervalos regulares (por ejemplo 40 veces por segundo). Así, cada 25 milisegundos se pinta cada marcianito, asteroide y demás elementos móviles autónomos reflejando su posición. Para los elementos que controla el usuario, si usamos los eventos del teclado, se moverían en un bucle diferente del resto del juego, y no necesariamente coincidente con los intervalos de refresco de los demás elementos. De entrada puede que no lo notásemos, pero generaría problemas y parpadeos indeseados.
 +
 +Entonces, ¿cómo se solucionan estos problemas si quisiésemos crear un juego con HTML y JavaScript?
 +
 +La solución consiste en detectar las pulsaciones del teclado, pero **en lugar de procesarlas lo que hacemos es anotarlas en algún otro lugar (en un buffer)**. Es decir, en algún objeto auxiliar se van anotando cada una de las pulsaciones relevantes del teclado que hace el usuario (evento ''keydown''), así como cuando deja de pulsar las teclas (''keyup''), pero no hacemos nada más que anotarlas. Es luego, en el bucle de redibujado de los elementos, en donde comprobamos ese buffer de pulsaciones y actuamos en consecuencia moviendo los objetos afectados. Con esto se consiguen procesar varias teclas a la vez (o tener la sensación de ello, más bien) y se consiguen movimientos más fluidos.
 +
 +Otra opción, incluso mejor, es anotar la posición de cada marcianito, modificándola en los eventos que se van produciendo, pero sin dibujarla, es decir, sin cambiar la posición real de los elementos móviles. Luego en el bucle de dibujado (un ''setInterval'') es cuando realmente se dibujan los objetos, pero no en el momento mismo de detectar la pulsación de la tecla.
 +
 +Como ejercicio especial (no lo hagas si no te ves con fuerzas) te propongo cambiar el código de la página del marcianito por completo y hacerlo siguiendo la técnica que te acabo de explicar. Además deberías crear una clase para almacenar la información del marcianito y así no tener que almacenar su posición (y otros datos que tuviese) en una estructura aparte para poder redibujarla.
 +
 +<WRAP center round tip 60%>
 +Nota: De todos modos si estás pensando en hacer un juego en JavaScript es mejor usar alguna biblioteca especializada que ya nos da estas cosas y muchas otras ya hechas (aunque conviene conocer sus fundamentos). Hay infinidad de ellas en el mercado, casi todas gratuitas y Open Source. Por ejemplo [[http://craftyjs.com/|Crafty]], [[http://darlingjs.github.io/|DarlingJS]], [[http://www.limejs.com/|LimeJS]] o [[http://impactjs.com/|ImpactJS]]. En cualquier caso, ten en cuenta que la creación de juegos es un mundo en sí mismo y necesitarás aprender muchas técnicas específicas más allá de dominar los fundamentos de JavaScript.
 +</WRAP>
 +
 +En los siguientes módulos del curso vamos a estudiar algunas cuestiones adicionales útiles, pero con lo explicado hasta ahora ya conoces todo lo necesario para poder programar con éxito con JavaScript en cualquier entorno, pero especialmente aplicaciones web de lado cliente basadas en navegadores. Solo es cuestión de práctica y plantearse cosas nuevas con las que experimentar y aprender. En la programación para navegadores es muy importante tener a mano una buena documentación para consulta (como [[http://help.dottoro.com/ljsdaoxj.php|Dottoro Web Reference]], la [[https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference|Mozilla Developer Network]] o la [[https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference|documentación de Microsoft]] al respecto), probar bien los desarrollos en todos los navegadores posibles y, sobre todo, adquirir experiencia poco a poco haciendo pequeños desarrollos y subiendo paulatinamente la dificultad.
 +
 +¡Ah! y muy importante: a quien tiene un martillo todo le parecen clavos, así que trata de acordarte de que muchas de las cosas que se te planteen quizá las puedas conseguir sin necesidad de escribir código (solo con CSS, por ejemplo). Y lo mismo te digo si vienes de jQuery: multitud de cosas sencillas que se tienden a hacer con jQuery por inercia, es posible hacerlas directamente en JavaScript con el mismo esfuerzo, consiguiendo páginas más ligeras y rápidas. ¡No te olvides!
 +
 +===== Recursos =====
 +
 +  * [[https://www.codeproject.com/Articles/878436/Lets-Write-Unobtrusive-JavaScript|Let's Write Unobtrusive JavaScript]]
informatica/programacion/cursos/programacion_avanzada_javascript/eventos_navegadores.1728653379.txt.gz · Última modificación: por tempwin