cabecera javascript para novatos

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

Vamos a continuar desde donde lo dejamos en el capítulo anterior, viendo cómo acceder a las propiedades y métodos de los objetos.

Í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

Veamos cómo acceder a otros objetos mediante el atributo «name».

<form name="mi_formulario">
     
<input name="mi_boton" type="button" onclick="document.mi_formulario.caja_texto.style.backgroundColor='yellow';" value="boton">           

      <input name="caja_texto" type="text">            

</form>

// 27.6

En este último ejemplo hemos accedido al objeto «caja_texto» mediante los atributos «name».

Utilizando esta última metodología podemos además acceder a los métodos del otro objeto.

<form name="mi_formulario">        

<input name="segundo_boton" type="button" onclick="document.mi_formulario.mi_boton.click();" value="click en: mi boton">      

<input name="mi_boton" type="button" onclick="document.mi_formulario.caja_texto.style.backgroundColor='yellow';" value="mi boton">            

<input name="caja_texto" type="text">           

</form>


// 27.7     

En este último caso hemos accedido desde «segundo_boton» al método click() de «mi_boton».

Nota:

Cuando utilizamos atributos de eventos podemos escribir los manejadores con mayúsculas o minúsculas indistintamente.

– Agregar propiedad de evento (en Javascript)

Consiste en acceder al elemento HTML desde Javascript y asignarle un manejador sin tener que añadirle atributos de eventos en HTML.

Esta manera de asociar un manejador de evento es más limpia que la anterior, ya que mantenemos el código Javascript separado del HTML, consiguiendo un documento más claro y organizado, colaborando además a mantener la semántica del documento HTML.

Veamos en que consiste:

Sintaxis para agregar propiedad de evento

– Primero le damos un atributo «id» al elemento HTML al que le asignaremos el manejador.

<form name="mi_formulario">
           
<input id="miBoton" name="mi_boton" type="button" value="mi boton">
           
   <input name="caja_texto" type="text">
           
</form>            

– Después se crea la función que se le asignará al manejador, en este caso la función se llamará «cambiarColor», y con ella cambiaremos el estilo de la caja de texto a la cual accederemos a través de su atributo «name».

<script> 

       function cambiarColor() {
                document.mi_formulario.caja_texto.style.backgroundColor="yellow";

       }     

– Por último, asignaremos la función a través del manejador al elemento HTML que dispara/desencadena el evento.     

       document.getElementById("miBoton").onclick = cambiarColor; 
                                               
</script>

// 27.8

También se puede asignar la función directamente al manejador en vez de llamarla.

Sintaxis para asignar función directamente al manejador

document.getElementById("miBoton").onclick = function cambiarColor() {

    document.mi_formulario.caja_texto.style.backgroundColor="yellow";

}

Nota:

Las asignaciones a los manejadores deben de hacerse al final del documento para asegurarnos de que los elementos referenciados estén cargados.

Una de las formas más sencillas de asegurar que cierto código se va a ejecutar después de que la página se cargue por completo es utilizar el evento onload:

window.onload = function() {

  document.getElementById("pinchable").onclick = muestraMensaje;

}

Aquí termina la segunda parte del capítulo 27º sobre «Programación basada en eventos», continuaremos con ello en el siguiente artículo.


Ir a

Deja una respuesta

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