Javascript: lenguaje interactivo para dinamizar la web.
Y ahora tambien aprende a programar en C++ con Aprende Web C++
y entérate de las novedades o deja un comentario.
última modificación: 13-07-2018.
Visitas este mes: 22
Visitas el mes pasado: 52
Mi agradecimiento a los siguientes sitios en los que me he basado para la elaboración de este manual.:
Por elegir aprende-web
Aprende-web está diseñado a partir de los lenguajes que aquà mismo se enseñan.
By Anyelguti
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:
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) { ... }
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.
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.
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
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.
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