Entendido.

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

Logo

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++

logo rss RSS. Suscribir canal.

Buscar en Aprende Web

Traducir página

Visita nuestro blog:

bolg.aprende-web.net

y entérate de las novedades o deja un comentario.

Dudas y sugerencias:

aprendeweb@aprende-web.net





Sobre ésta página

Ültima modificación: 29-01-2016.

Visitas este mes: 35

Visitas el mes pasado: 54

logo
WEB-GRAFÍA

Mi agradecimiento a los siguientes sitios en los que me he basado para la elaboración de este manual.:

Desarrollo Web: manual de Javascript
Desarrollo Web, por Miguel Angel Álvarez
Libros Web: introducción a Javascript
Libros web, por Javier Eguíluz Pérez
Curso de Javascript: Programación Web
www.programacionweb.net
WebEstilo: JavaScript
www.webestilo.com
W3 schools; Javascript Tutorial
www.w3schools.com
Manual de Javascript: José Antonio Rodríguez.
Jose Antonio Rodriguez: manual en PDF

Donativos

Si este sitio te parece interesante puedes contribuir con una pequeña aportación.




12. Los objetos (III)

12.3 La propiedad prototype I

javascript

Definición

La propiedad prototype es una propiedad del objeto Object, y por tanto es heredada por el resto de los objetos. Por lo tanto todos los objetos poseen la propiedad prototype.

Mediante esta propiedad podemos asignar nuevos metodos y propiedades a cualquier clase de objetos. Veamos como hacerlo:


asignar nuevas propiedades

Podemos asignar nuevas propiedades a un objeto, tanto si este esta predefinido en javascript, como si está definido por nosotros, con la propiedad prototype.

En el ejemplo que vamos a seguir aquí veremos cómo una función en blanco, es decir sin ningún código, se convierte en función constructor al asignarle propiedades y métodos mediante la propiedad prototype. partimos de la siguiente función:

function Calcular() { }

Como ves, esta es una función sin código, pero ahora mediante la propiedad prototype convertiremos esta función en un constructor. Le asignaremos en principio dos propiedades. Para ello en primer lugar definiremos dos variables, que serán los valores por defecto de las dos propiedades:

a = 0; b = 0;

Después mediante la propiedad prototype asignamos estos valores como propiedades de la función anterior.

Calcular.prototype.n1 = a;
Calcular.prototype.n2 = b;

Donde n1 y n2 son los nombres de las propiedades de la función Calcular.

Para comprobar que la función Calcular es ahora un constructor, y tiene las propiedades n1 y n2, escribimos lo siguiente:

calculo = new Calcular();
alert(calculo.n1+ " , "+calculo.n2);

El resultado será una ventana que nos mostrará los valores de las propiedades n1 y n2 del objeto calculo; como no hemos modificado las propiedades, nos mostrará " 0 , 0 ", la cual puedes verla si pulsas en el siguiente párrafo:

Pulsa aquí para ver el resultado anterior.

Sin embargo no hemos hecho todo este código sólo para mostrar una ventana de alerta que podríamos haber escrito de una forma mucho más fácil. Ahora lo que pretendemos, aparte de ver cómo funciona la propiedad prototype, es crear una página que calcule el área de un rectángulo, un triángulo, o un círculo, a partir de los números dados por el usuario.

De momento ya tenemos dos números, que son las propiedades del objeto Calculo. Los cuales nos los dará el usuario mediante un formulario.

Ahora nos falta calcular las áreas de las figuras anteriores, para ello deberemos emplear funciones que las calculen es decir, métodos.


asignar nuevos métodos

asignar nuevos métodos a un objeto mediante la propiedad prototype se hace de la misma forma que para asignar propiedades. La única diferencia es que en lugar de asignarle como valor por defecto una variable, se le asigna como valor una función.

Siguiendo con nuestro ejemplo, crearemos un método que calcule el área de un rectángulo. las propiedades n1 y n2 serán la longitud de los lados. Debemos crear primero la función que calcula el área, en ella la referencia a las propiedades anteriores se hace mediante la palabra reservada this. Esta es la función:

function areaRectangulo() {
         solucion = this.n1 * this.n2;
         return solucion;
         }

El resultado debe ser devuelto mediante la palabra reservada return.

Ahora que tenemos la función la asignamos como método a la clase Calcular:

Calcular.prototype.areaRectangulo = areaRectangulo

Tenemos ahora un nuevo método llamado areaRectángulo(), que calcula el area de un rectángulo a partir de las propiedades n1 y n2 donde se escribirán la longitud de los lados.


Ejemplos anteriores en una página

para que ésto se vea en una página, crearemos primero el código HTML: la etiqueta body será la siguiente:

<h1>Calcular el area de rectangulos</h1>
<form action="#" name="calcular">
<p><input type="text" name="num1" size="4" /> Lado1 (rectángulos). </p>
<p><input type="text" name="num2" size="4" /> Lado2 (rectángulo).</p>
<p>
<input type="button" value="Rectángulo" onclick="rectangulo()" /> ... 
</p>
</form>
<h3 id="respuesta"></h3>

En este código, mediante un formulario, el usuario introduce los números que serán la longitud de los lados del rectángulo. La solución al cálculo del área la enviaremos a la etiqueta h3 id="respuesta".

Ahora debemos escribir el código javascript, que consta de tres partes:

En la primera recogemos los datos del usuario, creamos un nuevo objeto de la clase Calcular, y los asignamos a las propiedades de esta clase.

En la segunda aplicamos el método que calcula el área, y preparamos el texto que tiene que salir en pantalla mediante una variable que indica cual debe de ser éste.

Por último damos las instrucciones para que los resultados se vean en pantalla.

El porqué hemos dividido el código en tres partes, es porque tenemos la intención de añadir nuevas figuras a las que calcular el área. las partes primera y tercera son iguales para todas las figuras, y cambia sólo la segunda, para la cual debemos añadir nuevos métodos al objeto y escribir el texto que saldrá en pantalla. El código javascript contiene tres funciones, y es el siguiente:

function rectangulo(){
         instanciar()
         result = numeros.areaRectangulo()
         operacion = "Area del rectángulo: "
         escribir()
         }
function instanciar(){
         num1 = document.calcular.num1.value
         num2 = document.calcular.num2.value
         numeros = new Calcular()
         numeros.n1 = num1
         numeros.n2 = num2
         return numeros
         }		 
function escribir() { 
         texto = document.getElementById("respuesta")
         texto.innerHTML = operacion +  result
         }

En el código HTML mediante el evento onclick se llama a la función rectángulo(), la cual llama en primer lugar a la función instanciar(), que ejecuta la primera parte del código; después dentro de la función rectángulo se ejecuta la segunda parte del código, que es la que varíará si añadimos más figuaras para calcular el área; por último se llama a la función escribir(), que es la que escribirá los datos obtenidos en la página.

la página completa con todo el código javascript escrito hasta ahora quedará así:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>propiedad prototype</title> 
<script type="text/javascript">
a=0;b=0;
function Calcular() {
         }
Calcular.prototype.n1 = a;
Calcular.prototype.n2 = b; 
function areaRectangulo() {
         solucion = this.n1 * this.n2;
         return solucion;
         }
Calcular.prototype.areaRectangulo = areaRectangulo
function rectangulo(){
         instanciar()
         result = numeros.areaRectangulo()
         operacion = "Area del rectángulo: "
         escribir()
         }
function instanciar(){
         num1 = document.calcular.num1.value
         num2 = document.calcular.num2.value
         numeros = new Calcular()
         numeros.n1 = num1
         numeros.n2 = num2
         return numeros
         }		 
function escribir() { 
         texto = document.getElementById("respuesta")
         texto.innerHTML = operacion +  result
         }
</script>
</head>
<body>
<h1>Calcular el area de rectangulos</h1>
<form action="#" name="calcular">
<p><input type="text" name="num1" size="4" /> Lado1 (rectángulos). </p>
<p><input type="text" name="num2" size="4" /> Lado2 (rectángulo).</p>
<p><input type="button" value="Rectángulo" onclick="rectangulo()" /> ... </p>
</form>
<h3 id="respuesta"></h3>
</body>
</html>

En el siguiente enlace puedes ver cómo queda esta página en tu navegador.

Uso de la propiedad prototype.


Si queremos ampliar la página anterior, para calcular también las áreas del triángulo y el círculo, debemos seguir los mismos pasos para crear los métodos que las calculan, y después aplicarlos a un objeto concreto de la clase. En el código HTML debemos también añadir los botones que nos muestren el resultado de las operaciones. La página ya ampliada tendrá el siguiente código:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>propiedad prototype</title> 
<script type="text/javascript">
a=0;b=0;
function Calcular() {
         }
Calcular.prototype.n1 = a; //propiedad numero 1
Calcular.prototype.n2 = b; //propiedad numero 2
function areaRectangulo() { //función para crear método area de rectángulo
         solucion = this.n1 * this.n2;
         return solucion;
         }
Calcular.prototype.areaRectangulo = areaRectangulo //crear método a partir de la función.
function rectangulo(){ // función que muestra el resultado para rectangulo
         instanciar(); //llamada a la función que crea un objeto concreto.
         result = numeros.areaRectangulo(); //aplicar método
         operacion = "Area del rectángulo: "; //texto para pantalla
         escribir(); //función que escribe el resultado en pantalla.
         }
function areaCirculo() { //función crear metodo area circulo
         solucion = Math.pow(this.n1,2)*Math.PI;
         return solucion;
         }
Calcular.prototype.areaCirculo = areaCirculo //crear método a partir de la función.
function circulo() { //resultados para circulo
         instanciar();
         result = numeros.areaCirculo();
         operacion = "Area del círculo: ";
         escribir();
         }
function areaTriangulo() { //funcion crear método area triángulo
         solucion = this.n1 * this.n2/2;
         return solucion;
         }
Calcular.prototype.areaTriangulo = areaTriangulo //crear método a partir de la función
function triangulo() { //resultados para triángulo
         instanciar()
         result = numeros.areaTriangulo()
         operacion = "Area del triángulo: "
         escribir()
         }
function instanciar(){ //función que crea un objeto y asigna valores a las propiedades.
         num1 = document.calcular.num1.value
         num2 = document.calcular.num2.value
         numeros = new Calcular()
         numeros.n1 = num1
         numeros.n2 = num2
         return numeros
         }		 
function escribir() { //escribir resultados en el documento.
         texto = document.getElementById("respuesta")
         texto.innerHTML = operacion +  result
         }
</script>
</head>
<body>
<h1>Calcular el area de circulos, rectangulos y triángulos.</h1>
<form action="#" name="calcular">
<p><input type="text" name="num1" size="4" /> Radio (circulos), lado1 (rectángulos), o base(triángulo)</p>
<p><input type="text" name="num2" size="4" /> Lado2 (rectángulo), altura (triángulo)</p>
<p>
<input type="button" value="Rectángulo" onclick="rectangulo()" /> ... 
<input type="button" value="Círculo" onclick="circulo()" /> ... 
<input type="button" value="Triángulo" onclick="triangulo()" /> ... 
</p>
</form>
<h3 id="respuesta"></h3>
</body>
</html>

Para ver esta página en tu navegador pulsa en el siguiente enlace:

Calcular áreas usando propiedad prototype.





En la siguiente página seguiremos viendo la propiedad prototype, pero esta vez aplicada a objetos predefinidos en javascript.

La propiedad prototype II



manual de Javascript

Anterior siguiente ... Siguiente siguiente


imprimir esta página

Página creada por ANYELGUTI.

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

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

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