| Artículos | 01 NOV 1997

Programar una calculadora en JavaScript

Tags: Histórico
Jaime Peña.

JavaScript es un lenguaje ideal para interactuar con nuestras páginas HTML. Entre otras capacidades, destacan sus funciones de evaluación y cálculo de expresiones matemáticas y lógicas.

El mes pasado PC World publicaba un artículo de introducción a JavaScript, un lenguaje que permite aumentar las capacidades de HTML para crear páginas Web dinámicas e interactivas. Este artículo lleva a la práctica esa teoría diseñando una calculadora para ser utilizada en documentos HTML, basándonos en el uso de formularios y tablas, para su formato externo, y en el lenguaje JavaScript, para su funcionamiento y proceso de cálculo.

Entre las capacidades de nuestra calculadora, destacamos uso de paréntesis anidados, cálculos de funciones logarítmicas, trigonométricas, exponenciales y sus inversas, evaluación de expresiones escritas directamente con el teclado, uso de una memoria que puede contener expresiones y que puede sustituir o añadirse a lo expuesto en la ventana de evaluación, sistema de corrección de errores no muy sofisticado, inclusión del número Pi, etc. En definitiva, esencialmente simple, muy respetuosa con la cantidad de código en el trasiego en redes como Internet, pero que cubre una buena parte de las necesidades de un usuario medio.

La especificación de JavaScript versión 1.0 fue implementada en Netscape Navigator 2.0, ya durante sus fases beta, y en Netscape LiveWire 1.0. Posteriormente apareció JavaScript versión 1.1, acompañando a Netscape Navigator 3.0 y es la versión que está actualmente en vigor.

Puede obtener más información en las siguientes direcciones de Internet:

home.netscape.com/

www.hardlink.com/~robyoung/javatour.htm

www.serve.com/hotsyte.

La primera referencia es el foro de Netscape, la empresa que definió las bases de JavaScript. La segunda es la página denominada JavaScript for the Total Non-Programmer - a tutorial; un excelente punto de entrada para los que desconozcan las bases de este lenguaje. La tercera, es la dirección de HotStyle - The JavaScript Connection, un atractivo foro independiente de información de todo tipo acerca de JavaScript.

Los operadores básicos

Gran parte de los cálculos se llevan a cabo con los operadores básicos (suma, resta, multiplicación, división, etc.) y se toman de entradas de usuario que JavaScript maneja como cadenas de caracteres. En principio, deberíamos hacer una comprobación de lo que son valores numéricos, extraerlos y de cuáles son las operaciones a realizar, incluyendo la precedencia establecida por paréntesis. No es una labor simple a primera vista.

Afortunadamente, para estos menesteres, la función eval(expresión) es excelente, ya que no requiere prácticamente programación adicional. Así, podemos pasar un expresión matemática sencilla en formato cadena de caracteres -que no contenga operaciones que se tengan que realizar llamando al objeto Math, véase más abajo-, y nos devolverá el resultado de su correcta evaluación matemática. La función eval realizará todas las funciones de transformación, parsing y cálculo. Podríamos decir, que se trata de una pequeña joya de JavaScript, ideal para programaciones de muy alto nivel (alto nivel en el sentido de abstracción del código).

En una de las tablas adjuntas, recogemos los operadores básicos disponibles en JavaScript. Observará la similitud de sintaxis con el lenguaje C/C++. Cada línea de código puede finalizar con un punto y coma, pero eso es opcional. Al margen, cabe utilizar las simplificaciones del tipo de la usadas en C/C++, al estilo:

valor_total+=valor_parcial;

que da como resultado la suma del contenido actual de valor_total más valor_parcial y almacena el resultado en valor_total. Estos operadores los emplearemos en nuestro código JavaScript para componer las expresiones a evaluar en la forma de, por ejemplo:

calculadora.expresion.value+='1'

cuando se pulse el botón correspondiente a la tecla del número 1. Observe que son aplicables, como aquí se demuestra, también para componer adiciones de caracteres a una cadena.

El objeto Math

El objeto Math es una especie de biblioteca de constantes y funciones de cálculo numérico simple, pero más que suficiente para casi todo lo que podamos necesitar en una calculadora de tipo medio. Con un poco de imaginación, y conocimiento, podríamos ampliarla para realizar evaluaciones de expresiones casi todo lo avanzadas que deseásemos. Pero, ya sin modificación, nos valdrá para mucho. Una de las tablas del artículo recoge las constantes y métodos del objeto Math, así como su sintaxis de llamada. Observe que trabaja siempre con ángulos en radianes y logaritmos naturales. Normalmente nos interesará trabajar con ángulos en grados y logaritmos en base 10, a menos que deseemos que sea una calculadora científica pura o que la ampliemos para poder trabajar según nos interese. Por eso, en el ejemplo que nos ocupa, nuestra labor será transformar los valores a grados y logaritmos decimales tras las operaciones y hacer el proceso inverso antes de llevarlas a cabo. Las funciones de transformación son muy sencillas. Para pasar de logaritmos decimales a naturales, se multiplica por Math. LN10. Para pasar de logaritmos naturales a decimales se multiplica por 1/(Math. LN10). Para convertir de radianes a grados se multiplica por 360/ (2*Math.PI). Para convertir de grados a radianes se multiplica por 2*M ath.PI/360. Respecto a las funciones trigonométricas, el objeto Math nos lo pone muy simple, ya que proporciona funciones de cálculo directas e inversas; sólo hay que tener presente el pasar de grados a radianes, según se precise. Recuerde que hemos de pasar los valores en radianes y, en las funciones inversas, devuelven el valor también en radianes. El trabajo con logaritmos, potencias y exponenciales, así mismo dispone de funciones directas, pero las inversas se han de codificar manualmente, por ejemplo el antilogaritmo. Observe que elevar a potencias y logaritmos son funciones inversas, tomando la base adecuada (bien sea 10 o la constante de Euler). Por ejemplo:

Math.log(valor)/Math.LN10

nos devuelve el logaritmo del valor en base 10; mientras que:

Math.pow(10,valor)

calcula el antilogaritmo del valor en base 10.

Los formularios como base

Nuestra calculadora debe ser un paradigma de interactividad con los usuarios a través de Internet (o intranets corporativas), por tanto, parece lógico que los formularios vayan a jugar un papel especialmente importante. Suponemos que la aproximación al trabajo con formularios, mediante el lenguaje de documentos HTML, ya es conocida por el lector y no nos pararemos en excesivos detalles. Obviamente, si no es así, tampoco abandone aquí, simplemente puede que algunas partes del desarrollo le queden algo obscuras y puede echar un vistazo a un anterior artículo nuestro publicado en PC World nº 135, Septiembre 97.

Los controles (objetos) que nosotros empleamos en la tabla, en el interior de un formulario acotados por los tags de inicio fin de formulario ......, son los siguientes:

- : Se trata de un control (objeto) tipo caja de edición de textos. Empleado sólo en un caso, para exponer las expresiones introducidas con los botones de comando de la calculadora o escritas directamente con el teclado. Cuando se realizan las evaluaciones de las expresiones, se muestra aquí su resultado o un mensaje de error. NAME es el identificador del control, VALUE es el contenido inicial, vacío en nuestro caso, SIZE su ancho en caracteres y MAXLENGTH el tamaño máximo de caracteres que se pueden introducir mediante el teclado.

- Imprimir Subir

Contenidos recomendados...

Comentar
Para comentar, es necesario iniciar sesión
Se muestran 0 comentarios
X

Uso de cookies

Esta web utiliza cookies técnicas, de personalización y análisis, propias y de terceros, para facilitarle la navegación de forma anónima y analizar estadísticas del uso de la web. Consideramos que si continúa navegando, acepta su uso. Obtener más información