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

32 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
  17. que bien muchas gracias, me podrias porfavor ayudar a aplicar eso a una funcion, no se casi nada de java y se me ha echo dififil, mira tengo esta funcion, cuando le doy click al video me lo deja fullscreen y quiero que en vez de que sea con un clicl sea automatico, pero de verdad que estoy echo un quilombo con esto hace ya dias.



    $(document).on('click', '#videoId', function(e){e.preventDefault();if (BigScreen.enabled) {BigScreen.request($(this)[0]);} else {alert("este navegador no soporta el método fullscreen");}});




    y no se como hacer para que esa funcion que se activa con un click, ahora lo haga automaticamente, es un video en fullscreen, si alguien me echa una mano, me sacaria de esta tortura!!!! y se lo agradeceria por siempre.

    ResponderEliminar
  18. hermano muchas gracias, si es muy basico, por algo iniciamos, me sirvio demasiado..GRACIAS MI HERMANO!!

    ResponderEliminar
  19. Tengo problemas para llamar y ejecutar funciones de javascript desde otra función jquery.

    ResponderEliminar
  20. Gracias brother, justo lo que estaba buscando! ;)

    ResponderEliminar
  21. Nombre del acreedor: Sr. Paul William.
    Prestamista E-mail: paul_william_loanhouse@hotmail.com

    Ofrecemos préstamos privados, comerciales y personales con tasas de interés anuales muy bajas tan bajas como un 2% en un año a un período de reembolso de 50 años en cualquier parte del mundo. Ofrecemos préstamos entre US $ 5.000 y US $ 100 millones.

    Nombre del acreedor: Sr. Paul William.
    Prestamista E-mail: paul_william_loanhouse@hotmail.com

      Saludos,
    Sr. Paul William.
    paul_william_loanhouse@hotmail.com

    ResponderEliminar
  22. Nombre del acreedor: Sr. Paul William.
    Prestamista E-mail: paul_william_loanhouse@hotmail.com

    Ofrecemos préstamos privados, comerciales y personales con tasas de interés anuales muy bajas tan bajas como un 2% en un año a un período de reembolso de 50 años en cualquier parte del mundo. Ofrecemos préstamos entre US $ 5.000 y US $ 100 millones.
     
    Los interesados deben llenar el formulario de solicitud de préstamo:

                     SOLICITUD DE PRÉSTAMO
    SOLICITUD DE PRÉSTAMO
    Tu nombre completo*
    Tu correo electrónico*
    Su teléfono*
    Su dirección*
    Tu ciudad*
    Estado / Provincia *
    País*
    Número de fax
    Fecha de nacimiento *
    ¿Tiene usted una cuenta? *
    ¿Usted ha aplicado antes? *
    Cantidad de préstamo necesaria *
    Duración del préstamo *
    Propósito del préstamo *
    Envíame una copia escaneada de tu identificación: *

    Nombre del acreedor: Sr. Paul William.
    Prestamista E-mail: paul_william_loanhouse@hotmail.com

      Saludos,
    Sr. Paul William.
    paul_william_loanhouse@hotmail.com

    ResponderEliminar
  23. Solicité un préstamo la semana pasada y hoy recibí una notificación de que he recibido la suma de $ 50.000 USD. Muchas gracias, obispo Elías. Estoy muy agradecido y prometí difundir las buenas noticias tan pronto como consiga el préstamo. Por favor, todos deben contactar con él correo electrónico: bishopelijahloanfirm002@hotmail.com o whatsapp él +2349035555247. No olvides informarle que fue yo Miguel Francisco de México quien te dirige. Agradezco a la obispo Elías gracias y Dios los bendecirá más para bendecir a los necesitados.

    ResponderEliminar
  24. Ofrecemos préstamos privados, comerciales y personales con tasas de interés anuales muy bajas tan bajas como un 2% en un año a 50 años período de amortización en cualquier parte del mundo. Ofrecemos préstamos entre 5.000 y 100 millones de euros. Nuestros préstamos están bien asegurados para la máxima seguridad es nuestra prioridad. ¿Está usted perdiendo el sueño en las noches que se preocupan de cómo conseguir a un prestamista legítimo del préstamo? ¿Te estás mordiendo las uñas al máximo? En lugar de golpearle, póngase en contacto con Mark Home Loan (Loan Services) ahora, los especialistas que ayudan a detener los préstamos de historial de crédito malo, para encontrar una solución que la victoria es nuestra misión. E-mail: Info.newspring.kredit@gmail.com
    Los solicitantes deben completar el formulario de solicitud siguiente préstamo:
    SOLICITUD DE PRÉSTAMO
    Su nombre y apellido *
    Tu correo electrónico *
    Tu numero de telefono *
    Su dirección *
    Tu ciudad *
    Estado / Provincia *
    país *
    Sexo
    Fecha de nacimiento *
    ¿Tener una cuenta? *
    ¿Usted ha aplicado antes? *
    Cantidad de préstamo necesaria *
    Duración del préstamo *
    Propósito del Préstamo *
    Envíame una copia escaneada de tu identificación: *
    Prestamista E-mail: Info.newspring.kredit@gmail.com
    Saludos,
    Sr.Mark Moel.
    Info.newspring.kredit@gmail.com

    ResponderEliminar

No se zarpen! :)

Bloggers - Meet Millions of Bloggers