cabecera javascript para novatos

Programación basada en eventos | JavaScript para novatos 27º 1/2

Hasta ahora hemos visto cómo el código se ejecuta secuencialmente excepto cuando implementamos estructuras de control de flujo que nos permiten saltar o repetir instrucciones. 

 

La limitación de este tipo de aplicaciones es la imposibilidad de interacción del usuario con la página. Para solucionar este problema JavaScript nos proporciona la llamada programación basada en eventos.

Índice general del «Curso de JavaScript»:

  1. Introducción
  2. Las variables
  3. Tipos de datos
  4. Los operadores
  5. Declaraciones if y else
  6. Condiciones complejas y anidadas
  7. Estructuras else if y switch
  8. Bucles while y do while
  9. Bucle for
  10. Integrando JavaScript
  11. Las funciones
  12. Alcance de las variables
  13. Funciones predefinidas
  14. Programación orientada a objetos I
  15. Programación orientada a objetos II
  16. Herencia y prototipos
  17. Closure
  18. Los array I
  19. Los array II
  20. El DOM
  21. Acceso a los nodos del DOM
  22. Crear nuevos nodos en el DOM
  23. Eliminar nodos del DOM
  24. Modificar contenido de los nodos
  25. Modificar atributo style (DOM)
  26. Modificar atributo class (DOM)
  27. Programación basada en eventos I

Los eventos

Se denomina evento a las acciones del usuario o el navegador. Por ejemplo, cuando cliqueamos en un elemento de la página o posicionamos el puntero encima de una imagen, eso es un evento. También es un evento, cuando por ejemplo el navegador termina de cargar una página, o se produce un error durante la carga.

Existen diferentes tipos de eventos, veamos algunos de ellos:

Eventos de mouse

– Click: cuando hacemos click sobre un elemento.

– DblClick: cuando hacemos doble click.

– MouseOver: cuando el puntero se sitúa encima de un elemento.

. . .

Eventos de teclado

– KeyDown: mientras mantenemos presionada una tecla.

– KeyUp: cuando soltamos una tecla.

. . .

Eventos del navegador

– Load: cuando se acaba de cargar una página.

– Scroll: cuando se desplaza una barra scroll (barra de desplazamiento).

. . .

 

Aquí puedes consultar una completa lista de eventos:

http://www.w3schools.com/jsref/dom_obj_event.asp

Lo interesante de estos eventos, es que podemos utilizarlos para que cuando sucedan, se ejecuten determinadas acciones. Para ello necesitaremos los llamados «manejadores de eventos«, que son las funciones que responden a un evento. Por ejemplo, que cuando el usuario cliquee encima de una imagen (evento), esta modifique su tamaño (función asociada).

Grafico del funcionamiento de un evento en JavaScript

Manejadores de eventos

Como ya hemos comentado, el código definido como respuesta a un evento se denomina «manejador de eventos».

El modelo básico de eventos de Javascript nos proporciona dos maneras de asociar un manejador de evento a un elemento HTML para que reaccione a un evento, con un atributo de evento (en HTML) o con una propiedad de evento (en Javascript):

-Agregar atributo de evento (en HTML)

Utilizar los «atributos de eventos» que HTML nos proporciona.

Los atributos de eventos que podemos dar a un elemento dentro del documento HTML, nos permiten asociar al elemento un comportamiento que será desencadenado por un evento.

Sintaxis.

Sintaxis de estructura de un atributo evento
27.1 Sintaxis atributo evento

Veamos un ejemplo.

<input type="button" onclick="alert('¡Hola!');" value="saluda"/>

// 27.1

En el sencillo ejemplo anterior le hemos dado al elemento <input> un atributo de evento. El nombre del atributo consta del prefijo «on» seguido del evento en cuestión (click), y el valor dado al atributo es el código Javascript con la acción a ejecutar.

Si bien es la manera más simple, cuando la instrucción Javascript a ejecutar sea extensa estaremos ensuciando y complejizando el código HTML. Para evitar esto vamos a ver una pequeña variante.

La base es la misma, simplemente utilizaremos una función externa la cual contendrá las acciones a ejecutar, y como valor del atributo le daremos el nombre de la función.

<input type="button" onclick="saludar()" value="saluda"/>
    
<script>                            

       function saludar(){

             alert("¡Hola!");

      };                             

</script>

// 27.2

También podemos utilizar la palabra clave «this» en los manejadores de eventos. Nos será útil para hacer referencia al elemento que contiene el manejador e incluso para acceder a sus propiedades y métodos.

<div id="mi_div" style="width:250px; height:40px; border:2px solid silver" onmouseover="this.style.borderColor='pink';" onmouseout="this.style.borderColor='silver';">

       Pasa el puntero por encima

</div>

// 27.3

Aunque en este último ejemplo podíamos haber utilizado getElementById, hemos simplificado el código, escribiendo «this» en vez de «document.getElementById(‘mi_div’)«.

Probemos ahora a acceder a una propiedad de un objeto con this.

<form>

<input id="mi_boton" type="button" onclick="alert(this.id);" value="boton">           

</form>

// 27.4

Lo que acabamos de hacer es acceder a la propiedad «id» del objeto «input».

También podemos acceder con «this» a objetos superiores en la jerarquía.

<form id="mi_formulario">
  
<input id="mi_boton" type="button" onclick="alert(this.form.id);" value="boton">       

</form>     

// 27.5

Hasta aquí la primera parte de «Programación basada en eventos», continuaremos con ello en el siguiente artículo.


Ir a JavaScript para novatos 27º 2/2

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *