Introducción JQuery JavaScript Query
Temario <ul><li>¿Qué es JQuery? </li></ul><ul><li>¿Qué es DOM? </li></ul><ul><li>¿Por qué usar JQuery? </li></ul><ul><li>F...
¿Qué es JQuery? <ul><li>Framework JavaScript creado por Jhon Resig en el año 2005 y presentado el 2006. </li></ul><ul><li>...
¿Qué es DOM? <ul><li>DOM  (Document Object Model – Modelo de objetos del documento). </li></ul><ul><li>Interfaz de program...
<ul><li>Mejoramiento sitios y sistemas web </li></ul><ul><li>Amplia variedad de características </li></ul><ul><li>Sintaxis...
<ul><li>USABILIDAD </li></ul><ul><li>Facilidad de aprendizaje  </li></ul><ul><li>Facilidad de uso  </li></ul><ul><li>Flexi...
Frameworks JS y JQuery Fuente :  http://www.webappers.com/
Frameworks JS y JQuery Fuente :  http://www.webappers.com/
Referencia API ( interfaz de programación de aplicaciones ) <ul><li>Selectors </li></ul><ul><li>Events </li></ul><ul><li>A...
<ul><li>Selectors (Selectores) </li></ul><ul><ul><li>Basic (Básicos):   </li></ul></ul><ul><ul><ul><li>Seleccionar todos  ...
<ul><li>Selectors (Selectores) </li></ul><ul><ul><li>Hierarchy (Jerarquía):   </li></ul></ul><ul><ul><ul><li>Seleccionar  ...
<ul><li>Events (Eventos) </li></ul><ul><ul><li>Document Loading (Carga de documento):   </li></ul></ul><ul><ul><ul><li>$(d...
<ul><li>Events (Eventos) </li></ul><ul><ul><li>Mouse events (Eventos del Mouse):   </li></ul></ul><ul><ul><ul><li>click, d...
<ul><li>Attributes (Atributos) </li></ul><ul><ul><li>.attr(Atributo):  Obtiene valor de atributo </li></ul></ul><ul><ul><l...
<ul><li>Attributes (Atributos) </li></ul><ul><ul><li>.val():  Obtiene valor de elemento </li></ul></ul><ul><ul><ul><li>$(&...
<ul><li>Core (Núcleo) </li></ul><ul><ul><li>jQuery.noConflict();     desde versión 1.0 </li></ul></ul><ul><ul><ul><li>$  ...
<ul><li>Core (Núcleo) </li></ul><ul><ul><li>Solución : Reemplazar $ por otro carácter </li></ul></ul><ul><ul><ul><li>var j...
<ul><li>Effects (Efectos) </li></ul><ul><ul><li>Básicos:  hide(), show(), toggle() </li></ul></ul><ul><ul><li>Fading:  fad...
<ul><li>Effects (Efectos) </li></ul><ul><ul><li>Callbacks : Secuencia de llamada a funciones. </li></ul></ul><ul><ul><ul><...
<ul><li>Ajax </li></ul><ul><ul><li>$.get(url,parameters,function) </li></ul></ul><ul><ul><ul><li>Ejemplo :  </li></ul></ul...
<ul><li>Ajax </li></ul><ul><ul><li>$. getJSON() : carga *JSON datos desde server </li></ul></ul><ul><ul><li>$.getScript() ...
Jquery Mobile <ul><li>Framework para Smartphones y Tablets </li></ul><ul><li>Construido en base al núcleo de JQuery </li><...
Jquery Mobile <ul><li>Componentes UI </li></ul>
Plugins Destacados
Introducción Jquery <ul><li>FIN </li></ul>
Upcoming SlideShare
Loading in...5
×

Charla Jquery

1,796

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
1,796
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
112
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Charla Jquery

  1. 1. Introducción JQuery JavaScript Query
  2. 2. Temario <ul><li>¿Qué es JQuery? </li></ul><ul><li>¿Qué es DOM? </li></ul><ul><li>¿Por qué usar JQuery? </li></ul><ul><li>Frameworks JS y JQuery </li></ul><ul><li>Referencia API </li></ul><ul><li>Jquery Mobile </li></ul><ul><li>Plugins Destacados </li></ul>
  3. 3. ¿Qué es JQuery? <ul><li>Framework JavaScript creado por Jhon Resig en el año 2005 y presentado el 2006. </li></ul><ul><li>Reunió una serie de funciones para que por medio de programación fuera sencillo encontrar o “consultar” elementos en una página Web y asignarles comportamientos. </li></ul><ul><li>JQuery = JavaScript Query. </li></ul><ul><li>Enero 2006: </li></ul><ul><ul><li>Modificaciones DOM </li></ul></ul><ul><ul><li>Animaciones básicas </li></ul></ul>
  4. 4. ¿Qué es DOM? <ul><li>DOM (Document Object Model – Modelo de objetos del documento). </li></ul><ul><li>Interfaz de programación para manipular dinámicamente contenido estructurado dentro de un documento HTML mediante lenguaje EMCAScript (JavaScript). </li></ul><ul><li>Ejemplo: </li></ul><ul><ul><li><html> </li></ul></ul><ul><ul><li><head> </li></ul></ul><ul><ul><li><script type=&quot;text/javascript&quot; > </li></ul></ul><ul><ul><li>function muestraValor(){ </li></ul></ul><ul><ul><li>valor = document.getElementById( “inputDemo”).value; </li></ul></ul><ul><ul><li>alert(valor); </li></ul></ul><ul><ul><li>} </li></ul></ul><ul><ul><li></script> </li></ul></ul><ul><ul><li></head> </li></ul></ul><ul><ul><li><body onLoad= “muestraValor()”> </li></ul></ul><ul><ul><li><input type= “text” id=“inputDemo” value=“Valor del inputText” /> </li></ul></ul><ul><ul><li></body> </li></ul></ul><ul><ul><li></html> </li></ul></ul>
  5. 5. <ul><li>Mejoramiento sitios y sistemas web </li></ul><ul><li>Amplia variedad de características </li></ul><ul><li>Sintaxis fácil de aprender </li></ul><ul><li>Robusto en compatibilidad multiplataforma </li></ul><ul><li>Un solo archivo compacto </li></ul><ul><li>Cientos de plugins </li></ul><ul><li>Soporte </li></ul><ul><li>USABILIDAD </li></ul>¿Por qué usar JQuery?
  6. 6. <ul><li>USABILIDAD </li></ul><ul><li>Facilidad de aprendizaje </li></ul><ul><li>Facilidad de uso </li></ul><ul><li>Flexibilidad </li></ul><ul><li>Robustez </li></ul><ul><ul><li>“ La usabilidad demuestra reducciones del ciclo de desarrollo de los productos de 33-50% (Bosert 1991). ” </li></ul></ul><ul><ul><li>jQuery : “write less, do more.” </li></ul></ul>¿Por qué usar JQuery? es la facilidad con que las personas pueden utilizar una herramienta
  7. 7. Frameworks JS y JQuery Fuente : http://www.webappers.com/
  8. 8. Frameworks JS y JQuery Fuente : http://www.webappers.com/
  9. 9. Referencia API ( interfaz de programación de aplicaciones ) <ul><li>Selectors </li></ul><ul><li>Events </li></ul><ul><li>Attributes </li></ul><ul><li>CSS </li></ul><ul><li>Traversing </li></ul><ul><li>Manipulation </li></ul><ul><li>Core </li></ul><ul><li>Effects </li></ul><ul><li>Ajax </li></ul><ul><li>Utilities </li></ul><ul><li>Deferred Object. </li></ul>
  10. 10. <ul><li>Selectors (Selectores) </li></ul><ul><ul><li>Basic (Básicos): </li></ul></ul><ul><ul><ul><li>Seleccionar todos los elementos : $(“*”) </li></ul></ul></ul><ul><ul><ul><li>Seleccionar un elemento por tag : $(“div”) </li></ul></ul></ul><ul><ul><ul><li>Seleccionar por clase : $(“.class”) </li></ul></ul></ul><ul><ul><ul><li>Seleccionar por ID : $(“#id”) </li></ul></ul></ul><ul><ul><ul><li>Selección Multiple : $(“#id,.class,SelectorN”) </li></ul></ul></ul>Referencia API ( interfaz de programación de aplicaciones )
  11. 11. <ul><li>Selectors (Selectores) </li></ul><ul><ul><li>Hierarchy (Jerarquía): </li></ul></ul><ul><ul><ul><li>Seleccionar Hijo: $(“padre > hijo”) </li></ul></ul></ul><ul><ul><ul><li>Por Descendencia : $(“ ancestro descendiente ” ) </li></ul></ul></ul><ul><ul><ul><li>Adyacente siguiente: $(“anterior + siguiente”) </li></ul></ul></ul><ul><ul><ul><li>Elementos después de Selector: $(“#id ~ div”) </li></ul></ul></ul>Referencia API ( interfaz de programación de aplicaciones )
  12. 12. <ul><li>Events (Eventos) </li></ul><ul><ul><li>Document Loading (Carga de documento): </li></ul></ul><ul><ul><ul><li>$(document).ready (function(){ acción a realizar }); </li></ul></ul></ul><ul><ul><ul><ul><li>Abreviado : $(function(){ acción a realizar }); </li></ul></ul></ul></ul><ul><ul><ul><li>$(window).load (function(){ acción a realizar }); </li></ul></ul></ul><ul><ul><ul><li>$(window).unload (function(){ acción a realizar }); </li></ul></ul></ul><ul><li>Diferencias entre $(document).ready y $(window).load </li></ul><ul><ul><ul><li>$(document).ready  Jerarquia DOM </li></ul></ul></ul><ul><ul><ul><li>$(window).load  Documento completo Contenido(imágenes,textos,etc) </li></ul></ul></ul>Referencia API ( interfaz de programación de aplicaciones )
  13. 13. <ul><li>Events (Eventos) </li></ul><ul><ul><li>Mouse events (Eventos del Mouse): </li></ul></ul><ul><ul><ul><li>click, dblclick, focusin, focusout , hover ……. </li></ul></ul></ul><ul><ul><li>Form Events (Eventos de Formulario) </li></ul></ul><ul><ul><ul><li>blur, change, focus, select, submit </li></ul></ul></ul><ul><ul><li>Keyboard Events (Eventos de Teclado) </li></ul></ul><ul><ul><ul><li>keydown, keypress, keyup </li></ul></ul></ul><ul><ul><li>Otros (Event Object, Browser Events) </li></ul></ul>Referencia API ( interfaz de programación de aplicaciones )
  14. 14. <ul><li>Attributes (Atributos) </li></ul><ul><ul><li>.attr(Atributo): Obtiene valor de atributo </li></ul></ul><ul><ul><li>.attr(Atributo,valor): Setea atributo </li></ul></ul><ul><ul><ul><li>$(&quot;#btn&quot;).attr(&quot;style&quot;,&quot;background-color:#f0f0f0&quot;); </li></ul></ul></ul><ul><ul><li>.removeAttr(atributo) </li></ul></ul><ul><ul><ul><li>$(&quot;#btn&quot;).removeAttr(&quot;style ” ); </li></ul></ul></ul><ul><ul><li>.addClass(clase) </li></ul></ul><ul><ul><ul><li>$(&quot;#btn&quot;).addClass( “ claseCSS ” ); </li></ul></ul></ul><ul><ul><li>.removeClass(clase) </li></ul></ul><ul><ul><ul><li>$(&quot;#btn&quot;).removeClass( “ claseCSS ” ).addClass( “ otraCl ” ); </li></ul></ul></ul>Referencia API ( interfaz de programación de aplicaciones )
  15. 15. <ul><li>Attributes (Atributos) </li></ul><ul><ul><li>.val(): Obtiene valor de elemento </li></ul></ul><ul><ul><ul><li>$(&quot;#InputText&quot;).val(); </li></ul></ul></ul><ul><ul><li>.val(valor): Setea valor a elemento </li></ul></ul><ul><ul><ul><li>$(&quot;#InputText&quot;).val( “ Presentación ” ); </li></ul></ul></ul><ul><ul><li>.html(): Obtiene html de un elemento </li></ul></ul><ul><ul><ul><li><div id= “ divPrueba ” > Contenido </div> </li></ul></ul></ul><ul><ul><ul><li>$(&quot;# divPrueba &quot;).html(); = “ Contenido ” </li></ul></ul></ul><ul><ul><li>.html(contenido): Setea valor a elemento </li></ul></ul><ul><ul><ul><li>$(&quot;# divPrueba &quot;).html( “ Nuevo Contenido ” ); </li></ul></ul></ul>Referencia API ( interfaz de programación de aplicaciones )
  16. 16. <ul><li>Core (Núcleo) </li></ul><ul><ul><li>jQuery.noConflict();  desde versión 1.0 </li></ul></ul><ul><ul><ul><li>$  jQuery </li></ul></ul></ul><ul><ul><ul><li>Muchas librerias utilizan $ </li></ul></ul></ul>Referencia API ( interfaz de programación de aplicaciones ) . html
  17. 17. <ul><li>Core (Núcleo) </li></ul><ul><ul><li>Solución : Reemplazar $ por otro carácter </li></ul></ul><ul><ul><ul><li>var j = jQuery.noConflict(); </li></ul></ul></ul><ul><ul><ul><li>j( “ #inputText ” ).val( “ Ejemplo jQuery.noConflict(); ” ); </li></ul></ul></ul>Referencia API ( interfaz de programación de aplicaciones ) . html
  18. 18. <ul><li>Effects (Efectos) </li></ul><ul><ul><li>Básicos: hide(), show(), toggle() </li></ul></ul><ul><ul><li>Fading: fadeIn(), fadeOut(), fadeTo(), fadeToggle() </li></ul></ul><ul><ul><li>Sliding: slideDown(), slideUp(), slideToogle() </li></ul></ul><ul><ul><li>Custom: animate(), delay(), stop() …… </li></ul></ul><ul><ul><li>Más efectos ?  JQueryUI </li></ul></ul>Referencia API ( interfaz de programación de aplicaciones )
  19. 19. <ul><li>Effects (Efectos) </li></ul><ul><ul><li>Callbacks : Secuencia de llamada a funciones. </li></ul></ul><ul><ul><ul><li>Ejemplo: </li></ul></ul></ul><ul><ul><ul><ul><li>var funcionCallback = function(){ </li></ul></ul></ul></ul><ul><ul><ul><ul><li>alert(“Fin de ejecución.”); </li></ul></ul></ul></ul><ul><ul><ul><ul><li>}; </li></ul></ul></ul></ul><ul><ul><ul><ul><li>var efecto = function(){ </li></ul></ul></ul></ul><ul><ul><ul><ul><li>$(“#ID”).fadeOut(300, funcionCallback ); </li></ul></ul></ul></ul><ul><ul><ul><ul><li>} ; </li></ul></ul></ul></ul><ul><ul><ul><ul><li>efecto(); </li></ul></ul></ul></ul>Referencia API ( interfaz de programación de aplicaciones )
  20. 20. <ul><li>Ajax </li></ul><ul><ul><li>$.get(url,parameters,function) </li></ul></ul><ul><ul><ul><li>Ejemplo : </li></ul></ul></ul><ul><ul><ul><ul><li>var valorAjax = $.get(“ pagina.jsp ” ,{ valor: ” PRO1 ” }, </li></ul></ul></ul></ul><ul><ul><ul><ul><li>function(data){ </li></ul></ul></ul></ul><ul><ul><ul><ul><li>$(“#divPrueba”).html(data); </li></ul></ul></ul></ul><ul><ul><ul><ul><li>}); </li></ul></ul></ul></ul><ul><ul><ul><ul><li>¿Puedo manejar la respuesta de un AJAX? </li></ul></ul></ul></ul><ul><ul><ul><ul><li>- success, complete, error </li></ul></ul></ul></ul><ul><ul><ul><ul><li>valorAjax.error(function(){ </li></ul></ul></ul></ul><ul><ul><ul><ul><li>alert(“El proceso no fue realizado de forma exitosa”); </li></ul></ul></ul></ul><ul><ul><ul><ul><li>}); </li></ul></ul></ul></ul>Referencia API ( interfaz de programación de aplicaciones )
  21. 21. <ul><li>Ajax </li></ul><ul><ul><li>$. getJSON() : carga *JSON datos desde server </li></ul></ul><ul><ul><li>$.getScript() : Carga archivo JS desde server </li></ul></ul><ul><ul><li>.load() : Carga los datos HTML dentro de un el. </li></ul></ul><ul><ul><ul><li>$(“#DIV”).load(“documento.html”); </li></ul></ul></ul><ul><ul><li>$.post(): Carga datos de server con POST request. </li></ul></ul>Referencia API ( interfaz de programación de aplicaciones ) *JSON : JavaScript Object Notation
  22. 22. Jquery Mobile <ul><li>Framework para Smartphones y Tablets </li></ul><ul><li>Construido en base al núcleo de JQuery </li></ul><ul><li>Compatible con las principales plataformas móviles </li></ul><ul><li>Simplicidad </li></ul><ul><li>Mejora Progresiva </li></ul><ul><li>Accesibilidad </li></ul><ul><li>Peso Ligero </li></ul><ul><li>Tematización </li></ul>
  23. 23. Jquery Mobile <ul><li>Componentes UI </li></ul>
  24. 24. Plugins Destacados
  25. 25. Introducción Jquery <ul><li>FIN </li></ul>
  1. A particular slide catching your eye?

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

×