Programación de

Aplicaciones WEB con AJAX

(Internet 2)
Introducción a JavaScript
JavaScript permite enriquecer las paginas HTML permitiendo la interacción con los visitantes directamente en
el navegador, antes que tener que enviar información al servidor Web.

• Como agregar JavaScript a las páginas HTML

Depuración de código
Detección y depuración de errores con las opciones que ofrecen los navegadores.

• Insertando e interpretando comentarios en el código

• Como depurar código JavaScript en las páginas HTML
• Depurando código con Internet Explorer 6, 7 y 8
• Depurando código con Firefox
• Depurando código con Opera
• Depurando código con Safari
• Depuración de una página con múltiples errores JavaScript
• Extensiones utiles para Internet Explorer: Developer Toolbar, DebugBar
• Extensiones utiles para Firefox: Web Developer y Firebug
• Extensiones utiles para Safari: Menu de desarrollo, consola de errores e inspector de elementos
• Extensiones utiles para Google Chrome: Consola de errores e inspector de elementos
• Extensiones utiles para Opera: Opera Developer Tools (Firefly)

El lenguaje JavaScript
El lenguaje de programación Declaración y uso de variables

• Reglas para asignar nombres a las variables

• Tipos de Datos que pueden contener las variables
• Conversión implícita de datos
• Operadores: Aritméticos, de comparación, boléanos, strings, asignación, especiales y precedencia
• Estatuto condicionales If, If..else, switch
• Ciclos: while, do..while y for
• Crear y utilizar funciones
• Definir el alcance de las variables(locales y globales)
• Uso de objetos intrínsecos: El objeto String, Math, Number, Date y Boolean
Explotando el Document Object Model (DOM)
• La jerarquía de objetos de los navegadores
• Referenciando objetos del DOM organizados por numero
• Referenciando objetos del DOM organizados por nombre
• Referenciando objetos del DOM organizados por identificador (id)
• Manejo de los Eventos en el DOM

Validación de Formas HTML

• Manejo de Formas HTML con el objeto Form
• Manejo de Formas: Objetos Text, Textarea, Password y Hidden
• Manejo de Formas: Objetos Checkbox y Radio
• Manejo de Formas: Objeto Select (listas)
• Funciones especiales para validar la captura de datos
• Validar rangos, campos obligatorios, fechas, cantidades, direcciones de correo electrónico , RFCs,
etc.
• Listas blancas y negras para permitir y/o bloquear ciertos caracteres en la captura
• Uso de expresiones regulares

Controlando la Interfaz del Navegador

• Objeto Window: Utilizando diálogos para interactuar con los usuarios
• Objeto Window: Creando ventanas secundarias
• Objeto Window: Controlando la interfase de los navegadores
• Objeto Window: Manejo de marcos(frames)
• Objeto Location: Definiendo el contenido de las ventanas
• Objeto Navigator: Obteniendo información de los Navegadores
• Trabajando con Imágenes: Creando Rollovers
• Objeto Screen: Obtener información de la resolución de la pantalla
• Objeto Link: Manipulando dinámicamente las ligas en una pagina HTML

Hojas de Estilo en Cascada (CSS)

• Obtener y asignar estilos dinámicamente a distintos elementos de una pagina
• Modificación dinámica de estilos en una forma HTML para mejorar la retroalimentación

Tablas HTML
• Recorrer y procesar los renglones de una tabla HTML
• Modificar dinámicamente una tabla
• Colorear alternadamente los renglones
• Resaltar renglones cuando el raton pasa sobre ellos
• Marcar renglones mediante una casilla
• Ordenar los datos de una tabla sin tener que refrescar la pagina completa
XML
• Enviar y recibir documentos XML con JavaScript
• Procesar documentos XML con JavaScript

JSON
• Definir objetos JSON
• Crear objetos JSON con librería json.js, eval() y con objeto nativo de Internet Explorer 8 y Firefox 3.5
• Enviar, recibir y procesar información con JSON

AJAX - JavaScript Asincronico o Remote Scripting

• Introducción al uso mas novedoso de JavaScript: Ejecución de procesos remotos de manera
asíncrona. AJAX es utilizado para el desarrollo de aplicaciones Web sofisticadas y fluidas.
• Enviar y recibir información sin tener que refrescar toda la pagina
• Diferencias entre Internet Explorer y otros navegadores
• Uso del objeto XMLHttpRequest
• Solicitudes AJAX vía POST y GET
• Intercambio de información mediante texto simple, XML y JSON
• Animaciones para indicar estado de solicitudes
• Manejo de solicitudes multiples

Frameworks
• Los frameworks mas populares.
• Prototype
• Script.aculo.us

Técnicas AJAX con Prototype - Script.aculo.us

• Aplicaciones tipicas de AJAX en las aplicaciones Web.
• Simplificación de solicitudes XMLHttpRequest
• Actualizar secciones de una pagina de manera continua y automática
• Ordenamiento de tablas
• Modificar y ordenar listas
• Tooltips
• Autocompletar o sugerir
• Manejo de ventanas secundarias con interfase personalizada
• Arrastrar y dejar caer (drag and drop)