Edited

with

em

acs

+LA

T EX

+pro

sper

Javascript y AJAX

Computación Web (Curso 2013/2014)

Jesus Arias Fisteus // jaf@it.uc3m.es

Javascript y AJAX– p. 1

Edited

with

em

acs

+LA

T EX

+pro

sper

Javascript

Javascript y AJAX– p. 2

Edited

with

em

acs

+LA

T EX

+pro

sper

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 lainteractividad de las páginas.

Estandarizado bajo el nombre de ECMAScript.

Javascript y AJAX– p. 3

Edited

with

em

acs

+LA

T EX

+pro

sper

Interactividad en el navegador con Ja-

vaScript

Client–side JavaScript hace interactivo eldocumento HTML mediante, principalmente:

Manejadores de eventos:Se puede ejecutar código específico(manejadores) cuando se cargue/cierre lapágina, el usuario interaccione conelementos de la misma o periódicamente.

Modificación dinámica del documento:document.write() permite escribirdirectamente el contenido del documento.API de DOM: acceso lectura/escritura a laestructura del documento.

Javascript y AJAX– p. 4

Edited

with

em

acs

+LA

T EX

+pro

sper

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

Edited

with

em

acs

+LA

T EX

+pro

sper

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

Edited

with

em

acs

+LA

T EX

+pro

sper

Objetos

Contenedores de propiedades:

Cada propiedad tiene un nombre y un valor.

No existe un concepto de clase que restrinja laspropiedades que puede tener un objeto.

Un objeto puede heredar de otro objeto.

Javascript y AJAX– p. 7

Edited

with

em

acs

+LA

T EX

+pro

sper

Ejemplo: Inicialización literal de obje-

tos

var empty_object = {};

var stooge = {

"first-name": "Jerome",

"last-name": "Howard"

};

Javascript y AJAX– p. 8

Edited

with

em

acs

+LA

T EX

+pro

sper

Ejemplo: Inicialización literal de obje-

tos

var flight = {

airline: "Oceanic",

number: 815,

departure: {

IATA: "SYD",

time: "2004-09-22 14:55",

city: "Sydney"

},

arrival: {

IATA: "LAX",

time: "2004-09-23 10:42",

city: "Los Angeles"

}

};

Javascript y AJAX– p. 9

Edited

with

em

acs

+LA

T EX

+pro

sper

Acceso a propiedades de objetos

Mediante corchetes o con punto:

stooge["first-name"] // "Jerome"

flight.departure.IATA // "SYD"

Las propiedades que no existen devuelvenundefined:stooge["middle-name"] // undefined

flight.status // undefined

stooge["FIRST-NAME"] // undefined

Javascript y AJAX– p. 10

Edited

with

em

acs

+LA

T EX

+pro

sper

Actualización de propiedades

Mediante asignación:

stooge[’first-name’] = ’Jerome’;

flight.number = 7005;

Si la propiedad no existe en el objeto, se creaautomáticamente:stooge[’middle-name’] = ’Lester’;

stooge.nickname = ’Curly’;

flight.equipment = {

model: ’Boeing 777’

};

flight.status = ’overdue’;

Javascript y AJAX– p. 11

Edited

with

em

acs

+LA

T EX

+pro

sper

Objetos por referencia

Los objetos se pasan por referencia, al igual queen 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

Edited

with

em

acs

+LA

T EX

+pro

sper

Funciones

Las funciones son objetos:

Pueden usarse como cualquier otro objeto enasignaciones, 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

Edited

with

em

acs

+LA

T EX

+pro

sper

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 mediante apply.

Javascript y AJAX– p. 14

Edited

with

em

acs

+LA

T EX

+pro

sper

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

Edited

with

em

acs

+LA

T EX

+pro

sper

Invocación como función

var sum = add(3, 4); // sum is 7

Javascript y AJAX– p. 16

Edited

with

em

acs

+LA

T EX

+pro

sper

Invocación con apply

// 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

Edited

with

em

acs

+LA

T EX

+pro

sper

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

Edited

with

em

acs

+LA

T EX

+pro

sper

Herencia

En Javascript no existe el concepto de clase.

Cada objeto está asociado a un prototipo.

La herencia es de objeto a objeto mediante elsistema de prototipos.

Javascript y AJAX– p. 19

Edited

with

em

acs

+LA

T EX

+pro

sper

Herencia

var myMammal = {

name : ’Herb the Mammal’,

get_name : function ( ) {

return this.name;

},

says : function ( ) {

return this.saying || ’’;

}

};

Javascript y AJAX– p. 20

Edited

with

em

acs

+LA

T EX

+pro

sper

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

Edited

with

em

acs

+LA

T EX

+pro

sper

Arrays

var empty = [];

var numbers = [

’zero’, ’one’, ’two’, ’three’, ’four’,

’five’, ’six’, ’seven’, ’eight’, ’nine’

];

empty[1] // undefined

numbers[1] // ’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

Edited

with

em

acs

+LA

T EX

+pro

sper

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

Edited

with

em

acs

+LA

T EX

+pro

sper

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

Edited

with

em

acs

+LA

T EX

+pro

sper

Ejemplo: API DOM (I)

var n = document.documentElement; // objeto Node

var children = n.childNodes; // objeto NodeList

var head = children[0];

var body = children[1];

// 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

Edited

with

em

acs

+LA

T EX

+pro

sper

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

Edited

with

em

acs

+LA

T EX

+pro

sper

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 estastransparencias provienen de este libro.

David Flanagan. “JavaScript: The Definitive Guide”(5th Ed.) O’Reilly.

Javascript y AJAX– p. 27

Edited

with

em

acs

+LA

T EX

+pro

sper

AJAX(Asynchronous JavaScript and XML)

Javascript y AJAX– p. 28

Edited

with

em

acs

+LA

T EX

+pro

sper

AJAX (Asynchronous JavaScript and

XML)

Nombre que se aplica al uso combinado de:

JavaScript.

XMLHttpRequest.

Javascript y AJAX– p. 29

Edited

with

em

acs

+LA

T EX

+pro

sper

Programación de HTTP desde JavaS-

cript

En principio, es el navegador el que generapeticiones HTTP y procesa las respuestas:

JavaScript puede forzar peticiones estableciendoel atributo src en img, iframe y script, pero tieneproblemas de portabilidad entre navegadores.

La API XMLHttpRequest permite de forma mássencilla a JavaScript realizar peticiones HTTP yprocesar sus respuestas.

Javascript y AJAX– p. 30

Edited

with

em

acs

+LA

T EX

+pro

sper

Uso de XMLHttpRequest

Proceso de tres etapas:

1. Creación del objeto XMLHttpRequest.

2. Especificación y envío del mensaje HTTP alservidor.

3. Recepción (síncrona o asíncrona) de larespuesta del servidor.

A pesar del nombre, no es estrictamentenecesario que los mensajes HTTP intercambiadoscodifiquen los datos con XML:

JSON tiene mucha aceptación comoalternativa.

Javascript y AJAX– p. 31

Edited

with

em

acs

+LA

T EX

+pro

sper

Peticiones síncronas:

La función send retorna una vez se haya recibidola respuesta.

La página queda bloqueada hasta que se recibe larespuesta.

Javascript y AJAX– p. 32

Edited

with

em

acs

+LA

T EX

+pro

sper

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

Edited

with

em

acs

+LA

T EX

+pro

sper

Peticiones asíncronas:

La función send retorna inmediatamente, sinesperar la respuesta.

Se registra una función de callback que se invocacada vez que cambia el estado de la petición(propiedad readyState):

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

Edited

with

em

acs

+LA

T EX

+pro

sper

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

Edited

with

em

acs

+LA

T EX

+pro

sper

Creación de XMLHttpRequest porta-

ble

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

Edited

with

em

acs

+LA

T EX

+pro

sper

Referencias

David Flanagan. “JavaScript: The Definitive Guide”(5th Ed.) O’Reilly.

Javascript y AJAX– p. 37