Learning to Function and Loop
By Amrit Hallan2005-06-01
Learning Javascript Loops
|
|
In the previous page, one thing might have baffled your sensitive nerves, and I apologize for being negligent. In the addthem() function, there were two lines of code:
n1=n1*1;
n2=n2*1;
Why the hell did I do that (not the sinful omission, but n1=n1*1)? Well, JavaScript has some sentimental hang-up while adding up two variables. They get added in a string sense. That is, if the above arm-twisting is not exercised, n1+n2 results in n1n2 and not the sum, that is, n1(=2) + n2(=5) gives 25 and not 7. So I consulted with a few King Solomon type developer friends of mine and we came up with this method. When we multiply a variable with a number, the answer is generally a number.
Now the weight is off my conscience. And we move ahead to other incarnations of loops. We have covered do{…}while() and as far as I know, we are content with the explanation. See the example of a while(){…} loop below:
<script language="JavaScript1.2">
function addthem(n1, n2)
{
n1=n1*1;
n2=n2*1;
return n1+n2;
}
var keepsum=0;
var n=0;
while(n!=0){
n=prompt("Enter a number, zero to stop.");
keepsum=addthem(keepsum, n);
document.write(n + " " + "<br>");
}
document.write("---------------" + "<br>");
document.write(keepsum + "<br>");
document.write("---------------");
</script>
It's the same old program, I imagine you mumbling. The only change I have done here is, instead of using the do{…}while() loop, I have incorporated the while(){…} loop, which first checks the value of n. Since n has already been initialized to zero, the loop refuses to execute, and we are dumped on the first line just after the loop. Change the value of n to anything other than zero, and the loop has no qualms. Very fussy, huh? Well, that's the hidden beauty of a loop, or in fact, a program - a program is strictly conditional, it has no concept of unconditional love.
The above two progressions, if you were able to assimilate, were of the infinite type. Unless you enter zero, the loop goes on and on. It doesn't depend on a finite number, although we can conveniently use both the above loops for a finite number of times, for instance:
var n=0;
do{
document.write(n + "<br>");
n++;
}while(n<10)
It prints ten numbers from 0-9. The same can be achieved in the following, elegant manner:
for(var n=0;n<10;n++)
document.write(n + "<br>");
See how considerably it has reduced the number of programming lines? This is the most preferred loop in such a case. We haven't used the curly brackets because there is only one statement associated with the for() loop, and hence, the semi-colon.
Very quickly now, we implement a small function into an HTML page. Create a new HTML page, or open an old one. Just above the <body> </body> tag, insert the following JavaScript:
<script language="JavaScript1.2">
function dispmess()
{
var messtoshow="Welcome to my page. ";
messtoshow=messtoshow + "The title of this page is: ";
messtoshow=messtoshow + document.title;
alert(messtoshow);
}
</script>
and modify the tag in such a way:
<body onload="dispmess();">
Save the page and see what happens.
We have assigned a JavaScript function to the OnLoad attribute of the <body> </body> tag. It tells the HTML browser to run the script as soon as the page is loaded, and this is how we assign various JavaScript functions to various HTML events. In the next section, we see how this quality helps us process the data entered in a form by a visitor. Cool?
Tutorial Pages:
» Learning to Function and Loop
» Learning Javascript Loops
