2

Nos han mandado un ejercicio de javascript con Getters/setters, el ejercicio trata de una página web con 3 parámetros, el precio, el iva y el importe total.

	var tipo=0;
	function funciona(tipo){
			
	
		var insert1 = document.getElementById("value1").value;	
		var insert2 = document.getElementById("value2").value;
		var insert3 = document.getElementById("value3").value;
		var insert4 = insert3 * 1.21 - insert3;
		var insert5 = insert3 - insert4;
		var objecte_1 = new Objeto(insert1, insert2, insert3, insert4, insert5);

	function Objeto(nombre, descr, pt, iva, pb){
		this.nombre = nombre;
		this.descr = descr;
		this.pt = pt;
		this.iva = iva;
		this.pb = pb;
	}
	Objeto.prototype.getNombre = function(){
		return this.nombre;
	}

	Objeto.prototype.setNombre = function(nom){
		this.nombre = nombre;
	}
	Objeto.prototype.getDescr = function(){
		return this.descr;
	}

	Objeto.prototype.setDescr = function(descr){
		this.descr = descr;
	}
	Objeto.prototype.getPt = function(){
		return this.pt;
	}

	Objeto.prototype.setPt = function(pt){
		this.pt = pt;
	}
	Objeto.prototype.getIva = function(){
		return this.iva;
	}

	Objeto.prototype.setIva = function(iva){
		this.iva = iva;
	}
	Objeto.prototype.getPb = function(){
		return this.pb;
	}

	Objeto.prototype.setPb = function(pb){
		this.pb = pb;
	}
	if(tipo == 1){
	alert(objecte_1.iva);
	}if(tipo == 2){
	alert(objecte_1.pb);
	}if(tipo ==3){
	alert(objecte_1.pt);
	}
}
  <DOCTYPE html>
    <html lang="es">
    	<head>
    		<meta charset="utf-8" />
    		<title></title>
    		<! <link href="css/estilo.css" rel="stylesheet" type="text/css"/> 
    	</head>
    		<	<body>
	<table>
	<tr>
	<th>Nombre:</th><th><input type="text" id="value1"></th>
	</tr>
	<tr>
	<th>Descripcion</th><th><input type="text" id="value2"></th>
	</tr>
	<tr>
	<th>Precio:</th><th><input type="text" id="value3"></th>
	</tr>
	<tr>		
	<th><button onclick="funciona(1);" > Calcula IVA</button></th> 
	<th><button onclick="funciona(2)" >Calcula Preu brut </button></th>
	<th><button onclick="funciona(3)" > Calcula Total</button></th>
	</tr>
	</table>
</body>
    </html>

Una vez haces click en uno de los botones, ha de mostrar por pantalla el IVA del objeto, el precio bruto o el mismo precio total, lo que no llego a entender, es como hacer el formato getter/setter (de java) en JavaScript, ¿alguna idea?

8
  • lo que quieres es que al darle click actualice los valores? Commented el 14 dic. 2017 a las 18:45
  • en mi respuesta te detalle los errores de codigo que tienes, verificala esta actualizada Commented el 14 dic. 2017 a las 19:25
  • Se puede añadir una funcion dentro de otra funcion, explico, para el boton iva me gustaria que saliera un alert de solo el IVA @JackNavaRow Commented el 14 dic. 2017 a las 19:51
  • @JackNavaRow Ultima pregunta y ya, como puedo hacer que al darle click al boton de IVA, muerte un alert de solo el IVA, asi mismo, tambien con el precio bruto y total Commented el 15 dic. 2017 a las 15:32
  • con el if y valida la entrada del parametro tipo Commented el 15 dic. 2017 a las 16:48

4 respuestas 4

6

Los setter y getters se invocan como los otros métodos de la clase. Como su nombre indica, set es para modificar algún miembro de la clase, y get es para obtener el estado/valor actual de un miembro o propiedad de la clase.

Por ejemplo:

    cuenta_2.setTitular("Soy el nuevo titular"); //Cambiará el titular del objeto
    cuenta_2.ingresar(900);
    cuenta_2.retirar(10);
    alert(cuenta_2.toString());
    alert(cuenta_2.getTitular()); //Leerá el titular actual del objeto
    alert(cuenta_2.getCantidad()); //Leerá la cantidad del objeto

Aplicándolo al código que has compartido

    function Cuenta(titular, cantidad){
        this.titular = titular;
        if (cantidad < 0) {
            this.cantidad = 0;
        } else {
            this.cantidad = cantidad;
        }
        }


    Cuenta.prototype.getTitular = function(){
        return this.titular;
    }


    Cuenta.prototype.setTitular = function(titular){
        this.titular = titular;
    }

    Cuenta.prototype.getCantidad = function () {
        return this.cantidad;
    }

    Cuenta.prototype.setCantidad=function(cantidad) {
        this.cantidad = cantidad;
    }

    Cuenta.prototype.toString = function() {
        return "El titular " + this.titular + " tiene " + this.cantidad + " euros en la cuenta";
    }

    Cuenta.prototype.ingresar = function (cantidad) {
        if(cantidad > 0){
            this.cantidad += cantidad;   
        }
    }

    Cuenta.prototype.retirar = function(cantidad) {
        if (this.cantidad - Math.abs(cantidad) < 0) {
            this.cantidad = 0;
        } else {
            this.cantidad -= cantidad;
        }
    }


         var cuenta_2 = new Cuenta("Fernando", 300);
        alert(cuenta_2.toString());
        cuenta_2.ingresar(400);
        cuenta_2.retirar(100);
        alert(cuenta_2.toString());


        cuenta_2.setTitular("Soy el nuevo titular"); //Cambiará el titular del objeto
        cuenta_2.ingresar(900);
        cuenta_2.retirar(10);
        alert(cuenta_2.toString());
        alert(cuenta_2.getTitular()); //Leerá el titular actual del objeto
        alert(cuenta_2.getCantidad()); //Leerá la cantidad del objeto

Más detalles

Estos enlaces pueden ayudar a aclarar tus dudas al respecto:

Muy importante

Si no quieres escribir código obsoleto, es muy importante que leas: defineProperty en la documentación.

3
  • Vale, entonces ahora entiendo, que si quiero modificar que el iva se añada haciendo el calculo del precio total, tendria de hacerlo en el Set tendria de modificar el set Commented el 14 dic. 2017 a las 18:02
  • el get se utiliza para mostrar en teoria cuando hagas el total lo debes calcular esto lo puedes hacer cuando llames al get asi tus valores no quedan actualizado, es por eso que conviene usar get y set , imagina si quieres agregar a un producto iva y a otro no Commented el 14 dic. 2017 a las 18:22
  • 1
    @Archeon el Centinela los setter son para modificar a los miembros de la clase. Esta práctica está ligada también a la encapsulación: generalmente los miembros se declaran como privados y se modifican solo a través de su setter. Dependiendo del contexto, tu clase puede tener un método para obtener el precio con el IVA por ejemplo. No conviene modificar el precio real, sustituyéndolo por un valor calculado, ya que en algunos casos podrías necesitar ambos valores (como ocurre en las facturas, que muestran el precio con y sin IVA).
    – A. Cedano
    Commented el 14 dic. 2017 a las 18:33
3

Javascript tiene una forma un tanto especial, parecida quizá a C#, de declarar los getter y setters. La manera más sencilla de verla es usando la sintaxis más moderna (ES2015) que nos permite crear clases sin tener que tratar directamente con prototipados:

class Ejemplo {

  
  constructor() {
    this._atributo=null;
  }
  
  get atributo () {
    return this._atributo;
  }
  
  set atributo (valor) {
    if (typeof valor ==='string') {
      this._atributo=valor;
    } else {
      console.log(`${valor} no es un string`);
    }
  }
}

var ej= new Ejemplo();

ej.atributo='hola'
ej.atributo=1;

console.log(ej.atributo);
  

Como puedes ver, los getters y setters quedan un poco ocultos porque no se llaman como funciones, sino como pseudo-atributos: al intentar acceder al valor se ejecuta el get y al intentar asignar uno, se ejecuta el set. Todo esto queda un poco invalidado por el hecho de que no existe la palabra reservada private en Javascript, con lo que puedes saltarte el setter o el getter usando, en este ejemplo, ej._atributo. Seguramente esto cambie en futuras especificaciones.

1
2

Una forma de hacerlo a la manera de Java es la siguiente:

function MyClass() {

  /// Here goes the rest of the code

  /// make it private by default
  var age;

  if (this instanceof MyClass) {
  
    Object.defineProperty(this, 'age', {
      get : function() {
        return age;
      },
      set : function(n) {
        /// Maybe some process before...
        age = Math.abs( ~~n );
      },
      /// It's shown in the Own properties
      enumerable: true
    });
  
  }

}

Lo que hace el codigo mostrado anteriormente es: 1- Comprobar que el contexto en el que estamos ( this ), es una instancia de MyClass. 2- Usar la funcion Object.defineProperty la cual me permite definir una propiedad determinada, en este caso la propiedad age dentro de un elemento ( this en este caso).

El tercer parametro que se le pasa es un objeto con los modificadores de acceso get y set de dicha propiedad. Puede recibir tambien el campo enumerable, el cual es un Boolean y que indica si esa propiedad va a poder ser listada.

Por ejemplo, cuando escribimos en el navegador u otro entorno javascript la siguiente sentencia:

console.log(obj)

esto nos muestra una lista con los pares <clave, valor> de ese objeto. Si enumerable esta en true, entonces va a aparecer en esa lista, de lo contrario no. Esto no significa que no pueda ser accedido, solamente que no va a ser visible, o como su nombre indica, enumerable.

3
  • ¿y que realiza esto?, podrías agregar una explicación.
    – Jorgesys
    Commented el 15 dic. 2017 a las 22:31
  • @Jorgesys: Por supuesto. Post editado
    – Isaac Vega
    Commented el 19 dic. 2017 a las 5:41
  • @IssacVega excelente! Muchas gracias, ahora será una respuesta útil para otros usuarios.
    – Jorgesys
    Commented el 19 dic. 2017 a las 6:21
1

Tienes varios errores en tu codigo te los comento a continunacion:

  1. No esta entrando a la funcion click() ; debes cambiar el <input type="button" a <a href con esto haremos que entre a la funcion

        <th><a  href="javascript:click()">Calcula IVA</a></th> 
        <th><a  href="javascript:click()">Calcula Preu bruto</a></th>
        <th><a  href="javascript:click()">Calcula Total</a></th>
    
  2. La idea de usar el codigo es que no entre cada vez que entre en la funcion click() debe quedar algo asi:

        function Objeto(nombre, descr, pt, iva, pb){
            this.nombre = nombre;
            this.descr = descr;
            this.pt = pt;
            this.iva = iva;
            this.pb = pb;
        }
        Objeto.prototype.getNombre = function(){
            return this.nombre;
        }
    
        Objeto.prototype.setNombre = function(nom){
            this.nombre = nombre;
        }
        Objeto.prototype.getDescr = function(){
            return this.descr;
        }
    
        Objeto.prototype.setDescr = function(descr){
            this.descr = descr;
        }
        Objeto.prototype.getPt = function(){
            return this.pt;
        }
    
        Objeto.prototype.setPt = function(pt){
            this.pt = pt;
        }
        Objeto.prototype.getIva = function(){
            return this.iva;
        }
    
        Objeto.prototype.setIva = function(iva){
            this.iva = iva;
        }
        Objeto.prototype.getPb = function(){
            return this.pb;
        }
    
        Objeto.prototype.setPb = function(pb){
            this.pb = pb;
        }
    
        function click(){   
            var insert1 = document.getElementById(value1).value;    
            var insert2 = document.getElementById(value2).value;
            var insert3 = document.getElementById(value3).value;
    
        alert("hola"); /*Para verificar si funciona o no */
        var objecte_1 = new Objeto(insert1, insert2, insert3);
        }
    
  3. Es de Buenas Practicas colocar el nombre acorde a la variable, actualmente estas haciendo insert1,insert2,insert3 y si son variables locales usa let y que no se te olviden las ""

let nombre = document.getElementById("value1").value;	
let descripcion = document.getElementById("value2").value;
let precio = document.getElementById("value3").value; 

Aplicando todas estas reglas que te di, tu codigo debe quedar mas o menos de la siguiente forma:

function Producto(nombre, descripcion, precio){
	this.nombre = nombre;
	this.descripcion = descripcion;
	this.precio = precio;
}
Producto.prototype.getNombre = function(){
	return this.nombre;
}

Producto.prototype.setNombre = function(nom){
	this.nombre = nombre;
}
Producto.prototype.getDescripcion = function(){
	return this.descripcion;
}

Producto.prototype.setDescripcion = function(descripcion){
	this.descripcion = descripcion;
}
Producto.prototype.getPrecio = function(){
	return this.precio;
}

Producto.prototype.setPrecio = function(precio){
	this.precio = precio;
}

function click(){	
  var nombre = document.getElementById("value1").value;	
  var descripcion = document.getElementById("value2").value;
  var precio = document.getElementById("value3").value;

  let  miProducto = new Producto(nombre, descripcion, precio);
  console.log("Nombre : " + miProducto.getNombre())
  
  console.log("Descripcion : " +  miProducto.getDescripcion());
  console.log("Precio : " + miProducto.getPrecio());

}
<table>
	<tr>
		<th>Nombre:</th><th><input type="text" id="value1"></th>
	</tr>
	<tr>
		<th>Descripcion</th><th><input type="text" id="value2"></th>
	</tr>
	<tr>
		<th>Precio:</th><th><input type="text" id="value3"></th>
	</tr>
	<tr>		
		<th><a  href="javascript:click()">Calcula IVA</a></th> 
		<th><a  href="javascript:click()">Calcula Preu bruto</a></th>
		<th><a  href="javascript:click()">Calcula Total</a></th>
	</tr>
</table>

Observa que la funcion click() son 5 lineas

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.