jQueryDesarrollo de aplicaciones web
jQuery●   Es un framework Javascript●   El proposito es facilitar la inclusion de    Javascript en un sitio o aplicacion w...
jQuery●   Existen multiples alternativas a jQuery●   Sin embargo, hoy dia es una de las mas    populares en el mercado●   ...
Utilizando jQuery●   Para utilizarlo, debemos incluirlo en las paginas    en las que vamos a utilizarso●   Podemos descarg...
Utilizando jQuery●   Debemos agregar en el head esta referencia:    <head>      <title>jQuery test</title>      <script ty...
Hello world!●   Este es un ejemplo de uso de jQuery:    <div id="divTest1"></div>    <script type="text/javascript">      ...
Hello world!●   El equivalente sin jQuery, es un poco mas largo    <div id="divTest2"></div>    <script type="text/javascr...
Ready event●   El ejemplo anterior manipula el contenido de la    pagina●   Es buena practica esperar a que el documento  ...
Ready event
Ready event (funcion anonima)
Encadenamiento●   Una caracteristica interesante de jQuery, es    que la mayoria de los metodos, retornan un    objeto jQu...
Encadenamiento●   Podemos hacer que el codigo se vea mas    intuitivo, como por ejemplo:
Selectores●   Una de las tareas mas comunes al usar    Javascript, es modificar el contenido de la    pagina●   Pero para ...
#id●   Utiliza el identificador de un elemento en la    pagina, el cual debe ser unico
.class●   Permite seleccionar los elementos de una    determinada clase de estilo
element selector●   Tambien es posible seleccionar todos los    elementos de la pagina de un determinado tipo    ●   $("a"...
Selectores basados en atributos●   Ademas de los selectores anteriores, podemos    realizar selecciones de elementos basad...
Filtramos por el valor de atributo●   Podemos utilizar operadores para filtrar los    valores de los atributos
Selectores padre/hijo●   jQuery permite realizar selecciones de    elementos, basados en el elemento padre●   Tenemos dos ...
Selectores padre/hijo●   Para seleccionar los elementos cuyo padre    directo es de un determinado tipo:      $("div > a")...
DOM (document object model)●   Uno de los principales aspectos de jQuery, es    que permite manipular el DOM del documento...
Manipulando el contenido●   La forma mas simple de manipulacion, es    obtener y guardar texto, valores y html●   Son simi...
Manipulando el contenido
Manipulando el contenido
Manipulando atributos●   En forma similar al contenido, podemos    manipular atributos, a traves del metodo attr()●   Por ...
Manipulando atributos●   Para modificar el valor del atributo, agregamos    un parametro extra
Manipulando atributos●   Tambien podemos manipular muchos atributos    juntos, utilizando un map
Manipulando clases CSS●   A traves de metodos como los anteriores,    podemos manipular tambien las clases de    estilo qu...
Manipulando clases CSS●   Tenemos los metodos    ●   hasClass() que retorna si un elemento tiene una        clase    ●   a...
Manipulando clases CSS
Manipulando clases CSS●   El codigo anterior, controla si un elemento tiene    una clase, si la tiene la elimina, si no la...
Manipulando clases CSS●   El mecanismo de selectores, permite que la    manipulacion de clases aplique sobre un    conjunt...
Manipulando clases CSS●   Lo anterior genera una imagen como la    siguiente:
Manipulando el DOM●   Los metodos append() y prepend(), permiten    agregar elementos dentro de otros elementos,    al fin...
Manipulando el DOM●   Ambos metodos reciben una cantidad infinita    de parametros:
Manipulando el DOM●   Tambien disponemos de los metodos before() y    after(), que son muy similares a los anteriores.●   ...
Manipulando el DOM●   Tambien tenemos los metodos remove() y    empty()●   Empty permite eliminar todos los hijos de un   ...
Eventos●   jQuery provee un mecanismo interesante para    asociar codigo en funciones, a elementos en la    pagina●   Por ...
binding●   jQuery provee los metodos bind() y unbind()    para atachear y desatachear funciones a    conjuntos de elementos
binding●   Cuando jQuery invoque el evento, pasara    informacion relativa al mismo como primer    argumento●   Por ejempl...
binding●   Por ejemplo, con el caso de un evento de    mouse, podemos obtener:
binding●   Tambien podemos pasar informacion propia, y    obtenerla dentro de la funcion, en el objeto que    representa e...
binding●   Con el metodo unbind(), podemos remover las    subscripciones a funciones que tienen los    elementos●   Por ej...
Que es AJAX?●   Javascript para la interacción con el browser y    para responder ante eventos●   DOM para acceder y modif...
Funcionamiento
Funcionamiento
load()●   Una de las formas mas simples de cargar datos    asincronicamente en jQuery, es a traves del    metodo load()●  ...
load()●   Indicando cual es el elemento en el que    queremos cargar los datos, podemos utilizar el    metodo load():
load()●   Tambien podemos seleccionar parte de la    pagina a cargar, usando un selector como parte    de load():
get() / post()●   Estos metodos permiten enviar y recibir    paquetes HTTP contra el servidor●   Ambos son metodos estatic...
get() / post()●   Estos metodos reciben una URL como    parametro, indicando donde queremos acceder●   Si queremos hacer a...
parametros●   En caso de que lo necesitemos, podemos    enviar parametros al servidor, a traves de un    mapa
JSON●   JavaScript Object Notation●   Es un subconjunto de JavaScript●   Puede ser parseado por un parser JavaScript●   Pu...
JSON●   Es legible tanto por un humano como por una    maquina●   Tiene soporte de unicode●   Es autodocumentable●   Es ma...
JSON●   Puede ser usado directamente en Javascript, para    ser convertido a una estructura Javascript●   Por ejemplo, pod...
jQuery + JSON + Java (Web)●   Los tres elementos pueden ser combinados para    construir aplicaciones web empresariales●  ...
JSON + Servlets●   Una forma simple de exponer informacion    desde el servidor, es utilizar Servlets (o    servicios REST...
google-gson●   Se encarga de la serializacion/deserializacion    JSON-JAVA●   Gson gson = new Gson();●   gson.toJson(1); =...
google-gson●   int one = gson.fromJson("1", int.class);●   Integer one = gson.fromJson("1", Integer.class);●   Long one = ...
jQuery UI●   Es un framework construido sobre jQuery, que    provee efectos de animacion, widgets    (controles), efectos ...
jQuery UI – Ejemplo sencillo●   Para agregar soporte en una pagina,    agregamos al head:    ●   <link type="text/css" hre...
jQuery UI – Ejemplo sencillo●   Supongamos que queremos agregar un date    picker a la pagina●   Agregamos lo siguiente:  ...
jQuery UI – Ejemplo sencillo
jQuery
jQuery
jQuery
jQuery
Upcoming SlideShare
Loading in...5
×

jQuery

1,970

Published on

Material Teorico sobre jQuery de Universidad

Published in: Technology
1 Comment
0 Likes
Statistics
Notes
  • Be the first to like this

No Downloads
Views
Total Views
1,970
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
127
Comments
1
Likes
0
Embeds 0
No embeds

No notes for slide

jQuery

  1. 1. jQueryDesarrollo de aplicaciones web
  2. 2. jQuery● Es un framework Javascript● El proposito es facilitar la inclusion de Javascript en un sitio o aplicacion web● Podemos verlo como una capa de abstraccion ● Transforma muchas lineas de codigo Javascript, en funciones mas simples● NO reemplaza a Javascript, sino que simplifica su sintaxis
  3. 3. jQuery● Existen multiples alternativas a jQuery● Sin embargo, hoy dia es una de las mas populares en el mercado● Asimismo es una de las mas extensibles, pudiendose encontrar plugins para casi cualquier tarea en la web
  4. 4. Utilizando jQuery● Para utilizarlo, debemos incluirlo en las paginas en las que vamos a utilizarso● Podemos descargar el framework desde www.jquery.com● Agregamos una referencia al archivo descargado, en el head de la pagina ● <script type="text/javascript" src="jquery-1.5.1.js"></script>
  5. 5. Utilizando jQuery● Debemos agregar en el head esta referencia: <head> <title>jQuery test</title> <script type="text/javascript" src="jquery-1.5.1.js"></script> </head>
  6. 6. Hello world!● Este es un ejemplo de uso de jQuery: <div id="divTest1"></div> <script type="text/javascript"> $("#divTest1").text("Hello, world!"); </script>● Esto carga en el divTest1, el string “Hello, world!”
  7. 7. Hello world!● El equivalente sin jQuery, es un poco mas largo <div id="divTest2"></div> <script type="text/javascript"> document.getElementById("divTest2").innerHTML = "Hello, world!"; </script>● Ademas, es dependiente del browser
  8. 8. Ready event● El ejemplo anterior manipula el contenido de la pagina● Es buena practica esperar a que el documento este cargado y pronto para ser utilizado● Esto permite ● Que las estructuras de la pagina esten cargadas antes de comenzar a utilizarlas ● Que el codigo Javascript pueda ser colocado al comienzo de la pagina
  9. 9. Ready event
  10. 10. Ready event (funcion anonima)
  11. 11. Encadenamiento● Una caracteristica interesante de jQuery, es que la mayoria de los metodos, retornan un objeto jQuery● Esto permite realizar cadenas de invocaciones, como por ejemplo:
  12. 12. Encadenamiento● Podemos hacer que el codigo se vea mas intuitivo, como por ejemplo:
  13. 13. Selectores● Una de las tareas mas comunes al usar Javascript, es modificar el contenido de la pagina● Pero para hacer esto, necesitamos encontrar lo que queremos cambiar● Es para esto que se utilizan los selectores● Para elegir un conjunto de elementos, hacemos $(<query para seleccionar>)
  14. 14. #id● Utiliza el identificador de un elemento en la pagina, el cual debe ser unico
  15. 15. .class● Permite seleccionar los elementos de una determinada clase de estilo
  16. 16. element selector● Tambien es posible seleccionar todos los elementos de la pagina de un determinado tipo ● $("a") ● $("div")● Tambien podemos combinar los ultimos dos selectores ● $("span.bold").css("font-weight", "bold");
  17. 17. Selectores basados en atributos● Ademas de los selectores anteriores, podemos realizar selecciones de elementos basado en los atributos de estos elementos
  18. 18. Filtramos por el valor de atributo● Podemos utilizar operadores para filtrar los valores de los atributos
  19. 19. Selectores padre/hijo● jQuery permite realizar selecciones de elementos, basados en el elemento padre● Tenemos dos tipos ● Las selecciones basadas en el padre directo de un elemento ● Las selecciones que permiten filtrar por cualquier elementro ancestro del elemento buscado
  20. 20. Selectores padre/hijo● Para seleccionar los elementos cuyo padre directo es de un determinado tipo: $("div > a")● Para seleccionar los elementos que tenga algun padre de un determinado tipo: $("div a")
  21. 21. DOM (document object model)● Uno de los principales aspectos de jQuery, es que permite manipular el DOM del documento html● Es una forma de interactuar con el HTML/XML o XHTML de la pagina● jQuery viene con una serie de metodos que permiten una manipulcion sencilla de los componentes del documento
  22. 22. Manipulando el contenido● La forma mas simple de manipulacion, es obtener y guardar texto, valores y html● Son similares, pero no lo mismo ● text: es una representacion textual del inner content del elemento ● values: es para elementos del formulario ● html: es una representacion textual, pero incluyendo markup html
  23. 23. Manipulando el contenido
  24. 24. Manipulando el contenido
  25. 25. Manipulando atributos● En forma similar al contenido, podemos manipular atributos, a traves del metodo attr()● Por ejemplo:
  26. 26. Manipulando atributos● Para modificar el valor del atributo, agregamos un parametro extra
  27. 27. Manipulando atributos● Tambien podemos manipular muchos atributos juntos, utilizando un map
  28. 28. Manipulando clases CSS● A traves de metodos como los anteriores, podemos manipular tambien las clases de estilo que un elemento tiene asignadas● Supongamos que tenemos:
  29. 29. Manipulando clases CSS● Tenemos los metodos ● hasClass() que retorna si un elemento tiene una clase ● addClass() para agregar una clase a un elemento ● removeClass() para quitar una clase de un elemento
  30. 30. Manipulando clases CSS
  31. 31. Manipulando clases CSS● El codigo anterior, controla si un elemento tiene una clase, si la tiene la elimina, si no la tiene, se la establece● Como esto es una tarea muy comun, tenemos el metodo toggleClass() <a href="javascript:void(0);" onclick="$(this).toggleClass(bold);"> Toggle class </a>
  32. 32. Manipulando clases CSS● El mecanismo de selectores, permite que la manipulacion de clases aplique sobre un conjunto de elementos:
  33. 33. Manipulando clases CSS● Lo anterior genera una imagen como la siguiente:
  34. 34. Manipulando el DOM● Los metodos append() y prepend(), permiten agregar elementos dentro de otros elementos, al final y al principio, respectivamente:
  35. 35. Manipulando el DOM● Ambos metodos reciben una cantidad infinita de parametros:
  36. 36. Manipulando el DOM● Tambien disponemos de los metodos before() y after(), que son muy similares a los anteriores.● La diferencia es que permiten hacer inserciones en varios elementos a la vez
  37. 37. Manipulando el DOM● Tambien tenemos los metodos remove() y empty()● Empty permite eliminar todos los hijos de un determinado elemento $(#divTestArea1).empty()● Remove permite eliminar los elementos seleccionados $(#divTestArea1).remove()
  38. 38. Eventos● jQuery provee un mecanismo interesante para asociar codigo en funciones, a elementos en la pagina● Por ejemplo:
  39. 39. binding● jQuery provee los metodos bind() y unbind() para atachear y desatachear funciones a conjuntos de elementos
  40. 40. binding● Cuando jQuery invoque el evento, pasara informacion relativa al mismo como primer argumento● Por ejemplo, informacion sobre la posicion del mouse, puede encontrarse en este objeto, o que tecla del teclado se ha presionado● La informacion de referencia puede obtenerse aqui: http://api.jquery.com/event.which/
  41. 41. binding● Por ejemplo, con el caso de un evento de mouse, podemos obtener:
  42. 42. binding● Tambien podemos pasar informacion propia, y obtenerla dentro de la funcion, en el objeto que representa el evento:
  43. 43. binding● Con el metodo unbind(), podemos remover las subscripciones a funciones que tienen los elementos● Por ejemplo: $("a").unbind(); $("a").unbind("click doubleclick");
  44. 44. Que es AJAX?● Javascript para la interacción con el browser y para responder ante eventos● DOM para acceder y modificar la estructura del documento HTML● XML para representar los datos que viajan entre el servidor y el cliente● El objeto XMLHttpRequest para intercambiar datos XML asincronicamente con el servidor
  45. 45. Funcionamiento
  46. 46. Funcionamiento
  47. 47. load()● Una de las formas mas simples de cargar datos asincronicamente en jQuery, es a traves del metodo load()● Por ejemplo, supongamos que tenemos una pagina content.html
  48. 48. load()● Indicando cual es el elemento en el que queremos cargar los datos, podemos utilizar el metodo load():
  49. 49. load()● Tambien podemos seleccionar parte de la pagina a cargar, usando un selector como parte de load():
  50. 50. get() / post()● Estos metodos permiten enviar y recibir paquetes HTTP contra el servidor● Ambos son metodos estaticos, por lo que pueden ser usados en el objeto jQuery o directamente sin instancia:● jQuery.get() / jQuery.post()● $.get() / $.post()
  51. 51. get() / post()● Estos metodos reciben una URL como parametro, indicando donde queremos acceder● Si queremos hacer algo con el resultado, debemos utilizar una funcion de callback
  52. 52. parametros● En caso de que lo necesitemos, podemos enviar parametros al servidor, a traves de un mapa
  53. 53. JSON● JavaScript Object Notation● Es un subconjunto de JavaScript● Puede ser parseado por un parser JavaScript● Puede representar objetos primitivos o complejos● Pueden ser String, Objects, Booleans, Integers y Arrays● Un objeto:
  54. 54. JSON● Es legible tanto por un humano como por una maquina● Tiene soporte de unicode● Es autodocumentable● Es mas liviano que XML ● ver: http://json.org/example.html● Los algoritmos de parsing son eficientes, debido a la estructura estricta pero simple● Puede representar registros, listas y arboles
  55. 55. JSON● Puede ser usado directamente en Javascript, para ser convertido a una estructura Javascript● Por ejemplo, podemos tener: ● var data = eval(<JSON STRING>)● Luego, la variable data tendra la lista, la estructura o el valor primitivo que represente el string JSON● Podemos usarlo para acceder a campos por ejemplo ● alert(data.name);
  56. 56. jQuery + JSON + Java (Web)● Los tres elementos pueden ser combinados para construir aplicaciones web empresariales● jQuery, junto a su bibilioteca de widgets, puede utilizarse para construir las vistas de nuestra aplicacion● Los componentes Java (Servlets, Web services, EJBs) pueden utilizarse para implementar el backend server side de la aplicacion● JSON puede ser usado como formato de intercambio de datos
  57. 57. JSON + Servlets● Una forma simple de exponer informacion desde el servidor, es utilizar Servlets (o servicios REST) para enviar y recibir informacion● Necesitamos una forma simple de transformar objetos desde y hacia el formato JSON● Una libreria interesante, es google-gson, la cual provee mecanismos para convertir automaticamente desde y hacia JSON, objetos Java
  58. 58. google-gson● Se encarga de la serializacion/deserializacion JSON-JAVA● Gson gson = new Gson();● gson.toJson(1); ==> imprime 1● gson.toJson("abcd"); ==> imprime "abcd"● gson.toJson(new Long(10)); ==> imprime 10● int[] values = { 1 };● gson.toJson(values); ==> imprime [1]
  59. 59. google-gson● int one = gson.fromJson("1", int.class);● Integer one = gson.fromJson("1", Integer.class);● Long one = gson.fromJson("1", Long.class);● Boolean false = gson.fromJson("false", Boolean.class);● String str = gson.fromJson(""abc"", String.class);● String anotherStr = gson.fromJson("["abc"]", String.class);
  60. 60. jQuery UI● Es un framework construido sobre jQuery, que provee efectos de animacion, widgets (controles), efectos y temas● Puede ser usado para construir interfaces graficas con un alto nivel de interactividad y belleza grafica● Entrar a: ● http://jqueryui.com/ ● http://jqueryui.com/demos/
  61. 61. jQuery UI – Ejemplo sencillo● Para agregar soporte en una pagina, agregamos al head: ● <link type="text/css" href="css/themename/jquery- ui-1.8.14.custom.css" rel="Stylesheet" /> ● <script type="text/javascript" src="js/jquery- 1.4.4.min.js"></script> ● <script type="text/javascript" src="js/jquery-ui- 1.8.14.custom.min.js"></script>
  62. 62. jQuery UI – Ejemplo sencillo● Supongamos que queremos agregar un date picker a la pagina● Agregamos lo siguiente: <input type="text" name="date" id="date" />● Y luego, en la funcion onReady() $(#date).datepicker();● Y obtenemos:
  63. 63. jQuery UI – Ejemplo sencillo
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×