Ejecutar una función javascript automáticamente (con jQuery)

Hace un tiempo publiqué cómo ejecutar una función de javascript automáticamente cuando se cargaba la página. Tuve algunos mensajes al respecto de gente a la que le sirvió. Me alegro. A pesar de que apenas sabía de que se trababa en ese momento, lo publiqué acá porque, así como otro lo compartió y me sirvió para salir del paso, mi propia experiencia podía servirle a otros. Es un poco la idea de la gente que escribe en internet supongo, y la comparto. Uno aprende de otros y es justo que otros aprendan algo gracias a uno.

El maravilloso jQuery

jQuery es una librería para javascript donde ya tenemos muchas cosas "cocinadas". Es decir, que en lugar de andar inventando la rueda cada vez que tenemos que viajar, simplemente la ponemos en la moto y salimos andando  :)

No vayan a creer que soy un experto. De hecho no estoy programando en el laburo ultimamente, pero he aprendido algunas cositas. En otros artículos me explayaré sobre otras cosas que aprendí de esta librería.

Pero hoy voy a hacer lo mismo que en aquel artículo, pero con jQuery. Lo que yo necesitaba aquella vez, era que ni bien se cargaba la página html en el navegador, se ejecutara una función, por ejemplo miFuncion().

En aquel entonces, yo recién empezaba y buscando en internet encontre cómo hacerlo pero solo con javascript, agregando esto en la etiqueta body del html:

< body onload="miFuncion()" >

Con jQuery

Si tenenos disponible jQuery, podemos hacerlo dentro del HEAD del html llamando a la función .ready() de jQuery. El solito se ocupa de que se ejecute cuando la pagina se cargó.

Para eso tiene que estar presente la libreria, con la correpondiente etiqueta dentro del HEAD:

< script src="http://www.example.com/jquery.js" >< /script >

Ese jquery.js es la librería donde esta toda la funcionalidad. Puede tener otros nombres según la versión. Ya van por la versión 1.5.2 y se puede bajar del sitio de jQuery.

Una vez que esta incluido ese archivo en la página, ya estamos listos para usar jQuery. En nuestro caso solo queremos ejecutar la funcion miFuncion() cuando cargue la página, asi que vamos a usar la utilidad .ready que mencionamos antes. A .ready solo hay que pasarle como parámetro una función para que se ejecute. Podemos crear una ahí mismo (después comento de qué manera) o pasarle el nombre de una que ya tengamos (como nuestra miFuncion()).

Así que dentro del mismo HEAD del html, y después de incluir todos los javascript que hagan falta (además de jquery), ponemos una última etiqueta javascript:

< script >
   $(document).ready( miFuncion );
< /script >

1. $(document) devuelve un objeto de jQuery con el documento html
2. $(document).ready( miFuncion ) verifica cuando se termino de cargar document y ejecuta miFuncion()

* Noten que se le pasa solo el nombre de la función, sin los paréntesis. Porque el que se ocupa de llamarla es jQuery mas tarde cuando se carga el documento (document)

* $() es una función jQuery muy útil sobre la que deberemos hablar otro día.

Otra forma

Si miFuncion() fuera algo simple, podríamos meterla directamente en .ready. Supongamos que miFuncion es esto:

function miFuncion()
{
    alert("Hola Mundo");
}

Si ejecutáramos eso ni bien carga la página, saltaría una ventana diciendo "Hola Mundo". Una pavada, pero viene bien para entender como funciona.

Ahora, en lugar hacer como antes y pasarle a .ready como parámetro esta función, vamos a pasarle como parámetro un código armado ahí mismo:

< script >
   $(document).ready( function()
   {
      alert("Hola Mundo");
   } );
< /script >


Ahí vemos como se sustituyó el nombre de la función, por la propia función. Este tipo de uso es el que más se ve, y el más útil, porque se pueden hacer todo tipo de tareas de inicialización directamente dentro de .ready.

Espero que le sea útil a alguien. Yo ahora uso jQuery para casi todo, porque no te tenés que preocupar si lo que hacés va a andar en el Explorer o en el Firefox o en el que sea, porque de eso se ocupan ellos. Unos grosos!!!

Diego Arregui