Propiedades de objetos y mostrarlos en JavaScrip

Troner #1 Ene '12

Hola yonkis del JavaScript, os cuento mi problema, que seguramente sea una puta chorrada pero es que estoy aprendiendo JavaScript de forma un poco autodidacta y ando un poco verde.

El tema es que ando estudiando los objetos y sus propiedades, y crearlos es facil la verdad pero quiero hacer un campo de texto en el cual al colocar el nombre del objeto y pulsar un boton me salgan todas sus propiedades, pero es que no consigo sacarlo y me estan dando ganas de salir con una escopeta a la calle y hacer un "columbine".

Os pego el

código

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Documento sin título</title>
<script type="text/javascript">

function empleado(antiguedad, horario, salario){
	this.antiguedad= antiguedad;
	this.horario= horario;
	this.salario= salario;
}

empleado1= new empleado('1999', '9:00-15:00', 1900 );
empleado2= new empleado('2005', '9:00-15:00', 1700 );

function mostrar(quien){
quien= document.getElementById('campo').value;

for(var i in quien){
document.write('horario: '+quien[i].horario+ ' / salario: '+quien[i].salario+ ' euros'+'<br />');
}
}
</script>
</head>

<body>
<input type="text" id="campo" name="text" />
<input type="button" id="boton" value="Mostar"  onclick="mostrar()"/>

</body>
</html>

EnZo #2 Ene '12

Tenias unos cuantos errores pero por encima te explico. Si quieres acceder a variables o a objetos de forma dinamica tendras que meterlos en un objeto para acceder a ellas mediante strings.

Con document.write no ibas a mostrar el resultado porque esa funcion escribe en el lugar donde este puesta y estaba en el head, para eso usa innerHTML y decides en que parte del body debe estar.

El for te sobraba si lo que querias era mostrar tan solo un elemento que es el que indicas mediante el input#campo.

Se me olvidaba, la concatenacion del document.write tambien la tenias mal hecha.

Saludos.

    

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xht...al.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Documento sin t&#60789;lo</title>
    <script type="text/javascript">

function empleado(antiguedad, horario, salario){
        this.antiguedad= antiguedad;
        this.horario= horario;
        this.salario= salario;
}

var empleados = {};
empleados['empleado1'] = new empleado('1999', '9:00-15:00', 1900 );
empleados['empleado2'] = new empleado('2005', '9:00-15:00', 1700 );

function mostrar()
{
	var quien = document.getElementById('campo').value;
	document.getElementById('mostrar').innerHTML += 'horario: '+empleados[quien].horario + ' / salario: '+empleados[quien].salario+ ' euros<br />\n';
        
}
</script>
</head>

<body>
<input type="text" id="campo" name="text" />
<input type="button" id="boton" value="Mostar"  onclick="mostrar()"/>
<div id="mostrar"></div>
</body>
</html>

Troner #3 Ene '12

Gracias! Es que lo de innerHTML aun no he llegado a ello y lo de lso argumentos aun no lo tengo muy claro, por eso me habre echo la picha un lio. Mucho mas claro ahora.

Lo que no termino de entender es el: var empleados = {};

EnZo #4 Ene '12

Con esa linea creas un objeto. Es el quivalente a
var empleados = new Object();

Los objetos son como arrays pero mas "complejos" y "sofisticados". Y son la base de la programacion javascript.

empleados['empleado1'] = {antiguedad: 1999, horario: '9:00-15:00', salario: 1900);

Esto es el equivalente a lo que tenias.

eisenfaust #5 Ene '12

Quizás así te quede más claro. Javascript permite muchísimas cosas pero lo mejor es quedarte con un subset mínimo para evitar líos.

var make_employee = function (antiguedad, horario, salario) {
  return {
    antiguedad: antiguedad,
    horario: horario,
    salario: salario
  }
};

var empleados = [make_employee('1999', '9:00-15:00', 1900),
                 make_employee('2005', '9:00-15:00', 1700)];

Puedes añadir más elementos al array de la siguiente forma:

empleados.push(make_employee('1900', '9:00-15:00', 1800));

edit: Tengo los saltos de carro jodidos xDD

1 respuesta

EnZo #6 Ene '12

#5 Con esa nomenclatura lo vas a liar más... xD

Troner #7 Ene '12

Vale de momento todo claro, es que al rollo de hacer el codigo mas pequeño y contraciones de codigo aun no he llegado y es un lio a veces por que para hacer lo mismo hay 3 o 4 formas. De momento lo hago todo despacito y con buena letra.

Gracias a ambos.

Propiedades de objetos y mostrarlos en JavaScrip

Usuarios habituales

Tags