Charla Jquery
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
1,934
On Slideshare
1,934
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
90
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

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