Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

jQuery

2,465 views

Published on

Material Teorico sobre jQuery de Universidad

Published in: Technology

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

×