Entendido.

Este sitio utiliza cookies para analizar la navegación. Si continúa navegando se entiende que acepta su uso. Ver más detalles.";

Aprende Web

Crea y diseña tus sitios en la Web.

Manual de Javascript

Javascript: lenguaje interactivo para dinamizar la web.

Y ahora tambien aprende a programar en C++ con Aprende Web C++

Manuales para la creación y diseño de páginas web

RSS. Suscribir canal.

Este obra está bajo una licencia de Creative Commons Reconocimiento-NoComercial 4.0 Internacional.

Los objetos (II)

12.2 Crear objetos.

Objetos nuevos.

Javascript nos permite crear nuestros propios objetos, con sus propiedades y métodos, los cuales también los podemos definir. Crear un nuevo objeto consiste básicamente en declararlo en una función, y aplicarle nuevas propiedades y métodos. Veamos cómo se hace esto:

Crear mediante un constructor

Un constructor es una funcion que inicializa el objeto, para ello utilizamos una función normal, y en el paréntesis le pasamos algunos parámetros que nos servirán para definir las propiedades que tendrá el objeto.

Veamoslo con un ejemplo. Pongamos como ejemplo los alumnos que se matriculan en una academia. crearemos una clase Alumnos en la que cada alumno será un objeto. La función que la crea será la siguiente:

function Alumno(nombre,curso,numMaterias) { ... }

propiedades

La función anterior es de momento una función normal a la que se le pasan unos parámetros. ahora vamos a convertir estos parámetros en propiedades del objeto Alumno para ello hacemos una referencia al parámetro dentro de la propia función con la palabra reservada this, de la siguiente manera:

this.alumno = nombre;

Esto lo escribimos dentro de la función. añadimos también las propiedades curso y numMaterias y la función quedará así:

function Alumno(nombre,curso,numMaterias) {
         this.alumno = nombre;
         this.curso = curso;
         this.materias = numMaterias;
         }

Con esto ya tenemos una nueva clase de objetos, la clase Alumno, que de momento, solo tiene tres propiedades.

Al declarar las propiedades lo que ponemos después de this. será el nombre de la propiedad, y lo que ponemos después del igual es el parámetro que se convertirá en la propiedad, por lo que debe ser igual al que le pasamos en el paréntesis de la función.

Instanciar el objeto

Se llama instanciar un objeto a crear un objeto de una clase que ya está definida. Asi, cuando creamos un array mediante miArray = new Array() estamos instanciando un objeto de la clase array.

Con las clases de objetos nuevos creados mediante las funciones constructor, instanciaremos los objetos de la misma manera, así para crear un objeto concreto de la clase Alumno escribiremos:

alumno1 = new Alumno("Juan Pérez","tecnología",5)

Como ves se trata de crear un objeto de la misma manera que lo haríamos con otra clase de objetos. Dentro del paréntesis debemos poner los parámetros que serán los valores de las propiedades de el objeto, tal como está en la función constructor.

Ahora para ver las propiedades las llamamos mediante su nombre precedido de un punto:

nombre1 = alumno1.alumno

En el siguiente código mostramos la función constructor, un objeto instanciado, extraemos sus propiedades, y las mostramos en una ventana de alerta:

function Alumno(nombre,curso, numMaterias) {
         this.alumno = nombre;
         this.curso = curso;
         this.materias = numMaterias;
         }
alumno1 = new Alumno ("Juan Perez","tecnología",5);
nombre1 = "alumno: "+alumno1.alumno;
curso1 = " curso: "+alumno1.curso;
materias1 = " con "+alumno1.materias+" asignaturas.";
alert(nombre1 + curso1 + materias1);

El resultado puedes verlo pulsando en el siguiente párrafo:

Pulsa aquí para ver el resultado del código anterior.

También podríamos haber creado el objeto sin ningún parámetro en el paréntesis, y pasarle después los valores de las propiedades, de la siguiente manera:

alumno1 = new Alumno();

Después damos valor a las propiedades del objeto que acabamos de crear:

alumno1.alumno = "Juan Perez";
alumno1.curso = "informática"
alumno1.materias = 7

De la misma manera podemos cambiar el valor de cualquier propiedad, simplemente con asignarle un nuevo valor.

Métodos

Los métodos se crean de manera parecida, pero hay que recordar que los métodos son funciones, por lo tanto el metodo debe igualarse al nombre de una función que indique qué es lo que queremos hacer con el objeto. En la función constructor pondremos lo siguiente para crear un método:

this.precioCurso = matricula

Donde precioCurso es el nombre que le daremos al método, y matricula es el nombre que le daremos a la función.

Observa que tanto el método como el nombre de la función se ponen aquí sin paréntesis, aunque luego al llamar al método sí debemos ponerlos.

El siguiente paso es crear la función a la que se refiere el método. en nuestro ejemplo, el método precioCurso() establecerá el precio en base al número de asignaturas, de manera que serán 100€ por asignatura. la función que controla este método es la siguiente:

function matricula() {
         precio = 100*this.materias
         return precio
         }

Esta función dice lo que debe hacer el método precioCurso(), la función puede hacer referencia a propiedades del objeto mediante la palabra reservada this, y debe tener siempre un valor de retorno con return que será el que es devuelto por el método.

Veamos el código del ejemplo anterior, tras añadir la función anterior, la referencia en la función constructor, y añadirlo al objeto instanciado, para poder verlo en una ventana de alerta:

function Alumno(nombre,curso,numMaterias) {
         this.alumno = nombre;
         this.curso = curso;
         this.materias = numMaterias;
         this.precioCurso = matricula;
         }
function matricula() {
         precio = 100*this.materias;
         return precio;
         }			 
alumno1 = new Alumno ("Juan Perez","tecnología",5);
nombre1 = "alumno: "+alumno1.alumno;
curso1 = " curso: "+alumno1.curso;
materias1 = " con "+alumno1.materias+" asignaturas.";
precio1 = " precio: " +alumno1.precioCurso()+ "€.";
alert(nombre1 + curso1 + materias1 + precio1 );

En color siena está destacado el código que se ha añadido. Para ver el resultado de este script pulsa en el siguiente párrafo.

Pulsa aquí para ver el resultado del script anterior

Metodos con argumentos

Podemos poner también un método que necesite algún dato para ser completado, el cual se le pasará a través del paréntesis, como un argumento, tal como se hace en las funciones. Para ello en la función a la que hace referencia el método introduciremos el argumento, el cual debemos pasarlo en el método.

Supongamos que en el ejemplo que tenemos, el precio final puede verse reducido en un tanto por ciento mediante una beca. para calcularlo, crearemos un nuevo método. En el parámetro de la función pasaremos el tanto por ciento de reducción del precio. el método lo creamos añadiendo a la función constructor la siguiente sentencia:

this.precioBeca = beca

y la función que controla este método será la función beca() la cual será la siguiente:

function beca(num){
         precio = 100*this.materias;
         descuento = precio*num/100;
         precioFinal = precio - descuento;
         return precioFinal;
         } 

En esta función el argumento del paréntesis será el tanto por ciento de reducción en el precio, el cual deberemos pasarlo al aplicar el método precioBeca.

veamos cómo queda el código del script tras crear este nuevo método y aplicarlo al objeto que tenemos de referencia.

function Alumno(nombre,curso,numMaterias) {
         this.alumno = nombre;
         this.curso = curso;
         this.materias = numMaterias;
         this.precioCurso = matricula;
         this.precioBeca = beca;
         }
function matricula() {
         precio = 100*this.materias;
         return precio
         }	
function beca(num){
         precio = 100*this.materias;
         descuento = precio*num/100;
         precioFinal = precio - descuento;
         return precioFinal;
         } 
alumno1 = new Alumno ("Juan Perez","tecnología",5);
nombre1 = "alumno: "+alumno1.alumno;
curso1 = " curso: "+alumno1.curso;
materias1 = " con "+alumno1.materias+" asignaturas.";
precio1 = " precio: " +alumno1.precioCurso()+ "€.";
beca1 = " Precio de becario: " +alumno1.precioBeca(15)+"€.";
alert(nombre1 + curso1 + materias1 + precio1 + beca1 ); 

Como en el ejemplo anterior está resaltado en color siena el código que hemos añadido. para ver el mensaje de alerta que genera este script pulsa en el siguiente párrafo:

Pulsa aquí para ver el resultado del script anterior.

En las siguientes página veremos la propiedad prototype del objeto Object, con la cual podemos crear nuestras propias propiedades y métodos para los objetos.

La propiedad prototype I

Página creada por ANYELGUTI.

Sugerencias: aprendeweb@aprende-web.net. Envia un

Visita nuestro blog par saber en qué estamos trabajando: Aprende Web Blog

Más sobre anyelguti en http://anyelguti.16mb.com