Transcript Javascript
Javascript, DOM y Ajax
Javascript: Introducción
• Lenguaje dinámico orientado a objetos basado 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”];
Array();
var arr2 = new
• 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 asigna 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’
– String ‘string’
– Boolean ‘boolean’
- Array ‘object’
- Number ‘number’
- 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ón
xhr.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 forma 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.