Exforsys

JavaScript Tutorial

  1. JavaScript Browser Objects Part 2
  2. JavaScript Frame object
  3. JavaScript Form Object
  4. JavaScript FileUpload Object
  5. JavaScript Event Object Properties and Methods
  6. JavaScript Event Object
  7. JavaScript Elements and Embed Objects
  8. JavaScript Applet Objects
  9. JavaScript Browser Objects
  10. JavaScript Object Oriented Features
  11. JavaScript Window Object Open Method Part 2
  12. JavaScript Window Object Open Method
  13. JavaScript Window Object Timeout Methods
  14. JavaScript Location Object
  15. JavaScript Location Object Properties
  16. JavaScript History Object Properties and Methods
  17. JavaScript Document Object Methods Part II
  18. JavaScript Document Object Methods Part I
  19. JavaScript Document Object Properties
  20. JavaScript Document Object
  21. JavaScript Windows Object Properties Part II
  22. JavaScript Windows Object Properties Part I
  23. JavaScript DOM Window Object
  24. Working with JavaScript DOM Objects
  25. JavaScript Array Object Methods – Part II
  26. JavaScript Array Object
  27. JavaScript Array Object Methods – Part I
  28. JavaScript Boolean Object
  29. JavaScript OnError Event
  30. JavaScript Exception Handling – Part II
  31. JavaScript Exception Handling – Part I
  32. JavaScript Event Handler
  33. JavaScript Events Handling
  34. JavaScript Array Operations
  35. JavaScript Two Dimensional Arrays
  36. Passing values to JavaScript Function
  37. JavaScript Functions
  38. JavaScript Arrays
  39. JavaScript Iterative Structures - Part II
  40. JavaScript Iterative Structures - Part I
  41. JavaScript Math Object
  42. JavaScript Date Object
  43. JavaScript String Object
  44. JavaScript Objects
  45. JavaScript Confirm Box
  46. JavaScript Alert Box
  47. JavaScript Conditional Statements Part 2
  48. JavaScript Conditional Statements Part 1
  49. How to use JavaScript in HTML page
  50. JavaScript Variables
  51. JavaScript Features
  52. JavaScript Introduction

Ads


Home arrow Technical Training arrow JavaScript Tutorial

JavaScript Iterative Structures - Part I

Author : Exforsys Inc.     Published on: 26th Jul 2007

JavaScript Iterative Structures - Part I

In this JavaScript tutorial, you will learn about JavaScript Iterative Structures, for loop, for..in statement, break and continue explained along with syntax and examples.

Ads

Iterative Structures are used to execute a certain piece of code a specified number of times or until the condition mentioned remains true. The Iterative structures are also termed “looping” in programming terminology. Iterative Structure is an important part of programming terminology. When a programmer wants to repeat the same code a number of times, he or she does not have to rewrite the code again and again, resulting in poor code performance. Instead, the programmer can use looping statements to repeat a block of code until the condition specified is true or repeated a specified number of times.

Looping can be achieved in JavaScript using various statements:

  • for loop
  • while loop
  • do..while loop
  • for..in loop

for loop:

This is used when a programmer knows for certain the number of times a block of code should be executed.

The general syntax of the for loop structure of a JavaScript is as follows:


for (variable=starting_value; variable relational_operator condition;var=var_incrment/decrement)
{
   Block of Code to be executed
   ……………
   ……………
}

An Example of for loop of JavaScript


<html>
   <
body>
      <
script type="text/javascript">
        var exfor=1
        for (exfor=1;exfor<=15;exfor++)
        {
           document.write("Value is: " + exfor)
           document.write("<br />")
        }
      </
script>
   </
body>
</
html>

The output of the above example is

Value is: 1
Value is: 2
Value is: 3
Value is: 4
Value is: 5
Value is: 6
Value is: 7
Value is: 8
Value is: 9
Value is: 10
Value is: 11
Value is: 12
Value is: 13
Value is: 14
Value is: 15

In the above example, the variable exfor is initialized with a starting value of 1 and the loop executes with this value (as the value is less than 15) and by the statement document.write , the output is written with the current value of variable exfor (which is 1). Then line break is given which gives a new line. Then again control passes to the for loop and the value of exfor is incremented by 1 (by the command exfor++) . This gives the value of exfor as 2 and this is checked with the condition in for statement. Since 2 is less than 15 again, for loop executes and the value of variable exfor prints, continuing until the variable exfor reaches the value 15. Then the value increments to 16, which is greater than 15, taking control out of for loop.

for..in statement:

for..in statement will be explained after the concept of arrays is discussed in the next chapter.

There may be situation when programmers want to come out of the loop explicitly or want to break the current loop and continue with the next value. To handle these situations, JavaScript uses two commands:

  • Break
  • Continue

Break:

The break command is used for breaking the loop and continuing with the execution of the code that follows after the loop.

The general structure of this command is

break

for example:


<html>
   <
body>
      <
script type="text/javascript">
        var exfor=1
        for (exfor=1;exfor<=15;exfor++)
        {
           if (exfor==4){break}
           document.write("Value is: " + exfor)
           document.write("<br />")       
        }
      </
script>
   </
body>
</
html>

The output of the above program is

Value is: 1
Value is: 2
Value is: 3

In the above program, the initial value of the variable exfor is 1. Inside the for loop the if condition checks to see if the value of variable reaches the value 4. Until the value of the variable exfor reaches 4, the for loop executes and, as a result, the values 1,2,3 print. When the value of exfor reaches 4, the break statement executes and, as a result, the control moves or breaks out of the for loop.

Continue:

The command continue is used for breaking the current loop and proceeding with the next value.

The general structure of this command is:

continue


<html>
   <
body>
      <
script type="text/javascript">
        var exfor=1
        for (exfor=1;exfor<=15;exfor++)
        {
           if (exfor==4){continue}
           document.write("Value is: " + exfor)
           document.write("<br />")       
        }
      </
script>
   </
body>
</
html>

The output of the above program is

Value is: 1
Value is: 2
Value is: 3
Value is: 5
Value is: 6
Value is: 7

Ads

In the above program, the initial value of the variable exfor is 1. Inside the for loop, the if condition checks to see if the value of variable reaches the value 4. Until the value of the variable exfor reaches 4 the for loop executes and, as a result, the value 1,2,3 prints. When the value of exfor reaches 4, the continue statement executes and, as a result, the current value 4 is skipped and the loop proceeds to the next value of the variable (5) and proceeds as before.



 
This tutorial is part of a JavaScript Tutorial tutorial series. Read it from the beginning and learn yourself.

JavaScript Tutorial

  1. JavaScript Browser Objects Part 2
  2. JavaScript Frame object
  3. JavaScript Form Object
  4. JavaScript FileUpload Object
  5. JavaScript Event Object Properties and Methods
  6. JavaScript Event Object
  7. JavaScript Elements and Embed Objects
  8. JavaScript Applet Objects
  9. JavaScript Browser Objects
  10. JavaScript Object Oriented Features
  11. JavaScript Window Object Open Method Part 2
  12. JavaScript Window Object Open Method
  13. JavaScript Window Object Timeout Methods
  14. JavaScript Location Object
  15. JavaScript Location Object Properties
  16. JavaScript History Object Properties and Methods
  17. JavaScript Document Object Methods Part II
  18. JavaScript Document Object Methods Part I
  19. JavaScript Document Object Properties
  20. JavaScript Document Object
  21. JavaScript Windows Object Properties Part II
  22. JavaScript Windows Object Properties Part I
  23. JavaScript DOM Window Object
  24. Working with JavaScript DOM Objects
  25. JavaScript Array Object Methods – Part II
  26. JavaScript Array Object
  27. JavaScript Array Object Methods – Part I
  28. JavaScript Boolean Object
  29. JavaScript OnError Event
  30. JavaScript Exception Handling – Part II
  31. JavaScript Exception Handling – Part I
  32. JavaScript Event Handler
  33. JavaScript Events Handling
  34. JavaScript Array Operations
  35. JavaScript Two Dimensional Arrays
  36. Passing values to JavaScript Function
  37. JavaScript Functions
  38. JavaScript Arrays
  39. JavaScript Iterative Structures - Part II
  40. JavaScript Iterative Structures - Part I
  41. JavaScript Math Object
  42. JavaScript Date Object
  43. JavaScript String Object
  44. JavaScript Objects
  45. JavaScript Confirm Box
  46. JavaScript Alert Box
  47. JavaScript Conditional Statements Part 2
  48. JavaScript Conditional Statements Part 1
  49. How to use JavaScript in HTML page
  50. JavaScript Variables
  51. JavaScript Features
  52. JavaScript Introduction
 

Comments