Diferencias

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

--- informatica:programacion:cursos:programacion_avanzada_javascript:eventos_navegadores [2024/10/14 11:57] – [El objeto event en el DOM] tempwin
+++ informatica: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.
-<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.
@@ 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:
-<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.
@@ 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:
-<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.
@@ 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):
-<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.
@@ Línea 1651: / Línea 1643: @@
 ==== 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''.
@@ Línea 2534: / Línea 2524: @@
 ¡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]]