Javascript, DOM y Ajax

Document Sample
Javascript, DOM y Ajax Powered By Docstoc
					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
• Cuando se llama a una función con el
  prefijo new, como en new f(), el valor de
  this se asigna a un objeto nuevo, que
  inicialmente está 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 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.HMLHTTP”);
        Ajax: Modificación del
             documento
• xhr.open(“GET”, “personName”, true);
  xhr.onreadystatechange = “showName”;
  xhr.send(null);
• function showName() {
     if (xhr.readyState=4 && xhr.status==200) {
            var name=xhr.responseText;
            document.getElementById(„nm‟).
                 innerHTML= „“Name: ”+name‟;
}
       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”>.
 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 del 1 al 5 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 cinco personas mantenida en
  el servidor.