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: 21
Visitas el mes pasado: 27
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
En la página anterior hemos visto como usar la propiedad prototype
en objetos
definidos por el programador. Ahora veremos cómo usarla en los objetos
predefinidos en javascript.
Podemos definir nuevos métodos y propiedades para los arrays, cadenas de texto, números,
valores boleanos... Sin embargo el objeto Math
no admite la propiedad
prototype
, ya que su función no es crear nuevos objetos, sino resolver
ciertas operaciones matemáticas.
Crear nuevas propiedades para objetos predefinidos en javascript, se hace de
la misma manera que para objetos creados por el programador. es decir, mediante la
propiedad prototype
. por ejemplo:
String.prototype.nombre = "nombre por defecto";
En principio cabría pensar que el código anterior añade una nueva propiedad a cualquier cadena de texto. Sin embargo esta propiedad es de sólo lectura para las cadenas de texto que no estén definidas explicitamente mediante el constructor, es decir, si definimos una cadena de texto de la siguiente manera:
var texto = "Esta es una cadena de texto."
La propiedad no se puede modificar, sin embargo si la definimos mediante el
objeto String
de la siguiente manera:
var otroTexto = new String("Esta es otra cadena de texto");
Podremos modificar la propiedad:
texto.nombre = "Párrafo primero";
otroTexto.nombre = "Párrafo segundo."
Aquí hemos dado otro valor a la propiedad para las dos cadenas anteriores, sin embargo sólo la segunda tomará el valor nuevo, mientras que la primera seguirá teniendo el valor por defecto. Escribimos el script anterior en una página y lo combrobamos en una ventana de alerta, de la siguiente manera:
String.prototype.nombre = "nombre por defecto"; var texto = "Esta es una cadena de texto."; var otroTexto = new String("Esta es otra cadena de texto"); texto.nombre = "Párrafo primero"; otroTexto.nombre = "Párrafo segundo." ventana1 = "objeto1: "+texto+"\n propiedad: "+texto.nombre; ventana2 = "objeto2: "+otroTexto+"\n propiedad: "+otroTexto.nombre; alert(ventana1) alert(ventana2)
El resultado serán dos ventanas de alerta en las que se muestra el objeto y su propiedad, donde se ve que en el segundo caso la propiedad se ha modificado, pero no en el primero. Pulsa en el siguiente párrafo para ver el resultado.
Ver el resultado del Script anterior.
Este comportamiento sucede con las clases String
, Number
y Boolean
, sin embargo con la clase Array
el comportamiento
es distinto.
Para los arrays la propiedad nueva funciona siempre tanto para lectura, como para
escritura, incluso en los arrays que hubiera antes de aplicar la propiedad prototype
;
Veámoslo con el siguiente script, que por otra parte es similar al anterior, pero
con arrays:
var cifras = [0,1,2,3,4,5,6,7,8,9]; Array.prototype.nombre = "valor por defecto"; var estaciones = new Array("primavera","verano","otoño","invierno"); cifras.nombre = "Cifras"; estaciones.nombre = "Estaciones"; var ventana1 = "nombre: "+cifras.nombre+"\n array: "+cifras.join(", "); var ventana2 = "nombre: "+estaciones.nombre+"\n array: "+estaciones.join(", "); alert(ventana1); alert (ventana2);
En este caso la propiedad nombre
se muestra modificada en los
dos arrays. El resultado puedes verlo pulsando en el siguiente párrafo:
Pulsa aquí para ver el resultado del script anterior.
Sin embargo tal vez lo más interesante para una programación útil puedan ser los métodos. Los métodos, funcionan siempre con todos los objetos de las clases anteriores, ya estén declarados explicitamente o no. Sin embargo la forma de trabajar es distinta de los objetos creados por nosotros, ya que los objetos predefinidos son distintos.
Cuando creamos un método pàra un objeto definido por el programador, usamos
la referencia a las propiedades del objeto mediante this.propiedad
en la
función que genera el método. Sin embargo aquí lo que queremos no es acceder a las
propiedades del objeto, sino al objeto en sí.
Los objetos creados por el programador son en sí objetos vacíos, el objeto en sí no contiene nada, son sus propiedades y métodos los que hacen que ese objeto tenga unos contenidos. Sin embargo los objetos predefinidos sí que tienen un contenido en sí mismos, y es a ese contenido al que se quiere acceder para modificarlo.
La forma de acceder a ese contenido al construir la función que genera el método
es mediante la palabra reservada this
, sin añadirle propiedades, y la
forma más simple de trabajar con ella es igualar una variable a la palabra
this
:
cadena = this;
Luego ya podemos trabajar con la variable, como si fuera el propio objeto que queremos modificar.
Veamos un ejemplo. Aquí haremos una función que pone los elementos de un array entre guiones, y los pasa a mayúsculas:
var estaciones = ["primavera","verano","otoño","invierno"] function guionMayus() { var nuevoArray = this; for (i in nuevoArray) { nuevoArray[i] = "-"+nuevoArray[i]+"-"; nuevoArray[i] = nuevoArray[i].toUpperCase(); } return nuevoArray } Array.prototype.guionMayus = guionMayus; alert("array original: \n"+estaciones.join(", ")); alert("array modificado: \n"+estaciones.guionMayus().join(", "));
Al igual que hacemos con los objetos definidos por el programador, primero
construimos la función, y después mediante la propiedad prototype
se construye el método. La diferencia es que aquí la palabra reservada this
se refiere al propio objeto (array en este caso) que queremos modificar, el cual
lo hemos asignado a una variable (nuevoArray
).
El resultado del script anterior se muestra en unas ventanas de alerta. Para verlo pulsa en el siguiente párrafo:
Pulsa aquí para ver el resultado del script anterior.
Vamos a ver otro ejemplo con la clase Number
. Aquí el nuevo método
pone dos decimales a un número y lo redondea si tiene más, y pone el símbolo del
euro detrás ( € ):
function euro(){ euros = this; euros = euros.toFixed(2) + "€" return euros } Number.prototype.euro = euro num = 4.1732 alert("numero original: "+num) alert("numero modificado: "+num.euro())
Como puedes ver este es un método muy sencillo que se aplica a la clase Number
y puede ser útil para cuando los números representan dinero. Pulsando en el siguiente párrafo
puedes ver el resultado de este script:
Pulsa aquí para ver el resultado del script anterior.
En el siguiente tema veremos cómo funcionan las expresiones regulares.
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