JAVASCRIPTAvanzado1

OBJETOS

Técnicamente, un objeto de JavaScript es un arrayasociativo formado por las propiedades y los métodos del objeto. Así, la forma más directa para definir las propiedades y métodos de un objeto es mediante la notación de puntos de los arrays asociativos.

Un array asociativo es aquel en el que cada elemento no está asociado a su posición numérica dentro del array, sino que está asociado a otro valor específico. Los valores de los arrays normales se asocian a índices que siempre son numéricos. Los valores de los arrays asociativos se asocian a claves que siempre son cadenas de texto.

La forma tradicional de definir los arrays asociativos es mediante la clase Array:

var elArray = new Array();

elArray['primero'] = 1;

elArray.segundo = 2;2

OBJETOS.PROPIEDADES

elObjeto.id = "10";

elObjeto.nombre = "Objeto de prueba";

Al contrario de lo que sucede en otros lenguajes orientados

a objetos, como por ejemplo Java, para asignar el valor de

una propiedad no es necesario que la clase tenga definida

previamente esa propiedad.

También es posible utilizar la notación tradicional de los

arrays para definir el valor de las propiedades:

elObjeto['id'] = "10";

elObjeto['nombre'] = "Objeto de prueba";

3

OBJETOS.MÉTODOS (I)

Los métodos se definen asignando funciones al objeto. Si la

función no está definida previamente, es posible crear una

función anónima para asignarla al nuevo método del objeto.

Var elObjeto = new Object();

elObjeto.id = "10";

elObjeto.muestraId = function() {

alert("El ID del objeto es " + this.id);

}

La palabra this se suele utilizar habitualmente dentro de

los métodos de un objeto y siempre hace referencia al objeto

que está llamado a ese método.

Además, la palabra this se debe utilizar siempre que se

quiera acceder a una propiedad de un objeto, ya que en otro

caso, no se está accediendo correctamente a la propiedad. 4

OBJETOS.MÉTODOS (II)

Además de las funciones anónimas, también es posible

asignar a los métodos de un objeto funciones definidas con

anterioridad (sólo se debe indicar el nombre de la función

externa sin paréntesis):

function obtieneId() {

return this.id;

}

elObjeto.obtieneId = obtieneId;

Si escribiésemos elObjeto.obtieneId = obtieneId(); se ejecuta

la función obtieneId() y el resultado de la ejecución se

asigna a la propiedad obtieneId del objeto. Así, el objeto no

tendría un método llamado obtieneId, sino una propiedad

con ese nombre y con un valor igual al resultado devuelto

por la función externa. 5

OBJETOS DELETE

Las propiedades y los métodos pueden ser

eliminados dinámicamente con el operador

delete.

delete obj.valor;

6

JSON - INTRODUCCIÓN

JSON (JavaScript Object Notation) es un formato sencillo para el intercambio de información. El formato JSON permite representar estructuras de datos (arrays) y objetos (arrays asociativos) en forma de texto. La notación de objetos mediante JSON es una de las características principales de JavaScript y es un mecanismo definido en los fundamentos básicos del lenguaje.

En los últimos años, JSON se ha convertido en una alternativa al formato XML, ya que es más fácil de leer y escribir, además de ser mucho más conciso. No obstante, XML es superior técnicamente porque es un lenguaje de marcado, mientras que JSON es simplemente un formato para intercambiar datos.

La especificación completa de JSON se puede consultar en RFC 4627 ( http://tools.ietf.org/html/rfc4627 ) y su tipo MIME oficial es application/json. 7

NOTACIÓN JSON (I)

var miarray = new Array();

//var miarray = new Array( 1, 3, 7);

Array “normal” notación tradicional:

miarray[0]=“ford”;

miarray[1]=“seat”;

……

Array “normal” notación JSON:

miarray = [“ford”, “seat”, “mustang”];

Array asociativo notación tradicional:

miarray[„primero‟] = 1;

miarray.segundo = 2;

Array asociativo notación JSON:

miarray = {primero:1, segundo:2, tercero:3}; 8

NOTACIÓN JSON (II)

La notación JSON para los arrays asociativos se compone

de tres partes:

1. Los contenidos del array asociativo se encierran entre

llaves ({ y })

2. Los elementos del array se separan mediante una

coma (,)

3. La clave y el valor de cada elemento se separan

mediante dos puntos (:)

Si la clave no contiene espacios en blanco, es posible

prescindir de las comillas que encierran sus contenidos. Sin

embargo, las comillas son obligatorias cuando las claves

pueden contener espacios en blanco:

var titulosModulos = {"Lector RSS": "rss", "Gestor de email":

"email", "Agenda":"agenda"}; 9

EJEMPLO

En un mismo objeto se puede utilizar de forma simultánea la notación tradicional de JavaScript y la notación JSON:var libro = new Object();

libro.numeroPaginas = 150;

libro.autores = [ {id: 50}, {id: 67} ];

El ejemplo anterior se puede reescribir utilizando solamente la notación tradicional:var libro = { numeroPaginas: 150 };

libro.autores = new Array();

libro.autores[0] = new Object();

libro.autores[0].id = 50;

libro.autores[1] = new Object();

libro.autores[1].id = 67;

El ejemplo anterior también se puede reescribir utilizando exclusivamente la notación JSON:

var libro = { numeroPaginas: 150, autores: [{id: 50}, {id: 67}] };10

CLASES

Los objetos que se han visto hasta ahora son una simple

colección de propiedades y métodos que se definen para

cada objeto individual. Sin embargo, en la programación

orientada a objetos, el concepto fundamental es el de clase.

La forma habitual de trabajo consiste en definir clases a

partir de las cuales se crean los objetos con los que trabajan

las aplicaciones.

A pesar de estas limitaciones, es posible utilizar en

JavaScript unos elementos parecidos a las clases y que se

denominan pseudoclases. Los conceptos que se utilizan

para simular las clases son las funciones constructoras y el

prototype de los objetos.

11

CLASES – CONSTRUCTOR (I)

En JavaScript no existe el concepto de constructor. En

realidad, JavaScript emula el funcionamiento de los

constructores mediante el uso de funciones.

JavaScript utiliza funciones para simular los constructores

de objetos, por lo que estas funciones se denominan

"funciones constructoras".

function Factura(idFactura, idCliente) {

this.idFactura = idFactura;

this.idCliente = idCliente;

}

var laFactura = new Factura(3, 7);

Las funciones constructoras no solamente pueden

establecer las propiedades del objeto, sino que

también pueden definir sus métodos.12

CLASES – CONSTRUCTOR (II)

function Factura(idFactura, idCliente) {

this.idFactura = idFactura;

this.idCliente = idCliente;

this.muestraCliente = function() {

alert(this.idCliente);

}

this.muestraId = function() {

alert(this.idFactura);

}

Problema: con esta técnica, cada vez que se instancia un

objeto, las funciones muestraCliente() y muestraId() se

crean de nuevo por cada objeto creado, se penaliza el

rendimiento y un consumo excesivo.13

CLASES – PROTOTYPE (I)

La propiedad que soluciona este inconveniente y que permite que cualquier objeto JavaScript herede de forma automática todas las propiedades y métodos de otro objeto llamado prototype.

function Factura(idFactura, idCliente) {

this.idFactura = idFactura;

this.idCliente = idCliente;

}

Factura.prototype.muestraCliente = function() {

alert(this.idCliente);

}

Factura.prototype.muestraId = function() {

alert(this.idFactura);

}

var laFactura = new Factura(3, 7);

laFactura.muestraCliente();

var otraFactura = new Factura(5, 4);

otraFactura.muestraId();14

CLASES – PROTOTYPE (II)

Una de las posibilidades más interesantes de la propiedad prototype es que también permite añadir y/o modificar las propiedades y métodos de los objetos predefinidos por JavaScript.

Si por ejemplo se considera la clase Array, esta no dispone de un método que indique la posición de un elemento dentro de un array (como la función indexOf() de Java). Modificando el prototipo con el que se construyen los objetos de tipo Array, es posible añadir esta funcionalidad:

Array.prototype.indexOf = function(objeto) {

var resultado = -1;

for(var i=0; i<this.length; i++) {

if(this[i] == objeto) {

resultado = i;

break;

}

}

return resultado;

}

15

FRAMEWORK PROTOTYPE

Framework que facilita el desaroollo de

aplicaciones web con JavaScript y AJAX.

Web: http://www.prototypejs.org

Api: http://prototypejs.org/assets/2009/8/31/prototype.js

Api doc: http://www.prototypejs.org/api

16

FRAMEWORK SCRIP.ACULO.US (I)

Script.aculo.us ( http://script.aculo.us/ ) es una de las muchas librerías que han surgido para facilitar el desarrollo de aplicaciones JavaScript y que están basadas en Prototype.

Api: http://script.aculo.us/dist/scriptaculous-js-1.8.3.zip

Api doc: http://wiki.script.aculo.us/scriptaculous/

La librería está dividida en varios módulos: Efectos: permite añadir de forma muy sencilla efectos

especiales a cualquier elemento de la página. La librería incluye una serie de efectos básicos y otros efectos complejos construidos con la combinación de esos efectos básicos. Entre los efectos prediseñados se encuentran el parpadeo, movimiento rápido, aparecer/desaparecer, aumentar/disminuir de tamaño, desplegarse, etc.

http://wiki.github.com/madrobby/scriptaculous/combination-effects

17

FRAMEWORK SCRIP.ACULO.US (II)

Controles: define varios controles que se pueden añadir

directamente a cualquier aplicación web. Los tres controles que

forman este módulo son: "arrastrar y soltar", que permite definir

los elementos que se pueden arrastrar y las zonas en las que se

pueden soltar elementos; "autocompletar", que permite definir un

cuadro de texto en el que los valores que se escriben se

autocompletan con ayuda del servidor; editor de contenidos, que

permite modificar los contenidos de cualquier página web

añadiendo un sencillo editor AJAX en cada elemento.

http://wiki.github.com/madrobby/scriptaculous/controls

Utilidades: la utilidad principal que incluye se llama builder, que

se utiliza para crear fácilmente nodos y fragmentos complejos de

DOM.

http://wiki.github.com/madrobby/scriptaculous/builder

18

FRAMEWORK JQUERY

jQuery ( http://jquery.com/ ) es la librería JavaScript que ha

irrumpido con más fuerza como alternativa a Prototype. jQuery

también ha sido programada de forma muy eficiente y su versión

comprimida apenas ocupa 20 KB.

jQuery comparte con Prototype muchas ideas e incluso dispone de

funciones con el mismo nombre. Sin embargo, su diseño interno

tiene algunas diferencias drásticas respecto a Prototype, sobre

todo el "encadenamiento" de llamadas a métodos.

La documentación de jQuery es muy completa en inglés e incluye

muchos ejemplos. Además, también existen algunos recursos

útiles en español para aprender su funcionamiento básico:

http://docs.jquery.com/

Api: http://blog.jquery.com/2010/02/19/jquery-142-released/19

+ FRAMEWORKS

Comparativa: Javascript Framework Matrix

http://matthiasschuetz.com/javascript-framework-

matrix/en/

Librerias para visualizar gráficos

http://www.datavisualization.ch/tools/13-javascript-

libraries-for-visualizations

20

UTILIDADES

Comprimir el código JavaScript: herramientas que reducen

mucho el tamaño del código sin modificar su comportamiento.

Eliminan espacios en blanco sobrantes, eliminan comentarios

y convierten toda la aplicación en una única línea de código

muy larga. También pueden sustituir el nombre de las

variables y funciones.

http://code.google.com/intl/es/closure/compiler/ (jQuery)

http://shrinksafe.dojotoolkit.org/

Ofuscar el código JavaScript: hacen casi imposible entender el

código fuente de la aplicación.

http://www.jasob.com/

http://dean.edwards.name/packer/

http://adrian3.googlepages.com/jsjuicer.html

Jsjuicer online: http://gueschla.com/labs/jsjuicer/21

SCRIPTS

http://www.twinhelix.com

http://www.javascriptkit.com

http://www.elcodigo.com

http://www.javascripts.astalaweb.net

http://www.softcomplex.com

Basandas en jQuery:

jDigiClock, Reloj HTC Hero:

http://www.anieto2k.com/2010/02/15/jdigiclock-reloj-htc-hero-con-

jquery/

CSS Dock Menu

http://www.ndesign-studio.com/blog/mac/css-dock-menu

Tooltip

http://www.bosrup.com/web/overlib/

22APIS

http://www.programmableweb.com/apis/directory/1?sort=mashups