Javascript :: Intro
Primero tengamos una vision deDocument Object Model (DOM) que nos ayudara a manejarnos en javascript:
->layer | ->text | |||
->frame | ->link | ->password | ||
window-> | ->document -> | ->image | ->hidden | |
->location | ->area | ->submit | ||
->history | ->anchor | ->reset | ||
->applet | ->radio | |||
->form -> | ->checkbox | |||
->button | ||||
->select -> | ->option |
Objetos personalizados en JavaScript
Aunque JavaScript no es un lenguaje puro de orientacion a objetos, tiene un mecanismo para la encapsulacion (agrupar y esconder informacion en un objeto).
Creamos un objeto llamado cartLineItem y con el operador punto se definen y asignan valores a nuestro objeto en particular:
cartLineItem=new Object();
cartLineItem.productID='MG1234';
cartLineItem.productName='MGB Roadster (1935)';
cartLineItem.quantity=1;
cartLineItem.unitPrice=36000;
Una instancia de cartLineItem se puede usar despues para referenciarla:
alert('Tienes'+cartLineItem.quantity+' ' +cartLineItem.productName + ' en tu carrito de la compra');
Asignar
Al igual que las propiedades (como productName), tambien los metodos se pueden asociar a nuestro objeto particular, siempre y cuando la funcion se haya descrito mas arriba en el documento. Escribimos la funcion total() , que es una funcion miembro de nuestro objeto, y mas tarde esta funcion tiene acceso a su objeto propietario a traves del operador this:function total()
{
return(this.quantity*this.unitPrice);
}
La funcion se asigna al objeto como si fuese una propiedad:cartLineItem.total=total;
Una vez asignada al objeto, ya se la puede llamar directamente desde el objeto cartLineItem:cartLineItem=new Object();
cartLineItem.productID='MG1234';
cartLineItem.productName='MGB Roadster (1935)';
cartLineItem.quantity=2;
cartLineItem.unitPrice=12500;
cartLineItem.total=total;
document.write( cartLineItem.quantity + '' +cartLineItem.productName +' te costara :' +cartLineItem.total() +' €');
Definir un prototipo
Para facilitar las cosas, podemos definir un prototipo (como un constructor de C++). El prototipo es una funcion que crea un objeto personalizado y opcionalmente inicializa las propiedades del objeto, que en el caso de un objeto de JavaScript, debe incluir las funciones. Aqui tenemos el prototipo de LineItem:function LineItem(id,name,quantity,price)
{
this.productID=id;
this.productName=name;
this.quantity=quantity;
this.unitPrice=price;
this.total=total;
}
Con el prototipo definido, se puede crear un array de instancias de LineItem:var cartLineItem=new Array();
cartLineItem[0]=new LineItem('MG123','MGB Mk I Roadster',1,36000);
cartLineItem[1]=new LineItem('AH736','Austin Healey Sprite',1,9500);
cartLineItem[2]=new LineItem('TS225',Triumph SpitFire Mk I',1,13000);