Home arrow JavaScript arrow Page 3 - Introducing JavaScript Functions and Loops
JAVASCRIPT

Introducing JavaScript Functions and Loops


Today, you will learn about functions from a man who can barely function, because it is 8:48 in the morning and my soda has yet to kick in. I would say wait for it, but I know you are so excited to read the rest of this article that you can't function. And if you can't function, and I can't function, how is JavaScript gonna function? Well, you'll have to keep reading to find out.

Author Info:
By: James Payne
Rating: 4 stars4 stars4 stars4 stars4 stars / 7
November 12, 2007
TABLE OF CONTENTS:
  1. · Introducing JavaScript Functions and Loops
  2. · Putting the Fun in Your Functions
  3. · Loops
  4. · While Loop

print this article
SEARCH DEVARTICLES

TOOLS YOU CAN USE

advertisement
Introducing JavaScript Functions and Loops - Loops
(Page 3 of 4 )

Another way for programmer's to be lazy is with loops. Loops are used when you want to repeat a task several times. There are two types of loops in JavaScipt: the For Loop and the While Loop.

For Loop

For Loops are used when you wish to define how many times you want to loop a certain code. Here is a program that counts down the number of beer bottles on a wall.


<html>

<body>


<script type="text/javascript">

for (i = 5; i >= 1; i--)

{

document.write(i + " Bottles of beer on the wall")

document.write("<br />")

}

</script>

</body>

</html>

This code would result in the following print out:

  5 Bottles of beer on the wall
  4 Bottles of beer on the wall
  3 Bottles of beer on the wall
  2 Bottles of beer on the wall
  1 Bottles of beer on the wall

The For loop takes place in the line: for (i = 5; i >= 1; i--). Let's take a look at what each section does.

The i = 5 assigns the value of 5 to our counter variable. Next, we use the i >= 1 to tell the loop to continue looping while the value of i is greater than or equal to 1. Finally, we use i-- to decrease the value of i by 1 each time through the loop. You could of course also write a loop where you used the increment operator instead of the decremental operator.

Note that it isn't necessary to name the counter variable i. You can name it whatever you like; it is simply programming practice to write i.

Before we go on to the While loop, let's look at one more cool kind of code:


<html>

<body>


<script type="text/javascript">

for (i = 1; i <= 6; i++)

{

document.write("<h" + i + ">I'm shrinking!")

document.write("</h" + i + ">")

}

</script>


</body>

</html>

With this code, we use the header tag to make our text appear to shrink each time through the loop. The result is this:

 

  I'm shrinking!

  I'm shrinking!

  I'm shrinking!

  I'm shrinking!

  I'm shrinking!
  I'm shrinking!

If we wanted to reverse it, we could use this code:


<html>

<body>


<script type="text/javascript">

for (i = 6; i >= 1; i--)

{

document.write("<h" + i + ">I am becoming the world's fattest man!")

document.write("</h" + i + ">")

}

</script>


</body>

</html>

The result would be:


  I am becoming the world's fattest man!
  I am becoming the world's fattest man!

  I am becoming the world's fattest man!

  I am becoming the world's fattest man!

  I am becoming the world's fattest man!

  I am becoming the world's fattest man!


blog comments powered by Disqus
JAVASCRIPT ARTICLES

- More Top jQuery Tutorials for Beginners
- More Top jQuery Plugins for Menus
- Top jQuery Tutorials for Beginners
- New UI Framework and SDK for JavaScript Rele...
- JavaScript OpenPGP Tool, Node.js 0.6.3 Avail...
- Yahoo Releases Cocktails Language and Develo...
- Customizing jQuery Slideshows: Dynamic Contr...
- Customizing jQuery Slideshows: the animate()...
- Customizing jQuery Slideshows: slideUp() and...
- Customizing jQuery Slideshows: hide() and sh...
- Web Workers: Performing Calculations in Para...
- More Top JavaScript Frameworks and Libraries
- More Dynamic jQuery Styling Techniques
- The Top JavaScript Libraries
- The Top JavaScript Frameworks

Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Weekly Newsletter
 
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 
Support 



© 2003-2012 by Developer Shed. All rights reserved. DS Cluster 9 - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials