Calculadora Científica SCI en JavaScript.

En categoría: Varios

La calculadora científica (SCI) en JavaScript resuelve las operaciones básicas de cálculo aritmético: suma, resta, producto, división, seno, coseno, tangente, potenciación, radicación.

| Descripción del ejemplo JavaScript

El ejemplo JavaScript no contiene ninguna variable que podamos editar para personalizar el mismo, solo está compuesto por unas cuantas funciones que calculan cada una de las operaciones disponibles. Lo que sí podemos hacer es personalizar la apariencia de la calculadora para que se visualice como queramos.

Mediante las diferentes clases dadas a los elementos de formulario y a la tabla que lo contiene podemos cambiar el tipo, color, estilo y tamaño de letra. También es posible cambiar las propiedades de los cuadros <INPUT> y los <BUTTON> pudiendo modificar los colores, tamaños, bordes, etc.

Un arreglo de último momento nos permite definir mediante la variable color1 el color que tomará la fuente del botón al pararse sobre el mismo con el puntero del Mouse y otra variable color2 nos permite definir el color que tomará cuando sacamos el puntero sobre el botón.

La calculadora no trabaja con una memoria, es decir que el cálculo se realiza según el valor que se ha agregado al elemento display. Por ejemplo si queremos sumar dos números se visualizará en el visor n1+n2, al presionar el botón de Enter se calculará sobre ese dato mediante la función compute() luego de haber chequeado los valores mediante checkNum().

Información relativa al Script

Compatible con: Internet Explorer

Internet Explorer

Firefox

Tamaño del Script: 9KB

Probar el Script

Temas relacionados a este Script

Ejemplo JavaScript para crear una calculadora científica 
con las operaciones básicas de cálculo.

Código fuente del script:

<HTML>
<HEAD>

<script language="javascript">

/* Definimos el color que tomará el botón de la calculadora cuando 
nos paremos sobre el mismo con el puntero del Mouse */
var color1 = "#ff0000"
/* El segundo color es el mismo que se define por defecto en el estilo 
del elemento INPUT */
var color2 = "#666666"

function addChar(input, character) {
	if(input.value == null || input.value == "0")
		input.value = character
	else
		input.value += character
}

function cos(form) {
	form.display.value = Math.cos(form.display.value);
}

function sin(form) {
	form.display.value = Math.sin(form.display.value);
}

function tan(form) {
	form.display.value = Math.tan(form.display.value);
}

function sqrt(form) {
	form.display.value = Math.sqrt(form.display.value);
}

function ln(form) {
	form.display.value = Math.log(form.display.value);
}

function exp(form) {
	form.display.value = Math.exp(form.display.value);
}

function deleteChar(input) {
	input.value = input.value.substring(0, input.value.length - 1)
}

function changeSign(input) {
	if(input.value.substring(0, 1) == "-")
		input.value = input.value.substring(1, input.value.length)
	else
		input.value = "-" + input.value
}

function compute(form) {
	form.display.value = eval(form.display.value)
}

function square(form) {
	form.display.value = eval(form.display.value) * eval(form.display.value)
}

function checkNum(str) {
	for (var i = 0; i < str.length; i++) {
		var ch = str.substring(i, i+1)
		if (ch < "0" || ch > "9") {
			if (ch != "/" && ch != "*" && ch != "+" && ch != "-" && ch != "."
				&& ch != "(" && ch!= ")") {
				alert("invalid entry!")
				return false
				}
			}
		}
		return true
}

/* Utilizamos esta función para cambiar la propiedad color del elemento INPUT
correspondiente */
function color(element) {
	element.style.color = color1;
}

// Fin del JavaScript

</script>

<STYLE type="text/css">

input {
	color:#666666; 
	background-color:#CCCCCC;
	width:32px;
	height:25px;
	text-align:center;
}

#backspace {
	width:100%;
}

#clear {
	font-size:12px;

}

#enter {
	background-image:url(enter.gif);
	background-repeat:no-repeat;
}

#display {
	color:#333333; 
	background-color:#CCCCCC;
	font-weight:bolder;
	width:100%;
	border:#006699 2px ridge;
	text-align:left;
	padding:2px;
}

#table {
	background-color:#00CCFF;
}

</STYLE>

</HEAD>

<BODY>

<FORM name="calculadora">

<TABLE cellspacing="0" cellpadding="1" align="center" id="table">
<TR>
	<TD colspan="5">
	<INPUT id="display" name="display" value="0" maxlength="25">
	</TD>
</TR>
<TR>
	<TD><INPUT type="button" value="exp" name="expo" 
	onMouseMove="element=document.calculadora.expo;color(element)" 
	onMouseOut="document.calculadora.expo.style.color=color2" 
	onClick="if (checkNum(this.form.display.value)) { exp(this.form) }"></TD>
	<TD><INPUT type="button" value="7" name="num7" 
	onMouseMove="element=document.calculadora.num7;color(element)" 
	onMouseOut="document.calculadora.num7.style.color=color2" 
	onClick="addChar(this.form.display, '7')"></TD>
	<TD><INPUT type="button" value="8" name="num8" 
	onMouseMove="element=document.calculadora.num8;color(element)" 
	onMouseOut="document.calculadora.num8.style.color=color2" 
	onClick="addChar(this.form.display, '8')"></TD>
	<TD><INPUT type="button" value="9" name="num9" 
	onMouseMove="element=document.calculadora.num9;color(element)" 
	onMouseOut="document.calculadora.num9.style.color=color2" 
	onClick="addChar(this.form.display, '9')"></TD>
	<TD><INPUT type="button" value="/"  name="div" 
	onMouseMove="element=document.calculadora.div;color(element)" 
	onMouseOut="document.calculadora.div.style.color=color2" 
	onClick="addChar(this.form.display, '/')"></TD>
</TR>

<TR>
	<TD>
	<INPUT type="button" value="ln" name="log" 
	onMouseMove="element=document.calculadora.log;color(element)" 
	onMouseOut="document.calculadora.log.style.color=color2" 
	onClick="if (checkNum(this.form.display.value)) { ln(this.form) }"></TD>
	<TD><INPUT type="button" value="4" name="num4" 
	onMouseMove="element=document.calculadora.num4;color(element)" 
	onMouseOut="document.calculadora.num4.style.color=color2" 
	onClick="addChar(this.form.display, '4')"></TD>
	<TD><INPUT type="button" value="5" name="num5" 
	onMouseMove="element=document.calculadora.num5;color(element)" 
	onMouseOut="document.calculadora.num5.style.color=color2" 
	onClick="addChar(this.form.display, '5')"></TD>
	<TD><INPUT type="button" value="6" name="num6" 
	onMouseMove="element=document.calculadora.num6;color(element)" 
	onMouseOut="document.calculadora.num6.style.color=color2" 
	onClick="addChar(this.form.display, '6')"></TD>
	<TD><INPUT type="button" value="*" name="prod" 
	onMouseMove="element=document.calculadora.prod;color(element)" 
	onMouseOut="document.calculadora.prod.style.color=color2" 
	onClick="addChar(this.form.display, '*')"></TD>
</TR>

<TR>
	<TD><INPUT type="button" value="sqrt" name="sqrt1" 
	onMouseMove="element=document.calculadora.sqrt1;color(element)" 
	onMouseOut="document.calculadora.sqrt1.style.color=color2"
	onClick="if (checkNum(this.form.display.value)) { sqrt(this.form) }"></TD>
	<TD><INPUT type="button" value="1" name="num1" 
	onMouseMove="element=document.calculadora.num1;color(element)" 
	onMouseOut="document.calculadora.num1.style.color=color2" 
	onClick="addChar(this.form.display, '1')"></TD>
	<TD><INPUT type="button" value="2" name="num2" 
	onMouseMove="element=document.calculadora.num2;color(element)" 
	onMouseOut="document.calculadora.num2.style.color=color2" 
	onClick="addChar(this.form.display, '2')"></TD>
	<TD><INPUT type="button" value="3" name="num3" 
	onMouseMove="element=document.calculadora.num3;color(element)" 
	onMouseOut="document.calculadora.num3.style.color=color2" 
	onClick="addChar(this.form.display, '3')"></TD>
	<TD><INPUT type="button" value="-" name="resta" 
	onMouseMove="element=document.calculadora.resta;color(element)" 
	onMouseOut="document.calculadora.resta.style.color=color2" 
	onClick="addChar(this.form.display, '-')"></TD>
</TR>

<TR>
	<TD><INPUT type="button" value="sq" name="sq" 
	onMouseMove="element=document.calculadora.sq;color(element)" 
	onMouseOut="document.calculadora.sq.style.color=color2" 
	onClick="if (checkNum(this.form.display.value)) { square(this.form) }"></TD>
	<TD><INPUT type="button" value="0" name="num0" 
	onMouseMove="element=document.calculadora.num0;color(element)" 
	onMouseOut="document.calculadora.num0.style.color=color2" 
	onClick="addChar(this.form.display, '0')"></TD>
	<TD><INPUT type="button" value="." name="punto" 
	onMouseMove="element=document.calculadora.punto;color(element)" 
	onMouseOut="document.calculadora.punto.style.color=color2" 
	onClick="addChar(this.form.display, '.')"></TD>
	<TD><INPUT type="button" value="+/-" name="masmenos" 
	onMouseMove="element=document.calculadora.masmenos;color(element)" 
	onMouseOut="document.calculadora.masmenos.style.color=color2" 
	onClick="changeSign(this.form.display)"></TD>
	<TD><INPUT type="button" value="+"  name="mas" 
	onMouseMove="element=document.calculadora.mas;color(element)" 
	onMouseOut="document.calculadora.mas.style.color=color2" 
	onClick="addChar(this.form.display, '+')"></TD>
</TR>

<TR>
	<TD><INPUT type="button" value="(" name="paren1" 
	onMouseMove="element=document.calculadora.paren1;color(element)" 
	onMouseOut="document.calculadora.paren1.style.color=color2" 
	onClick="addChar(this.form.display, '(')"></TD>
	<TD><INPUT type="button" value="cos" name="cos" 
	onMouseMove="element=document.calculadora.cos;color(element)" 
	onMouseOut="document.calculadora.cos.style.color=color2" 
	onClick="if (checkNum(this.form.display.value)) { cos(this.form) }"></TD>
	<TD><INPUT type="button" value="sin" name="sin" 
	onMouseMove="element=document.calculadora.sin;color(element)" 
	onMouseOut="document.calculadora.sin.style.color=color2" 
	onClick="if (checkNum(this.form.display.value)) { sin(this.form) }"></TD>
	<TD><INPUT type="button" value="tan" name="tan" 
	onMouseMove="element=document.calculadora.tan;color(element)" 
	onMouseOut="document.calculadora.tan.style.color=color2" 
	onClick="if (checkNum(this.form.display.value)) { tan(this.form) }"></TD>
	<TD><INPUT type="button" value=")" name="paren2" 
	onMouseMove="element=document.calculadora.paren2;color(element)" 
	onMouseOut="document.calculadora.paren2.style.color=color2" 
	onClick="addChar(this.form.display, ')')"></TD>
</TR>

<TR>
	<TD><INPUT type="button" id="clear" value="clear" name="clear" 
	onMouseMove="element=document.calculadora.clear;color(element)" 
	onMouseOut="document.calculadora.clear.style.color=color2" 
	onClick="this.form.display.value = 0 "></TD>
	<TD COLSPAN="3"><INPUT type="button" value="backspace" name="backspace" 
	onMouseMove="element=document.calculadora.backspace;color(element)" 
	onMouseOut="document.calculadora.backspace.style.color=color2" 
	onClick="deleteChar(this.form.display)" id="backspace"></TD>
	<TD><INPUT type="button" value="=" id="enter" name="enter" 
	onMouseMove="element=document.calculadora.enter;color(element)" 
	onMouseOut="document.calculadora.enter.style.color=color2" 
	onClick="if (checkNum(this.form.display.value)) { compute(this.form) }"></TD>
</TR>

</TABLE>
</FORM>

</BODY>
</HTML>

	Temas relacionados a este Script:
	Detectar la calidad profundidad de color del sistema con JavaScript Cambiar el color del borde en una tabla mediante JavaScript Visualizar u ocultar un objeto según el tamaño de la ventana Saludo aleatorio de visita al sitio al cargar la página Mostrar tipo de dato al que pertenece el valor de una variable Deshabilitar botones del Mouse con JavaScript JavaScript para ocultar y/o mostrar una capa Código de colores en sistema hexadecimal

Comentarios Recibidos sobre: Calculadora Científica SCI en JavaScript

Todavía nadie comentó este artículo.
Para insertar un comentario hacé clic en "Comentar artículo"

Comentar Artículo

Agradecemos todos los comentarios. Gracias por ayudarnos a mejorar el sitio.
Importante: Los comentarios están para ampliar el artículo propuesto en esta página, proponer o responder alguna consulta de otro visitante. En ningún caso nos hacemos responsables del contenido publicado en los comentarios. En el caso que formules una pregunta y ésta no sea respondida, puedes solicitarnos ayuda desde el formulario de ayuda aunque no te aseguramos una respuesta inmediata.