# Capítulo 3.

Javascript avanzado
---
## Prototipos
Javascript es un [lenguaje basado en
prototipos](https://developer.mozilla.org/es/docs/Web/JavaScript/Guide/
Details_of_the_Object_Model#lenguajes_basados_en_clases_vs._basados_en_prototipos)
en lugar de estar basado en clases, es decir un objeto que se utiliza como
plantilla(prototipo) a partir de la cual se obtiene el conjunto inicial de
propiedades del nuevo objeto.
* En Javascript: El conjunto _inicial_ de propiedades lo determina la función
constructor o el **prototipo**. Se pueden añadir y quitar propiedades dinámicamente
a objetos específicos o a un conjunto de objetos.
* En Java: En la definición de una **clase** se especifican _todas_ las
propiedades de todas las instancias de esa clase. No se puede añadir propiedades
dinámicamente en tiempo de ejecución.

### Ejemplo

https://www.youtube.com/watch?v=Hf3n-p3VYx4
## Creando un objeto con `new`
https://github.com/mdn/interactive-examples
---

Los objetos los usamos para organizar el código fuente de una forma más clara y
para encapsular propiedades y métodos. Con `new NombreClase()` creamos un objeto o
una instancia de la clase.

```js
/*
Object es un objeto genérico al que podemos añadir
propiedades y métodos propios
*/
var elObjeto = new Object();

var laCadena = new String(); // Objeto para cadenas de texto

```

### Recordatorio de arrays asociativos

JavaScript forma los objetos como arrays asociativos, cuyos índices son
claves(strings)

```js

var coche = new Array();

coche["color"] = "rojo";
coche["marca"] = "seat";
coche["modelo"] = "leon";

/* De forma resumida // No es necesario poner comillas a las claves

var coche = {color:"rojo",marca:"seat",modelo:"leon"};
*/

var dato = coche["color"] // hemos guardado "rojo" en dato

// Recorremos el array asociatico con un for each

for(var clave in coche)

{
document.write(clave+": " +coche[clave]);
}

// Podemos asignar o acceder a un elemento de un array también con la notación del

punto

var dato = coche.color;

```

## Definiendo Clases
https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Classes

### Declaración de clases

Lo primero que tenemos que hacer es declarar la clase con `class
Nombre_de_la_clase` , también existirá una función especial llamada `constructor()`
en la que definiremos las propiedades o atributos de la clase.

```js
/*
Si ponemos la instancia antes de la declaración
Nos da un ReferenceError

*/

// const pp = new Rectangulo(20,10); aqui da error

class Rectangulo
{
constructor(alto, ancho)
{
this.alto = alto;
this.ancho = ancho;
}
}

const p = new Rectangulo(20,10);

document.write( "p.alto: 2" + p.alto + "<br>");

document.write( "p.ancho: " + p.ancho + "<br>");

```

### Expresiones de clases

Las expresiones de clases mediante la sentencia `let` es otra forma de definir una
clase. El nombre dado a la expresión de clase nombrada es **local** dentro del
cuerpo de la misma

```js

// Esta es una expresión de clase anónima, no usamos nombre en la clase

let Rectangulo = class {
constructor(alto, ancho) {
this.alto = alto;
this.ancho = ancho;
}
};

console.log(Rectangulo.name);
// output: "Rectangulo"
// Esta es una expresión de clase nombrada, usamos nombre en la clase
let Rectangulo2 = class Rectangulo2 {
constructor(alto, ancho) {
this.alto = alto;
this.ancho = ancho;
}
};
console.log(Rectangulo2.name);
// output: "Rectangulo2
```

## Cuerpo de la clase y definición de métodos

El contenido de una clase es la parte que se encuentra entre las llaves {}. Este es
el lugar se definen los miembros de clase, como los métodos o constructores.

### Modo estricto

El cuerpo de las declaraciones de clase y las expresiones de clase son ejecutadas

en [modo estricto](https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/
Strict_mode). En otras palabras, el código escrito aquí está sujeto a una sintaxis
más estricta para aumentar el rendimiento, se arrojarán algunos errores silenciosos
y algunas palabras clave están reservadas para versiones futuras de ECMAScript.

### Constructor

El método [constructor](https://developer.mozilla.org/es/docs/Web/JavaScript/
Reference/Classes/constructor) es un método especial para crear e inicializar un
objeto creado con una clase. Solo puede haber un método especial con el nombre
"constructor" en una clase. Si contiene más de una ocurrencia del método
constructor, se arroja un error
[SyntaxError](https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/
Global_Objects/SyntaxError)

Si no especifica un método constructor, se utiliza un constructor predeterminado

vacío.

```js
constructor() {}
```

Un constructor puede usar la palabra reservada

[`super`](https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/
Operators/super) para llamar al constructor de una superclase. Para una clase
derivada de otra el constructor por defecto es:

```js
constructor(...args) {
super(...args);
}
```

### Métodos prototipo

Ver también métodos

[definidos](https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/
Functions/Method_definitions)

```js
class Rectangulo {
constructor (alto, ancho) {
this.alto = alto;
this.ancho = ancho;
// .name no está definido por defecto
this.name = "Clase Rectángulo";
}
// Getter
get area() {
return this.calcArea();
}
// Método
calcArea () {
return this.alto * this.ancho;
}
}

const cuadrado = new Rectangulo(10, 10);

document.write("cuadrado.area: " + cuadrado.area); // 100

document.write("<br>")
document.write("cuadrado.name: " + cuadrado.name)
document.write("<br>")
document.write("Ejecutado: 04.js");

/*

cuadrado.area:100
cuadrado.name:Clase Rectángulo
Ejecutado: 04.js

*/
```

### Métodos estáticos

Los métodos estáticos se ejecutan para implementar funciones que pertenecen a la
clase, pero no a ningún objeto particular de la misma. Suelen servir para crear
funciones de utilidad para la aplicación. En su definición utilizan la palabra
clave [static](https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/
Classes/static).
* Un método estático puede usar propiedades de objetos como medio para calcular
algo, pero no es un método aplicado a un objeto, está por encima de ellos, los
puede usar, pero la función pertenece a toda la clase.

```js
class Punto {
constructor ( x , y ){
this.x = x;
this.y = y;
}

static distancia ( a , b) {
const dx = a.x - b.x;
const dy = a.y - b.y;

return Math.sqrt ( dx * dx + dy * dy );
}
}
const p1 = new Punto(5, 5);
const p2 = new Punto(10, 10);

document.write("Distancia puntos (p1,p2): " + Punto.distancia(p1, p2));

// 7.0710678118654755
document.write("<br>");
```

Veamos un ejemplo con una clase heredada

```js
// 06.js
// Ejemplo tomado de https://es.javascript.info/static-properties-methods

class Animal {

static planeta = "Tierra"; // Es un atributo que van a tener todos los objetos

constructor(nombre, velocidad)
{
this.velocidad = velocidad;
this.nombre = nombre;
}

corre(velocidad = 0)
{
this.velocidad += velocidad; // ojo velocidad local sirve para aumentar la
// velocidad inicial del constructor
document.write(this.nombre + " corre a una velocidad de " + this.velocidad);
document.write("<br>");
}

static compara(animalA, animalB)

{
document.write( "animalA.nombre: " + animalA.nombre);
document.write( "<br>");
document.write( animalA.velocidad);
document.write( "<br>");

document.write( "animalB.nombre: " + animalB.nombre);

document.write( "<br>");
document.write( animalB.velocidad);
document.write( "<br>");
var diferencia = animalA.velocidad - animalB.velocidad;
document.write( "diferencia: " + diferencia);
document.write( "<br>");
return diferencia;
}

// La clase Conejo es una herencia de Animal

// El construcor es el heredado de la superclase, no tiene nuevos argumentos

class Conejo extends Animal

{
esconderse() {
document.write(this.nombre + " se esconde");
document.write("<br>");
 }
}

// #############################################
// Instanciamos Conejo, creando 2 ejemplares
// #############################################

let Conejos = [
new Conejo("Conejo Blanco", 10),
new Conejo("Conejo Negro", 5)
];

/* Comprobamos los ejemplares creados

Conejos[0]: Conejo Blanco
Conejos[1]: Conejo Negro
*/
document.write( "Conejos[0]: " + Conejos[0].nombre + "<br>");
document.write( "Conejos[1]: " + Conejos[1].nombre + "<br>");

// #####################################################################
/* Conejo.compara es un método estático heredado de la superclase Animal
se lo aplicamos a los 2 ejemplares

animalA.nombre: Conejo Blanco

10
animalB.nombre: Conejo Negro
5
diferencia: 5
*/
// #####################################################################

Conejo.compara(Conejos[0],Conejos[1]);

/* https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/
Global_Objects/Array/sort

// ##########################################################################
Dentro del método sort() aplicado a un array podemos poner como argumento
la función comparación objeto.sort(clase.compareFN)
// ##########################################################################
*/

Conejos.sort(Conejo.compara);

/*

Como Conejo.compara es negativo, el array será ordenado de forma inversa

compareFunction(a, b) return value sort order
> 0 sort b before a
< 0 sort a before b
=== 0 keep original order of a and b
Conejos[0]: Conejo Negro
Conejos[1]: Conejo Blanco
*/

document.write( "Conejos[0]: " + Conejos[0].nombre + "<br>");

document.write( "Conejos[1]: " + Conejos[1].nombre + "<br>");
// #####################################################################
// Este método corre se hereda de la superclase Animal
// #####################################################################

Conejos[0].corre(); // Conejo Negro corre a una velocidad de 5.

Conejos[1].corre(); // Conejo Blanco corre a una velocidad de 10.

// #####################################################################
// Esta propiedad también se hereda de Animal
// #####################################################################

document.write(Conejo.planeta); // Tierra
document.write("<br>");

document.write("Ejecutado: 06.js");
```

### Boxing con prototipos y métodos estáticos

Cuando un método estático o método del prototipo es llamado sin un valor para

"this" (o con "this" como booleano, cadena, número, undefined o null), entonces el
valor de "this" será **undefined** dentro de la función llamada. _Autoboxing_ no
ocurrirá. El comportamiento será igual inclusive si se escribe el código en modo no
estricto.

#### 3.1.1.1. Propiedades

Como los objetos son en realidad arrays asociativos que almacenan sus propiedades y
métodos, la forma más directa para definir esas propiedades y métodos es la
notación de puntos:

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.1.1.2. Métodos

Además de las propiedades, los métodos de los objetos también se pueden definir
mediante la notación de puntos:

elObjeto.muestraId = function() {
alert("El ID del objeto es " + this.id);
}

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, tal y como muestra el ejemplo anterior.

Uno de los aspectos más importantes del ejemplo anterior es el uso de la palabra
reservada `this`. 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.

De esta forma, en el ejemplo anterior:

var elObjeto = new Object();

elObjeto.id = "10";
elObjeto.muestraId = function() {
alert("El ID del objeto es " + this.id);
}

Dentro del método, `this` apunta al objeto que llama a ese método. En este caso,
`this` hace referencia a `elObjeto`. Por tanto, la instrucción del método
`muestraId` es equivalente a indicar:

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

El uso de `this` es imprescindible para crear aplicaciones reales. El motivo es que

nunca se puede suponer el nombre que tendrá la variable (el objeto) que incluye ese
método. Como los programadores pueden elegir libremente el nombre de cada objeto,
no hay forma de asegurar que la siguiente instrucción funcione siempre
correctamente:

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

Si el objeto se llamara `otroObjeto`, el código anterior no funcionaría

correctamente. Sin embargo, utilizando la palabra reservada `this`, el método
funciona siempre bien independientemente del nombre del objeto.

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:

var elObjeto = new Object();

elObjeto.id = "10";
elObjeto.muestraId = function() {
alert("El ID del objeto es "\+ id);
}

Si se ejecuta el ejemplo anterior, se muestra el error `"id is not defined"` _la

variable id no está definida_).

Además de las funciones anónimas, también es posible asignar a los métodos de un

objeto funciones definidas con anterioridad:

function obtieneId() {
return this.id;
}

elObjeto.obtieneId = obtieneId;

Para asignar una función externa al método de un objeto, sólo se debe indicar el
nombre de la función externa sin paréntesis. Si se utilizaran los paréntesis:
function obtieneId() {
return this.id;
}

elObjeto.obtieneId = obtieneId();

En el ejemplo anterior, 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.

Por otra parte, no es obligatorio que el método del objeto se llame igual que la
función externa, aunque es posible que así sea.

A continuación se muestra un objeto completo formado por varias propiedades y

métodos y creado con la notación de puntos:

var elObjeto = new Object();

elObjeto.id = "10";
elObjeto.nombre = "Objeto de prueba";
elObjeto.muestraId = function() {
alert("El ID del objeto es "\+ this.id);
}
elObjeto.muestraNombre = function() {
alert(this.nombre);
}

Siguiendo este mismo procedimiento, es posible crear objetos complejos que

contengan otros objetos:

var Aplicacion = new Object();

Aplicacion.Modulos = new Array();

Aplicacion.Modulos\[0\] = new Object();
Aplicacion.Modulos\[0\].titulo = "Lector RSS";

var inicial = new Object();

inicial.estado = 1;
inicial.publico = 0;
inicial.nombre = "Modulo\_RSS";
inicial.datos = new Object();

Aplicacion.Modulos\[0\].objetoInicial = inicial;

En el ejemplo anterior, se define un objeto principal llamado `Aplicacion` que a su

vez contiene varios objetos. La propiedad `Modulos` de la aplicación es un array en
el que cada elemento es un objeto que representa a un módulo. A su vez, cada objeto
`Modulo` tiene una propiedad llamada `titulo` y otra llamada `objetoInicial` que
también es un objeto con las propiedades y valores iniciales del módulo.

La notación tradicional de JavaScript puede llegar a ser tediosa cuando se

desarrollan aplicaciones complejas con objetos que contienen otros muchos objetos y
arrays. Por este motivo, JavaScript define un método alternativo de notación
llamado JSON (_JavaScript Object Notation_) y que se verá más adelante.

#### 3.1.1.3. Métodos apply() y call()

JavaScript define un par de métodos denominados `apply()` y `call()` que son muy
útiles para las funciones. Ambos métodos permiten ejecutar una función como si
fuera un método de otro objeto. La única diferencia entre los dos métodos es la
forma en la que se pasan los argumentos a la función.

El siguiente ejemplo muestra cómo utilizar el método `call()` para ejecutar una
función como si fuera un método del objeto `elObjeto`:

function miFuncion(x) {
return this.numero + x;
}

var elObjeto = new Object();

elObjeto.numero = 5;

var resultado = miFuncion.call(elObjeto, 4);

alert(resultado);

El primer parámetro del método `call()` es el objeto sobre el que se va a ejecutar

la función. Como la función se trata como si fuera un método del objeto, la palabra
reservada `this` hace referencia al objeto indicado en la llamada a `call()`. De
esta forma, si en la función se utiliza `this.numero`, en realidad se está
obteniendo el valor de la propiedad `numero` del objeto.

El resto de parámetros del método `call()` son los parámetros que se pasan a la
función. En este caso, solamente es necesario un parámetro, que es el número que se
sumará a la propiedad `numero` del objeto.

El método `apply()` es idéntico al método `call()`, salvo que en este caso los
parámetros se pasan como un array:

function miFuncion(x) {
return this.numero + x;
}
var elObjeto = new Object();
elObjeto.numero = 5;

var resultado = miFuncion.apply(elObjeto, \[4\]);

alert(resultado);

### 3.1.2. Notación JSON

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](https://tools.ietf.org/html/rfc4627) y su tipo MIME oficial es
`application/json`.

Como ya se sabe, la notación tradicional de los arrays es tediosa cuando existen

muchos elementos:

var modulos = new Array();

modulos\[0\] = "Lector RSS";
modulos\[1\] = "Gestor email";
modulos\[2\] = "Agenda";
modulos\[3\] = "Buscador";
modulos\[4\] = "Enlaces";

Para crear un array normal mediante JSON, se indican sus valores separados por
comas y encerrados entre corchetes. Por lo tanto, el ejemplo anterior se puede
reescribir de la siguiente manera utilizando la notación JSON:

var modulos = \["Lector RSS", "Gestor email", "Agenda", "Buscador", "Enlaces"\];

Por su parte, la notación tradicional de los arrays asociativos es igual de tediosa

que la de los arrays normales:

var modulos = new Array();

modulos.titulos = new Array();
modulos.titulos\['rss'\] = "Lector RSS";
modulos.titulos\['email'\] = "Gestor de email";
modulos.titulos\['agenda'\] = "Agenda";

En este caso, se puede utilizar la notación de puntos para abreviar ligeramente su

definición:

var modulos = new Array();

modulos.titulos = new Array();
modulos.titulos.rss = "Lector RSS";
modulos.titulos.email = "Gestor de email";
modulos.titulos.agenda = "Agenda";

En cualquier caso, la notación JSON permite definir los arrays asociativos de una
forma mucho más concisa. De hecho, el ejemplo anterior se puede reescribir de la
siguiente manera utilizando la notación JSON:

var modulos = new Array();

modulos.titulos = {rss: "Lector RSS", email: "Gestor de email", agenda: "Agenda"};

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"};

Como JavaScript ignora los espacios en blanco sobrantes, es posible reordenar las
claves y valores para que se muestren más claramente en el código fuente de la
aplicación. El ejemplo anterior se puede rehacer de la siguiente manera añadiendo
nuevas líneas para separar los elementos y añadiendo espacios en blanco para
tabular las claves y para alinear los valores:

var titulos = {
rss: "Lector RSS",
email: "Gestor de email",
 agenda: "Agenda"
};

Combinando la notación de los arrays simples y asociativos, es posible construir

objetos muy complejos de forma sencilla. Con la notación tradicional, un objeto
complejo se puede crear de la siguiente manera:

var modulo = new Object();

modulo.titulo = "Lector RSS";
modulo.objetoInicial = new Object();
modulo.objetoInicial.estado = 1;
modulo.objetoInicial.publico = 0;
modulo.objetoInicial.nombre = "Modulo\_RSS";
modulo.objetoInicial.datos = new Object();

Utilizando JSON, es posible reescribir el ejemplo anterior de forma mucho más

concisa:

var modulo = {
titulo : "Lector RSS",
objetoInicial : { estado : 1, publico : 0, nombre : "Modulo RSS", datos : {} }
};

Los objetos se pueden definir en forma de pares clave/valor separados por comas y
encerrados entre llaves. Para crear objetos vacíos, se utilizan un par de llaves
sin contenido en su interior `{}`.

A continuación se muestra la notación JSON genérica para crear arrays y objetos:

**Arrays**

var array = \[valor1, valor2, valor3, ..., valorN\];

**Objetos**

var objeto = { clave1: valor1, clave2: valor2, clave3: valor3, ..., claveN:
valorN };

La notación abreviada se puede combinar para crear arrays de objetos, objetos con
arrays, objetos con objetos y arrays, etc. A continuación se muestran algunos
ejemplos de aplicaciones web reales que crean objetos mediante esta notación.

**Ejemplo extraído del código fuente de Blinksale.com**

var Invoice = Class.create();

Invoice.prototype = {
initialize: function(line\_html, currency\_symbol) {
this.line\_html = line\_html;
this.currency\_symbol = currency\_symbol;
this.line\_index = 1;
this.update();
},

kinds: \['Service','Hours','Days','Product'\],

change\_kind: function(i) {
if($F('lines\_'+i+'\_kind')=='Hours') {
$('lines\_'+i+'\_unit\_price').value = $F('default\_hourly\_rate');
this.update();
 }
},

focus\_num: function() {
$('invoice\_number').focus();
},

use\_freight: function() {
return $('invoice\_use\_freight').checked
},

freight: function() {
return this.use\_freight() ? Number(noCommas($('invoice\_freight').value)) :
0 ;
},
...
}

**Ejemplo extraído del código fuente de Gmail.com**

pf.prototype = {
Ed:function(a){this.hm=a},
dh:function(){if(this.eb.Th>0) {var a=Math.random()\*100; return a<this.eb.Th}
return false },
Sg:function(a,b,c){ this.Vd=2; this.kb=Ic(a,true); this.Pc=b; this.Vl=c;
this.Be() },
ne:function(a,b,c){ this.Vd=2; this.kb=Ic(a,true); this.Pc=null; this.Vl=b; if(c)
{this.vm=false} this.Be()},
...
}

**Ejemplo extraído del código fuente de la librería prototype.js**

var Prototype = {
Version: '1.6.0.2',

ScriptFragment: '<script\[^>\]\*>(\[\\\\S\\\\s\]\*?)<\\/script>',
JSONFilter: /^\\/\\\*-secure-(\[\\s\\S\]\*)\\\*\\/\\s\*$/,

emptyFunction: function() { },
K: function(x) { return x }
};

**Ejemplo extraído del código fuente de Netvibes.com**

var App = new Object();

App.mode = 'userPage';
App.lang = 'es';
App.Modules = new Object();

App.Modules.RssReaderInfos = {
infos: App.Loc.defaultRssReader\_infos,
defaultObj: {status:1, share:0, title:"", moduleName:"RssReader", data:{}}
}
App.Modules.GmailInfos = {
title: App.Loc.defaultGmail\_title,
infos: App.Loc.defaultGmail\_infos,
defaultObj:{status:1, share:0, title:App.Loc.defaultGmail\_title,
moduleName:"Gmail", data:{}},
 path: NV\_PATH+"modules/gmail/gmail.js?v=5",
ico: NV\_PATH+"img/gmail.gif"
}
App.Modules.WeatherInfos = {
title: App.Loc.defaultWeather\_title,
infos: App.Loc.defaultWeather\_infos,
defaultObj:{status:1, share:0, title:App.Loc.defaultWeather\_title,
moduleName:"Weather", data:{town:"FRXX0076"}},
path: NV\_PATH+"modules/weather/weather.js?v=2",
ico: NV\_PATH+"img/weather.gif"
}

**Ejemplo extraído del código fuente de Writeboard.com**

var exportManager = {
show: function() {
$('exportButton').src = "/images/b-export-on.gif"
showElement('download\_export')
},

hide: function() {
$('exportButton').src = "/images/b-export.gif"
hideElement('download\_export')
},

toggle: function() {
Element.visible('download\_export') ? this.hide() : this.show()
}
}

**Ejemplo extraído del código fuente del framework Dojo**

var dojo;
if(dj\_undef("dojo")){ dojo = {}; }

dojo.version = {
major: 0, minor: 2, patch: 2, flag: "",
revision: Number("$Rev: 2836 $".match(/\[0-9\]+/)\[0\]),
toString: function() {
with (dojo.version) {
return major + "." + minor + "." + patch + flag + " (" + revision + ")";
}
}
};

A partir de los ejemplos anteriores, se deduce que la forma habitual para definir
los objetos en JavaScript se basa en el siguiente modelo creado con la notación
JSON:

var objeto = {
"propiedad1": valor\_simple\_1,
"propiedad2": valor\_simple\_2,
"propiedad3": \[array1\_valor1, array1\_valor2\],
"propiedad4": { "propiedad anidada": valor },
"metodo1": nombre\_funcion\_externa,
"metodo2": function() { ... },
"metodo3": function() { ... },
"metodo4": function() { ... }
};
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}\] };

Ejercicio 1

Definir la estructura de un objeto que almacena una factura. Las facturas están
formadas por la información de la propia empresa (nombre de la empresa, dirección,
teléfono, NIF), la información del cliente (similar a la de la empresa), una lista
de elementos (cada uno de los cuales dispone de descripción, precio, cantidad) y
otra información básica de la factura (importe total, tipo de iva, forma de pago).

Una vez definidas las propiedades del objeto, añadir un método que calcule el
importe total de la factura y actualice el valor de la propiedad correspondiente.
Por último, añadir otro método que muestre por pantalla el importe total de la
factura.

[Ver solución](http://librosweb.es/ajax/capitulo_14.html)

___

___