MANEJADORES DE EVENTOS

@madesweb

Como comentamos anteriormente, el código Javascript es normalmente ejecutado luego de que el usuario realiza alguna acción. 

Estas acciones y otros eventos son procesados por manejadores de eventos y funciones Javascript asociadas con ellos.

Existen tres diferentes formas de registrar un evento para un elemento HTML: podemos agregar un nuevo atributo al elemento, registrar un manejador de evento como una propiedad del elemento o usar el nuevo método estándar addEventListener().

 📌Conceptos básicos: En JavaScript las acciones de los usuarios son llamadas eventos. Cuando el usuario realiza una acción, como un clic del ratón o la presión de una tecla, un evento específico para cada acción y cada elemento es disparado.

Además de los eventos producidos por los usuarios existen también otros eventos disparados por el sistema (por ejemplo, el evento load que se dispara cuando el documento es completamente cargado). 

Estos eventos son manejados por códigos o funciones. El código que responde al evento es llamado manejador. Cuando registramos un manejador lo que hacemos es definir cómo nuestra aplicación responderá a un evento en particular. Luego de la estandarización del método addEventListener(), este procedimiento es usualmente llamado “escuchar al evento”, y lo que hacemos para preparar el código que responderá a ese evento es “agregar una escucha” a un elemento en particular.

📓MANEJADORES DE EVENTOS EN LINEA

Ya hemos utilizado esta técnica en el articulo de INTRODUCION A JAVASCRIPT, incluyendo el atributo onclick en el elemento <p> puedes revisar el articulo para poder estudiar este evento.

Se trata simplemente de utilizar los atributos provistos por HTML para registrar eventos para un elemento en particular. Esta es una técnica en desuso pero aun extremadamente útil y práctica en algunas circunstancias, especialmente cuando necesitamos hacer modificaciones rápidas para testeo.

 📓MANEJADORES DE EVENTOS COMO PROPIEDADES 

Para evitar las complicaciones de la técnica en línea (inline), debemos registrar los eventos desde el código Javascript. 

Usando selectores Javascript podemos referenciar el elemento HTML y asignarle el manejador de eventos que queremos como si fuese una propiedad.

El manejador de eventos onload fue registrado para la ventana usando la construcción window.onload, y el manejador de eventos onclick fue registrado para el primer elemento <p> encontrado en el documento con la línea de código document.getElementsByTagName('p')[0].onclick

De igual manera en el artículo de introducción a JavaScript encontraran el código de ejemplo.

 📓El método addEventListener()

El método addEventListener() es la técnica ideal y la que es considerada como estándar por la especificación de HTML5. Este método tiene tres argumentos: el nombre del evento, la función a ser ejecutada y un valor booleano (falso o verdadero) que indica cómo un evento será disparado en elementos superpuestos.

 

@madesweb

La parte del código  (‘p’) [0] se refiere a que cuando se haga clic cobre el elemento “p”, pero no cualquier elemento, sino al “primer elemento p” se encuentre en el código, y eso se expresa de esta manera[0].

Como se puede observar en la imagen del código hay 2 elementos p, por lo que se tiene que indicar en que elemento se generara la acción para que cuente el clic.

📓APIs.

Javascript es tan poderoso como cualquier otro lenguaje de desarrollo en este momento.

Y por la misma razón que lenguajes de programación profesionales poseen librerías para crear elementos gráficos, motores 3D para video juegos o interfaces para acceder a bases de datos, Javascript cuenta con APIs para ayudar a los programadores a lidiar con actividades complejas.

 HTML5 introduce varias APIs (interfaces de programación de aplicaciones) para proveer acceso a poderosas librerías desde simple código Javascript. El potencial de estas incorporaciones es tan importante que pronto se convertirán en nuestro objeto de estudio.

Veamos rápidamente sus características para obtener una perspectiva de lo que nos encontraremos en el resto del libro. La siguiente es solo una introducción, más adelante estudiaremos cada una de estas tecnologías con mayor profundidad.

Canvas

Canvas es una API gráfica que provee una básica pero poderosa superficie de dibujo. Esta es la más maravillosa y prometedora API de todas. La posibilidad de generar e imprimir gráficos en pantalla, crear animaciones o manipular imágenes y videos (combinado con la funcionalidad restante de HTML5) abre las puertas para lo que nos podamos imaginar.

Canvas genera una imagen con pixeles que son creados y manipulados por funciones y métodos provistos específicamente para este propósito.

Drag and Drop

Drag and Drop incorpora la posibilidad de arrastrar y soltar elementos en la pantalla como lo haríamos comúnmente en aplicaciones de escritorio. Ahora, con unas pocas líneas de código, podemos hacer que un elemento esté disponible para ser arrastrado y soltado dentro de otro elemento en la pantalla. Estos elementos pueden incluir no solo gráficos sino además textos, enlaces, archivos o datos en general.

Geolocation

Geolocation es utilizada para establecer la ubicación física del dispositivo usado para acceder a la aplicación. Existen varios métodos para acceder a esta información, desde señales de red hasta el Sistema de Posicionamiento Global (GPS). Los valores retornados incluyen latitud y longitud, posibilitando la integración de esta API con otras como Google Maps, por ejemplo, o acceder a información de localización específica para la construcción de aplicaciones prácticas que trabajen en tiempo real.

Storage

Dos APIs fueron creadas con propósitos de almacenamiento de datos: Web Storage e Indexed Database. 

Básicamente, estas APIs transfieren la responsabilidad por el almacenamiento de datos del servidor al ordenador del usuario, pero en el caso de Web Storage y su atributo sessionStorage, esta incorporación también incrementa el nivel de control y la eficiencia de las aplicaciones web.

Web Storage contiene dos importantes atributos que son a veces considerados APIs por sí mismos: sessionStorage y localStorage. El atributo sessionStorage es responsable por mantener consistencia sobre la duración de la sesión de una página web y preservar información temporal como el contenido de un carro de compras, asegurando los datos en caso de accidente o mal uso (cuando la aplicación es abierta en una segunda ventana, por ejemplo). 

Por el otro lado, el atributo localStorage nos permite grabar contenidos extensos de información en el ordenador del usuario. 

La información almacenada es persistente y no expira, excepto por razones de seguridad. Ambos atributos, sessionStorage y localStorage reemplazan la anterior función del sistema de cookies y fueron creados para superar sus limitaciones.

La segunda API, agrupada dentro de las APIs de almacenamiento pero independiente del resto, es Indexed Database. 

La función elemental de un sistema de base de datos es la de almacenar información indexada. Web Storage API trabaja sobre el almacenamiento de grandes o pequeñas cantidades de información, datos temporales o permanentes, pero no datos estructurados. Esta es una posibilidad solo disponible para sistemas de base de datos y la razón de la existencia de esta API.

File

Bajo el título de File, HTML5 ofrece varias APIs destinadas a operar con archivos.

En este momento existen tres disponibles: File, File: Directories & System, y File: Criterio. Gracias a este grupo de APIs, ahora podemos crear y procesar archivos en el ordenador del usuario.

Con estos conceptos de API`s de java script finalizamos este articulo, en el siguiente veremos las librerías externas con que cuenta este lenguaje de programación.

Recuerda compartir si te a gustado el contenido.

Hasta luego gente.!!!!