miércoles, 13 de abril de 2011

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

22 comentarios:

  1. Respuestas
    1. Personas como tu, que sólo critican el trabajo de los demás son las que verdaderamente apestan!!! Ponte a estudiar, y podemos hablar entonces, igual Edgar.

      Dr. A. B.
      PhD en Cs de la Computacion

      Eliminar
    2. Para tu Bebe (que alias mas horrible, has de ser gay), deberias de agradecer que alguien se tomo la molestia para compartir su conocimiento; como dicen por ahi, no comes ni dejas comer, sacate a la %#$/"$$%#$. Ya se te olvido que tu un dia tambien empezaste desde abajo... Atte Marcus

      Eliminar
    3. La ignorancia de Bebe es demasiada, se refleja en su comentario, amigo del tutorial gracias por tormarte la molestia y no dejes de hacerlo saludos.

      Eliminar
    4. tu si que apestas capullo

      Eliminar
  2. no me sirve pa lo que necesito ademas, esta demasiado.... BASICO

    ResponderEliminar
    Respuestas
    1. Pues fácil vete a otra fuente. Te recuerdo que tu alguna vez tambien no sabias nada de programación, te lo digo por si te sientes el gran experto. Si es asi contactame y platicamos para ver si deveras.

      No entiendo como hay gente malagradecida, te sea util o no util deberias de agradecer que alguien se tomo la molestia para compartir conocimiento con los que apenas empiezan a programar. Atte Marcus

      Eliminar
  3. Gracias, me ha servido de ayuda!

    ResponderEliminar
  4. Gracias, breve, rápido y conciso, lo que buscaba.

    ResponderEliminar
  5. Hola Buenos días, me parece excelente tu aporte. Ahora tengo una duda. Quisiera ejecutar una función de JQuery al cargar la página, básicamente lo que necesito es mostrar un popup con jquery, html y css pero que al cargar la página se muestre, pero también que se bloquee todo el contenido de la página hasta que se cierre dicho pop-up.

    ¿Si explico lo que necesito?, igual y alguien me ayuda a encontrar la ayuda en otra fuente o aquí mismo resolver mi duda. De antemano muchas gracias.

    Saludos desde México!

    ResponderEliminar
  6. Esto era lo que necesitaba, estoy empezando a usar jquery y no me aclaraba. Muchas gracias.

    ResponderEliminar
  7. Con ese tutorial me sirvio para lo que estaba buscando, muchas gracias por tu tiempo en hacer ese tutorial.

    Gracias

    ResponderEliminar
  8. Gracias por ayudarme a entender de forma sencilla jquery

    ResponderEliminar
  9. HOLA ESTO ME SIRVE TE AGRADESCO, SIN EMBARGO NO SE SI ME PUEDE AYUDAR PUES LO QUE QUIERO ES ACTUALIZAR UNA TABLA DE EVENTOS SOBRE INTERVALOS DE FECHAS PARA QUE AL CARGAR MI PAGINA ,,,LOS AVISOS ESTEN ACTUALIZADOS...SALUDOS :)

    ResponderEliminar
  10. Gracias me resolvió un problema grande

    ResponderEliminar
  11. Hasta que entendi como era esta sintaxis del jquery!!

    ResponderEliminar
  12. Muchas gracias me sirvio amigo ,, saludos desde Perú...

    ResponderEliminar
  13. Muy bueno. Me sirvió mucho.
    Gracias por la molestia de dedicarte a compartir lo que sabés.

    ResponderEliminar
  14. gracias por compartirlo, deja de lado los malos comentarios hecho por personas que se creen que lo saben todo y en realidad ignoran quizas mucho mas de lo que pretenden saber

    ResponderEliminar
  15. GENIO....!!! posteaste justo lo que NECESITABA... GRACIAS POR COMPARTIR CAPO..!! Ariel.!

    ResponderEliminar
  16. No es lo que busco, pero leer los comentarios me animaron a comentar. MUCHAS GRACIAS!!!! Hay personas que no tienen el conocimiento y la facilidad de asimilar y lamentablemente hay personas que no saben apreciar.
    Solo espero que los que no saben apreciar no consigan lo que buscan para que se jodan en verdad y ver que tan inteligentes son. Y si lo son que carajo hacen buscando?

    ResponderEliminar

No se zarpen! :)

Bloggers - Meet Millions of Bloggers