Ayuda estoy iniciando con javascript

carolinaalvarez · #1 (**permalink**) 21/01/2010, 08:16

Buen día... un saludo a todos y espero alguien pueda ayudarme porque realmente no he podido entender... Estoy haciendo un ejercicio sencillo de javascript con eventos. En mi formulario tengo cuatro cuadros de texto: en el primero se ingresara un nùmero, en el segundo un operador aritmetico (+ - * /) y en el tercero otro numero. El cuarto cuadro de texto es para ingresar el resultado. Adicional tengo un boton calcular que me realiza el calculo que yo ingrese en los cuadros de texto. El problema está en que no sè cómo referirme a estos objetos para el paso de parametros y valores.

Conseguì este codigo que me ha orientado:
<html>
<head>
<title>Página nueva 1</title>
<script>
function calcula(f) {
if (confirm("Estas seguro ?"))
f.resultado.value = eval(f.expresion.value)
else
alert("Hasta la vista.")
}
</script>
</head>

<body>

<form>
<p>Entre una expresión:
<input type="text" name="expresion" size="20">
<input type="button" value="Calcular" onClick="calcula(this.form)">
<br>
El resultado es : <input type="text" name="resultado" size="15">
</p>
</form>
</body>
</html>

Sin embargo he estado analizandolo y tratando de hacerlo segun mi estructura y no he podido. Les anexo lo que he realizado:

<!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>
<script>
function calcula(a) {
if (a.operador.value = "+")
a.resultado.value = (a.num1.value + a.num2.value)
}
</script>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Operaciones Aritméticas</title>
</head>

<body>
<form id="form1" name="form1" >
<label>
<input type="text" name="num1" />
</label>
<label>
<input type="text" name="operador" />
</label>
<label>
<input type="text" name="num2" />
</label>
<p>
<label>
<input name="Botón" type="button" value="calcular" onclick="calcula(this.form1)"/>
</label>
<label>
<input type="text" name="resultado" />
</label>
</p>
</form>

</body>
</html>

Sólo lo he realizado con un solo operador esperando que pueda correr... no sè en dònde está mi error y pues soy nueva en esto de la programaciòn y mucho más nueva con javascript y dreamweaver.

Espero realmente alguien pueda ayudarme, desde ya les agradezco un millón...

Carolina

ceSharp · #2 (**permalink**) 21/01/2010, 08:44

Hola Carolina,

a ver si te vale esto:
------------------------------------------
<script type="text/javascript">
function calcula()
{
//obtenemos los campos de texto num1 y num2 convertidos en números
var num1 = new Number(document.getElementById('num1').value);
var num2 = new Number(document.getElementById('num2').value);

//y lo que valen los campos de texto operador y resultado
var operador = document.getElementById('operador').value;
var resultado = document.getElementById('resultado').value;

//según el operador aritmético realizamos la operación
//switch evalua lo que vale el operador y en función de lo que valga realizamos operación
switch(operador)
{
case '+':
resultado.value = num1 + num2;
break;
case '-':
resultado.value = num1 - num2;
break;
case '*':
resultado.value = num1 * num2;
break;
case '/':
resultado.value = num1 / num2;
break;
default:
//si operador no coincide con ningún operador aritmético conocido devolvemos un texto en el
//campo de texto de resultado
resultado.value = 'operador incorrecto';
break;
}
}

</script>
----------------------------------------------------
y sustituye tus inputs por esto:
----------------------------------------------------
<label>
<input type="text" id="num1" name="num1" />
</label>
<label>
<input type="text" id="operador" name="operador" />
</label>
<label>
<input type="text" id="num2" name="num2" />
</label>
<p>
<label>
<input name="boton" type="button" id="boton" value="calcular" onclick="calcula()" />
</label>
<label>
<input type="text" id="resultado" name="resultado" />
</label>
----------------------------------------

asignar un id a los objetos html es bastante importante a la hora de trabajar con Javascript, pues la forma de obtener sus valores es através de getElementById (y si el objeto no tiene id no puede obtener los valores)

si tienes dudas por aquí andamos ;)

salu2

masterojitos · #3 (**permalink**) 21/01/2010, 08:58

ceSharp, eh probado tu codigo y no sale....... no obstante, haces muy complicada la solucion, puesto que con un eval al operador te ahorras tiempo haciendo un switch para cada caso.... ademas, que pasara si hubiera otro operador ??

aca te pongo la solucion carolina..... espero te sirva de mucho y de aqui en adelante tambien.

dale click a copiar o a ver original para que copies todo el texto.

Código HTML:

Ver original<!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=iso-8859-1" />
<title>Operaciones Aritm&eacute;ticas</title>
<script type="text/javascript">
function calcula(a) {
    var num1 = parseInt(a.num1.value); //valor entero del input num1
    var num2 = parseInt(a.num2.value); //valor entero del input num2
    var oper = a.operador.value; //valor del input operador
    a.resultado.value = (oper) ? eval(num1 + oper + num2) : ""; //si existe un operador, evaluo la operacion, caso contrario en blanco
}
</script>
</head>
<body>
<form id="form1" name="form1" >
ingrese numero 1: <input type="text" name="num1" size="10" /><br /><br />
ingrese operador: <input type="text" name="operador" size="4" /><br /><br />
ingrese numero 2: <input type="text" name="num2" size="10" /><br /><br />
<input type="button" name="calcular" value="Calcular" onclick="calcula(document.form1)" /><br /><br />
resultado: <input type="text" name="resultado" size="10" />
</form>
</body>
</html>

Suerte.

carolinaalvarez · #4 (**permalink**) 21/01/2010, 09:02

Entendí tu filosofia perfectamente... Sin embargo al realizarlo no me muestran los datos... Por algùn motivo... De verdad gracias por tu ayuda... ¿por qué no se muestran los datos?

carolinaalvarez · #5 (**permalink**) 21/01/2010, 09:08

Masterojitos gracias... tu còdigo funciona perfectamente... entiendo un poco menos la filosofia... para què es la funciòn eval... en el ejercicio del cual me guiaba tambièn estaba... sin embargo no la entiendo... veo que tengo errores en mi còdigo pues no asignè a ninguna variable los valores de los input... Quiero enterderlo perfectamente para poder hacer cualquier ejercicio por mi misma

gracias por tu ayuda fue valiosa al igual que la de Csharp...

carolinaalvarez · #6 (**permalink**) 21/01/2010, 09:14

Disculpa... aparte del eval para què es el signo de "?" ...
Esta linea es la que me falta enteder:
a.resultado.value = (oper) ? eval(num1 + oper + num2) : "";

carolinaalvarez · #7 (**permalink**) 21/01/2010, 09:19

Lsito! ya lo entendí:
eval transforma una cadena de caracteres y la calcula y el signo ? actua como condicional del operador, es decir, si el operador existe en el cuadro de texto concatena los valores de los tres cuadros y como es una expresion la calcula. ¿cierto?

ceSharp · #8 (**permalink**) 21/01/2010, 09:40

hay que ver el p.... lío que me he hecho en un momento y el que casi le hago a Carloina,jejejejeje

eso me pasa por no probar los códigos... (una y no más). Como recogia el valor de id=resultado con .value y luego le estaba diciendo que mostrara en la caja de texto resultado.value --> total que estaba indicandole dos veces .value, en fins un lío tremendo.

puse esa solución porque, aunque tenía más lineas de código, parecía más clara que usando eval, aunque si te digo la verdad no había caido en ella...

me la apunto! (ves, si al final hasta ayudando se aprende!)

saludos a todos!! ;)

masterojitos · #9 (**permalink**) 21/01/2010, 09:45

Cita:

a.resultado.value = (oper) ? eval(num1 + oper + num2) : ""; //si existe un operador, evaluo la operacion, caso contrario en blanco

como ahi te puse en comentario....... eso es identico a un:
if(condicion){
...
}else{
....
}

solo que mas directo:
(condicion) ? .... : .... ;

en tu caso, la condicion es si existe algun valor en el campo operador, de existir, hago la operacion con el eval(), de no existir, pongo el valor del resultado en blanco.

suerte.

carolinaalvarez · #10 (**permalink**) 21/01/2010, 12:07

Cita:

Iniciado por ceSharp

hay que ver el p.... lío que me he hecho en un momento y el que casi le hago a Carloina,jejejejeje

eso me pasa por no probar los códigos... (una y no más). Como recogia el valor de id=resultado con .value y luego le estaba diciendo que mostrara en la caja de texto resultado.value --> total que estaba indicandole dos veces .value, en fins un lío tremendo.

puse esa solución porque, aunque tenía más lineas de código, parecía más clara que usando eval, aunque si te digo la verdad no había caido en ella...

me la apunto! (ves, si al final hasta ayudando se aprende!)

saludos a todos!! ;)

Arreglé el tuyo así:

<!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>
<script type="text/javascript">
function calcula(a)
{
//obtenemos los campos de texto num1 y num2 convertidos en números
var num1 = parseInt(a.num1.value); //valor entero del input num1
var num2 = parseInt(a.num2.value); //valor entero del input num2
var operador = a.operador.value; //valor del input operador

//según el operador aritmético realizamos la operación
//switch evalua lo que vale el operador y en función de lo que valga realizamos operación
switch(operador)
{
case '+':
a.resultado.value = num1 + num2;
break;
case '-':
a.resultado.value = num1 - num2;
break;
case '*':
a.resultado.value = num1 * num2;
break;
case '/':
a.resultado.value = num1 / num2;
break;
default:
//si operador no coincide con ningún operador aritmético conocido devolvemos un texto en el
//campo de texto de resultado
a.resultado.value = 'operador incorrecto';
break;
}
}

</script>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Documento sin título</title>
</head>

<body>

<label>
<input type="text" id="num1" name="num1" />
</label>
<label>
<input type="text" id="operador" name="operador" />
</label>
<label>
<input type="text" id="num2" name="num2" />
</label>
<p>
<label>
<input name="boton" type="button" id="boton" value="calcular" onclick="calcula(document.form1)" />
</label>
<label>
<input type="text" id="resultado" name="resultado" />
</label>

</body>
</html>

ceSharp · #11 (**permalink**) 22/01/2010, 03:03

bien Carolina! ;)

funciona perfectamente. Aunque la opción de masterOjitos con EVAL es mejor; más sencilla, menos líneas, más efectiva, etc.

salu2