Hola!.
Hace unas semanas cree una pequeña calculadora nutricional en JavaScript para hacer de manera rápida y fácil un trabajo que consistía en hacer los cálculos nutricionales de las 4 comidas diarias durante una semana (el trabajo en si no era complicado pero cansaba ya que se repetía constantemente la misma operación).
Introducción:
Creamos un sencillo formulario en el que se piden dos datos (Alimento y Masa del alimento expresada en gramos), luego estos datos son usados para hacer los cálculos y mostrarlos en una nueva ventana.
El script se compone de 3 archivos:
- Un archivo “.html” (en mi caso fue index.html) en el que se crea el formulario necesario para introducir los datos en el script.
- 2 Archivos JavaScript (“.js”) un archivo para las funciones del script y otro para almacenar las Array con los valores de cada alimento.
Archivo .HTML:
En este archivo se crea tanto el formulario como los enlaces a los ficheros javascript que contienen las funciones las cuales seran llamadas al hacer click en el boton del formulario.
Documento HTML Completo:
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Calculadora</title> <!-- Llamadas a los archivos JS --> <script src="lista.js" type="text/javascript"></script> <script src="funciones.js" type="text/javascript"></script> </head> <body> <!-- Formulario --> <form name="frm"> <p>Alimento: <input type="text" name="txtAlimento" tabindex="1" /> Masa(g): <input type="text" name="txtMasa" tabindex="2" /> <button name="btnCalcular" onclick="obtener_datos();" tabindex="3">Calcular</button> </p> </form> </body> </html>
Continuación paso a explicar las partes claves del archivo.
Head:
En el Head podemos observar las etiquetas “Script” las cuales se encargan de enlazar a los archivos “.js” que contienen las funciones.
<!-- Llamadas a los archivos JS --> <script src="lista.js" type="text/javascript"></script> <script src="funciones.js" type="text/javascript"></script>
Formulario:
El cuerpo del documento es básicamente un formulario de nombre “frm” el cual se encarga de recoger los datos y llamar a las funciones del script.
<!-- Formulario --> <form name="frm"> <p>Alimento: <input type="text" name="txtAlimento" tabindex="1" /> Masa(g): <input type="text" name="txtMasa" tabindex="2" /> <button name="btnCalcular" onclick="obtener_datos();" tabindex="3">Calcular</button> </p> </form>
Lista de Alimentos .js:
Uno de los archivos “.js” se encarga de almacenar las arrays correspondientes a cada alimento, en estas arrays se guarda los valores de cada nutriente del alimento (el valor de los nutrientes corresponde a 100g del alimento).
Ejemplo de algunas arrays de este archivo:
//==================================================================================== // LISTA DE ALIMENTOS // (cantidad de nutrientes en 100g de alimento) //==================================================================================== //CEREALES==== Pan = new Array(); Pan[0]=258;//Kcal Pan[1]=7.8;//Proteinas Pan[2]=1;//LÃpidos Pan[3]=38;//Glúcidos Pan[4]=2.2;//Fibra Pan[5]=19;//Calcio Pan[6]=1.7;//Hierro Pan[7]=0;//Vita A Pan[8]=0;//Vit C Pan[9]=0;//Vit B Arroz = new Array(); Arroz[0]=362; Arroz[1]=7; Arroz[2]=0.9; Arroz[3]=86; Arroz[4]=0.2; Arroz[5]=10; Arroz[6]=0.5; Arroz[7]=0; Arroz[8]=0; Arroz[9]=0;
Nota: solo he puesto dos de las arrays ya que cada alimento tiene su propia array y el archivo acaba teniendo muchas lineas de codigo.
para añadir un alimento basta con crear una array con el nombre del alimento.
Funciones .js:
Este archivo es el que contiene todas las funciones del script, como por ejemplo la función “calcular_valores()” encargada de hacer los cálculos.
Archivo completo:
//============================
// FUNCIONES
//============================
//ARRAYS
valores = new Array(); //Almacenar valores obtenidos de la funcion obtener_datos()
//Array que almaena los nombres de los nutrientes.
nombres_nutrientes = new Array("Kcal","Proteinas(g)","LÃpidos(g)","Glúcidos(g)","Fibra(g)","Calcio(mg)","Hierro(mg)","Vit A(μg)","Vit C(mg)","Vit B(μg)");
//Función que se encarga de recoger los datos del formulario
function obtener_datos() {
alimento = document.frm.txtAlimento.value; //La variable alimentos toma el valor del alimento
masa = document.frm.txtMasa.value; //La variable masa toma el valor de la masa del alimento
alimento = alimento.toUpperCase(); //convertir el contenido de la variable a mayusculas
//Asociar el alimento con su array y pasarlo a la funcion de calculo
switch(alimento) {
case "PAN":
calcular_valores(masa,Pan[0],Pan[1],Pan[2],Pan[3],Pan[4],Pan[5],Pan[6],Pan[7],Pan[8],Pan[9]);
break;
case "ARROZ":
calcular_valores(masa,Arroz[0],Arroz[1],Arroz[2],Arroz[3],Arroz[4],Arroz[5],Arroz[6],Arroz[7],Arroz[8],Arroz[9]);
break;
//En caso de que no se encuentre el alimento se muestra un mensaje
default:
alert("No se encuentra el alimento indicado");
}
//calcular_valores(masa,);
}
//Función para calcular los valores
function calcular_valores(masa,valor0,valor1,valor2,valor3,valor4,valor5,valor6,valor7,valor8,valor9){
//Asignamso los valores del alimento al Array valores.
valores[0]=valor0;
valores[1]=valor1;
valores[2]=valor2;
valores[3]=valor3;
valores[4]=valor4;
valores[5]=valor5;
valores[6]=valor6;
valores[7]=valor7;
valores[8]=valor8;
valores[9]=valor9;
//Un vucle con una variable "i=0" para calcular todo automaticamente
for(i=0;i<valores.length;i++){
valores[i]=valores[i]*masa/100;
}
mostrar_resultado();
}
//Funcion para msotrar el resutlado
function mostrar_resultado() {
//Crear nueva ventana para mostrar el resultado
ventana_resultado = window.open("","Resultado","toolbar=no, status=no,top=50, left=50, width=200, height=300");
//Vucle que escribe los resultados automaticamente
for (i=0;i<valores.length;i++) {
ventana_resultado.document.write(nombres_nutrientes[i]+": "+valores[i]+"<br />");
}
}
Explicare las partes del archivo una a una.
ARRAYS:
Se declaran dos arrays la primera se usara para almacenar los valores de los nutrientes de cada alimento y la segunda contiene el nombre de cada nutriente.
//ARRAYS
//Almacenar valores obtenidos de la funcion obtener_datos()
valores = new Array();
//Array que almaena los nombres de los nutrientes.
nombres_nutrientes = new Array("Kcal","Proteinas(g)","LÃpidos(g)","Glúcidos(g)","Fibra(g)","Calcio(mg)","Hierro(mg)","Vit A(μg)","Vit C(mg)","Vit B(μg)");
obtener_datos():
Esta función se encarga de recoger los datos del formulario y asignarlo a las variables.
alimento = document.frm.txtAlimento.value; //La variable alimentos toma el valor del alimento
masa = document.frm.txtMasa.value; //La variable masa toma el valor de la masa del alimento
alimento = alimento.toUpperCase(); //convertir el contenido de la variable a mayusculas
lo siguiente es mediante un “switch” asociar el nombre de cada alimento con su “case” correspondiente el cual llama a la función calcular_valores().
Al hacer la llamada a la la función se le pasan los valores de la masa y el array del alimento.
//Asociar el alimento con su array y pasarlo a la funcion de calculo
switch(alimento) {
case "PAN":
calcular_valores(masa,Pan[0],Pan[1],Pan[2],Pan[3],Pan[4],Pan[5],Pan[6],Pan[7],Pan[8],Pan[9]);
break;
case "ARROZ":
calcular_valores(masa,Arroz[0],Arroz[1],Arroz[2],Arroz[3],Arroz[4],Arroz[5],Arroz[6],Arroz[7],Arroz[8],Arroz[9]);
break;
//En caso de que no se encuentre el alimento se muestra un mensaje
default:
alert("No se encuentra el alimento indicado");
}
Para agregar otro alimento basta con crear un nuevo case con el nombre del alimento y con la función que pase los valores del array correspondiente.
calcular_valores():
Esta función es la encargada de hacer los cálculos nutricionales de los alimentos.
Al ejecutar la función se le asignan los valores de los alimentos a la Array valores la cual los usara para realizar los cálculos nutricionales.
//Función para calcular los valores
function calcular_valores(masa,valor0,valor1,valor2,valor3,valor4,valor5,valor6,valor7,valor8,valor9){
//Asignamso los valores del alimento al Array valores.
valores[0]=valor0;
valores[1]=valor1;
valores[2]=valor2;
valores[3]=valor3;
valores[4]=valor4;
valores[5]=valor5;
valores[6]=valor6;
valores[7]=valor7;
valores[8]=valor8;
valores[9]=valor9;
A continuación la parte encargada de realizar los cálculos y guardarlos en la array, los cálculos se realizan mediante un bucle for el cual hace que la variable aumente y los cálculos se realicen y guarden en la array.
//Un bucle con una variable "i=0" para calcular todo automaticamente
for(i=0;i<valores.length;i++){
valores[i]=valores[i]*masa/100;
}
mostrar_resultado();
}
mostrar_resultado():
Por ultimo esta función que es la que se encarga de mostrar los resultados de los calculos.
La primera parte de la función crea una nueva ventana en la que se mostraran los resultados.
function mostrar_resultado() {
//Crear nueva ventana para mostrar el resultado
ventana_resultado = window.open("","Resultado","toolbar=no, status=no,top=50, left=50, width=200, height=300");
Y por ultimo un bucle for escribe en la nueva ventana los resultados de los cálculos.
//Vucle que escribe los resultados automaticamente
for (i=0;i<valores.length;i++) {
ventana_resultado.document.write(nombres_nutrientes[i]+": "+valores[i]+"<br />");
}
}
Cambien puedes descargar los archivos completos del script haciendo click aquí
Nota: El script es bastante sencillo y puede ser mejorado por ejemplo mostrando los resultados de los cálculos de alguna otra forma, pero con esas características ya me era suficiente para realizar el trabajo.
