martes, 7 de diciembre de 2010

Objetos con JavaScript (POO) I

Delaramos al objeto usando una función, dentro de ésta declaramos las propiedades.Las propiedades van precedidas de la palabra clave 'this' y seguidamente '.'(punto):


//My Object:
function Persona(nombre,apellido,edad)
{
this.Nombre = nombre;
this.Apellido = apellido;
this.Edad = edad;
}

Como vemos, el objeto Persona tendrá 3 propiedades: Nombre, Apellido y Edad.
Veamos cómo podemos acceder a las propiedades:


<html>
<head>
<title>Test JavaScript Objects</title>
<script type="text/javascript">
//My Object:
function Persona(nombre,apellido,edad)
{
this.Nombre = nombre;
this.Apellido = apellido;
this.Edad = edad;
}

function TestMyObject()
{
var persona;
persona = GetPersona();
var msg = "Nombre: " + persona.Nombre + "\n" + "Apellido: ";
msg += persona.Apellido + "\n" + "Edad: " + persona.Edad;
alert(msg);

}

function GetPersona()
{
var persona = new Persona("Pedro","Picapiedra",40);
return persona;
}
</script>
</head>
<body>
<div style="width:300px;height:50px;background:#aaccdd;" onclick="TestMyObject()">
Test Object (clic aquí)
</div>
</body>
</html>


Ahora veamos un ejemplo con un array de objetos Persona :


<html>
<head>
<title>Test JavaScript Objects</title>
<script type="text/javascript">
//My Object:
function Persona(nombre,apellido,edad)
{
this.Nombre = nombre;
this.Apellido = apellido;
this.Edad = edad;
}

function TestArrayObjects()
{
var myObjects = new Array();
myObjects = GetArrayPersonas();
var persona;
var msg = "";
for(var i=0;i<myObjects.length;i++)
{
persona = myObjects[i];
msg = "Nombre: " + persona.Nombre + "\n" + "Apellido: ";
msg += persona.Apellido + "\n" + "Edad: " + persona.Edad;
alert(msg);
}
}

function GetArrayPersonas()
{
var size = 4;
var myarray = new Array(size);
for(var i=0;i<size;i++)
{
var persona = new Persona(("Pedro "+i),("Picapiedra "+i),(40+i));
myarray[i] = persona;
}
return myarray;
}
</script>
</head>
<body>
<div style="width:300px;height:50px;background:#eeffaa;margin-top:30px;" onclick="TestArrayObjects()">
Test Array Objects (clic aquí)
</div>
</body>
</html>

No hay comentarios:

Publicar un comentario