JavaScript: Introducción

Transcripción

1 JavaScript y AJAX

2 JavaScript: Introducción Tecnología del cliente. Se ejecuta en los navegadores, que además de HTML, casi todos interpretan este lenguaje. Se interpreta en el navegador sin compilar Algunas aplicaciones que permite Chequear la corrección de formularios antes de ir al servidor Mostrar ventanas emergentes Realizar control en el cliente Reaccionar ante determinados eventos como pasar el ratón, hacer click, etc. Proporcionar unos contenidos dinámicos en el cliente sin pasar por el servidor 2

3 JavaScript vs Tecnologías de Servidor Algunas preguntas Nos interesa realizar un determinado procesado en el cliente o en el servidor? Usualmente el mismo procesado se puede realizar en ambas partes Se puede realizar el procesado en el cliente o por requisitos de la aplicación (por ejemplo por seguridad) sólo se puede hacer en el servidor esa operación? La acción a realizar cargará mucho al servidor cuando hay muchas peticiones a la vez en el mismo? 3

4 JavaScript: Variables Declaración de variables var nombre_variable=valor Ejemplos var a=7 var direcion= calle de Arriba No hay que declarar explícitamente el tipo que son, sino que en JavaScript se interpreta automáticamente según su declaración Para obtener el valor de una variable se pone directamente la variable, se asigna nuevos valores sin poner ya la palabra reservada var Variables locales/globales 4

5 JavaScript: Operaciones con Strings Para concatenar dos strings se usa el + entre ellos String1 + String2 Ejemplo var s1= El valor es ; var s2= rojo ; var s3; s3=s1+ +s2; document.write(s3); 5

6 JavaScript: Arrays Un array permite tener varios valores, accesibles mediante un índice numérico var var1=new array(valor1, valor2, valor3,, valorn); var var2=new array(); var2[0]=valor0; var2[1]=varlor1; Para acceder a los valores nombre_variable[número] Actualizar los valores nombre_variable[número]=valor; 6

7 JavaScript: Funciones La manera genérica de definir una función en JavaScript function nombre_funcion (var1, var2,, varn) { código de la función } La función puede retornar un valor que puede ser una variable, también un array return nombre_variable A la función se la invoca desde el cuerpo de la siguiente manera nombre_funcion(param1, param2,, paramn) 7

8 JavaScript: Operadores Aritméticos entre números enteros: + - * / % Comparación: < > == ===!= <= >= Lógicos: &&! 8

9 JavaScript: Estructuras de Control if while for switch 9

10 JavaScript: Eventos posibles Cada elemento HTML tiene una serie de eventos que se pueden aplicar sobre él, tal que si el evento sucede asociado a dicha etiqueta, se dispara la función indicada como valor ante dicho evento. Algunos ejemplos: onclick(), ondblclick(). Cuando se presiona un botón onload(), onunload(). Cuando se carga una página onchange(). Cuando se modifica un campo onsubmit(). Cuando se presiona el botón submit mouseover(). Cuando se pasa por encima de un elemento HTML onkeyup(), onkeydown(), onkeypress(). Cuando se presiona o libera una tecla 10

11 JavaScript: Impresión de información Se puede dar una respuesta en JavaScript Intercalando etiquetas HTML En código de JavaScript con document.write() 11

12 JavaScript: Ventanas Pop Ups Ventanas emergentes que se abren, con diferentes botones para el usuario: alert(texto) confirm(texto) prompt(texto, valor por defecto) 12

13 AJAX: Introducción AJAX: Asynchronous JavaScript and XML. Técnica que combina diferentes tecnologías JavaScript en el cliente Procedimiento para enviar al servidor peticiones de interés para que se retorne sólo la parte de la página que cambia para recargar sólo esa parte en lugar de recargar todo XML: En las peticiones y respuestas Asíncrono: Cuando se hace la petición, el cliente no se queda a la espera, sino que puede seguir realizando cosasxmlhttprequest Ejemplos de aplicaciones que lo utilizan: Youtube, Google Maps, Gmail 13

14 AJAX: Secuencia del proceso La secuencia de pasos a modo general es la siguiente El cliente recibe cierto fichero en JavaScript. En dicho código en JavaScript están definidas las acciones, eventos, etc. ante los que reaccionar, algunos de los cuales lanzarán peticiones al servidor para obtener ciertas respuestas El cliente construye un objeto XMLHttpRequest y envía una petición a cierta página del servidor (ej. Servlet, PHP, ASP, etc.) El servidor construye una respuesta para la parte que ha pedido el cliente y se la envía En el fichero JavaScript del cliente se puede obtener la respuesta y proceder a actualizar lo adecuado en lugar de recargar toda la página 14

15 AJAX: Objeto XMLHttpRequest Se crea con un constructor según el tipo de navegador Métodos del objeto XMLHttpRequest open (string1, string2, boolean): Abre la petición a formar según el método HTTP especificado en string1, hacia la página del servidor establecido en string2 y de manera asíncrona o síncrona según el último flag send(): Envía la petición al servidor setrequestheader(param1, valor1): Pone parámetros y valores en peticions POST. En GET van incrustados en la URL responsetext. Devuelve respuesta como texto responsexml. Devuelve respuesta como XML (por ejemplo manipulable con DOM luego) onreadystatechange, readystate, status 15

16 AJAX: Algunas posibles combinaciones Procesado del XML devuelto en el servidor Utilización de acceso a base de datos (el servidor es el que lo hace y lo puede devolver al cliente) Ejercicio: En la aplicación de gestor de actividades deportivas Actualizar sólo en la página del cliente, el listado de actividades según cierto criterio de búsqueda, sin volver a cargar todo el layout de la página completo 16

17 Trabajo propio del alumno asociado a la sesión Tutorial de JavaScript (básico, objetos, avanzado, ejemplos, referencias), Tutorial de AJAX (básico, HttpRequest, avanzado, ejemplos), 17

18 Referencias Extra David Flanagan, Javascript: The Definitive Guide, Third Edition, O'Reilly Media 1998 Tutorial de AJAX, AJAX books and resources, 18