Cómo utilizar un formulario HTML con Javascript para amortizar un préstamo

Admin Junio 11, 2016 / 07:06:37 Tecnología 0 1019

Así que has aprendido un poco de HTML y JavaScript. Ahora que quiere lograr algo que vale la pena. Si realiza pagos en cualquier tipo de préstamo o está pensando en tomar un out después una calculadora de amortización puede satisfacer sus necesidades bastante bien.

Última entrega de este tutorial JavaScript tutorial reúne las disciplinas aprendidas en muchos de los tutoriales anteriores Dumbledore y conduce un programador aspirante en la investigación para desarrollar una calculadora de amortización en ejecución.




A diferencia de otros ejercicios de HTML y JavaScript que Dumbledore simplemente incluye fragmentos de los elementos objeto de estudio, este módulo presentará el conjunto de componentes de código fuente, HTML y JavaScript necesario para construir la amortización calculadora.

Entrada de la tabla HTML

El único componente de la amortización calculadora que los usuarios interactúan directamente con el HTML tabla de entrada. Esta tabla proporciona un formulario HTML en el que el usuario puede introducir los datos utilizados para calcular las características de los términos del préstamo y hacer depreciación. Entonces las operaciones se completan cuando el usuario hace clic en el botón denominado Commit.

El siguiente módulo de código presenta el archivo HTML para toda la tabla de amortización:

HTML Tabla de códigos

Amortización Calculadora Su nombre Monto del préstamo Tasa De Interés Número de pagos

separar el código HTML para JavaScript

Código HTML presentado arriba representa todo el código HTML necesario para la amortización del Programa. Debido HTML sólo es utilizado por el programa para generar insumos para el programa y ver los resultados de la amortización, Dumbledore separar HTML y JavaScript.

El componente JavaScript está contenida en un archivo separado con nombre amort.js y la siguiente línea de código extraído del código HTML anterior ilustra cómo hacer referencia al archivo JavaScript externo del HTML:

Amortización: JavaScript por los números

Como se dijo anteriormente, Dumbledore incluye código JavaScript en el plan de amortización en un archivo separado. Esto sirve un par de propósitos: primero, separando el HTML y JavaScript aísla la presentación de los datos del programa de la lógica; segundo, el código JavaScript no aparece en el código fuente del documento HTML.

Los siguientes módulos están actualmente cada una de las funciones JavaScript y explicar lo que sucede en el interior de los módulos funcionales. Los módulos individuales se presentan como fragmentos de código y todo el archivo JavaScript se incluye al final del tutorial. El primero de estos módulos es la función commitData ():

El () función commitData

El commitData función () es el módulo de control o el envío para el programa. Esta es la función que llama el usuario pulsando el botón etiquetado Participar en formulario HTML y especificados en el elemento. Hay una serie de rutina de limpieza comenzó a partir de esta función, la primera de las cuales es la creación de una mesa en una nueva página y hacerse eco de los datos que ha facilitado el usuario. El siguiente formulario se muestra:

commitData función () { // Declair e inicializar las variables var document.form1.name.value = loanName; var document.form1.amount.value = LoanAmount; var document.form1.rate.value = INTRATE; var = numPay document.form1.numPay.value; // Hacer las mesas de exhibición para la repetición de entrada del usuario renderEchoInput (); // Procesar la tabla de amortización, esta tabla muestra el número de // Líneas especificadas por el número de los pagos por el usuario en el campo numPay. renderAmortizationTable (numPay); // Echo la entrada en la presentación de las tablas a través displayTableField () función displayTableField (loanName "flname"); displayTableField (LoanAmount "Lamount"); displayTableField ("enojado", INTRATE); displayTableField ("numPmt" numPay); // Calcular y mostrar la cantidad del pago mensual var = monPmt calcMonthly (LoanAmount, numPay, INTRATE); displayTableField ("monPmt" monPmt); // Llamar a la amortización de rutina amortizePmts (LoanAmount, INTRATE, numPay, monPmt); volver; }

Función CommitData () es un módulo despachador, que simplemente significa que esta función requiere principalmente otras funciones para llevar a cabo las acciones necesarias para que el programa genere los resultados deseados.

Esta función comienza por declarar e inicializar variables necesarias para recuperar los datos de usuario desde el formulario HTML.

La función entonces llama a las funciones que se hacen eco de la entrada del usuario hacia atrás para que el usuario pueda ver lo que se ha introducido, este es el renderEchoInput función (). Posteriormente, la función de hacer la tabla de amortización se llama, que es el renderAmortizationTable función ().

DisplayData función () se llama cuatro veces el eco de vuelta los datos que el usuario ha introducido y, por último, las funciones para calcular las condiciones del préstamo y hacer que la amortización se llaman.

Las funciones llamadas por el commitData función () incluyen la carne del programa y el resto de este centro explica cada una de estas funciones.

Render mesa Echo entrada

renderEchoTable función () { document.write (""); document.write (""); document.write ("Nombre del beneficiario:"); document.write ("Cantidad"); document.write ("Tasa de Interés"); document.write ("Número de Pagos"); document.write ("Pago mensual"); document.write (""); }

El propósito de la renderEchoTable función () es simplemente crear la tabla que mostrará de nuevo la información introducida por el usuario para su verificación. El commitData función () llama a esta función exactamente una vez.

Usted puede notar que la función simplemente contiene una serie de declaraciones y document.write que estas declaraciones parecen contener código HTML. Si esto le ocurre, estás en lo correcto. JavaScript puede contener código HTML. Esta es una característica útil cuando el programador quiere crear elementos HTML después de la carga inicial de la página web. Esto es exactamente lo que el autor quería lograr con esta función. La función createss una mesa vacía, el programa será completada con los datos.

Después de crear el eco mesa, crea la tabla de amortización según lo determinado por el número de pagos que el usuario ha introducido:

Render la tabla de amortización

A medida que el renderEchoTable función (), el renderAmortizationTable función () muestra una mesa vacía que el programa de seguimiento popular. La principal diferencia en la funcionalidad de las dos formas es que esta tabla varía en longitud de acuerdo con un valor introducido por el usuario.

Esta variación se realiza utilizando una estructura de bucle, que depende de la numPay parámetro proporcionado por la rutina de llamada.

Un método innovador incluido en esta función está utilizando el tagNam variable para crear Identificación de elementos dinámicos dentro del código. Estos identificadores son utilizados por el getElementById función () más tarde en el programa por lo que deben ser únicos. Una alternativa para la Identificación dinámica sería para codificar una tabla HTML que representa la longitud máxima de un préstamo, digamos 30 años o 360 pagos, pero esto implicaría la creación de 360 ​​líneas de tabla HTML estático. Esto habría sido una codificación poco "aburrido. Sin embargo, en algunos casos, el método tedioso en realidad puede ser más fácil de entender la alternativa.

Función renderAmortizationTable (numPay) { document.write ("Pago NumberPrevious BalancePaymentInterest PaidNew BalanceTotal interés"); tagNam var; for (var i = 1; i <= numPay; i ++) { loopNum = i; tagNam = "n" + loopNum.toString (10); document.write ("" + i + ""); tagNam = "b" + loopNum.toString (10); document.write (""); tagNam = "p" + loopNum.toString (10); document.write ("") tagNam = "o" + loopNum.toString (10); document.write (""); tagNam = "nb" + loopNum.toString (10); document.write (""); tagNam = "usted" + loopNum.toString (10); document.write (""); } // Esta declaración fuera del bucle completa la tabla document.write (""); }

amortizar pagos

Los amortizePmts función () realiza las operaciones para amortizar el préstamo. Estos pasos incluyen el cálculo del interés actual por el préstamo, el interés restando la cantidad del pago mensual, luego de restar el importe resultante de la antigua equilibrio. El resultado final de esta resta se convierte en el nuevo equilibrio en el préstamo. Estas operaciones se repiten para el mayor número de pagos están incluidos en los términos del préstamo.

amortizePmts función (LoanAmount, INTRATE, numPay, monPmt) { var = oldBalance LoanAmount; var = newBalance LoanAmount; INTRATE = (INTRATE/100)/12; mes var = monPmt; var owedInterest = 0; var totalInterestPd = 0; tagNam var; dispInt var // El bucle for ejecuta amortización for (var i = 1; i <= numPay; i ++) { loopNum var = i; owedInterest = newBalance * INTRATE; dispInt = twoDecimal (owedInterest); totalInterestPd = totalInterestPd + owedInterest; // Prueba para el pago final si (i Mostrar un campo de tabla

La función función displayTableField () es la más corta en el programa y se creó como una manifestación temprana de los beneficios de la modularización. Los dos atributos incluidos en la definición de la función se pasan a la función cuando se le llama y este corto procedimiento realmente quita un poco de codificación acortar longitudes redundantes de las líneas usadas para mostrar un campo de tabla si la función no es una forma separada.

Función displayTableField (eleId, eleDat) { document.getElementById (eleId) .innerHTML = eleDat; volver; }

tutoriales son merecedores

Calcula tus pagos mensuales

Un principio contable función es la base de la función utilizada para calcular el pago mensual. Esta función utiliza la cantidad del préstamo, la tasa de interés, y el número de pagos para determinar lo que su pago mensual sería de los términos que figuran el préstamo. El pago se calcula una vez y luego se hizo eco de vuelta al usuario, y finalmente utilizado por la amortización de rutina para especificar el estado del préstamo después de cada pago.

Función calcMonthly (capital, numPay, INTRATE) { var mensual; INTRATE var = (INTRATE/100)/12; var principal; // La fórmula contable para calcular el pago mensual es // M = P * ((i + 1) ^ N) * I/(((i + 1) ^ N -1)) // El siguiente código convierte la fórmula que representa JavaScript para calcular su pago mensual Mensual = (* principal (Math.pow ((1 + INTRATE), numPay)) * INTRATE/(Math.pow ((1 + INTRATE), numPay) -1)); volver twoDecimal (mensual); }

convertir un formato de dos decimales

Cuando se calculan las tasas de interés en general, prorrogar por un tiempo lugares '. Este número de punto flotante, luego influyen cálculos monetarios de forma que el número de decimales que puede llegar a ser muy grande.

El twoDecimal función () convierte un decimal en un limitado a dos decimales. Esta función es necesaria para convertir la salida en una forma más fácil de leer y asegurarse de que encaja en los campos de la tabla de salida ..

TwoDecimal Función (CHGVAR) { CHGVAR var; var = twoDec chgVar.toFixed (2); twoDec regresar; }

Este centro de información?

El autor agradece los comentarios.

Aviso Legal

Nota: El código contenido en este centro contiene algunos errores de menor importancia, que se dejan al estudiante a descubrir y corrija en el ejercicio. Por lo tanto, ninguna garantía, expresa o implícita, se ofrece como garantía para este código. El programa fue creado y presentado como un ejercicio de aprendizaje.

Las amort.js completas de archivos

commitData función () { // Declair e inicializar las variables var eleId; var eleDat; var document.form1.name.value = loanName; var document.form1.amount.value = LoanAmount; var document.form1.rate.value = INTRATE; var = numPay document.form1.numPay.value; loopNum var; tagNum var; tagNam var; // Hacer las mesas de exhibición para la repetición de entrada del usuario document.write (""); document.write (""); document.write ("Nombre del beneficiario:"); document.write ("Cantidad"); document.write ("Tasa de Interés"); document.write ("Número de Pagos"); document.write ("Pago mensual"); document.write (""); // Procesar la tabla de amortización, esta tabla muestra el número de // Líneas especificadas por el número de los pagos por el usuario en el campo numPay. document.write ("Pago NumberPrevious BalancePaymentInterest PaidNew BalanceTotal interés"); for (var i = 1; i <= numPay; i ++) { loopNum = i; tagNam = "n" + loopNum.toString (10); document.write ("" + i + ""); tagNam = "b" + loopNum.toString (10); document.write (""); tagNam = "p" + loopNum.toString (10); document.write ("") tagNam = "o" + loopNum.toString (10); document.write (""); tagNam = "nb" + loopNum.toString (10); document.write (""); tagNam = "usted" + loopNum.toString (10); document.write (""); } // Esta declaración fuera del bucle completa la tabla document.write (""); // Echo la entrada en la presentación de las tablas a través displayTableField () función displayTableField (loanName "flname"); displayTableField (LoanAmount "Lamount"); displayTableField ("enojado", INTRATE); displayTableField ("numPmt" numPay); // Calcular y mostrar la cantidad del pago mensual var = monPmt calcMonthly (LoanAmount, numPay, INTRATE); displayTableField ("monPmt" monPmt); // Llamar a la amortización de rutina amortizePmts (LoanAmount, INTRATE, numPay, monPmt); volver; } amortizePmts función (LoanAmount, INTRATE, numPay, monPmt) { var = oldBalance LoanAmount; var = newBalance LoanAmount; INTRATE = (INTRATE/100)/12; mes var = monPmt; var owedInterest = 0; var totalInterestPd = 0; tagNam var; dispInt var // El bucle for ejecuta amortización for (var i = 1; i <= numPay; i ++) { loopNum var = i; owedInterest = newBalance * INTRATE; dispInt = twoDecimal (owedInterest); totalInterestPd = totalInterestPd + owedInterest; // Prueba para el pago final si (i Recursos JavaScript

Recursos HTML

(0)
(0)

Comentarios - 0

Sin comentarios

Añadir un comentario

smile smile smile smile smile smile smile smile
smile smile smile smile smile smile smile smile
smile smile smile smile smile smile smile smile
smile smile smile smile
Caracteres a la izquierda: 3000
captcha