Anterior
Objetos de un documento
Creación de Nuevos Objetos y Matrices Siguiente
Apéndice

En esta sección:
  1. Creación de nuevos objetos.
  2. Creación de matrices.
  3. Un ejemplo final.


En realidad, ambas tareas, crear nuevos tipo de objetos y crear matrices, son bastantes simples, dado el enfoque basado en objetos de JavaScript.


1. Creación nuevos objetos. Indice

Crear un nuevo objeto implica dotarlo de propiedades y métodos, es decir, crear una especie de clase de la que luego se puedan hacer instancias. Los objetos no se pueden destruir, perviven mientras esté el documento cargado.

Para crear un objeto, en realidad lo que hacemos es dar su función constructor. Por ejemplo, supongamos que queremos crear el objeto ordenador con las propiedades microprocesador, velocidad, y sistema operativo. Tendríamos que crear una función de la siguiente forma:

function ordenador( micro,veloc,sistem ) {
  this.microprocesador=micro;
  this.velocidad=veloc;
  this.sistema_operativo=sistem;
} // function ordenador

Posteriormente podremos crear instancias de este objeto llamando a la función con la partícula new delante, es decir:

var orden1=new ordenador("pentium","166","Windows 95");
var orden2=new ordenador("486DX2","66","MS-DOS 6.22");

En cualquier momento podemos añadir nuevas propiedades a un objeto. Podemos hacerlo de dos formas. La primera es añadírsela a una sola instancia, por ejemplo:

orden1.cdrom="16X";

O bien añadírselo al objeto en general (y por tanto a todas las instancias), para lo cual se ha de incluir la palabra reservada prototype:

ordenador.prototype.cdrom=NUL

Además, los objetos tienen métodos. Para dotar de métodos a un objeto tenemos las mismas dos opciones que con las propiedades: bien ponerlo en la declaración del objeto, o bien añadirlo a una sola instancia o al objeto en general. Por ejemplo, veamos un método para visualizar los componentes del objeto ordenador declarado anteriormente:

function visualiza() {
 var cadena="Microprocesador: "+this.microprocesador+"\n"+
            "Velocidad: "+this.velocidad+" Mhz.\n"+
            "Sistema Operativo: "+this.sistema_operativo;
  alert(cadena);
} // function visualiza

Lo anterior sirve para declarar la función que visualiza, ahora la declaración de la función que construye el objeto quedaría de la siguiente forma:

function ordenador( micro,veloc,sistem ) {
  this.microprocesador=micro;
  this.velocidad=veloc;
  this.sistema_operativo=sistem;
  this.visualiza=visualiza;
} // function ordenador

Nótese que no escribimos:

this.visualiza=visualiza();

Ya que lo que queremos es que se asigne la función, no el resultado que devuelve la misma. Al final de la siguiente sección se puede encontrar un ejemplo completo de la creación y uso de objetos definidos por el usuario.


2. Creación de matrices. Indice

Para crear una matriz se utilizan conjuntamente la palabra reservada new y el objeto Array.

Podemos crear una matriz inicializada o sin inicializar. El número de elementos no es fijo. En el momento en el que asignemos a una posición de la matriz un valor, se crearán en medio tantos elementos como haga falta, aunque serán NUL por lo que no podremos usarlos. Así, por ejemplo podríamos poner:

matriz=new Array(10);

o bien:

matriz=new Array{"pepe","manolo");

o incluso (teniendo en cuenta las variables declaradas en la sección anterior):

matriz=new Array( orden1,orden2 );

Así pues, el tipo de los elementos del array es el que se le asigne primero.


3. Un ejemplo final. Indice

Presentamos un último ejemplo en el que podremos ver tanto matrices como objetos.

EJEMPLO 5.2.1:
<HTML>
  <HEAD>
    <TITLE>Creación de Objetos y Matrices </TITLE>
    <SCRIPT>
      <!--
      // Declaramos el creador del objeto geneura_member
      function geneura_member( nombre,apellidos,foto,aficiones,mail,url ) {
        this.nombre=nombre;
        this.apellidos=apellidos;
        this.foto=foto;
        this.aficiones=aficiones;
        this.mail=mail;
        this.url=url;
      }

      // Declaramos la matriz
      var matriz=new Array(5);
      
      // inicializamos la matriz
      var numPersonas=0;
      matriz[numPersonas++]=new geneura_member( "Juan Julian", 
                "Merelo Guervos",
                "jjfo.gif",
                "ciencia ficcion, viajar, pop español",
                "j@kal-el.ugr.es",
                "http://kal-el.ugr.es/~jmerelo" );
      matriz[numPersonas++]=new geneura_member( "Victor Manuel", 
                "Rivas Santos",
                "victor3.jpg",
                "tocar la guitarra, pasear",
                "v@kal-el.ugr.es",
                "http://kal-el.ugr.es/~victor" );
      matriz[numPersonas++]=new geneura_member( "Gustavo", 
                "Romero Lopez",
                "nohay.gif",
                "espeleologia",
                "g@kal-el.ugr.es",
                "http://gargamel.ugr.es/~gustavo" );
      matriz[numPersonas++]=new geneura_member( "Pedro Angel", 
                "Castillo Valdivieso",
                "foto_pcv.jpg",
                "pasear, leer",
                "pedro@krypton.ugr.es",
                "http://krypton.ugr.es/~pedro" );
      matriz[numPersonas++]=new geneura_member( "Jesus", 
                "Gonzalez Peñalver",
                "nohay.gif",
                "pasear, leer",
                "jesus@kal-el.ugr.es",
                "http://kal-el.ugr.es/~jesus" );

      // Añadimos una funcion que escribe los datos.
      function visualiza() {
        document.foto.src=this.foto;
        document.f1.nombre.value=this.nombre+" "+this.apellidos;
        document.f1.aficiones.value=this.aficiones;
        document.links[0].href=this.url;
        document.links[1].href="mailto:"+this.mail;
      }

      geneura_member.prototype.visualiza=visualiza;
      // -->
    </SCRIPT>
  <BODY BGCOLOR="#FFFFFF">
    <CENTER>
      <HR>
      <H1>Miembros del equipo Geneura</H1>
      <HR>
    </CENTER>
    <TABLE COL="2" WIDTH="80%">
      <TR>
	<TD WIDTH="25%" COLSPAN="1">
	  <IMG SRC="" ALT="La foto" NAME="foto" WIDTH="150" HEIGHT="150">
	</TD>
	<TD WIDTH="75%" COLSPAN="1">
	  <FORM NAME="f1">
	    <INPUT TYPE="text" NAME="nombre" SIZE="40" VALUE=""><BR>
	    <INPUT TYPE="text" NAME="aficiones" SIZE="50" VALUE=""><BR>
	    <A HREF="">Pulse aquí para ver su página</A><BR>
	    <A HREF="">Pulse aquí para enviarle un correo</A><BR>
	  </FORM>
	</TD>
      </TR>
    </TABLE>
    <!-- POnemos los primeros datos -->
    <SCRIPT>
      <!--
      matriz[0].visualiza();
      //-->
    </SCRIPT>
    <!-- Creating selector -->
    <CENTER>
      Seleccione el miembro del grupo cuyos datos desea ver:<P>
      <FORM NAME="f2">
	<SELECT NAME="sel" onChange="matriz[document.f2.sel.selectedIndex].visualiza(); ">
	<SCRIPT>
	  <!--
	  for( i=0; i<numPersonas; i++ ) {
	    document.writeln( "<OPTION>"+matriz[i].nombre );
	  }

	  // -->
	</SCRIPT>
	</SELECT>
      </FORM>
    </CENTER>
  </BODY>
</HTML>