Test Api Slideshare

1. Javascript con
jQuery en Apex
Presentación:
Emmanuel Contreras

2. AGENDA
➔Introducción
◆ Qué es Css? Selectores Básicos
◆ Qué es Javascript?
◆ Frameworks Javascript
◆ Qué es jQuery?
◆ Características de Jquery
➔Introducción a jQuery
◆ Selectores Básicos
◆ Atributos
◆ Eventos
◆ Funciones útiles
➔Integrar jQuery y Css a nuestro HTML

3. Qué es CSS?
CSS es un lenguaje de hojas de estilos
creado para controlar el aspecto o
presentación de los documentos electrónicos
definidos con HTML y XHTML.
CSS es la mejor forma de separar los
contenidos y su presentación y es
imprescindible para crear páginas web
complejas.

4. Qué es CSS?
Selectores Básicos
● id representan 1 estilo para 1 único
elemento
sintaxis html id=”mi_id”
sintaxis css #mi_id{}
● class representan 1 estilo para varios
elementos.
sintaxis html class=”mi_clase”
sintaxis css .mi_clase{}

5. Qué es Javascript?
JavaScript es un lenguaje de programación que se utiliza principalmente
para crear páginas web dinámicas y permitir mejoras en la interfaz de
usuario.
Se utiliza principalmente del lado del cliente (client-side).
Técnicamente, JavaScript es un lenguaje de programación interpretado,
por lo que no es necesario compilar los programas para ejecutarlos. En
otras palabras, los programas escritos con JavaScript se pueden probar
directamente en cualquier navegador moderno sin necesidad de procesos
intermedios.
A pesar de su nombre, JavaScript no guarda ninguna relación directa con
el lenguaje de programación Java.

6. Frameworks Javascript
● jQuery (usado en Apex)
● Mootools (usado en Joomla)
● Prototype (usando en Magento)
● YUI (Yahoo! UI Library)
● DOJO
● RICO

7. Qué es Jquery?
● Es un framework javascript creado por
Jhon Resig en el año 2005 y presentado
en el 2006.
● Este framework permite una facil
manipulacion de los documentos HTML y
la Estructura DOM (Document Object
Model)
El DOM es la estructura de objetos que genera el navegador cuando
se carga un documento y se puede alterar mediante Javascript para
cambiar dinámicamente los contenidos y aspecto de la página.

8. Características de Jquery
● Acceder al DOM.
● Modificar la apariencia de la página.
● Modificar el contenido de la página.
● Manejar eventos de los elementos de la página.
● Crear efectos visuales.
● Manipular estilos CSS (Cascading Style Sheets).
Características de Jquery-AJAX
● Manipulación de arrays, iteración de arrays, operar con objetos.
● Manipulación en JSON (JavaScript Object Notation).
● Programación bajo el paradigma no invasivo.
● Un simple pero potente sistema de plugins que permite extender a
jQuery.

9. Introducción a jQuery
Selectores:
Seleccionar todos los elementos : $(“*”)
Seleccionar un elemento por tag : $(“div”), $(“p”)
Seleccionar por clase : $(“.class”)
Seleccionar por ID : $(“#id”)
Selección Múltiple : $(“#id, .class, selector_n”)
Seleccionar elemento descendiente $(“.class div”)
Seleccionar elemento hijo: $(“ul > li”)
La etiqueta $ es un alias de jQuery(), que recibe como parámetro
una expresión CSS o el nombre de una etiqueta HTML.

10. Introducción a jQuery
Atributos:
Obtiene valor de atributo .attr(“atributo”)
$(“#btn”).attr(“alt”);
Setea atributo .attr(“atributo”,valor)
$(“#btn”).attr(“style”,”background-color:#FFF”);
Elimina el atributo .removeAttr(“atributo”)
$(“#btn”).removeAttr(“style”);
Agregar una clase .addClass(“clase_x”)
$(“#btn”).addClass(“activo”);
Remueve una clase .removeClass(“clase_x”)
$(“#btn”).removeClass(“activo”);

11. Introducción a jQuery
Atributos:
Obtiene valor de un elemento .val()
$(“#inputText”).val();
Setea valor a un elemento .val(“valor”)
$(“#inputText”).val(“Tu nombre”);
Obtiene html de un elemento .html(“atributo”)
<div id="idPrueba">Contenido</div>
$(“#idPrueba”).html(); devuelve “Contenido”
Setea valor a elemento .html(“contenido”)
$(“#idPrueba”).html(“Nuevo Contenido”);

12. Introducción a jQuery
Eventos:
Carga de Documentos:
$(document).ready() o su abreviación $function(){})
$(window).load()
Eventos del Mouse: .click .dbclick()...
Eventos de Formulario:.change .focus()...
Eventos de Teclado .keydown .keyup .keypress…
$('#miBoton').click(function (event){
//evento capturado
});

13. Introducción a jQuery
Funciones Útiles
.each() Itera sobre cada elemento
.remove() Elimina todos los elementos del DOM
.empty() Elimina el contenido de todos los elementos
.find() Retorna los elementos que coinciden con la búsqueda
.parent() Retorna el elemento padre de cada elemento
.children() Retorna el hijo de cada elemento
.next() Obtiene el siguiente elemento
.prev() Obtiene el elemento anterior
$('ul li').each(function(indice, elemento) {
//recorro los items del listado
});

14. ● Hoja de estilo general
<link rel="stylesheet" type="text/css" href="css/style.css">
● Hoja de estilo sólo para Internet Explorer
<!--[if lte IE]>
<link rel="stylesheet" type="text/css" href="style_ie.css">
<![endif]-->
● Agregamos la libreria jQuery
<script type="text/javascript" src="jquery.min.js"></script>
Integrar jQuery y Css

15. jQuery en Apex
Veremos un ejemplo para aplicar lo que
hemos visto.
KANBAN EN APEX
este ejemplo se encuentra en la
App 9101 - Pág 5000

16. jQuery en Apex
DOM

17. jQuery en Apex
Función Abrir Descripción
Función Cambiar Color

18. PREGUNTAS

19. FIN
Javascript con
jQuery en Apex