(RichInternet Applications) (Aplicaciones de internet ... ·...
Transcript of (RichInternet Applications) (Aplicaciones de internet ... ·...
� 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////
� .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.
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/
� 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.