Learning to Function and Loop

HTML is boringly static, it's rigid, and, is least interactive. DHTML makes it dynamic and responsive. Now, DHTML is not another of those nerdy technologies, it's just that when we come up with a concoction of HTML + JavaScript (or VBScript), the guys call it DHTML just to sound cool. DHTML stands for, Dynamic Hyper Text Markup Language (ok, so now you can actually figure out what's all with HTML).

In the last section we explored the holy terrain of JavaScript variables. We learnt what all can be achieved by JavaScript variables, how to declare them, how to store values in them, and how to perform basic calculation with them and feel good about ourselves later on. From now onwards, we'll be actually writing programs that solve real-world problems, and hence, it makes sense to get on friendly terms with them.

We start with loops straightaway, as the purpose of these online articles is to give you a head start, and leave the trivialities to your individual intellectual pursuits. We start with a logical program that uses looping logic. Here it is:

<script language="JavaScript">

function addthem(n1, n2)
{
n1=n1*1;
n2=n2*1;
return n1+n2;
}

var keepsum=0;
var n=0;

do{
n=prompt("Enter a number, zero to stop.");
keepsum=addthem(keepsum, n);
document.write(n + " " + "<br>");
}while(n!=0)

document.write("---------------" + "<br>");
document.write(keepsum + "<br>");
document.write("---------------");

</script>

Note: After a curly bracket, and after a while statement, we don't need to put a semi-colon.

This is a multi-purpose script, and there is a profound reason behind it. Not that it's a complete application in itself - I call it multi-purpose because it enables us to learn many things in one go. It foremost, along with the loopy business, teaches us how to use functions. Up there we could have done without the addthem() function because the things being done there are only done once, and hence leaves its application redundant. It's just here for educational practicality.

We can declare a function like:

function(parameter₁, parameter₂, …, parameter_n)
{
do this;
do that
}

If you want the function to return a processed value, then you have to send to it a few parameters. It's like, if you want to use a grinder in your kitchen, you have to put in something to grind (be careful with your hand).

The addthem() function accepts two parameters, namely keepsum and n, and then returns their total to be stored as a new value in keepsum. As you can see, a function in itself is a tiny program. JavaScript is full of functions. Since JavaScript is basically Object Oriented, instead of functions, we call them methods. For instance, in document.write(), write() is a method that sends text to the HTML page.

We have used (this "we" business is getting on my nerves, next time I'll use I) do{…}while() loop in the above script. This sort of loop ensures the execution of the statements within the curly brackets at least once. A typical loop keeps executing a set of statements until the condition that makes it loop, is set to false. For example, I'll keep on eating until my stomach is full.

Primarily, there are three loops, viz., do{…}while(), while(){…} and for(){…}. The first one we have applied above. It accepts a value, adds that value to keepsum, and then sends that value to be printed on our HTML page, until the user enters zero. Once zero is entered, the program comes out of the loop, and stores the sum of all the values entered during the loop. Isn't it clever?

do{…}while(n!=0) ensures that loop is executed at least once, because it checks for the value of n after executing the statements. Had we used while(n!=0){…}, then the program would have first checked the value of n, and had it found the value to be zero at the first case itself, the loop would have never run.