Computación Web (Curso 2013/2014)

Transcripción

1 Javascript y AJAX Computación Web (Curso 2013/2014) Jesús Arias Fisteus // jaf@it.uc3m.es Javascript y AJAX p. 1

2 Javascript Javascript y AJAX p. 2

3 Introducción a JavaScript JavaScript: Lenguaje de programación interpretado. Débilmente tipado. Sintácticamente parecido a C, C++ y Java. Utilizado habitualmente en navegadores Web (client side JavaScript) para mejorar la interactividad de las páginas. Estandarizado bajo el nombre de ECMAScript. Javascript y AJAX p. 3

4 Interactividad en el navegador con JavaScript Client side JavaScript hace interactivo el documento HTML mediante, principalmente: Manejadores de eventos: Se puede ejecutar código específico (manejadores) cuando se cargue/cierre la página, el usuario interaccione con elementos de la misma o periódicamente. Modificación dinámica del documento: document.write() permite escribir directamente el contenido del documento. API de DOM: acceso lectura/escritura a la estructura del documento. Javascript y AJAX p. 4

5 Sentencias de control Similares en sintaxis a las de Java y C: if, switch. for, while, do while. return, break, continue. Javascript y AJAX p. 5

6 Tipos de datos Tipos de datos simples: Números, cadenas de texto, booleanos,null, undefined. Objetos: Arrays, funciones, expresiones regulares, objetos. Javascript y AJAX p. 6

7 Objetos Contenedores de propiedades: Cada propiedad tiene un nombre y un valor. No existe un concepto de clase que restrinja las propiedades que puede tener un objeto. Un objeto puede heredar de otro objeto. Javascript y AJAX p. 7

8 Ejemplo: Inicialización literal de objetos var empty_object = {}; var stooge = { "first-name": "Jerome", "last-name": "Howard" }; Javascript y AJAX p. 8

9 Ejemplo: Inicialización literal de objetos var flight = { airline: "Oceanic", number: 815, departure: { IATA: "SYD", time: " :55", city: "Sydney" }, arrival: { IATA: "LAX", time: " :42", city: "Los Angeles" } }; Javascript y AJAX p. 9

10 Acceso a propiedades de objetos Mediante corchetes o con punto: stooge["first-name"] flight.departure.iata // "Jerome" // "SYD" Las propiedades que no existen devuelven undefined: stooge["middle-name"] flight.status stooge["first-name"] // undefined // undefined // undefined Javascript y AJAX p. 10

11 Actualización de propiedades Mediante asignación: stooge[ first-name ] = Jerome ; flight.number = 7005; Si la propiedad no existe en el objeto, se crea automáticamente: stooge[ middle-name ] = Lester ; stooge.nickname = Curly ; flight.equipment = { model: Boeing 777 }; flight.status = overdue ; Javascript y AJAX p. 11

12 Objetos por referencia Los objetos se pasan por referencia, al igual que en Java: var x = stooge; x.nickname = Curly ; var nick = stooge.nickname; // nick is Curly because x and stooge // are references to the same object var a = {}, b = {}, c = {}; // a, b, and c each refer to a // different empty object a = b = c = {}; // a, b, and c all refer to // the same empty object Javascript y AJAX p. 12

13 Funciones Las funciones son objetos: Pueden usarse como cualquier otro objeto en asignaciones, etc. Declaración literal de funciones: // Create a variable called add and store a function // in it that adds two numbers. var add = function (a, b) { return a + b; }; Javascript y AJAX p. 13

14 Invocación a funciones Varios patrones de invocación: Invocación como método. Invocación como función. Invocación como constructor. Invocación medianteapply. Javascript y AJAX p. 14

15 Invocación como método // Create myobject. It has a value and an increment // method. The increment method takes an optional // parameter. If the argument is not a number, then 1 // is used as the default. var myobject = { value: 0, increment: function (inc) { this.value += typeof inc === number? inc : 1; } }; myobject.increment( ); document.writeln(myobject.value); // 1 myobject.increment(2); document.writeln(myobject.value); // 3 Javascript y AJAX p. 15

16 Invocación como función var sum = add(3, 4); // sum is 7 Javascript y AJAX p. 16

17 Invocación conapply // Make an array of 2 numbers and add them. var array = [3, 4]; var sum = add.apply(null, array); // sum is 7 Javascript y AJAX p. 17

18 Excepciones var add = function (a, b) { if (typeof a!== number typeof b!== number ) { throw { name: TypeError, message: add needs numbers }; } return a + b; } try { add("seven"); } catch (e) { document.writeln(e.name + : + e.message); } Javascript y AJAX p. 18

19 Herencia En Javascript no existe el concepto de clase. Cada objeto está asociado a un prototipo. La herencia es de objeto a objeto mediante el sistema de prototipos. Javascript y AJAX p. 19

20 Herencia var mymammal = { name : Herb the Mammal, get_name : function ( ) { return this.name; }, says : function ( ) { return this.saying ; } }; Javascript y AJAX p. 20

21 Herencia (diferencial) var mycat = Object.create(myMammal); mycat.name = Henrietta ; mycat.saying = meow ; mycat.purr = function (n) { var i, s = ; for (i = 0; i < n; i += 1) { if (s) { s += - ; } s += r ; } return s; }; mycat.get_name = function ( ) { return this.says() + + this.name + + this.says(); }; Javascript y AJAX p. 21

22 Arrays var empty = []; var numbers = [ zero, one, two, three, four, five, six, seven, eight, nine ]; empty[1] numbers[1] // undefined // one empty.length // 0 numbers.length // 10 numbers.length = 3; // numbers is [ zero, one, two ] numbers[numbers.length] = shi ; // numbers is [ zero, one, two, shi ] numbers.push( go ); // numbers is [ zero, one, two, shi, go ] Javascript y AJAX p. 22

23 Arrays delete numbers[2]; // numbers is [ zero, one, undefined, shi, go ] numbers.splice(2, 1); // numbers is [ zero, one, shi, go ] Javascript y AJAX p. 23

24 Inclusión de JavaScript en HTML <!-- directamente con el elemento script (en la cabecera o en el cuerpo del documento) --> <script type="text/javascript"> var d = new Date(); document.write(d.tolocalestring()); </script> <!-- desde un recurso externo --> <script src="scripts/util.js" type="text/javascript" /> <!-- desde un manejador de eventos de HTML --> <input type="button" value="change" onclick="changename()" /> <p onmouseover="showhelp( p1 )">...</p> Javascript y AJAX p. 24

25 Ejemplo: API DOM (I) var n = document.documentelement; var children = n.childnodes; var head = children[0]; var body = children[1]; // objeto Node // objeto NodeList // contar el número de tablas var tables = document.getelementsbytagname("table"); alert("el documento contiene " + tables.length + " tablas."); // acceso a un párrafo <p id="specialparagraph">...</p> var paragraph = document.getelementbyid("specialparagraph"); Javascript y AJAX p. 25

26 Ejemplo: API DOM (II) // modificar un atributo de un elemento var headline = document.getelementbyid("headline"); // alternativa genérica: headline.setattribute("align", "center"); // alternativa para atributos estándar del elemento headline.align = "center"; // añadir un elemento var p = document.getelementbyid("headline"); var i = document.createelement("i"); i.class = "resaltado"; i.appendchild(document.createtextnode("texto en cursiva")); p.appendchild(i); Javascript y AJAX p. 26

27 Referencias Douglas Crockford. JavaScript: The Good Parts. O Reilly Media, Inc. (2008) Acceso en línea en Safari La mayoría de los ejemplos de estas transparencias provienen de este libro. David Flanagan. JavaScript: The Definitive Guide (5th Ed.) O Reilly. Javascript y AJAX p. 27

28 AJAX (Asynchronous JavaScript and XML) Javascript y AJAX p. 28

29 AJAX (Asynchronous JavaScript and XML) Nombre que se aplica al uso combinado de: JavaScript. XMLHttpRequest. Javascript y AJAX p. 29

30 Programación de HTTP desde JavaScript En principio, es el navegador el que genera peticiones HTTP y procesa las respuestas: JavaScript puede forzar peticiones estableciendo el atributo src en img, iframe y script, pero tiene problemas de portabilidad entre navegadores. La API XMLHttpRequest permite de forma más sencilla a JavaScript realizar peticiones HTTP y procesar sus respuestas. Javascript y AJAX p. 30

31 Uso de XMLHttpRequest Proceso de tres etapas: 1. Creación del objeto XMLHttpRequest. 2. Especificación y envío del mensaje HTTP al servidor. 3. Recepción (síncrona o asíncrona) de la respuesta del servidor. A pesar del nombre, no es estrictamente necesario que los mensajes HTTP intercambiados codifiquen los datos con XML: JSON tiene mucha aceptación como alternativa. Javascript y AJAX p. 31

32 Peticiones síncronas: La funciónsend retorna una vez se haya recibido la respuesta. La página queda bloqueada hasta que se recibe la respuesta. Javascript y AJAX p. 32

33 Ejemplo de petición síncrona // creación de un objeto XMLHttpRequest (no portable) var request = new XMLHttpRequest(); // especificación de método, URL y petición síncrona request.open("get", url, false); // envío (sin cuerpo de la petición por ser GET) request.send(null); // obtención de la respuesta síncrona if (request.status == 200) { var response = request.responsetext; // como alternativa, si es una respuesta XML var responsexml = request.responsexml; } else { // manejar el error... } Javascript y AJAX p. 33

34 Peticiones asíncronas: La funciónsend retorna inmediatamente, sin esperar la respuesta. Se registra una función de callback que se invoca cada vez que cambia el estado de la petición (propiedadreadystate): readystate == 0: sin inicializar. readystate == 1: conexión establecida. readystate == 2: petición recibida. readystate == 3: respuesta en proceso. readystate == 4: respuesta recibida. Javascript y AJAX p. 34

35 Ejemplo de petición asíncrona // creación de un objeto XMLHttpRequest (no portable) var request = new XMLHttpRequest(); // establecimiento de una función de callback request.onreadystatechange = function() { if(request.readystate == 4) { if(request.status == 200) { alert("received: " + req.responsetext); } else { { alert("error: returned status code " + request.status + " " + request.statustext); } } }; // especificación de método, URL y petición asíncrona request.open("get", url, true); // envío (sin cuerpo de la petición por ser GET) request.send(null); Javascript y AJAX p. 35

36 Creación de XMLHttpRequest portable var request = null; try { request = new ActiveXObject("Msxml2.XMLHTTP"); } catch (b) { try { request = new ActiveXObject("Microsoft.XMLHTTP"); } catch (c) { request = null; } } if(!request && typeof XMLHttpRequest!= "undefined") { request = new XMLHttpRequest; } Javascript y AJAX p. 36

37 Referencias David Flanagan. JavaScript: The Definitive Guide (5th Ed.) O Reilly. Javascript y AJAX p. 37