Objetos javascript

Blashak · #1 (**permalink**) 15/02/2011, 04:44

Buenas,

Estoy aprendiendo a usar objeto en javascript y me quede un poco estancado en un ejericio.Tengo dos botones uno que crea un gato con el color y la edad y el otro que suma la edad.
EL problema esta en que nose como guardar la edad que sumo en el objeto y si dpsues le das al boton sumar otra ves continue sobre ese numero.

Dejo el ejemplo:

Código Javascript:

Ver original<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
        <title>Untitled Document</title>
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
    </head>
    <body>
        <input type="button" value="boton" onclick="crear('michu')">
        <input type="button" value="summar"  id="edad"> 
        <script type="text/javascript">
            
var Gato = function (color, edad) {
    
    this.color = color;
    this.edad = edad;
    this.mostrar = mostrar;
this.cambiare = cambiare;
}
 
function crear(objeto){
 
    //objeto es el nombre del gato
    var color= "blanco";
    var edad= 10;
 
    
    var objeto = new Gato(color, edad);
    objeto.mostrar(objeto);
    objeto.cambiare(objeto);
}
 
function mostrar(objeto){
    alert(objeto.color);
    alert(objeto.edad);
    
}
 
function cambiare(objeto){
 
$('#edad').click(function() {
 
var edad = objeto.edad;
 
 
var nuevaedad = Number(edad)+ 1;
alert(nuevaedad);
 
 
 
 
});
    
}
 
            
        </script>
    </body>
</html>

El codigo contiene jquery.

Saludos

SergeMedina · #2 (**permalink**) 15/02/2011, 10:21

El problema es que no estas persistiendo el objeto Gato. Estas creando uno nuevo en cada click, y aparte las demas funciones no pueden acceder a ese objeto.

buzu · #3 (**permalink**) 15/02/2011, 11:08

Tu problema es de scope. Declara tu variable objeto afuera de tus funciones, luego en tu función crear, en lugar de hacer

var objeto = new Gato(color, edad);
solo haz
objeto = new Gato(color, edad);

Eso debería solucionar el problema.

Blashak · #4 (**permalink**) 15/02/2011, 11:29

Buenas,

no puedo declarar la variable fuera de una funcion ya que al hacer click sobre el boton eso ejecuta la funcion.
Pude logar que se haga la suma un vez creado el objeto gato pero el problema es que cada vez que le da a sumar se repite el numero varias veces.
Ej: si hace un click en sumar aparece
dos veces 1
si hace otro click en summar aparece dos veces 1 y luego dos veces 2 y asi...
porque ocurre esto.

Código Javascript:

Ver original<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
        <title>Untitled Document</title>
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
    </head>
    <body>
        <input type="button" value="boton" onclick="crear('michu')">
        <input type="button" value="summar"  id="edad"> 
        <script type="text/javascript">
            
var Gato = function (color, edad) {
    
    this.color = color;
    this.edad = edad;
    this.mostrar = mostrar;
this.cambiare = cambiare;
}
 
function crear(objeto, nuevaedad){
    if(document.getElementById("textogato")){
    alert(nuevaedad);
    var color = objeto.color;
    var edad = nuevaedad;
    var objeto = new Gato(color, edad);
 
    
    objeto.cambiare(objeto);
    
    }else{
    //objeto es el nombre del gato
    var color= "blanco";
    var edad= 10;
 
    
    objeto = new Gato(color, edad);
    objeto.mostrar(objeto);
    objeto.cambiare(objeto);
    }
}
 
function mostrar(objeto){
    
                var $p = $('<p>');
                var id = "textogato";
                var $objeto = $p.attr("id", id);
                var $texto = objeto.color;
                var $objeto = $p.text($texto);  
                $objeto.css("display", "inline");
                $objeto.css("background", "red");
                
                $objeto.css("font-size", "20px");
                $objeto.css("color", "blue");
                        
                $objeto.appendTo('body');
 
            
 
}
 
function cambiare(objeto){
 
$('#edad').click(function() {
 
var edad = objeto.edad;
 
 
var nuevaedad = Number(edad)+ 1;
alert(nuevaedad);
 
crear(objeto, nuevaedad);
 
 
});
    
}
 
            
        </script>
    </body>
</html>

Saludos

omarMusic · #5 (**permalink**) 15/02/2011, 16:19

Holas, el problema es que los objetos tienen que estar declarados para poder acceder a ellos, por ej:

Código HTML:

Ver original<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
        <title>Objetos JS</title>
        <script type="text/javascript" src="jquery.js"></script>
        <script type="text/javascript">
            var objeto;
            
            function Gato (color, edad) {
                this.color = color;
                this.edad = edad;
                this.mostrar = mostrar;
                this.cambiare = cambiare;
            }
 
            function crear() {
                var color = "Negro";
                var edad = 10;
                objeto = new Gato(color, edad)
                objeto.mostrar();
                objeto.cambiare();
            }
            
            function mostrar(){
                var $p = $('<p>');
                var id = "textogato";
                var $objeto = $p.attr("id", id);
                var $texto = this.color;
                var $objeto = $p.text($texto);  
                $objeto.css("display", "inline");
                $objeto.css("background", "red");
                $objeto.css("font-size", "20px");
                $objeto.css("color", "blue");
                $objeto.appendTo('body');
            }
 
            function cambiare () {
                this.edad++;
                alert("Nueva edad: " + this.edad)
            }
            
            function aumentarEdad () {
                objeto.cambiare();
            }
         </script>
    </head>
    <body>
        <input type="button" value="Crear objeto" onclick="crear();">
        <input type="button" value="Aumentar edad" id="edad" onclick="aumentarEdad();"> 
    </body>
</html>

si alguien sabe como declarar objetos dinámicamente y acceder a ellos, q lo diga, necesito saberlo también

SergeMedina · #6 (**permalink**) 15/02/2011, 23:59

Que tal, creo que deberian de investigar un poquito mas antes de iniciar con la Javascript OO. Tambien investiga closures.

Te dejo algunos links que te pueden servir:

https://developer.mozilla.org/en/Int...ted_JavaScript
https://developer.mozilla.org/en/Jav...Guide/Closures

Un ejemplo de como lograr lo que quieren hacer (como yo lo haria):

Código Javascript:

Ver originalfunction Perro(){}
 
Perro.prototype = {
    edad: 1,
   aumentarEdad: function(){
       this.edad++;
   }
}
 
 
var p;
 
document.getElementById('crear').addEventListener('click', function(){}
     if(!p){
           p = new Perro();
     }
}, true);
document.getElementById('edad').addEventListener('click', function(){
    if(!p) {
       alert('el objeto no esta creado');
       return false;
    }
    p.aumentarEdad();
}, true);

Saludos.

Blashak · #7 (**permalink**) 16/02/2011, 04:35

Cita:

Iniciado por SergeMedina

Que tal, creo que deberian de investigar un poquito mas antes de iniciar con la Javascript OO. Tambien investiga closures.

Te dejo algunos links que te pueden servir:

https://developer.mozilla.org/en/Int...ted_JavaScript
https://developer.mozilla.org/en/Jav...Guide/Closures

Un ejemplo de como lograr lo que quieren hacer (como yo lo haria):

Código Javascript:

Ver originalfunction Perro(){}
 
Perro.prototype = {
    edad: 1,
   aumentarEdad: function(){
       this.edad++;
   }
}
 
 
var p;
 
document.getElementById('crear').addEventListener('click', function(){}
     if(!p){
           p = new Perro();
     }
}, true);
document.getElementById('edad').addEventListener('click', function(){
    if(!p) {
       alert('el objeto no esta creado');
       return false;
    }
    p.aumentarEdad();
}, true);

Saludos.

Buenas,
Acabo de leer los link que me pasaste y tengo algunas dudas.
No logro entender del todo para que se utliza la propiedad, prototype estoy muy confuso respecto a esto.
Si me lo pudieran aclarar un poco.

Saludos

SergeMedina · #8 (**permalink**) 16/02/2011, 11:57

Basicamente lo que hace el objeto prototype es aumentar funcionalidades en el nuevo "tipo de dato" que estas creando. Este nuevo tipo de dato parte del objeto Function, por lo que el tipo de dato nuevo tendra los mismos atributos y metodos que esten declarados en el objeto prototype de Function.

En el ejemplo que te di, estoy creando un tipo de dato Perro. El objeto prototype me permite agregarle los metodos y propiedades que ese tipo de dato va a tener. Por lo que todas las instancias tendran los mismos objetos y propiedades que las que estan declaradas en prototype.

Te dejo estos links adicionales para que los leas.

http://dmitrysoshnikov.com/ecmascrip...eneral-theory/
http://dmitrysoshnikov.com/ecmascrip...ript-the-core/

Saludos.

omarMusic · #9 (**permalink**) 16/02/2011, 12:33

Investigando por sugerencia, acá hay un buen resumen para los que no entienden muy bien ingles como yo, sobre la propiedad prototype, y el manejo de clases en js:

http://www.librosweb.es/ajax/capitulo3/clases.html

Blashak · #10 (**permalink**) 16/02/2011, 13:45

Cita:

Iniciado por SergeMedina

Basicamente lo que hace el objeto prototype es aumentar funcionalidades en el nuevo "tipo de dato" que estas creando. Este nuevo tipo de dato parte del objeto Function, por lo que el tipo de dato nuevo tendra los mismos atributos y metodos que esten declarados en el objeto prototype de Function.

En el ejemplo que te di, estoy creando un tipo de dato Perro. El objeto prototype me permite agregarle los metodos y propiedades que ese tipo de dato va a tener. Por lo que todas las instancias tendran los mismos objetos y propiedades que las que estan declaradas en prototype.

Te dejo estos links adicionales para que los leas.

http://dmitrysoshnikov.com/ecmascrip...eneral-theory/
http://dmitrysoshnikov.com/ecmascrip...ript-the-core/

Saludos.

Código Javascript:

Ver originalfunction Perro(){}
 
 
Perro.prototype = {
 
    edad: 1,
 
   aumentarEdad: function(){
 
       this.edad++;
 
   }
 
}

pero si no utilizaras el prototype como lo harias??

por lo que entendi el protoype es una forma de simplificar el codigo ya que utlizandolo en un clase se aplican a todos los objetos no??

Saludos

enrique4480 · #11 (**permalink**) 16/02/2011, 14:02

Código Javascript:

Ver originalfunction Perro()
{
 this.edad = 1;
 this.aumentarEdad = function() {
                      this.edad++;
                     }
 this.mostrarEdad = function() {
                     alert(this.edad);
                    }
}