PDF de programación - JQuery

jQuery

Escuela Técnica Superior de Ingeniería de Telecomunicación

Universidad Rey Juan Carlos

gsyc-profes (arroba) gsyc.urjc.es

Marzo de 2018

GSyC - 2018

jQuery

1

©2018 GSyC
Algunos derechos reservados.
Este trabajo se distribuye bajo la licencia

Creative Commons Attribution Share-Alike 4.0

GSyC - 2018

jQuery

2

DOM: Document Object Model

jQuery

Introducción

DOM, Document Object Model es un API que permite tratar una
página web con estructura de árbol

Estándar de Internet, normalizado por el W3C
Es el interfaz que emplean los navegadores web internamente
Cuando un navegador carga una página HTML, la procesa
para convertirla en la estructura del DOM. Desde ahí se
representa en pantalla.
Los cambios que pueda tener la página, p.e. desde JavaScript,
se hacen directamente con el DOM, el HTML no se vuelve a
utilizar

GSyC - 2018

jQuery

3

jQuery

jQuery

Introducción

JQuery es una librería JavaScript que permite recorrer un
documento, seleccionar objetos del DOM, hacer animaciones,
manejar eventos, usar Ajax y hacer plugins sobre JavaScript

Creada por John Resig en 2006, es software libre
Aunque se puede procesar el DOM con JavaScript nativo, es
poco frecuente. Es más conveniente y habitual emplear jQuery
También cuenta con una librería similar a Bootstrap,
jQuery-UI

En esta asignatura preferimos Bootstrap a jQuery-UI
Es frecuente preferir Boostrap. jQuery-UI no es tan popular
como Bootstrap

GSyC - 2018

jQuery

4

Modificar el HTML ¿Para qué?

jQuery

Introducción

Programando sobre el DOM se puede hacer prácticamente
cualquier cosa con una página

Normalmente lo que deberíamos buscar es funcionalidad útil
que mejore la experiencia de usuario
Deberíamos evitar los efectos que llamen la atención
gratuitamente, comportamiento no estándar o poco intuitivos,
adornos que acaban molestando, etc

GSyC - 2018

jQuery

5

jQuery

Introducción

Funcionalidad que realmente mejora la experiencia de usuario:
Es normal que una aplicación tenga muchos parámetros,
difíciles de asimilar para el usuario
Ocultar unos y mostrar otros facilita su trabajo

Se puede ocultar y/o marcar como deshabilitado lo que en
cierto momento no se puede hacer
Jerarquizar el interfaz. Por ejemplo modo básico, modo
normal, modo experto

Ofrecer información y ayuda contextual
Presentar la información en distintos formatos o unidades
Validación de formularios

GSyC - 2018

jQuery

6

jQuery

Introducción

Formularios mejorados
Ejemplos

Una entrada donde el usuario indica un porcentaje desplazando
una barra, no introduciendo un número
Una entrada que inmediatamente actualiza otra información.
Si gasta 20 entonces le quedan 80

Información sobre el progreso de lo que el usuario ha pedido.
P.e progress bar en porcentaje, o en unidades de tiempo. O
estimaciones del tiempo restante
Información en tiempo real sobre sucesos diversos
Generación de gráficos
HTML Canvas. (No lo trataremos en esta asignatura)
...

GSyC - 2018

jQuery

7

Uso de jQuery

jQuery

Introducción

Es una librería compuesta por un único fichero

Se puede descargar en el sistema de ficheros local y cargarla
con
<script src="jquery.js"></script>

Se puede usar un CDN. Por ejemplo el de gogle

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

JQuery es una única funcion, que a su vez incluye diversas
funciones

Esto es posible porque JavaScript usa funciones de orden
superior, higher-order functions. Nos puede ayudar
considerarlo un objeto con métodos (en JavaScript las
funciones son objetos)
Esta función normalmente recibe el nombre de $
Típicamente recibe como primer argumento un selector CSS
que indica sobre qué debe actuar
jQuery

8

GSyC - 2018

Añadir y quitar clases

jQuery

Introducción

Un patrón habitual en jQuery es

Definir una clase CSS con el aspecto deseado. Por ejemplo
ocultar un elemento
Invocar los métodos removeClass y addClass para añadir y
quitar esa clase cuando se produzca cierto eventeo

<style>

.oculto {

}

</style>

display: none;

[...]

<div id="marco_foto" class="oculto">

<img src="images/foto.jpg" alt="Foto de prueba">

</div>

GSyC - 2018

jQuery

9

jQuery

Introducción

<script>

function mostrar_marcofoto() {

$("#marco_foto").removeClass("oculto")

};

};

function ocultar_marcofoto() {

$("#marco_foto").addClass("oculto")

};

function main() {

$("#boton01").click(mostrar_marcofoto);
$("#boton02").click(ocultar_marcofoto);

$(document).ready(main());

</script>

La función $(document).ready(); acepta la función principal
que se ejecutará cuando acabe de cargase el documento HTML

http://ortuno.es/hola_jquery01.html

GSyC - 2018

jQuery

10

jQuery

Introducción

El ejemplo anterior es correcto pero no es idiomático. Para asignar
un manejador a un evento, lo habitual en JavaScript es usar
funciones anónimas

$(document).ready(function() {

$("#boton01").click(function() {

$("#marco_foto").removeClass("oculto")

});

$("#boton02").click(function() {

$("#marco_foto").addClass("oculto")

});

});

http://ortuno.es/hola_jquery02.html

GSyC - 2018

jQuery

11

jQuery

Introducción

Quitar y poner una clase cuando se recibe un evento es muy
común, así que hay una función para ello: toggleClass()

$(document).ready(function() {

$("#boton01").click(function() {

$("#marco_foto").toggleClass("oculto")

});

});

http://ortuno.es/toggle.html

GSyC - 2018

jQuery

12

jQuery

Introducción

Aunque normalmente es preferible quitar y poner clases, también
es posible modificar las propiedades css directamente

$(document).ready(function() {

$("span").mouseover(function() {

$(this).css("background-color","grey");

});

$("span").mouseleave(function() {

$(this).css("background-color","white");

});

});

GSyC - 2018

jQuery

13

Eventos mouseover, mouseleave

jQuery

Introducción

Cuando el ratón se coloca sobre cierto elemento, este recibe el
evento mouseover
Para tratarlo, le pasamos a una función con el mismo nombre
(mouseover()) el manejador, esto es, la función que se
invocará cuando se reciba el evento
De la misma forma, la retirada del ratón de un elemento es
mouseleave

Ejemplo: Destaquemos el párrafo sobre el que se posiciona el ratón

.destacado {

background-color: LightGrey;

}

GSyC - 2018

jQuery

14

jQuery

Introducción

$(document).ready(function() {
$("p").mouseover(function() {
$("p").addClass("destacado")

});

$("p").mouseleave(function() {

$("p").removeClass("destacado")

});

});

Esto tiene un problema: no estamos destacando el párrafo
seleccionado, sino todos los párrados

http://ortuno.es/eventos_raton01.html

GSyC - 2018

jQuery

15

jQuery

Introducción

Para añadir el manejador al elemento que nos ha devuelvo la
consulta anterior, usamos this

$(document).ready(function() {
$("p").mouseover(function() {

$(this).addClass("destacado");

});

$("p").mouseleave(function() {

$(this).removeClass("destacado");

});

});

http://ortuno.es/eventos_raton02.html

GSyC - 2018

jQuery

16

Modificar el texto de un elemento

jQuery

Introducción

Con el método text() podemos cambiar el texto de un elemento
Como ejemplo, cada vez que se pulse un botón escribiremos la
hora actual dentro de un DIV
La hora estará en formato ISO 8651, para ello usaremos moment,
una librería muy popular para procesar fechas
Podemos descargarla desde su sitio web
https://momentjs.com e incluirla en nuestro directorio
Podemos descargarla desde un CDN y añadirlo en el atributo
src de un elemento script
https://cdnjs.cloudflare.com/ajax/libs/moment.js/
2.19.1/moment-with-locales.min.js

moment().format() devuelve la fecha actual en diversos
formatos. Si no se indica ninguno, por omisión devuelve una
cadena ISO 8651, p.e.
2017-11-11T22:21:17+01:00

GSyC - 2018

jQuery

17

jQuery

Introducción

<button id="boton01">Registrar hora </button>
<p id="text01">--</p>
<script>

$(document).ready(function() {

$("#boton01").click(function() {

$("#text01").text(moment().format());

});

});

</script>

http://ortuno.es/text.html

GSyC - 2018

jQuery

18

Leer el texto de un elemento

jQuery

Introducción

El método text() de jQuery devuelve el texto de un elemento
Esto es un patrón común en los método de jQuery:
Invocados sin argumentos, devuelven un valor
Invocados con argumentos, modifican un valor

Ejemplo: leer una velocidad en m/s desde un elemento
<div id="v_in">
y escribirla expresada en km/h en un <div id="v_out">

$("#boton02").click(function() {
let v_text=$("#v_in").text();
let v=parseInt(v_text,10)
v_out=v*3.6+"Km/h";
$("#v_out").text(v_out);

});

Este programa es un ejemplo de diseño muy deficiente: lógica de
negocio repartida por los botones

GSyC - 2018

jQuery

19

http://ortuno.es/text2.html

jQuery

Introducción

Un diseño mucho más razonable es el que usamos en las prácticas:

$("#boton02").click(function() {
let v_text=$("#v_in").text();
let v_out=calcula_velocidad(v_text, "m/s", "km/h");
$("#v_out").text(v_out);

});

GSyC - 2018

jQuery

20

Añadir contenido

jQuery

Introducción

Una vez seleccionado un elemento o elementos mediante un
selector, podemos modificarlo con los siguientes métodos:

append()
Inserta contenido al final de la selección, dentro de la selección
prepend()
Inserta contenido al principio de la selección, dentro de la
selección
after()
Inserta contenido inmediatamente después de la selección,
fuera de la selección
before()
Inserta contenido inmediatamente antes de la selección, fuera
de la selección
replacewith()
Reemplaza la selección

GSyC - 2018

jQuery

21

jQuery

Introducción

Ejemplo: añadir filas a una tabla
<body>

<button id=boton01>Registrar hora</button>
<table id=tabla_horas>

<th>Hora ISO 8651</th>

<tr>

</tr>
</table>

<script>

});

});

</script

$(document).ready(function() {

$("#boton01").click(function() {

let texto;
texto = ’<tr class="hora"><td>’ +moment().format() + ’</td></tr>’;
$("#tabla_horas").append(texto);

GSyC - 2018

jQuery