Hola gente hermosa les dejo este codigo de una simple calculadora que hice en javascript
Explicacion
Primero creamos la clase res que corresponde al div donde aparecera el resultado de la operacion dinamicamente.
Luego creamos un formulario con 4 elementos, 3 input text, donde se introduciran el primer operador, el signo de la operacion, y el segundo operador respectivamente y un botton normal, prestenle atencion a la propiedad name y value de los imput. O para los que no saben value es el contenido del campo o lo que se escribe.
Codigo javascript:
var dive=document.getElementById('res');
creamos una referencia al div id=res, y la guardamos en la variable dive.
var numero1=document.forms["formulario1"].elements["num1"].value;
guardamos en la variable numero1 el valor del campo de nombre num1.
Con document.forms["algo"] accedemos al formulario de nombre algo,
y con
document.forms["algo"].elements["campo1"].value accedemos al texto que contiene el input de nombre campo1 del formulario de nombre algo.
los operadores condicionales disctinguen cada caso el simbolo ingresado en el campo para el operador y de acuerdo a esto realizan la operacion correspondiente al simbolo ingresado, la funcion eval trasforma a numero cualquier string que tenga como argumento.
dive.innerHTML=res;
Este codigo escribe en el div apuntado por dive el valor de la variable res que es el resultado de operar.
Finalemente
document.getElementById('boton').addEventListener('click',operar,false);
lo que hace es asigna al elemento de id=boton, el evento click y al detectar este click en ese elemento llama a la funcion operar.
Si ya es muy sencillo pero es que tenia poco tiempo, y esto salio bastante rapido. y estoy haciendo un tutorial que usa muchas mas funciones en javascript que todavia no termino.
chaito
donde aparece carita es )
<!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>calculadora</title>
<style type="text/css">
.res{position:absolute;
top:100px;
left:100px;
width:auto;
height:auto;
}
</style>
</head>
<body>
<form id=form1 name="formulario1" class="form">
<input type="text" id="num1" name="num1"/>
<input type="text" id="ope" name="ope"/>
<input type="text" id="num2" name="num2" />
<input type="button" id="boton" name="boton" value="operar" />
</form>
<div class="res" id="res">
</div>
</body>
<script type="text/javascript">
function operar(){
var dive=document.getElementById('res');
var numero1=document.forms["formulario1"].elements["num1"].value;
var numero2=document.forms["formulario1"].elements["num2"].value;
var operador=document.forms["formulario1"].elements["ope"].value;
if(operador=="+"){
var res=eval(numero1)+eval(numero2);
dive.innerHTML=res;
}
else if(operador=="-"){
var res=eval(numero1)-eval(numero2);
dive.innerHTML=res;
}
else if(operador=="*"){
var res=eval(numero1)*eval(numero2);
dive.innerHTML=res;
}
else if(operador=="/"){
var res=eval(numero1)/eval(numero2);
dive.innerHTML=res;
}
}
document.getElementById('boton').addEventListener('click',operar,false);
</script>
</html>
Explicacion
Primero creamos la clase res que corresponde al div donde aparecera el resultado de la operacion dinamicamente.
Luego creamos un formulario con 4 elementos, 3 input text, donde se introduciran el primer operador, el signo de la operacion, y el segundo operador respectivamente y un botton normal, prestenle atencion a la propiedad name y value de los imput. O para los que no saben value es el contenido del campo o lo que se escribe.
Codigo javascript:
var dive=document.getElementById('res');
creamos una referencia al div id=res, y la guardamos en la variable dive.
var numero1=document.forms["formulario1"].elements["num1"].value;
guardamos en la variable numero1 el valor del campo de nombre num1.
Con document.forms["algo"] accedemos al formulario de nombre algo,
y con
document.forms["algo"].elements["campo1"].value accedemos al texto que contiene el input de nombre campo1 del formulario de nombre algo.
los operadores condicionales disctinguen cada caso el simbolo ingresado en el campo para el operador y de acuerdo a esto realizan la operacion correspondiente al simbolo ingresado, la funcion eval trasforma a numero cualquier string que tenga como argumento.
dive.innerHTML=res;
Este codigo escribe en el div apuntado por dive el valor de la variable res que es el resultado de operar.
Finalemente
document.getElementById('boton').addEventListener('click',operar,false);
lo que hace es asigna al elemento de id=boton, el evento click y al detectar este click en ese elemento llama a la funcion operar.
Si ya es muy sencillo pero es que tenia poco tiempo, y esto salio bastante rapido. y estoy haciendo un tutorial que usa muchas mas funciones en javascript que todavia no termino.
chaito
donde aparece carita es )