(RichInternet Applications) (Aplicaciones de internet ... · “jQueryisafastandconciseJavaScriptLibrary that simplifies HTML document traversing, event handling, animating, and Ajax

(Rich Internet Applications)

(Aplicaciones de internet enriquecidas).

JavaScript, jQuery, jQuery UI

� Es utilizado en los sitios y aplicaciones web para agregar funcionalidad.

� Utilizado en el lado del cliente para:◦ Hacer peticiones al servidor.◦ Realizar funciones específicas en las páginas y

aplicaciones.◦ Validación.◦ Entre otras características.

� Es considerado un lenguaje orientado a objetos (manipula del DOM).

� Dando como resultado: Sitios web y aplicaciones dinámicas con mejoras en la interfaz de usuario.

� Para insertar código JavaScript en undocumento HTML, se utiliza la etiqueta<script> agregándola en el encabezado deldocumento.

<script type="text/javascript">

//Código JavaScript

</script>

� Se agrega el atributo srcsrcsrcsrc a <script> el cual hace referencia a la ruta del archivo JavaScript � archivo.JS

<script type="text/javascript" src="ruta_archivoJS.jsruta_archivoJS.jsruta_archivoJS.jsruta_archivoJS.js">

</script>

� Es importante que poco a poco se vayaintroduciendo más a la programación conJavaScript apoyándose en libros, tutoriales yejemplos.◦ http://www.w3schools.com/js/

Para lo que se estará realizando con jQuery, esnecesario aprender lo básico de JavaScript como:◦ Variables.◦ Operadores.◦ Palabras reservadas.◦ Sintaxis.

� “jQuery is a fast and concise JavaScript Librarythat simplifies HTML document traversing,event handling, animating, and Ajaxinteractions for rapid web development.jQueryjQueryjQueryjQuery isisisis designeddesigneddesigneddesigned totototo changechangechangechange thethethethe waywaywayway thatthatthatthatyouyouyouyou writewritewritewrite JavaScriptJavaScriptJavaScriptJavaScript.” (http://jquery.com/).

� Visitar la documentación técnica para empezar a trabajar conjQueryjQueryjQueryjQuery.

� Para agregar la biblioteca jQuery a undocumento HTML, página web o aplicaciónweb, tenemos 2 formas:1. Descargar el archivo .JS y almacenarlo en una

carpeta local.

2. Enlazar la biblioteca desde su sitio oficial.

1. Descargar el archivo .JS

2. Almacenarlo en la carpeta local:◦ Junto al resto de los archivos.

� o

◦ En una carpeta especial para JS’s en una carpeta deservidor (Content/Scripts/[aquí]).

Como es JavaScript, se utiliza la etiqueta<script>

<script type="text/javascript" src= "rutadel_archivorutadel_archivorutadel_archivorutadel_archivo_._._._.JSJSJSJS" > </script>

� Cuando se encuentra en la carpeta local o carpetadel servidor local.<script type="text/javascript" src="jqueryjqueryjqueryjquery----1.7.1.min.js1.7.1.min.js1.7.1.min.js1.7.1.min.js"> </script>

� Cuando se enlaza el JS desde el servidor de jQuery y/o Google Api’s.

<script type="text/javascript" src="httphttphttphttp://://://://code.jquery.com/jquerycode.jquery.com/jquerycode.jquery.com/jquerycode.jquery.com/jquery----1.7.1.min.js1.7.1.min.js1.7.1.min.js1.7.1.min.js"></script>

<script type="text/javascript" src="httphttphttphttp://://://://ajax.googleapis.com/ajax.googleapis.com/ajax.googleapis.com/ajax.googleapis.com/ajaxajaxajaxajax////libslibslibslibs////jqueryjqueryjqueryjquery/1.7.1/jquery./1.7.1/jquery./1.7.1/jquery./1.7.1/jquery.min.jsmin.jsmin.jsmin.js"></script>

� Cuando se quiere ejecutar funciones específicas al terminar de cargarse la página o DOM), se utiliza el evento jQuery.ready():

$(document).ready(function() {//Todo el código JavaScript que deberá ejecutarse

//al terminar de cargar el DOM

});

� jQuery utiliza el simbolo $$$$ como selector,

utilizado para manipular los elementos del DOM.

� Veamos algunos ejemplos como formas para seleccionar elementos.

� $($($($("div""div""div""div"); ); ); ); //Selecciona todos los elementos DIV.

� $($($($(“#“#“#“#elemetoXelemetoXelemetoXelemetoX""""); ); ); ); //Selecciona el elemento con el ID "elementoX".

� $($($($(“.“.“.“.miclasemiclasemiclasemiclase""""); ); ); ); //Selecciona todos los elementos con la clase "miclase".

� $($($($(““““p#elementoYp#elementoYp#elementoYp#elementoY""""); ); ); ); //Selecciona todos los elementos párrafo con el ID "elementoX".

� $($($($(“div “div “div “div p.claseXp.claseXp.claseXp.claseX""""); ); ); ); //Selecciona todos los elementos párrafo con la clase "claseX" que estén dentro de un DIV.

http://api.jquery.com/jQueryhttp://api.jquery.com/jQueryhttp://api.jquery.com/jQueryhttp://api.jquery.com/jQuery////

http://api.jquery.com/category/events/

� .Click()◦ Bind an event handler to the "click" JavaScript event,

or trigger that event on an element.

� .bind() » método◦ Attach a handler to an event for the elements.

� .live() » método◦ Attach an event handler for all elements which

match the current selector, now and in the future.

� .ready()◦ Specify a function to execute when the DOM is fully

loaded.

� Es importante recordar que la mayoría de los eventos deben ser manejados dentro del evento:

◦$(document).ready()

� En el caso del método Live() puedemanejarse fuera del evento Ready().

� Consulte http://api.jquery.com/category/events/ y controle algunos de los eventos más con jQuery, puede copiar los ejemplos ahí mostrados y/o complementar el ejemplo.

� jQuery incluye una multitud de métodos para manipular el DOM:◦ .prepend().prepend().prepend().prepend()� Insert content, specified by the parameter, to the beginning

of each element in the set of matched elements.◦ .append().append().append().append()� Insert content, specified by the parameter, to the end of

each element in the set of matched elements.◦ .empty().empty().empty().empty()� Remove all child nodes of the set of matched elements from

the DOM.◦ .html().html().html().html()� Get the HTML contents of the first element in the set of

matched elements.◦ ....valvalvalval()()()()� Get the current value of the first element in the set of

matched elements.

http://api.jquery.com/category/manipulation/http://api.jquery.com/category/manipulation/http://api.jquery.com/category/manipulation/http://api.jquery.com/category/manipulation/

� Consultehttp://api.jquery.com/category/manipulation/ y realice ejemplos con algunas funcionesmás con jQuery para manipular el DOM,puede copiar los ejemplos ahí mostrados y/ocomplementar el ejemplo.

� jQuery incluye diferentes formas de trabajo con AJAX >> httphttphttphttp://://://://api.jquery.com/category/ajax/api.jquery.com/category/ajax/api.jquery.com/category/ajax/api.jquery.com/category/ajax/

� Donde el método principal es jQuery.ajax()◦ Perform an asynchronous HTTP (Ajax) request.

� Mostraremos un ejemplo básico y continuará por su propia cuenta.

«contenedor principal»

Inicio | Información | Acerca de

inicio.html informacion.html acercade.html

NotaNotaNotaNota: Este es un ejemplo que se ejecuta de forma locallocallocallocal, por lo tanto puede no ejecutarse correctamente en Chrome, pruebe con otro navegador como Firefox.

� Consulte httphttphttphttp:::://api//api//api//api....jqueryjqueryjqueryjquery....comcomcomcom//// y apoyándosecon la documentación técnicahttphttphttphttp:::://docs//docs//docs//docs....jqueryjqueryjqueryjquery....comcomcomcom//// y realice sus propiosejemplos y ejercicios con jQuery y apliquelos aun caso práctico como el proyecto de lafinanciera en el navegador web.

� Consulte el ejemplo de proyecto con ASP.NETMVC 2 donde se integra parte de sufuncionalidad con jQuery (AJAX + JSON).

◦ » http://bit.ly/da3-archs Archivo: Agencia2012.zip

� “jQuery UI provides abstractions for low-levelinteraction and animation, advanced effectsand high-level, themeable widgets, built ontop of the jQuery JavaScript Library, that youcan use to build highly interactive webapplications.” (http://jqueryui.com/).

� Visitar la documentación técnica para empezar a trabajar con jQueryjQueryjQueryjQueryUIUIUIUI »»»» http://jqueryui.com/demos.

� jQuery UI está disponible en diferentes temaspredeterminados o puede personalizarse unonuevo y descargarse.http://jqueryui.com/themeroller/

� Elegir el tema y componentes a descargar en jQuery UI.

� Extraer todo el contenido del archivo zip.

� La versión mostrada en este ejemplo es jquery-ui-1.8.17

La carpeta jquery-ui-1.8.17.custom contiene las carpetas:

� csscsscsscss: contiene la carpeta del tema seleccionado(archivo css e imágenes del tema).

� developmentdevelopmentdevelopmentdevelopment----bundlebundlebundlebundle: carpeta que contienedemos, ayuda, bibliotecas externas, temas (basey el seleccionado divididos en diferentes css) y lacarpeta UI que contiene todos los componentesde jQuery por separado.

� jjjjssss: Carpeta que contiene el archivo jqueryjqueryjqueryjquery----uiuiuiui----1111....8888....17171717....customcustomcustomcustom....minminminmin....jsjsjsjs quequequeque debedebedebedebe enlazarseenlazarseenlazarseenlazarse enenenen loslosloslosdocdocdocdoc.... HTMLHTMLHTMLHTML el cual contiene todos loscomponentes de jQuery UI, contiene también elarchivo de jQuery.

� Ya desempaquetado el jQuery UI puedecopiarse toda la carpeta a la ubicación dondese utilizará.

� O

� Copiar los archivos necesarios como:

� Para cambiar la apariencia del documentoHTML con jQuery UI se hace desde código JS,aunque pueden utilizarse los estilosdirectamente en el código HTML.

� Cualquier elemento HTML puedetransformarse su apariencia a botón.

� Cualquier elemento HTML puedetransformarse su apariencia a botón.

� Queda a consideración de cada uno continuarcon jQuery UI, toda la información necesariase encuentra en línea con ejemplos yexplicación, también se encuentra en losarchivos de ayuda y demos descargados.

� http://jqueryui.com/demos/