elhacker.net cabecera Bienvenido(a), Visitante. Por favor Ingresar o Registrarse
¿Perdiste tu email de activación?.

 

 


Tema destacado: Usando Git para manipular el directorio de trabajo, el índice y commits (segunda parte)


+  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] Ir Abajo Respuesta Imprimir
Autor Tema: [Aporte] JQuery  (Leído 4,532 veces)
AFelipeTrujillo

Desconectado Desconectado

Mensajes: 160



Ver Perfil WWW
[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
  2.    <head>
  3.       <script type="text/javascript" src="jquery.js"></script>
  4.    </head>
  5. </html>

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

Código
  2.    <head>
  3.       <script type="text/javascript" src="jquery.js"></script>
  4.       <script>
  5.       $(function(){
  6.          alert("Hola Mundo")
  7.       })
  8.     </script>
  9.    </head>
  10. </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 Desconectado

Mensajes: 6.336

he vuelto :)


Ver Perfil WWW
Re: [Aporte] JQuery (Introduccion)
« Respuesta #1 en: 3 Enero 2011, 17:18 pm »
solo he de decir que... ademas de usar

Código
  1. $(function(){
  2.     //codigo aqui
  3. });

lo comun es

Código
  1. $(document).ready(function(){
  2.     //codigo aqui
  3. });
En línea
Ojo por ojo, y el mundo acabará ciego.
RedZer


Desconectado Desconectado

Mensajes: 666



Ver Perfil
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
  1. var x;
  2. x=$(document);
  3. x.ready(inicializarEventos);
  4.  
  5. function inicializarEventos()
  6. {
  7. //codigo
  8. }
  9.  
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 Desconectado

Mensajes: 160



Ver Perfil WWW
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 Desconectado

Mensajes: 160



Ver Perfil WWW
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
  1. <table width="200" cellpadding="10">
  2.             <tr>
  3.                 <td><input type="button" id="elmento1" value="Manejado con javascript Nativo"></td>
  4.             </tr>
  5.  
  6.             <tr>
  7.                 <td><input type="button" id="elmento2" value="Manejado con JQuery"></td>
  8.             </tr>
  9.         </table>

Script

Código
  1. //javascript NATIVO
  2.         window.onload = function(){
  3.             var elemento = document.getElementById("elmento1");
  4.             elemento.onclick = function(){
  5.                 alert("Has hecho click en: "+this.value);
  6.             }
  7.         }
  8.  
  9.         //NUEVO PARADIGMA - JQuery
  10.         $(function(){
  11.             $("#elmento2").click(function(){
  12.                 alert("Has hecho click en: "+$(this).val());
  13.             })
  14.         })

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 Arriba Respuesta Imprimir 

Ir a:  

Mensajes similares
Asunto Iniciado por Respuestas Vistas Último mensaje
[Aporte] Lightbox y JQuery
Desarrollo Web 		AFelipeTrujillo 0 3,024 Último mensaje 22 Junio 2010, 23:41 pm
por AFelipeTrujillo
[Aporte] JQuery (Selectores)
Desarrollo Web 		AFelipeTrujillo 0 3,140 Último mensaje 4 Enero 2011, 18:08 pm
por AFelipeTrujillo
[Aporte] JQuery: Color Picker
Desarrollo Web 		AFelipeTrujillo 0 3,140 Último mensaje 8 Enero 2011, 18:46 pm
por AFelipeTrujillo
[Aporte]jShowOff: Un Plugin para jQuery para Rotar Contenido
Desarrollo Web 		AFelipeTrujillo 0 3,627 Último mensaje 16 Febrero 2011, 18:54 pm
por AFelipeTrujillo
[Aporte] Slide-Jquery
Desarrollo Web 		TrokaMc 4 2,465 Último mensaje 19 Diciembre 2013, 09:19 am
por TrokaMc
WAP2 - Aviso Legal - Powered by SMF 1.1.21 | SMF © 2006-2008, Simple Machines