javascript - jorbartu.webcindario.comjorbartu.webcindario.com/javascriptavanzado.pdf · los...
TRANSCRIPT
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