Documentos de Académico
Documentos de Profesional
Documentos de Cultura
Javascriptavanzado PDF
Javascriptavanzado PDF
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;
2
elArray.segundo = 2;
OBJETOS.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:
8
miarray = {primero:1, segundo:2, tercero:3};
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 12
también pueden definir sus métodos.
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);
}
Array.prototype.indexOf = function(objeto) {
var resultado = -1;
for(var i=0; i<this.length; i++) {
if(this[i] == objeto) {
resultado = i;
break;
}
} 15
return resultado;
}
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
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
http://wiki.github.com/madrobby/scriptaculous/combination-effects
FRAMEWORK SCRIP.ACULO.US (II)
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/
APIS 22
http://www.programmableweb.com/apis/directory/1?sort=mashups