Introducción
¿Qué es JavaScript?
Un poco de historia
JavaScript está en todas partes
¿Qué es jQuery?
HTML: la estructura medular
Cómo funcionan las etiquetas HTML
CSS: Añadir estilo a las páginas Web
Anatomía de un estilo
Software para programar en JavaScript
Programas gratuitos
Software comercial
Sobre este libro
El enfoque de este libro sobre JavaScript
Cómo está organizado el libro
Convenciones
Ejemplos del libro
Parte I. Primeros pasos con JavaScript
1. Su primer programa de JavaScript
Primeros pasos en la programación
¿Qué es un programa informático?
Cómo añadir JavaScript a una página
Archivos externos de JavaScript
Nuestro primer programa en JavaScript
Escribir texto en una página Web
Adjuntar un archivo externo de JavaScript
Localizar los errores
La consola de JavaScript de Chrome
La consola de Internet Explorer
La consola Web de Firefox
La consola de errores de Safari
2. La gramática de JavaScript
Declaraciones
Funciones nativas
Tipos de datos
Números
Cadenas
Booleanos
Variables
Crear una variable
Trabajar con variables
Trabajar con tipos de datos y variables
Matemáticas básicas
El orden de las operaciones
Combinar cadenas
Combinar números y cadenas
Cambiar los valores de las variables
Tutorial: Usar variables para crear mensajes
Tutorial: Solicitar información
Arrays
Crear un array
Acceder a los elementos de un array
Añadir elementos a un array
Borrar elementos de un array
Tutorial: Escribir en una página Web utilizando arrays
Una lección rápida sobre objetos
Comentarios
Cuándo usar comentarios
Comentarios en este libro
3. Añadir lógica y control a los programas
Hacer que los programas reaccionen de forma inteligente
Fundamentos de las declaraciones condicionales
Añadir un plan alternativo
Comprobar más de una condición
Condiciones más complejas
Anidar declaraciones condicionales
Consejos para crear declaraciones condicionales
Tutorial: Cómo utilizar declaraciones condicionales
Utilizar bucles para trabajar con tareas repetitivas
Bucles while
Bucles y arrays
Bucles for
Bucles do/while
Funciones: Convertir el código útil en comandos reutilizables
Mini tutorial
Proporcionar información a las funciones
Recuperar información de las funciones
Evitar conflictos entre variables
Tutorial: Un examen muy sencillo
Parte II. Primeros pasos con jQuery
4. Presentación de jQuery
Las librerías de JavaScript
Empezar con jQuery
Enlazar con un archivo jQuery publicado en un servidor CDN
Descargar nuestro archivo de jQuery
Añadir jQuery a una página
Modificar páginas Web
El modelo de objetos del documento
Seleccionar los elementos de la página: el sistema de jQuery
Selectores básicos
Selectores avanzados
Los filtros de jQuery
El funcionamiento de los selectores de jQuery
Añadir contenido a una página
Sustituir y eliminar selecciones
Definir y leer los atributos de las etiquetas
Clases
Leer y cambiar las propiedades CSS
Cambiar simultáneamente varias propiedades CSS
Leer, definir y eliminar atributos HTML
Actuar sobre cada elemento de una sección
Funciones anónimas
this y $(this)
Citas automáticas
Objetivo del tutorial
Programación
5. Acción/ Reacción: Utilizar eventos para que las páginas cobren vida
¿Qué son los eventos?
Eventos del ratón
Eventos del documento/ventana
Eventos de formularios
Eventos de teclado
Utilizar eventos con jQuery
Tutorial: Presentación de los eventos
Más conceptos sobre los eventos de jQuery
Esperar a que se complete la carga del código HTML
Los eventos mouseover y mouseout
El objeto del evento
Detener el comportamiento convencional de un evento
Eliminar eventos
Gestión avanzada de eventos
Otra forma de utilizar la función on()
Utilizar on() para delegar eventos
Tutorial: Una página de preguntas y respuestas
Revisión de la tarea
La programación
6. Animaciones y efectos
Efectos de jQuery
Mostrar y ocultar elementos
Mostrar y difuminar elementos
Deslizar elementos
Tutorial: Cuadro de registro deslizante
La programación
Animaciones
Easing240
Llevar a cabo una acción después de completar un efecto
Tutorial: un panel animado
La programación
jQuery y las animaciones y transiciones de CSS3
jQuery y las transiciones CSS
jQuery y las animaciones CSS
7. Tareas comunes de jQuery
Rollover
Cambiar el atributo src de una imagen
Utilizar jQuery para intercambiar imágenes
Precarga de imágenes
Rollover
Tutorial: Añadir un rollover de imágenes
Objetivos del tutorial
La programación
Tutorial: Galería de fotos con efectos
Planificar la galería
La programación
Controlar el comportamiento de los vínculos
Seleccionar vínculos con JavaScript
Determinar el destino de un vínculo
No sigas a ese vínculo
Abrir vínculos externos en una nueva ventana
Crear nuevas ventanas
Propiedades de la ventana
Los plugins de jQuery
Qué buscar en un plugin jQuery
Los mínimos que debe cumplir un plugin
Construir una barra de navegación responsiva
El código HTML
El código CSS
El código JavaScript
El tutorial
Personalizar el aspecto del plugin SmartMenu
8. Mejorar los formularios Web
Comprender los formularios
Seleccionar los elementos de un formulario
Obtener y definir el valor de un elemento de un formulario
Determinar si se han activado botones y casillas de verificación
Eventos para formularios
submit
Añadir inteligencia a los formularios
Centrar el foco en el primer campo del formulario
Activar y desactivar campos
Opciones para mostrar y ocultar elementos de un formulario
Tutorial: Mejoras para un formulario
Colocar el foco sobre un campo
Desactivar campos del formulario
Ocultar campos del formulario
Validar un formulario
Plugin de jQuery para la validación de formularios
Validación básica
Validación avanzada
Aplicar estilo a los mensajes de error
Tutorial de validación
Validación básica
Validación avanzada
Validar las casillas de verificación y los botones de opción
Dar formato a los mensajes de error
Parte III. Empezar a trabajar con jQuery UI
9. Ampliar su interfaz
¿Qué es jQuery UI?
¿Por qué utilizar jQuery UI?
Utilizar jQuery UI
Agregar jQuery a una página Web
Utilizar cuadros de diálogo para añadir mensajes
Mini tutorial: Crear un cuadro de diálogo
Definir las propiedades del cuadro de diálogo
Mini tutorial: Entregar opciones al widget dialog
Utilizar eventos para abrir cuadros de diálogo
Añadir botones a un cuadro de diálogo
Mini tutorial: Añadir botones a un cuadro de diálogo
Utilizar cuadros de ayuda para proporcionar información
Mini tutorial: Añadir cuadros de ayuda
Opciones del cuadro de ayuda
Utilizar contenido HTML en un cuadro de ayuda
Mini tutorial: Añadir HTML a un cuadro de ayuda
Añadir paneles con pestañas
Opciones de los paneles con pestañas
Mini tutorial: Añadir paneles con pestañas
Pestañas que contienen paneles remotos
Ahorrar espacio con los acordeones
Mini tutorial: Crear un acordeón jQuery UI
Añadir menús a una página
Crear una barra de navegación horizontal
10. Revisión de los formularios
Seleccionar fechas con estilo
Definir las propiedades del selector de fechas
Tutorial: Añadir un selector para indicar la fecha de nacimiento
Menús de selección con estilo
Definir las propiedades del menú de selección
Llevar a cabo una acción cuando el usuario seleccione una opción
Botones con estilo
Personalizar los botones
Mejorar los botones de opción y las casillas de verificación
Proporcionar una lista de sugerencias
Utilizar un array para la sugerencias
Utilizar diferentes etiquetas y valores
Obtener las sugerencias del servidor
Opciones de Autocomplete
Tutorial para utilizar los widgets jQuery UI para los formularios
11. Personalizar el aspecto de jQuery UI
ThemeRoller
Descargar y utilizar el nuevo tema
Añadir un nuevo tema a un sitio Web ya existente
Más información sobre los archivos CSS de jQuery UI
Sobrescribir los estilos de jQuery UI
Qué es la especificidad
Cómo aplica jQuery UI los estilos a sus widgets
12. Efectos e interacciones de jQuery UI
El widget draggable
Añadir el widget draggable a una página Web
Mini tutorial de draggable
Opciones del proyecto draggable
Eventos del widget draggable
El widget droppable
Utilizar el widget droppable
Opciones del widget droppable
Eventos del widget droppable
Tutorial para arrastrar y soltar un elemento
Ordenar los elementos de la página
Cómo utilizar el concepto sortable
Las opciones del widget sortable
Eventos de sortable
Métodos de sortable
Efectos de jQuery UI
Los efectos
Easing
Animar cambios entre clases
Parte IV. jQuery y JavaScript avanzado
13. Introducción a Ajax
Qué es Ajax
Las bases de Ajax
Las piezas básicas del puzle
Comunicarse con el servidor Web
Ajax al estilo de jQuery
El método load()
Tutorial: La función load()
Los métodos get() y post()
Dar formato a los datos que se envían al servidor
Procesar los datos del servidor
Solventar errores
Tutorial: Usar el método $.get()
JSON
Acceder a los datos JSON
Datos JSON complejos
Qué es JSONP
Incluir un feed de Flickr en el sitio Web
Construir la URL
Buscar un tipo concreto de fotos
Combinar opciones
Usar el método $.getJSON()
Tutorial: Incluir imágenes de Flickr en un sitio Web
14. Construir una aplicación de lista de tareas
Esquema de la aplicación
Incluir un botón
Incluir un cuadro de diálogo
Añadir las tareas
Marcar las tareas como completadas
Delegación de eventos
Eliminar tareas
Un paso más
Editar las tareas
Confirmar las eliminaciones
Guardar las listas
Más ideas
Parte V. Consejos, trucos y solución de problemas
15. Aprovechar jQuery al máximo
Información y consejos útiles de jQuery
$() es lo mismo que jQuery()
Guardar selecciones en variables
Añadir la menor cantidad de contenido posible
Optimizar los selectores
Cómo usar los documentos de ayuda de jQuery
Leer una página del sitio de documentos de jQuery
Recorrer el DOM
Más funciones de manipulación de HTML
16. Dar un paso más con JavaScript
Trabajar con cadenas
Determinar la longitud de una cadena
Cambiar mayúsculas y minúsculas en una cadena
Buscar en una cadena: la técnica indexOf()
Extraer parte de una cadena con slice()
Buscar patrones en cadenas
Crear y usar una expresión regular básica
Construir una expresión regular
Agrupar partes de un patrón
Expresiones regulares útiles
Comparar un patrón
Sustituir texto
Probar expresiones regulares
Trabajar con números
Convertir una cadena en un número
Probar números
Redondear números
Dar formato a valores monetarios
Crear un número aleatorio
Fechas y horas
Obtener meses
Obtener el día de la semana
Obtener la hora
Crear una fecha diferente a la actual
Escribir un JavaScript más eficaz
Incluir preferencias en variables
Incluir preferencias en objetos
El operador ternario
La instrucción switch
Unir matrices y dividir cadenas
Combinarlo todo
Usar archivos de JavaScript externos
Crear un JavaScript de carga rápida
17. Resolución de problemas y depuración
Errores más comunes de la programación en JavaScript
Pares no cerrados
Comillas
Usar palabras reservadas
Un solo símbolo de igualdad en instrucciones condicionales
Mayúsculas y minúsculas
Ruta incorrecta a un archivo externo de JavaScript
Rutas incorrectas en archivos JavaScript externos
Variables y funciones que desaparecen
Depurar con la consola
Abrir la consola
Revisar errores en la consola
Usar console.log() para controlar el progreso de las secuencias de comandos
Tutorial: Usar la consola
Técnicas avanzadas de depuración
Tutorial de depuración
Apéndice. Recursos de JavaScript
Referencias
Sitios Web
Aspectos básicos de JavaScript
Sitios Web
jQuery
Sitios Web
JavaScript avanzado
Artículos y presentaciones
Sitios Web
CSS
Sitios Web
Índice alfabético
JavaScript es un lenguaje de programación que permite crear diferentes efectos y animaciones e interactuar con los usuarios proporcionando a los sitios Web dinamismo e interactividad. Puede utilizar JavaScript en el navegador, en el servidor, en las apps móviles,etc. Actualmente todos los sitios Web usan JavaScript y todos los navegadores importantes del mercado contienen un intérprete de JavaScript.
JQuery es una librería de JavaScript que se ha diseñado para facilitar la programación, es el arma secreta que los desarrolladores Web utilizan para enfrentarse al proceso de programación en JavaScript. Con jQuery, bastará una sencilla línea de código para ahorrarnos cientos de líneas y horas de programación, y días de pruebas en diferentes navegadores para depurar nuestro código.
Con esta guía completamente actualizada aprenderá las bases de JavaScript y se familiarizará con las ventajas e inconvenientes de su programación, haciendo especial énfasis en jQuery. Además conocerá las últimas novedades del plugin jQuery UI para dotar de un grado asombroso de interactividad a sus sitios Web.
? Dote de vida a sus páginas.
? Familiarícese con jQuery UI.
? Muestre los mejores formularios.
? Utilice Ajax para optimizar la funcionalidad del navegador.
? Practique con ejemplos reales.
? Profundice en los conceptos avanzados.
