JavaScript Avanzado - diseño y programación web

JAVASCRIPT
1
Avanzado
OBJETOS



Técnicamente, un objeto de JavaScript es un array
asociativo 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-frameworkmatrix/en/
Librerias para visualizar gráficos

http://www.datavisualization.ch/tools/13-javascriptlibraries-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-conjquery/
 CSS Dock Menu
http://www.ndesign-studio.com/blog/mac/css-dock-menu
 Tooltip
http://www.bosrup.com/web/overlib/
APIS

http://www.programmableweb.com/apis/directory/1?sort=mashups
22