Desarrollo de aplicaciones Web

Práctica: jQuery

Eduardo M. Sánchez Vila

eduardo.sanchez.vila@usc.es
Prof. Dr. Dept Electronica y Computación
Grupo de Sistemas Inteligentes
Universidad de Santiago de Compostela
Práctica: jQuery

1. Framework jQuery: ¿Por qué?

• Simplificar el desarrollo = Incrementar la productividad

2. Framework jQuery:¿Cómo?
• Reduciendo líneas de código
• Simplificando la sintáxis
• Reutilizando código
• Introduciendo patrones de diseño: selectores CSS!
.
Práctica: jQuery

Diseño de la actividad:

1. Tutoriales que vamoa a utilizar:

1.1 Tutorial Republic.
Referencia: https://www.tutorialrepublic.com/jquery-tutorial/
1.2 Tutorial W3schools.
Referencia: https://www.w3schools.com/jquery/

2. Framework jQuery: Contenidos:

• Simplificando el acceso al HTML DOM con Selectores.
• Comparación con JS-DOM. Ejemplos: leermodificar y eventos.
• Más ejemplos: Tutorial Republic: jQuery Syntax.
• Instalación jQuery. Tutorial Republic: jQuery Getting Started
• Sintaxis jQuery. Tutorial W3schools: jQuery Syntax.
• Buscando elementos HTML. Tutorial W3schools/Republic: jQuery Selectors.
• Ejercicio: Modifica este ejemplo
https://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_hide_class
de este modo: 1. Asocia el elemento h2 al id “prueba”, 2. Oculta el elemento anterior y
cambia el fondo de los elementos “p” a rojo cuando se pulse el botón.
Práctica: jQuery

Diseño de la actividad:

2. Framework jQuery: Lista de contenidos (cont.)

• Cambiando elementos HTML. Tutorial W3schools/Republic: Get/set.
• Ejercicio: Modifica el ejemplo:
https://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_dom_html_set
de tal modo que pinchando el primer botón cojas el contenido del primer elemento “p”
y lo escribas en el siguiente. Repite el proceso para el segundo botón. En el tercer
botón, coge el contenido del tercer elemento y reescribe el primero elemento “p”.
• Creando y eliminando elementos HTML. Tutorial W3schoools/Republic: Add y Remove.
• Ejercicio: Partiendo del ejemplo:
https://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_html_append
Inserta dos imágenes en la página HTML y asociales dos botones para mostrar más
información. Cuando se pinche el botón de cada imagen, muestra un texto que describa
su contenido.
• Modificando clases CSS. Tutorial W3schoools: CSS classes y css()
• Ejercicio: Partiendo del ejemplo:
https://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_css_set_multiple
Utiliza el método “toggleclass” para alternar entre el estilo inicial multicolor y el estilo con
fondo amarillo
Práctica: jQuery

Diseño de la actividad:

2. Framework jQuery: Lista de contenidos (cont.)

• Gestionando eventos. Tutorial W3schools: jQuery eventos
• Ejercicio. Hay que modificar el ejemplo “jQuery_eventos_ejemplo.html”
1. Cada vez que pasemos el ratón por el elemento span.mielemento, además de
contar las pasadas, vamos a resaltar el texto “Pasa el ratón por aquí” con un fondo
amarillo.
2. Crea ahora un nuevo elemento “p” para mostrar ahí el número de pasadas que
hacemos sobre el elemento span.mielemento.
3. Crea un botón debajo del elemento “p” anterior que permita borrar el número de
pasadas cuando el usuario pinche en el botón.