martes, 9 de noviembre de 2010

Tutorial JQuery desde 0

Le dedico este post a un muy buena amiga, piojita esto es para ti.Para la mayoría que llevamos buen tiempo en el mundo web, es un poco raro conocer desarrolladores que aún desconocen la existencia de Frameworks Javascript, mismos que no son mas que librerías destinadas a facilitarnos el desarrollo y hacernos más productivos.
En estos últimos años han aparecido muchas de estas librerías las que yo he manejado han sido Prototype,JQuery y algo de Mootools y Dojo
Tal como dice el titulo de este post nos vamos a centrar en JQuery.
El indice va a ser el siguiente:
  1. Instalacion
  2. Uso practico para seleccionar y animaciones
  3. Uso de Ajax en JQuery.
  1. Instalacion


    Existen 2 formas: Primera
    Descargamos JQuery (que es un archivo .js) y lo colocamos en el directorio de nuestra webapp Incrustamos el script en nuestra pagina con
    <script src="ubicacion_de_jquery/jquery.js" ></script>
    Segunda
    Utilizamos el repositior de JQuery que se encuentra alojado en googleapis Incrustamos el script en nuestra pagina con

    Anterior
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js" ></script>

    Actual
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript">
    </script>
    

    Y todas las acciones javascript como siempre irian dentro de
    <script type="text/javascript" > 
    /*
    Mis Scripts
    */
    </script>
  2. Uso practico para seleccionar y eventos


    Una de las principales ventajas de JQuery es su gran amplitud de selectores o formas de seleccion. Todo parte del simbolo $ el cual es quien hace referencia a nuestro documento.
    Vamos por lo mas basico, seleccionar un elemento cuyo id es "miboton" en nuestro html seria algo como
    <button id="miboton" >Hey aqui!!!</button>

    En nuestro codigo javascript convencional hubieramos hecho algo como esto
    <script type="text/javascript" > 
    /**
    Javascript convencional
    */
    documento.getElementById("miboton");
    </script>

    El codigo anterior funciona muy bien en la mayoria de navegadores pero con algunos navegadores es algo engorroso.
    Ahora con JQuery seria algo como esto:
    <script type="text/javascript" > 
    //seleccionamos el boton "miboton"
    $("#miboton");
    </script>

    Ok, eso es lo mas basico pero digamos que queremos seleccionar varias clases a la vez, esto en javascript convencional es trabajoso, pero ahi esta JQuery al rescate.
    <script type="text/javascript" > 
    /**
    Seleccionando por clases
    */
    $('.miclase');
    </script>

    O si quieres por ejemplo las filas de una tabla seria asi
    <script type="text/javascript" > 
    /**
    Seleccionamos filas de una tabla
    */
    $('#mitabla tr');
    </script>

    Bien existen muchos otros selectores pero a mi experiencia por lo general estos son los mas usados
    Ahora veamos algo de Eventos, los eventos más típicos que se manejan son Click para botones y enlaces,Change para los combos y Submit para los formularios.
    En JQuery hariamos algo asi:
    <script type="text/javascript" > 
    /**
    Evento Click en un boton
    */
    $("#miboton").click(function(){
    //acciones que dispara el evento
    alert("fui pulsado");
    });
    
    /**
    Evento Change en un combo
    */
    $("#combo").change(function(){
    //acciones que dispara el evento
    alert("Ahora mi valor seleccionado es" + $(this).val());
    });
    
    /**
    Evento Submit en un formulario
    */
    $("#miformulario").submit(function(){
    //acciones que dispara el evento
    alert("Ahora voy a validar los datos");
    });
    
    </script>

    Bueno por ahora son los ejemplos mas sencillos y practicos.
  3. Uso de Ajax en JQuery


    No podia faltar lo que todo el mundo quiere saber porque esta de modoa, y eso es AJAX!!!
    Aclaraciones AJAX no es un lenguaje, no es una libreria ni plugin ni mucho menos una tecnologia, es mas existe hace tiempo.
    Basicamente AJAX como su nombre lo dice Asynchronous JavaScript and XML es un conjunto de tecnologias, ahora como funciona pues bien, cada vez que se pica un enlace o se solicita una accion se crea en nuestro servidor un Request, especificamente un HTTPRequest, antiguamente esto se hacia de manera sincrona es decir nuestro Request iba a devolver un Response o Respuesta que refrescaria toda la pagina dado que la peticion se hacia a traves de nuestra Barra de direcciones del navegador.
    Pero ahora existe en todos los navegadores un Objeto que realiza esta peticion y tambien gestiona la respuesta, y se puede manejar utilizando Javascript.
    Ahora esto tambien lo simplifica JQuery a través de sus funciones Ajax.Veamos como
    Queremos cargar en un pedazo de nuestra web un pequeño contenido
    <script type="text/javascript" > 
    /**
    Carga de contenido mediante Ajax
    */
    $("#contenedor").load("miURL");
    </script > 
    

    Ahora si queremos que nuestra peticion tenga parametros hay dos formas o por GET o por POST, por metodo GET significa que nuestros parametros estan especificados en la URL, estos cuando ves una URL que se ve algo asi
    miurl.php?param1=unpara&param2=segundopara

    Y la otra manera es por metodo POST, esto es que los parametros viajan de forma transparente al usuario, dado que no se ven en la URL, esta es la manera mas usual sobre todo en formularios por ejemplo de Login o Registro.
    <script type="text/javascript" > 
    /**
    Carga de contenido mediante Ajax con metodo GET
    Metodo 1
    */
    $.get("miurl.php?param1=unpara&param2=segundopara",function(data){
    //@data contiene la respuesta o response
    alert("la respuesta es " + data );
    });
    
    /**
    Carga de contenido mediante Ajax con metodo GET
    Metodo 2
    */
    $.get("miurl.php",{param1: unpara, param2: segundopara },function(data){
    //@data contiene la respuesta o response
    alert("la respuesta es " + data );
    });
    
    </script > 
    

    Con el Metodo POST
    <script type="text/javascript" > 
    /**
    Carga de contenido mediante Ajax con metodo POST
    */
    $.post("miurl.php",{param1: unpara, param2: segundopara },function(data){
    //@data contiene la respuesta o response
    alert("la respuesta es " + data );
    });
    
    </script >  

Como habrán visto JQuery no es difícil de usar, por ahora es lo más básico para empezar a utilizar este Framework Javascript, si tienen alguna sugerencia por favor comenten.
Saludos

Ejemplos :

Ejemplos Basicos de JQuery : Evento Click de un elance o botton | Link or Button

Tutorial : Crud Ajax con JQuery y PHP

3 comentarios:

  1. :) ayuda GRacias no sabia nada de Jquery pero esto me ayuda [si me puedes agregar por algo mas de ayuda porfa Locobot_11_2@hotmail.com]

    ResponderEliminar
  2. buenisimo haber si me agregas algo quiero un ejmple con php, mysql, ajax, javascrip, jquery porfa mas para manejar datos de docentes y alumnos a mi correo ben_ru1@hotmail.com

    ResponderEliminar
  3. Que bueno que te haya gustado, voy a hacer una entrada con la idea que propones, asi puedo ayudarte un poco mas. Espero que mas personas como tú, me den mas ideas de que quisieran

    ResponderEliminar

 
Powered by Blogger