Basics
Creating a Document
Head and Body Elements
Formatting Text
Creating Lists
Embedding Images
URLs Explained
Linking to Documents
Creating Tables
Forms Form Basics
Input and Textarea
Select Lists
Frames Framesets
The Frame Element
Nested Framesets
Targetting Frames
Inline Frames
Tips and Tricks Meta Tags
Transition Effects
HTML Generators Create a Document
Create a List
Create a Table
HTML
Basics
Implementing CSS
CSS Syntax
Pseudo Classes/Elements
CSS Classes
CSS Properties Font Properties
Color and Background
Text Properties
Border Properties
Margins and Padding
Size and Position
Tips and Tricks Menu Buttons
Special Effects
CSS
Basics
Running a Script
Variables
Expressions and Operators
Objects.Properties.Methods
The Date Object
Strings
Regular Expressions
Defining RegExp Patterns
Branches and Conditions
Loops
Arrays Array Basics
Array Methods
Sorting Arrays

User-Defined Functions
Cookies
Windows
Frames
Tips and Tricks Image Replacement
Using Includes
Form Validation
Debugging
JavaScript
Basics
Creating a Script
Running a Script
Variables
Expressions and Operators
Strings Strings Basics
Strings and Substrings
Replacing Substrings
Regular Expressions
Branches and Conditions
Loops
Arrays Array Basics
Array Functions
Sorting Arrays
User-Defined Functions
Include and Require
Uploading Files
File Functions
Session Variables
Tips and Tricks Page Templates
Form Reply Scripts
Form Validation
JavaScript to PHP
PHP
Basics
Create and Drop
Show and Describe
Insert, Update and Delete
Querying
Join Queries
Functions
Table Locking
PHP/MySQL Functions Accessing a Database
Querying with PHP
Create and Drop with PHP
Insert and Update with PHP
Frequently Used Functions MySQL
Basics
Layout and Navigation
Page Content Style
Web Page Copy
Graphics and Animation
HTML Forms
Accessibility
Legal Requirements
MySQL
JavaScriptBasicsRunning a ScriptVariablesExpressions and OperatorsObjects.Properties.MethodsThe Date ObjectStringsRegular ExpressionsDefining RegExp PatternsBranches and ConditionsJavaScript LoopsLoopsArraysArray MethodsSorting ArraysUser-Defined FunctionsCookiesWindowsFrames

Home > JavaScript > Loopsprinter version

JavaScript Loops

JavaScript loops are similar to those of other high-level languages. They allow statements to repeatedly executed as long as a conditional expression remains true.

The loop statements that JavaScript offers are while, do ... while and for.

The while Loop

This loop structure repeats one or more statements as long as a condition remains true. The condition is checked first so if the condition is initially false the statements will never be executed.

Obviously the loop must contain a statement that allows the condition to become true at some point or the loop will never end.

Example of a while Loop
<script language="javascript" type="text/javascript">
    var counter = 1;
    while (counter < 20)
    {
        document.write(counter + " ");
        counter ++;
    }
</script>


The do ... while Loop

The only difference between this and the while loop is that the condition is checked at the end of the loop therefore the statements enclosed will always be executed at least once.

Again the loop must contain a statement that allows the condition to become true at some point or the loop will never end.

Example of a do ... while Loop
<script language="javascript" type="text/javascript">
    var counter = 1;
    do
    {
        document.write(counter + " ");
        counter ++;
    } while (counter < 20)
</script>


The for Loop

The for loop is designed to iterate a set number of times. It has three parts separated by semicolons.



Example of a for Loop
<script language="javascript" type="text/javascript">
    for (counter = 1; counter < 10; counter ++)
    {
        document.write(counter + " ");
    }
</script>


Normally there is one loop counter and a simple conditional expression however, conditions can be as complex as required and several initial and end-loop statements can be separated by commas.

The break Statement

The break statement is used to break out of a loop early i.e. before the loop condition becomes false.

It can be used with all types of loop and is used in conjunction with a conditional expression.

Example of a break Statement
<script language="javascript" type="text/javascript">
    // This will print out 1 2 3 4 5 6 7 8
    var limit = 8;
    for (counter = 1; counter < 10; counter ++)
    {
        if (counter > limit)
            break;
        document.write(counter + " ");
    }
</script>


The continue Statement

The continue statement allows you to go to the start of the loop without executing all the statements in the loop body.

It can also be used within a while loop and is used in conjunction with a conditional expression.

Example of a continue Statement
<script language="javascript" type="text/javascript">
    // This will print out 8 9
    var limit = 8;
    for (counter = 1; counter < 10; counter ++)
    {
        if (counter < limit)
            continue;
        document.write(counter + " ");
    }
</script>


Previous - JavaScript Branches and Conditions Previous - Branches and Conditions     Next - Arrays Next - JavaScript Arrays


Privacy | Terms | Contact | Links | Sitemap | RSS Feeds RSS and JavaScript Feeds
©2010 www.webdesignworkmate.co.uk all rights reserved 
Design and Production by smallbizonline website design © 2000-2010
Valid HTML 4.01! Level Double-A conformance icon, W3C-WAI Web Content Accessibility Guidelines 1.0Valid CSS!
Tips and TricksImage ReplacementUsing IncludesForm ValidationDebugging
Got any JavaScript Tips?
Send me your tip and if it's suitable I'll put it on the site, credit it to you and add a link back to your site.
Recommended Reading
Javascript the definitive guide

Javascript and DHTML cookbook

Pro javascript techniques

simply javascript