Post on 13-Jan-2015
description
Introducción JQueryJavaScript Query
Temario
• ¿Qué es JQuery?• ¿Qué es DOM?• ¿Por qué usar JQuery?• Frameworks JS y JQuery• Referencia API• Jquery Mobile• Plugins Destacados
¿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
¿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="text/javascript">
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>
• 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?
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
Referencia API (interfaz de programación de aplicaciones)
• Selectors• Events• Attributes• CSS• Traversing• Manipulation• Core• Effects• Ajax• Utilities• Deferred Object.
• 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)
• 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)
• 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)
• 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)
• Attributes (Atributos)– .attr(Atributo): Obtiene valor de atributo– .attr(Atributo,valor): Setea atributo
• $("#btn").attr("style","background-color:#f0f0f0");
– .removeAttr(atributo)• $("#btn").removeAttr("style”);
– .addClass(clase)• $("#btn").addClass(“claseCSS”);
– .removeClass(clase)• $("#btn").removeClass(“claseCSS”).addClass(“otraCl”);
Referencia API (interfaz de programación de aplicaciones)
• Attributes (Atributos)– .val(): Obtiene valor de elemento
• $("#InputText").val();
– .val(valor): Setea valor a elemento• $("#InputText").val(“Presentación”);
– .html(): Obtiene html de un elemento• <div id=“divPrueba”> Contenido </div>• $("# divPrueba ").html(); = “Contenido”
– .html(contenido): Setea valor a elemento• $("# divPrueba ").html(“Nuevo Contenido”);
Referencia API (interfaz de programación de aplicaciones)
• Core (Núcleo)– jQuery.noConflict(); desde versión 1.0
• $ jQuery• Muchas librerias utilizan $
Referencia API (interfaz de programación de aplicaciones)
.html
• 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
• 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)
• 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)
• 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, errorvalorAjax.error(function(){
alert(“El proceso no fue realizado de forma exitosa”);
});
Referencia API (interfaz de programación de aplicaciones)
• 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
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
Jquery Mobile
• Componentes UI
Plugins Destacados
Introducción Jquery
FIN