[Aporte] JQuery

Foro de elhacker.net

Programación

Desarrollo Web (Moderador: #!drvy)

[Aporte] JQuery

0 Usuarios y 1 Visitante están viendo este tema.

Páginas: [1]

Autor

Tema: [Aporte] JQuery (Leído 4,486 veces)

AFelipeTrujillo

Desconectado

Mensajes: 160

[Aporte] JQuery

« en: 3 Enero 2011, 14:53 pm »

Introducción

Cuando surgió la web 2.0 en conjunto del social media las aplicaciones de Internet se tornaron mas exigentes ya que debían ser mas dinámicas. Esto fue posible con el DHTML ya que combina un conjunto de técnicas para diseñar HTML Dinámico, con apoyo de Javasript, hojas de estilo en cascada CSS y la jerarquizacion del árbol DOM.

Citar

Una página de HTML Dinámico es cualquier página web en la que los scripts en el lado del cliente cambian el HTML del documento, después de que éste haya cargado completamente, lo cual afecta a la apariencia y las funciones de los objetos de la página. La característica dinámica del DHTML, por tanto, es la forma en que la página interactúa con el usuario cuando la está viendo, siendo la página la misma para todos los usuarios.

Entre los usos mas habituales del DHTML, esta la creación de menús desplegables, ventanas modales, validaciones en tiempo real de formularios, estilo personalizados de la aplicación para cada usuario, creación de entornos mas amigables al cliente final entre otra cantidad de opciones y posibilidades.

JQuery

JQuery es un conjunto de librerías o Framework de javascript, creada inicilamente por John Resig que es trabajador de la Fundación Mozilla. Este Framework permite reducir de manera notoria la interaccion con los documento HTML, como manipular elementos DOM, gestionar eventos, desarrollar animaciones e integrar contenidos con Ajax.

jQuery es software libre y de código abierto, posee un doble licenciamiento bajo la Licencia MIT y la Licencia Pública General de GNU v2,permitiendo su uso en proyectos libres y privativos. jQuery, al igual que otras bibliotecas, ofrece una serie de funcionalidades basadas en javascript que de otra manera requerirían de mucho más código, es decir, con las funciones propias de esta biblioteca se logran grandes resultados en menos tiempo y espacio

Primeros Pasos

Para empezar el Framework, podemos ingresar a el su sitio oficial y descargarla desde allí. Contiene una amplia comunidad a nivel mundial lo cual hace que su API este bien documentada.

Que lograremos con JQuery:

   * Reducir lineas y lineas de código
   * Hace transparente el código a cualquier navegador WEB, este es un problema serio para cualquier aplicación
   * Creación de animaciones de manera facil
   * Integración, en el mundo existen miles de programadores que trabajan sobre este Framework y se puede conseguir un buena cantidad de plugin’s

Hola Mundo

Una vez descargado el Framework, lo llamamos desde el HTML de la siguiente forma:

Código

<html>
   <head>
      <script type="text/javascript" src="jquery.js"></script>
   </head>
</html>

Para ejecutar una función apenas haya cargado todo el Árbol DOM, los podemos hacer de la siguiente forma:

Código

<html>
   <head>
      <script type="text/javascript" src="jquery.js"></script>
      <script>
      $(function(){
         alert("Hola Mundo")
      })
    </script>
   </head>
</html>

El uso de esta validación, no aseguramos de que Framework empieza a funcionar apenas se haya cargado toda la pagina.

FUENTE


« Última modificación: 4 Enero 2011, 14:44 pm por 4ng3r »	En línea

C0mUnidAd C0dif|cad4.C0M

Nakp

casi es
Ex-Staff

Desconectado

Mensajes: 6.336

he vuelto :)

Re: [Aporte] JQuery (Introduccion)

« Respuesta #1 en: 3 Enero 2011, 17:18 pm »

solo he de decir que... ademas de usar

Código

$(function(){
    //codigo aqui
});

lo comun es

Código

$(document).ready(function(){
    //codigo aqui
});


	En línea

Ojo por ojo, y el mundo acabará ciego.

RedZer

Desconectado

Mensajes: 666

Re: [Aporte] JQuery (Introduccion)

« Respuesta #2 en: 3 Enero 2011, 17:27 pm »

o para los principiantes yo aprendi de esta forma ya despues lo empese a utilizar con funciones anonimas

Código

var x;
x=$(document);
x.ready(inicializarEventos);
 
function inicializarEventos()
{
//codigo
}


	En línea

Nacido y criado entre gente que enseño a pensar antes de creer a ciegas, Todo me causa curiosidad en el mundo

AFelipeTrujillo

Desconectado

Mensajes: 160

Re: [Aporte] JQuery (Introduccion)

« Respuesta #3 en: 3 Enero 2011, 21:11 pm »

JQuery es tan abierto q cualquier forma es correcta :rolleyes:


	En línea

C0mUnidAd C0dif|cad4.C0M

AFelipeTrujillo

Desconectado

Mensajes: 160

Re: [Aporte] JQuery (Introduccion)

« Respuesta #4 en: 4 Enero 2011, 14:43 pm »

Introducción

Como se estuvo analizando en el articulo anterior, JQuery nos ofrece muchas ventajas y una de ellas es que las lineas de codigo se reducen de una forma considerable. En la siguiente publicación hare una comparación entre la forma de programar en javascript y el nuevo paradigma que propone este Framework.

Citar

Nota: Antes de empezar a trabajar con JQuery, debemos tener nociones básicas de javascript y jamas estoy desmeritando que la programación por medio de javascript Nativo sea un forma anticuada.

Contenido

Cuando se usa un Framework el desarrollador debe adaptarse a sus mecanismos de uso, el tratar de llevar los conocimientos que tenemos sobre un tema y aplicarlos a la fuerza en dicho Framework puede ser frustrante, nos puede llevar a mezclar código y crear aplicaciones mediocres. Lo más adecuado es ir viendo cual es la mecánica de trabajo con dicho Framework con problemas muy sencillos e ir complicándolo a medida que entendemos su funcionamiento.

Para empezar empezaremos con un ejercicio sencillo de tomar un evento de control como el Click empleando javascript Nativo y después JQuery.

Código

<table width="200" cellpadding="10">
            <tr>
                <td><input type="button" id="elmento1" value="Manejado con javascript Nativo"></td>
            </tr>
 
            <tr>
                <td><input type="button" id="elmento2" value="Manejado con JQuery"></td>
            </tr>
        </table>

Script

Código

//javascript NATIVO
        window.onload = function(){
            var elemento = document.getElementById("elmento1");
            elemento.onclick = function(){
                alert("Has hecho click en: "+this.value);
            }
        }
 
        //NUEVO PARADIGMA - JQuery
        $(function(){
            $("#elmento2").click(function(){
                alert("Has hecho click en: "+$(this).val());
            })
        })

Como podemos observar, la forma de programación que propone JQuery es mucho mas reducida en comparación al que estamos acostumbrados. En la forma nativa como en JQuery debemos validar primero que el DOM este completo con el evento onLoad del objeto window y con el selector $ respectivamente, desde un inicio vemos la diferencia el window.onload=function(){…} es remplazado por un simple $(function(){…}).

Para seleccionar un elemento con javascript Nativo demos usar la función getElementById del objeto document pasandole como parámetro el nombre del identificador en este caso elemento1, con JQuery simplemente con el selector y el nombre del identificador $(nombre_id) nos ahorramos todo ese chorrero. Por ultimo la asignación del evento es mas largo de la Forma Nativa que con JQuery, con la primera debemos guardar el elemento, asignarle el evento onclick, lo igualamos a una función y le mandamos el alert, en cambio con JQuery, podemos seleccionar el elemento y asignarle el evento en una misma linea (aclaro que con JN tambien se puede document.getElementById(“elemento1″).onclick = function()).

Conclusión:

Es evidente que la forma de programación que propone JQuery es mas liviano y se pude conseguir resultados mas eficientes en muy poco tiempo, por estas razonas este Framework se convierte en un objeto de estudio que debe tomar su buen tiempo.

FUENTE


	En línea

C0mUnidAd C0dif|cad4.C0M

Páginas: [1]

Ir a:

Mensajes similares
	Asunto	Iniciado por	Respuestas	Vistas	Último mensaje
	[Aporte] Lightbox y JQuery Desarrollo Web	AFelipeTrujillo	0	2,991	22 Junio 2010, 23:41 pm por AFelipeTrujillo
	[Aporte] JQuery (Selectores) Desarrollo Web	AFelipeTrujillo	0	3,109	4 Enero 2011, 18:08 pm por AFelipeTrujillo
	[Aporte] JQuery: Color Picker Desarrollo Web	AFelipeTrujillo	0	3,114	8 Enero 2011, 18:46 pm por AFelipeTrujillo
	[Aporte]jShowOff: Un Plugin para jQuery para Rotar Contenido Desarrollo Web	AFelipeTrujillo	0	3,597	16 Febrero 2011, 18:54 pm por AFelipeTrujillo
	[Aporte] Slide-Jquery Desarrollo Web	TrokaMc	4	2,425	19 Diciembre 2013, 09:19 am por TrokaMc