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: 17
Visitas el mes pasado: 18
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
Podemos crear nuevas clases de objetos mediante una función constructor. Ésta en principio no se diferencia del resto de funciones. Como argumentos podemos pasar algunos elementos que nos servirán para definir sus propiedades.
Los objetos de las nuevas clases que creamos están en sí mismos vacíos de contenido. Son las propiedades y los métodos que les pongamos los que les dan contenido. No se trabaja con el objeto en sí, sino con sus métodos y propiedades.
Creamos una función, y dentro de ella se definen las propiedades y métodos de la misma:
function operar (a,b) { /* ...*/ }
Seguiremos un ejemplo en el que creamos un objeto que pueda hacer distintas operaciones entre dos números.
Para definir nuevas propiedades dentro de la función constructor utilizamos la palabra reervada this. seguida del operador punto y el nombre del método, y le asignamos el valor del argumento que le pasamos:
function Operar (a,b) { this.n1 = a; this.n2 = b; }
Hemos creado aquí una clase de objetos llamada Operar , la cual tiene dos propiedades, que son n1 y n2
Instanciar un objeto es crear un nuevo objeto de una clase. Para la clase creada anteriormente escribiremos:
operar1 = new Operar(3,5)
Hemos creado el objeto operar1. Como argumentos pasamos los valores que tendrán las propiedades del objeto.
Ahora para ver el valor de las propiedades podemos hacer:
alert(operar1.n1+" , "+operar1.n2);
Esto nos sacará en una ventana de alerta las dos propiedades del objeto.
Las propiedades son de lectura y de escritura, por lo que podemos cambiar el valor de alguna de las propiedades del objeto instanciado:
operar1.n1=7;
El valor de la propiedad n1 para el objeto indicado habrá cambiado.
Los métodos son en realidad funciones en las que podemos utilizar los valores que tienen las propiedades, refiriéndonos a ellas. Siguiendo el ejemplo anterior, haremos un método que sume las dos propiedades que tiene el objeto.
Para ello dentro de la función constructor ponemos una nueva línea:
this.suma=sumar
Aquí indicamos que el nuevo método se llamara suma y que la función que controla este método es la función sumar, la cual la crearemos a continuación. Vemos aquí el código de la función constructor seguido del código de la función sumar.
function Operar (a,b) { this.n1 = a; this.n2 = b; this.suma=sumar; } function sumar() { miSuma = this.n1+this.n2; return miSuma; }
En la función de referencia (sumar), sumamos las dos propiedades. Utilizamos la palabra this para hacer referencia a las mismas. Debemos devolver el resultado mediante un return para que el método funcione.
El método puede aplicarse a cualquiera de los objetos de esta clase. Por ejemplo lo aplicamos al objeto instanciado anteriormente y sacamos el resultado en una ventana de alerta
alert(operar1.suma());
Esto dará como resultado una ventana de alerta que mostrará la suma de los dos números que tiene el objeto como propiedades.
Puede ser que la función empleada para crear el método necesite algún dato adicional que lo pasaremos en el argumento. En este caso el método necesitará también que se le pase en el argumento ese dato para que funcione correctamente.
Esta es una propiedad de la clase Object que nos permite crear un nuevo objeto sin contenido y asignarle después los métodos y propiedades.
Después de crear una nueva clase con una función constructor podemos añadirle nuevos métodos y propiedades fuera de la función constructor mediante la propiedad prototype.
Podemos crear también una nueva clase de objetos mediante una función constructor sin propiedades ni métodos, y añadírselos después con la propiedad prototype.
Al ser esta una propiedad de la clase Object, es heredadada por el resto de objetos de javascript, lo cual nos permite tambien poder crear nuevos métodos y propiedades para los objetos ya definidos en javascript.
Una función sin contenido puede convertirse en una función constructor al asignarle propiedades y métodos mediante prototype. por ejemplo :
function Calcular() {}
Asignamos nuevas propiedades a esta función, mediante la propiedad prototype
function Calcular() {} Calcular.prototype.n1 = 0; Calcular.prototype.n2;
Este código convierte la función Calcular en una nueva clase de objetos, que tiene dos propiedades n1 y n2. La propiedad prototype permite crear nuevas propiedades. Podemos asignar un valor a la propiedad, el cual será su valor por defecto, o podemos no asignarle ningún valor en principio.
Para comprobar lo anterior podemos después instanciar un objeto de la clase, asignar un nuevo valor a las propiedades, y comprobarlas mediante una ventana de alerta, tal como hacemos en este código:
calculo1=new Calcular(); calculo1.n1=3; calculo1.n2=5; alert(calculo1.n1+" , "+calculo1.n2);
Crear un nuevo método para una clase de objetos se hace de forma similar, sólo que antes debemos crear la función del método, y después incluirla en la clase con prototype. Seguimos con el ejemplo anterior para crearle un método.
function sumar() { miSuma=this.n1+this.n2 return miSuma } Calcular.prototype.suma=sumar;
Creamos primero la función, en la cual podemos hacer referencia a las propiedades que tiene el objeto mediante la palabra this. La función debe llevar siempre un return que devuelve el resultado buscado.
Después añadimos la función al objeto como un método; para ello después de la propiedad prototype escribimos un punto y el nombre del método, y le asignamos como valor el nombre de la función (sin paréntesis).
Siguiendo con el ejemplo anterior, podemos comprobar que el método funciona, aplicándoselo al objeto que ya habíamos instanciado:
alert(calculo1.suma());
Podemos crear nuevas propiedades en las clases de objetos predefinidos de javascript mediante la propiedad prototype:
Array.prototype.nombre="miArray";
Podemos después usar esta propiedad en cualquier array que tengamos.
Array.prototype.nombre="miArray"; semana = ["L","M","X","J","V","S","D"]; semana.nombre="Semana"; alert(semana.nombre)
El resultado es un ventana de alerta con la palabra "Semana", es decir, sacamos en una ventana de alerta la nueva propiedad aplicada a un objeto concreto.
Sin embargo esto no funciona igual con todos los objetos de javascript, ya que para los objetos de las clases Number, String y Boolean, las propiedades que crea el programador son de sólo lectura.
En esta clases, sólo si el objeto ha sido creado mediante la forma general de crear objetos (por ejemplo texto = new String("hola");), se puede modificar la propiedad con la escritura.
Podemos crear nuevos métodos para las clases predefinidas de javascript mediante la propiedad prototype. Estos funcionan siempre con todas las clases, ya sea con objetos creados con el método general o simplemente por asignación a una variable.
En los objetos creados por el programador, cuando creamos un método hacemos referencia a sus propiedades mediante la forma this.propiedad. Sin embargo aquí no queremos acceder a una propiedad, sino al objeto en sí, por lo que la forma más simple de acceder a él es igualar una variable a la palabra this.
Veamos un ejemplo en el que creamos un método en el que indicamos que un número representa una cantidad de dinero en la divisa que le indicamos.
function divisa(logo="") { dinero=this; dinero = dinero.toFixed(2) + logo return dinero } Number.prototype.moneda=divisa;
Hemos creado el método moneda(). Éste redondea el número que le pasamos a dos decimales y le añade el símbolo de la moneda si se lo pasamos como argumento. En caso de no pasar ningún argumento no devuelve nada, tal como indicamos en el argumento: (logo=""). Podemos aplicar este método a algunas variables con números, obteniendo los resultados que indicamos.
n1=5.247; n1=n1.moneda("€"); // resultado: 5.25€
n2=7.293; n2=n2.moneda("$"); // resultado: 7.29$
n3=6.5; n3=n3.moneda(); // resultado: 6.50
En la siguiente página veremos la clase RegExp.
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