Edited
with
em
acs
+LA
T EX
+pro
sper
Javascript y AJAX
Computación Web (Curso 2013/2014)
Jesus Arias Fisteus // [email protected]
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