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

  1. Introducción a jQuery.
    1. Introducción
    2. Historia
    3. Qué es jQuery
    4. Qué necesito para programar con jQuery
    5. Navegadores Compatibles
    6. Cómo incluir jQuery en nuestra página
  2. Ejercicios
    1. Ejercicio 1: Instalar un editor de texto plano
    2. 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

  1. Sintaxis Básica de jQuery
    1. Sintaxis Básica
    2. Esperar a que el documento haya sido renderizado
    3. La función jQuery() o su alias $()
    4. Sintaxis Básica de comandos jQuery
    5. Interoperabilidad con otras librerías
  2. Ejercicios
    1. Ejercicio 1: Captura del evento "ready" del documento
    2. Ejercicio 2: Comando básico
    3. 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

  1. Selectores Básicos
    1. Introducción
    2. Selectores básicos: $("elemento"), $("#identificador") y $(".clase")
    3. Combinar selectores
    4. Guardar Selecciones
  2. Ejercicios
    1. Ejercicio 1: Selectores Básicos
    2. 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

  1. Selectores de Filtrado I
    1. Selectores de Filtrado por Atributo
    2. Selectores de Filtrado Básico
  2. Ejercicios
    1. Ejercicio 1: Selectores de Filtrado por Atributo
    2. 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

  1. Selectores de Filtrado II
    1. Selectores de Filtrado Jerárquico
    2. Selectores de Filtrado por Contenido
    3. Selectores de Filtrado por Visibilidad
    4. Selectores de Filtrado por Elementos de Formulario
  2. Ejercicios
    1. Ejercicio 1: Selectores de Filtrado Jerárquico
    2. Ejercicio 2: Selectores de Filtrado por Contenido y Filtrado por Visibilidad
    3. 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

  1. Transversal
    1. Introducción
    2. Acceso transversal a elementos del DOM
    3. Métodos de filtrado
    4. Iteraciones: .each y .map
  2. Ejercicios
    1. Ejercicio 1: Transversal I
    2. 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

  1. Manipulación del DOM
    1. Introducción
    2. Modificar elementos del DOM y sus propiedades
    3. Inserción y copiado de elementos del DOM
    4. Eliminación de elementos del DOM
  2. Ejercicios
    1. Ejercicio 1: Utilidad de creación de formularios.
    2. 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

  1. Eventos
    1. Introducción
    2. Conceptos básicos sobre eventos en jQuery
    3. Eventos disponibles en jQuery
    4. Cancelación de eventos
    5. Forzado de eventos
    6. Creación de eventos personalizados
  2. Ejercicios
    1. Ejercicio 1: Eventos del ratón
    2. Ejercicio 2: Eventos del teclado

9.- AJAX

Objetivo

Realización de peticiones AJAX con jQuery.

Contenido

  1. AJAX
    1. Introducción
    2. Conceptos Básicos
    3. El método $.ajax() para realizar solicitudes asíncronas
    4. Métodos abreviados para peticiones Ajax
  2. Ejercicios
    1. Ejercicio 1: Configuración de AJAX
    2. 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

  1. Efectos y Animaciones
    1. Introducción
    2. Mostrar y ocultar elementos
    3. Modificando la opacidad
    4. Creando animaciones personalizadas
  2. Ejercicios
    1. Ejercicio 1: Pestañas
    2. Ejercicio 2: Memorion