Javascript, DOM y Ajax

Javascript: Introducción

• Lenguaje dinámico orientado a objetos ba-sado en el paradigma prototipo-instancia.

• Sintaxis muy semejante a la de Java.

• Diseñado especialmente para servir como lenguaje de script en páginas HTML o XML.

• Tiene características comunes con Lisp.

• Tiene un estándar mundial, EMACScript.

Tipos de datos

• Tipos de datos: booleanos, números, cadenas de caracteres, objetos.

• +: suma de números y concatenación de cadenas.

• Números: 64 bits, coma flotante + NaN (not a number) + Infinity

• Cadenas de caracteres: Unicode. Inmutables. Delimitadores: ‘ o “.

• Objetos: Hashtables con claves (cadenas u otros datos convertibles a cadenas) y valores (miembros).

Intérprete, variables y objetos

• Intérprete en la web: http://mochikit.com/examples/interpreter/

• Función útil: alert(String) muestra un mensaje• Variables: var x = 1;• Objetos: Ejemplos

– var obj = {}; // Objeto vacío– var obj1 = new Object();– obj[“a”] = 22; obj[“b”] = “fin”; obj.c = true;– obj = { “a” : 22, “b” : “fin”, “c” : true };

Iteración sobre miembros y arrays

• for (var key in obj) {

document.writeln(obj[key]); }

• Arrays: Son objetos con claves numéricas (aunque no necesariamente todas).

• Ejemplos:– var arr = [“a”, “b”, “c”]; var arr2 = new Array();

• Longitud: Mayor clave numérica más 1.– arr.length // 3

Funciones

• Sintaxis similar a C, pero sin tipado de argumentos y valor.

• Son objetos.– var f = function (x, y) { return x == 2*y; }– function f(x, y) { return x == 2*y; }

La función se puede utilizar dentro del ámbito de su definición, incluso sin asignársela a una variable

– var f = new Function(“x”, “y”, “return x == 2*y;”);No recomendado: lioso e ineficiente.

Métodos

• Son miembros de objetos cuyo valor es una función.– Ejemplo:

var obj = { “a” : 1, “m” : function(x) { return this.a + x; }

};– obj.m(3) devuelve 4.

• this es un miembro reservado del método, al que se le asigna como valor el objeto cuando se llama al método con la notación xxx.yyy(zzz, …).

Constructores

• Cualquier función es un constructor cuando se le llama con el prefijo new

• Al ejecutar new f(), el valor de this se asig-na a un objeto nuevo, inicialmente vacío. La función, si no tiene una instrucción return, devuelve entonces el objeto nuevo.

• Ejemplo: function f() { this.a=1; this.b=2; }

x = new f(); // Construye un objeto nuevo

// con f como constructor

Herencia

• Cuando se intenta acceder a un miembro de un objeto, si no existe se busca en el objeto correspondiente a su miembro prototype. De esta forma se implementa la herencia entre prototipos.

• Ejemplo:

function g() { this.prototype=x; this.c=3; }

y=new g();

z=y.b // 2

Ámbitos de variables

• Variables locales (definidas con var dentro del cuerpo de una función): tienen ámbito local a la ejecución de la función.

• Variables globales (definidas con var sin estar dentro del cuerpo de una función o sin var): tienen el ámbito del objeto global.

• Las variables no inicializadas tienen el valor undefined (diferente de null).

• Las funciones sin instrucción return devuelven el valor undefined excepto si se les llama con new.

Instrucciones

• Los valores false, null, undefined, “”, and 0 se pueden convertir al valor booleano false. Todos los demás valores se pueden convertir al valor booleano true.

JSON

• JSON es un sublenguaje del de Javascript que permite la serialización de datos y su transmisión entre programas que utilicen el protocolo correspondiente.

• Las expresiones de JSON permiten serializar números, cadenas de caracteres, arrays y objetos todas cuyas componentes son a su vez serializables mediante JSON.

JSON, II

• Por ejemplo, [{name: “pepe”, age: 25}, {name: “juan”, age: 52}] es una expresión de JSON que representa un array de dos objetos que ambos tienen un miembro name y otro age.

• La última versión del estándar ECMAScript prevé un analizador de expresiones de JSON (JSON.parse(string)) y una función de serialización (JSON.stringify(Object)).

JSON, III

• Como no todos los navegadores satisfacen el estándar ECMAScript 5, existen bibliotecas de JSON que se pueden utilizar en cualquier navegador que soporte Javascript.

• Referencias para JSON:– http://www.json.org– http://www.json.org/json2.js

JSON: Ejercicio

• [JSONSer] Escribir una función JSONserialize(Object) que devuelva la representación en JSON de un objeto serializable.

• Se puede utilizar la función typeof(Object) que devuelve una cadena de caracteres dependiente del tipo de objeto, como sigue:– Object ‘object’ - Array ‘object’– String ‘string’ - Number ‘number’– Boolean ‘boolean’ - null ‘object’

JSON: Ejercicios optativos

• Escribir una función serialp(Obj) que devuelva true si su argumento es un objeto serializable y false si no lo es.

• Escribir una versión optimizada de la función JSONserialize que devuelva la representación en JSON de su argumento si éste es serializable y undefined en caso contrario.

Referencias para Javascript

• http://javascript.crockford.com/survey.thml

• http://w3schools.com

• Libro:

David Flanagan

Javascript: The definite guide

Accesible desde la UAM a través de

proquest.safaribooksonline.com/0596101996

DOM

• Es una especificación de W3C de la forma de representar la estructura de un documento HTML o XML en un programa.

• Existen especificaciones oficiales para los lenguajes Java y Javascript/ECMAScript.

• En los navegadores actuales, cuando se carga una página HTML o XML se crea un ámbito de ejecución de Javascript que incluye una representación del documento.

DOM, II

• La representación según DOM de un documento refleja la estructura de árbol determinada por sus etiquetas.

• Cada etiqueta da lugar a un nodo (elemento) cuyos miembros corresponden a los atributos de la etiqueta.

• Las hojas del árbol son cadenas de caracteres.

Ejemplo de árbol DOM

Documento del ejemplo anterior

• <bookstore>

<book category=“history”>

<title lang=“english>

Everyday Italian

</title>

<author>Giada de Laurentis</author>

<year>2005</year>

<price>30</price>

</book>

</bookstore>

Objetos, miembros y métodos predefinidos en DOM

• window representa la ventana• Entre los miembros de window están su ancho y

alto (interiores y exteriores)• document representa el documento• Entre los miembros de document están su cookie

y URL• El método document.getElementById(“id”) permite

acceder a un elemento según su identificador• element.innerHTML es la representación del

contenido de un elemento en HTML. Se puede acceder a él para extraerlo o modificarlo

DOM: Eventos

• DOM prevé el envío de eventos cuando se accede a documentos HTML o XML. Estos eventos incluyen los siguientes: finalización de la carga de una página o de una imagen, pulsar un botón del ratón, entrar con el cursor del ratón sobre un elemento, seleccionar un campo en un formulario, enviar el contenido de un formulario mediante HTTP y pulsar sobre una tecla.

DOM: Eventos, II

• Cada evento tiene un objeto asociado y le puede corresponder un método o instrucciones Javascript en el mismo.

• Por ejemplo, el evento de pulsar un botón del ratón sobre un elemento tiene asociado el método o instrucciones correspondientes al atributo onclick de su etiqueta.

DOM: Eventos, III: Atributos HTML que indican los métodos asociados• finalización de la carga de una página o de

una imagen: onLoad• Pulsar un botón del ratón: onclick• Entrar con el cursor del ratón sobre un

elemento: onMouseOver, onMouseOut• Seleccionar un campo en un formulario:

onFocus• Enviar el contenido de un formulario

mediante HTTP: onSubmit• Pulsar sobre una tecla: onkeydown

DOM: Ejemplo

• <h1 id=“nm”> Name: </h1>

<INPUT type=“button" value=“Add name”

onclick=

“document.getElementById(‘nm’).

innerHTML= ‘Name: Pepe’;”>

<! -- El valor del atributo onclick puede ser cualquier código Javascript -->

DOM: Estilos

• Para mostrar documentos HTML y XML se pueden utilizar documentos separados para especificar el contenido y el estilo.

• Un fichero CSS especifica los estilos en que se muestra el contenido asociado a cada clase de etiqueta.

• Un método asociado a un evento puede cambiar el estilo del elemento asociado.

Ejercicio

• [DOMPers] Escribir una página web estática (accesible a través de una aplicación web) que muestre los datos (nombre y DNI) de cinco personas encabezados por una línea que ponga “Personas asociadas” y que tenga al comienzo cinco botones, y al pulsar sobre uno de los botones muestre los datos de la persona correspondiente al principio del documento.

Ajax: Objeto fundamental

• Objeto capaz de hacer peticiones http– new XMLHttpRequest()

• Hay navegadores en uso frecuente, como IE 5 y 6, que lo soportan pero no según el estándar– if (window.XMLHttpRequest)

xhr=newXMLHttpRequest();

else if (window.ActiveXObject)

xhr=new ActiveXObject(“Microsoft.XMLHTTP”);

Ajax:Petición de información al servidor• // Inicialización (“personName” es la URL;

showName es el método que se ejecuta al llegar la respuesta)xhr.open(“GET”, “personName”, true);xhr.onreadystatechange = showName;// Peticiónxhr.send(null);

• // Condición de éxito(xhr.readyState=4 && xhr.status==200) {

• // Respuesta (cadena de caracteres)xhr.responseText;

Ajax: Modificación del documento, II

• El código de la transparencia anterior for-ma parte del código HTML del documento.

• Las tres primeras líneas se pueden poner como valor del atributo onclick de un botón, como en el ejemplo de DOM ya visto. También se pueden poner como el cuerpo de otra función getName, y entonces en el atributo se pondría “getName();”.

Ajax: Modificación del documento: III

• Las definiciones de funciones como showName() o getName() se ponen en el documento dentro de etiquetas <script> o en un fichero aparte con terminación .js.

• En las etiquetas <script> con código Javascript se pone un atributo type=“text/javascript”

• Si se utiliza un fichero .js se usa una etiqueta <script url=“….js”>.

Ajax: Ejemplo

• Haremos el mismo ejemplo visto para DOM (véase la próxima transparencia), donde el nombre de la persona lo proporciona el servidor en lugar de estar incluido en el código Javascript.

DOM: Ejemplo (rehecho)

• <script type=“text/javascript”>

function getName() {

document.getElementById(“nm”).

innerHTML= “Name: ” + “Pepe”;

} </script>

• <h1 id=“nm”> Name: </h1>

<INPUT type=“button" value=“Add name”

onclick=“getName()”>

Ajax: Ejemplo, II

• Creamos un servlet que devuelva el nombre de la persona (“Pepe”).

• Suponemos que su URL relativa a la aplicación es “/personName”.

• Modificamos la función getName para que primero pida el nombre al servidor a través del servlet y, cuando llegue la respuesta, la función callback showName lo añada a la página dinámicamente.

Ajax: Ejemplo, III

function getName() {if (window.XMLHttpRequest)

xhr=newXMLHttpRequest();

else if (window.ActiveXObject)

xhr=new ActiveXObject(“Microsoft.XMLHTTP”);

xhr.open(“GET”, “personName”, true);

xhr.onreadystatechange = showName;

xhr.send(null);

}

Ajax: Ejemplo, IV

function showName() {

if (xhr.readyState=4 && xhr.status==200) {

document.getElementById(“nm”).

innerHTML= “Name: ” +

xhr.responseText;

}

Referencias para DOM y Ajax

• http://www.w3.org/TR

• http://w3schools.com

Ejercicio

• [AJAXPers] Desarrollar una aplicación web con un menú de selección de un número que en función del número seleccionado por el usuario muestre los datos (nombre y DNI) de una persona seleccionada según su lugar en una lista de personas mantenida en un fichero fijo en el servidor.