JQUERY

Imagen de bsegovia
AdjuntoTamaño
Office presentation icon WebContent.ppt51.65 KB

Tema: 

Que tal compañeros.

Una vez mas compartiendo conocimientos, esta vez con un framework que permite potenciar las aplicación web de muy básicas hasta incluir componentes ricos con ajax, usando una librería estandard y que funcionara en todos los navegadores.

Se trata de JQUERY.
Aquí un concepto basico:
Librería liviana de JavaScript, pensada para interactuar con los elementos de una web por medio del DOM.

Para usarlo debemos descargarnos la ultima versión de jquery en el siguiente link.

http://code.jquery.com/jquery-1.6.1.min.js

Esta es la ultima versión.

Voy a poner un ejemplo sencillo de como usarlo por pasos
1.- Incluir la libreria en su pagina html jsp php o si no saben programar asp(X).

como muestro en el siguiente codigo:

Insert title here

Para mi caso descargue el jquery y lo coloque en la una carpeta js como se ve en el codigo.

JQuery tiene una sintaxis muy sencilla. Los comandos se reconocen por comenzar con el simbolo "$". Ahora, la forma de una sentencia es la siguiente:

$(elemento).evento(funcion-o-parametro);
(Tal como el lenguaje de expresiones EL)

2.- Usarlo
Existe una funcion llamada ready
Tal cual como se muestra en el siguiente codigo

$(document).ready(function()
{
alert("Funcion con jquery")
});

El segmento de código anterior permite mostrar un mensaje cuando el arbol del DOM este listo para usar (ojo hay una diferencia entre ready y onLoad ready es mas rapido se ejecuta cuando el DOM esta listo, mientras que el onLoad se ejecuta cuando esta listo todo el html).

Y listo ya estamos usando jquery.

Hagamos algo mas grande.

como por ejemplo manejar eventos de manera no intrusiva dentro del input de tipo boton

los eventos que se pueden usar son los mismos que usariamos normalmente. El unico cambio es la supresión del "on" inicial: mouseover, click, focus, etc

Aqui veremos un ejemplo

Insert title here

$(document).ready(function()
{

$("#btnEjecuta").click(
function()
{
alert("ejecucion");
}
);
});

Presione:

Como se daran cuenta el input con id="btnEjecuta" esta completamente limpio sin manejo de eventos de javascript, y en la funcion ready hago una consulta del input con su id $("#btnEjecuta").click y le digo cuando haga click ejecuta esta funcion.

Y listo manejo los eventos fuera de los input (esto me permite el desacople de los componentes visuales con su control de eventos).

Me gustaria seguir poniendoles ejemplo pues tengo muchos hecho con este maravilloso framework, pero les voy a comprtir el ejemplo completo donde pueden ponerle efectos a sus imagenes, me gustaria enseñarles una aplicacion con jsp jquery y servlet que hice para un sistema de geoposicion, eso se los debo sera para la proxima ha sido un gusto tomarme 30 minutos de descanso para compartirles esto.

PD: Descarguen el archivo adjunto y cámbienle la extensión a zip luego descompriman y prueben el poder de javascript ;)

No se olviden de comentar o incluir ejemplos que tengan...

Ate,
Byron Segovia
SCJP 6 - SCWCD JEE 5 - OCPBCD JEE5 - OCA 11G
Líder de Depto. De Investigación Y Desarrollo De Sistemas Informáticos
"Cuando está bien hecho, el software es invisible"
www.cenfortec.jimdo.com

Comentarios

OK

Imagen de bsegovia

8) Ok men gracias por el dato...

Byron Segovia
Programador WEB
"Cuando está bien hecho, el software es invisible"