Curso de jQuery (Programa detallado)
Objetivo:
Al finalizar el curso, el alumno dispondrá de conocimientos para:
- Utilizar la librería jQuery y aprovechar las características que ofrece.
- Hacer uso de los selectores para aplicar acciones sobre elementos específicos del DOM.
- Manipular los elementos del DOM.
- Capturar diferentes eventos sobre los objetos del DOM y aplicar acciones frente a estos.
- Realizar peticiones AJAX mediante la librería jQuery y procesar la respuesta del servidor.
- Aplicar animaciones a los elementos del DOM.
Dirigido a:
Personas con conocimientos básicos de JavaScript, HTML y CSS que quieren conocer una de las librerías más utilizadas en la actualidad para dotar de funcionalidades 2.0 a sus páginas web.
Requisitos:
El alumno debe disponer de conocimientos básicos de HTML y CSS.
También debe estar familiarizado con el lenguaje de programación de lado del cliente JavaScript.
PROGRAMA DEL CURSO
1.- Introducción a jQuery
Objetivo
Conocer qué es jQuery, su historia y la compatibilidad con los navegadores que ofrece la librería.
Aprender cómo descargar la librería e incluirla en nuestras páginas.
Detallar las herramientas que utilizaremos para realizar nuestros scripts.
Contenido
- Introducción a jQuery.
- Introducción
- Historia
- Qué es jQuery
- Qué necesito para programar con jQuery
- Navegadores Compatibles
- Cómo incluir jQuery en nuestra página
- Ejercicios
- Ejercicio 1: Instalar un editor de texto plano
- Ejercicio 2: Entorno de desarrollo
2.- Sintaxis Básica
Objetivo
Diferencias entre la programación de scripts JavaScript y scripts que utilizan la librería.
Conocer la sintaxis básica de jQuery.
Configurar la librería para ofrecer compatibilidad con otras librerías.
Contenido
- Sintaxis Básica de jQuery
- Sintaxis Básica
- Esperar a que el documento haya sido renderizado
- La función jQuery() o su alias $()
- Sintaxis Básica de comandos jQuery
- Interoperabilidad con otras librerías
- Ejercicios
- Ejercicio 1: Captura del evento "ready" del documento
- Ejercicio 2: Comando básico
- Ejercicio 3: Interoperabilidad
3.- Selectores Básicos
Objetivo
Conocer el funcionamiento de los selectores para acceder a cualquier elemento del DOM.
Selectores básicos por tipo de elemento, clase o identificador.
Encadenamiento de selectores para realizar selecciones más afinadas
Contenido
- Selectores Básicos
- Introducción
- Selectores básicos: $("elemento"), $("#identificador") y $(".clase")
- Combinar selectores
- Guardar Selecciones
- Ejercicios
- Ejercicio 1: Selectores Básicos
- Ejercicio 2: Selectores Jerárquicos
4.- Selectores de Filtrado I
Objetivo
Extender los conocimientos adquiridos sobre selectores.
Ampliar las opciones de filtrado ofrecidas por los selectores básicos.
Contenido
- Selectores de Filtrado I
- Selectores de Filtrado por Atributo
- Selectores de Filtrado Básico
- Ejercicios
- Ejercicio 1: Selectores de Filtrado por Atributo
- Ejercicio 2: Selectores de Filtrado Básico
5.- Selectores de Filtrado II
Objetivo
Extender los conocimientos adquiridos sobre selectores.
Ampliar las opciones de filtrado ofrecidas por los selectores básicos.
Contenido
- Selectores de Filtrado II
- Selectores de Filtrado Jerárquico
- Selectores de Filtrado por Contenido
- Selectores de Filtrado por Visibilidad
- Selectores de Filtrado por Elementos de Formulario
- Ejercicios
- Ejercicio 1: Selectores de Filtrado Jerárquico
- Ejercicio 2: Selectores de Filtrado por Contenido y Filtrado por Visibilidad
- Ejercicio 3: Selectores de Filtrado por Elementos de Formulario
6.- Transversal
Objetivo
Acceso transversal a los elementos del DOM. Antecesores y sucesores en el árbol del DOM. Elementos padre y elementos hijos.
Métodos de filtrado.
Iteraciones aplicadas a los elementos resultado de un selector
Contenido
- Transversal
- Introducción
- Acceso transversal a elementos del DOM
- Métodos de filtrado
- Iteraciones: .each y .map
- Ejercicios
- Ejercicio 1: Transversal I
- Ejercicio 2: Transversal II
7.- Manipulación del DOM
Objetivo
Modificación de los elementos del árbol del DOM.
Creación, manipulación y borrado de elementos de forma dinámica.
Contenido
- Manipulación del DOM
- Introducción
- Modificar elementos del DOM y sus propiedades
- Inserción y copiado de elementos del DOM
- Eliminación de elementos del DOM
- Ejercicios
- Ejercicio 1: Utilidad de creación de formularios.
- Ejercicio 2: Utilidad de creación de formularios mejorada.
8.- Eventos
Objetivo
Conocer los conceptos básicos de eventos en jQuery. Conocer los diferentes eventos disponibles en jQuery y cómo forzar su ejecución.
Creación de eventos personalizados
Contenido
- Eventos
- Introducción
- Conceptos básicos sobre eventos en jQuery
- Eventos disponibles en jQuery
- Cancelación de eventos
- Forzado de eventos
- Creación de eventos personalizados
- Ejercicios
- Ejercicio 1: Eventos del ratón
- Ejercicio 2: Eventos del teclado
9.- AJAX
Objetivo
Realización de peticiones AJAX con jQuery.
Contenido
- AJAX
- Introducción
- Conceptos Básicos
- El método $.ajax() para realizar solicitudes asíncronas
- Métodos abreviados para peticiones Ajax
- Ejercicios
- Ejercicio 1: Configuración de AJAX
- Ejercicio 2: Envío de formulario por AJAX
10.- Efectos y Animaciones
Objetivo
Conocer las técnicas ofrecidas por jQuery para añadir animación a una página.
Utilizar las animaciones estándar de la librería y crear efectos personalizados.
Contenido
- Efectos y Animaciones
- Introducción
- Mostrar y ocultar elementos
- Modificando la opacidad
- Creando animaciones personalizadas
- Ejercicios
- Ejercicio 1: Pestañas
- Ejercicio 2: Memorion