Intro

A small introduction to javascript

Javascript :: Intro

Primero tengamos una vision de

Document 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);