We have learned how to make a computer repeat an
operation a lot of times until a certain condition is achieved, with the while
loop. Now we are going to learn another way to make loops, the “for” loop,
which is fact is even more widely used.
To do so, let’s make a little
program about investiment.
We will tell the program how much
are we investing each month, how much is the interest, and how many months we
will wait the money to grow.
Do this:
/***************
GLOBAL VARIABLES
***************/
var monthlyInv =
0;
var
monthlyPercInt = 0;
var totalMonths =
0;
The brackets and the asterisk are
another way to turn text into comments, that is, make the computer pass through
it without looking for code to execute. After you write “ /* ” then everything
that follows is just texts for humans to read, until you close the comment with
“ */ “. I made a lot of asterisks for aesthetic reasons.
Anyway, the computer is going to ask
the user what he needs to know.
/*********
The Program
***********/
window.onload =
function( ) {
askHowMuch();
askHowLong();
askInterest();
calculate(monthlyInv,
totalMonths, monthlyPercInt);
}
You can see
where this is going, right? So, let’s define the functions:
askHowMuch =
function () {
monthlyInv = prompt("How much
do you intend to invest each month?")
if (isNaN(monthlyInv) ) {
alert("Invalid
entry");
askHowMuch( );
}
}
askHowLong =
function () {
totalMonths = prompt("For how
many months would you invest?")
if (isNaN(totalMonths) ) {
alert("Invalid
entry");
askHowLong( );
}
}
askInterest =
function () {
monthlyPercInt = prompt("How
much percent is the monthly interest?")
if (isNaN(askInterest) ) {
alert("Invalid
entry");
askInterest( );
}
}
We told the computer to display the
texts (the questions) and to store the values the user types, in a variable.
The conditional “if” is to check if
the person really wrote a number. isNan means “is not a number”. We have no use
for Strings (text) in this particular program so, if it is not a number, the
computer asks again.
Well, we got the numbers we need.
Now the function that really makes it happen:
calculate =
function( monthlyInv, totalMoths, monthlyPercInt ) {
var
sum = 0;
//this is the
money you have, it will increase
var increase = 1 + monthlyPercInt /
100
/*
For something to
increase in 1 porcent, in fact you multiply it for 1.01.
2 percent, 1.02
And so on. It’s
the number itself plus the percentage
*/
Now we are finnaly putting the “for”
loop.
for (var i = 0; i < totalMonths;
i++) {
sum += monthlyInv;
sum *= increase;
}
First, the for syntax:
As you see, you give 3 parameters to
the for loop: you give it a variable “i”, you say that the loop
will go on as long as the condition “ i < totalMonths” is true, and
then you say that at each iteration, “i” will be increased in 1.
Iteration: a
repetition of na operation, usually coming closer to the result you want.
+= means that the variable, after the instruction, will be
itself plus the number you are giving after it.
Same, *= means it will be itself
multiplied by the other number
If I had writen:
For ( x = 5; x < 10 ; 5+=2)
It would take “x” (or any other name
you give it), increase it by 2 each round of the loop (iteration) and go until
x is no longer smaller than 10.
alert (“At the end of “ +
totalMonths + “ you will have “ + sum);
} // closing
function calculator.
See? We
changed the sum at each round based on the interest and in the end the program
says the result.
Now we will
“wrap” it into a simple html that does basically nothing. The “invest.html”
file.
<!doctype
html>
<html>
<head>
<meta
charset="utf-8">
<script
src="investor.js"></script>
<title>Super
investing Page</title>
<head>
<body>
<h1> Invest With
Us </h1>
<p>
You will have super like
advantages
</p>
<body>
</html>
Here your
Javascript file complete. Call it "investor.js".
/***************
GLOBAL VARIABLES
***************/
var monthlyInv = 0;
var
monthlyPercInt = 0;
var totalMonths =
0;
/*********
The Program
***********/
window.onload =
function( ) {
askHowMuch();
askHowLong();
askInterest();
calculate(monthlyInv,
totalMonths, monthlyPercInt);
}
askHowMuch =
function () {
monthlyInv = prompt("How much
do you intend to invest each month?")
if (isNaN(monthlyInv) ) {
alert("Invalid
entry");
askHowMuch( );
}
}
askHowLong =
function () {
totalMonths = prompt("For how
many months would you invest?")
if (isNaN(totalMonths) ) {
alert("Invalid
entry");
askHowLong( );
}
}
askInterest =
function () {
monthlyPercInt = prompt("How
much percent is the monthly interest?")
if (isNaN(monthlyPercInt) ) {
alert("Invalid
entry");
askInterest( );
}
}
calculate =
function( monthlyInv, totalMonths, monthlyPercInt ) {
var
sum = 0;
//this is the
money you have, it will increase
var increase = 1 + monthlyPercInt /
100
/*
For something to
increase in 1 porcent, in fact you multiply it for 1.01.
2 percent, 1.02
And so on. It’s
the number itself plus the percentage
*/
for (var i = 0; i < totalMonths;
i++) {
sum += monthlyInv;
sum *= increase;
}
alert ("At the end of " +
totalMonths + " you will have " + sum);
} // closing
function calculator.
That’s it, friends. We are going to
get rich.
URGENT CORRECTION at 10 february 2024:
Oh schaitz, it seems I made a mistake, and the program was giving a much lower result than the actual outcome of the investment. After studies, I found that Javascript was treating some numbers as texts. I inserted the lines in black bellow, that make the answer given by the user equal to itself converted to integer.
The updated code:
/***************
GLOBAL VARIABLES
***************/
var monthlyInv = 0;
var
monthlyPercInt = 0;
var totalMonths =
0;
/*********
The Program
***********/
window.onload =
function( ) {
askHowMuch();
askHowLong();
askInterest();
calculate(monthlyInv,
totalMonths, monthlyPercInt);
}
askHowMuch =
function () {
monthlyInv = prompt("How much
do you intend to invest each month?");
monthlyInv = parseInt(monthlyInv);
if (isNaN(monthlyInv) ) {
alert("Invalid
entry");
askHowMuch( );
}
}
askHowLong =
function () {
totalMonths = prompt("For how
many months would you invest?");
totalMonths = parseInt(totalMonths);
if (isNaN(totalMonths) ) {
alert("Invalid
entry");
askHowLong( );
}
}
askInterest =
function () {
monthlyPercInt = prompt("How
much percent is the monthly interest?");
montlhyPercInt = parseInt(monthlyPercInt);
if (isNaN(monthlyPercInt) ) {
alert("Invalid
entry");
askInterest( );
}
}
calculate =
function( monthlyInv, totalMonths, monthlyPercInt ) {
var
sum = 0;
//this is the
money you have, it will increase
var increase = 1 + monthlyPercInt /
100
/*
For something to
increase in 1 porcent, in fact you multiply it for 1.01.
2 percent, 1.02
And so on. It’s
the number itself plus the percentage
*/
for (var i = 0; i < totalMonths;
i++) {
sum += monthlyInv;
sum *= increase;
}
alert ("At the end of " +
totalMonths + " you will have " + sum);
} // closing
function calculator.
That's it. At least, if you used my fantastic tool to invest, in the end you got more money than I promised, not less! ;-)