Web Development

  Homes arrow Web Development arrow Controlling the Flow - JavaScript Control Sta...
 Webmaster Tools
 
Base64 Encoding 
Browser Settings 
CSS Coder 
CSS Navigation Menu 
Datetime Converter 
DHTML Tooltip 
Dig Utility 
DNS Utility 
Dropdown Menu 
Fetch Content 
Fetch Header 
Floating Layer 
htaccess Generator 
HTML to PHP 
HTML Encoder 
HTML Entities 
IP Convert 
Meta Tags 
Password Encryption
 
Password Strength
 
Pattern Extractor 
Ping Utility 
Pop-Up Window 
Regex Extractor 
Regex Match 
Scrollbar Color 
Source Viewer 
Syntax Highlighting 
URL Encoding 
Web Safe Colors 
Forums Sitemap 
Weekly Newsletter
 
Developer Updates  
Free Website Content 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Contact Us 
Site Map 
Privacy Policy 
Support 
 USERNAME
 
 PASSWORD
 
 
  >>> SIGN UP!  
  Lost Password? 
WEB DEVELOPMENT

Controlling the Flow - JavaScript Control Statements
By: Developer Shed
  • Search For More Articles!
  • Disclaimer
  • Author Terms
  • Rating: 5 stars5 stars5 stars5 stars5 stars / 2
    2004-04-21

    Table of Contents:

    Rate this Article: Poor Best 
      ADD THIS ARTICLE TO:
      Del.ici.ous Digg
      Blink Simpy
      Google Spurl
      Y! MyWeb Furl
    Email Me Similar Content When Posted
    Add Developer Shed Article Feed To Your Site
    Email Article To Friend
    Print Version Of Article
    PDF Version Of Article
     
     

    SEARCH DEV MECHANIC

    TOOLS YOU CAN USE

    advertisement

    Controlling the Flow - JavaScript Control Statements
    by Wrox Books

    All statements are executed line-by-line, one after another, so the JavaScript code is quite static. However, there is a big difference between the JavaScript and HTML codes, since JavaScript has the conditional statement. It tells the browser to execute one or another part of the code depending on Boolean values.

    How does it work?



    Using Control Statements and Loops

    A loop is a set of commands that executes repeatedly until a specified condition is met. JavaScript supports the for, do while, while, and label loop statements (label is not itself a looping statement, but is frequently used with these statements). In addition, you can use the break and continue statements within loop statements.

    for Statement

    A for loop repeats until a specified condition evaluates to false. The JavaScript for loop is similar to the Java and C for loop. A for statement looks as follows:
    for (initialExpression; condition; incrementExpression) {
    statements
    }
    

    The for loop works as follows:

    • The initializing expression initialExpression, if there is any, is executed. This expression usually initializes one or more loop counters, but the syntax allows using an expression of any complexity.
    • The condition expression is evaluated. If the value of condition is true, the loop statements execute. If the value of condition is false, the for loop terminates.
    • The statements is executed.
    • When the update expression incrementExpression is executed, the control returns to Step 2

    for (var i=0; i < 10; i++) {
    // do something ...
    }
    

    do...while Statement

    The do...while statement repeats until a specified condition evaluates to false. The do...while statement looks as follows:

    do {
    statement
    } while (condition)
    

    This statement is executed once before the condition is checked. If condition returns true, the statement executes again. At the end of every execution, the condition is checked. When the condition returns false, execution stops and control passes to the statement following do...while.

    do {
    i+=1;
    result += 1;
    } while (i<5);
    

    while Statement

    A while statement executes its statements as long as a specified condition evaluates to true. A while statement looks as follows:

    while (condition) {
    statements
    }
    

    If the condition becomes false, the statements within the loop stop executing and control passes to the statement following the loop.

    The condition test occurs before the statements in the loop are executed. If the condition returns true, the statements are executed and the condition is tested again. If the condition returns false, execution stops and control is passed to the statement following while.

    while( n < 3 ) {
    n ++
    }
    

    Conditional Statements: If...Else

    Conditional Statements

    A conditional statement is a set of commands that is executed if a specified condition is true. JavaScript supports two conditional statements: if...else and switch.

    if...else Statement

    Use the if statement to perform certain statements if a logical condition is true; use the optional else clause to perform other statements if the condition is false. The if statement looks as follows:

    if (condition) {
    statements1
    }
    [else {
    statements2
    } ]
    

    The condition can be any JavaScript expression that is evaluated as true or false. The statements to be executed can be any JavaScript statements. If you want to use more than one statement after the if or else statement, you must enclose the statements in curly braces, {}.

    Var x=10
    if(x > 5) {
    // do something...
    }
    

    switch Statement

    The switch statement is a useful substitution for long lists of if else statements. It is often necessary to compare some value with the other ones and perform some actions depending on the result. In this case switch is the statement you need.

    NOTE: THE SWITCH STATEMENT WAS INTRODUCED TO JAVASCRIPT FROM THE VERSION 1.2. IN OTHER WORDS, IT CAN BE USED IN NS 4+ AND IE 4+ ONLY.

    Let us have a look at this statement's general syntax and how it works:

    switch (expression){
    case value1:
    statement;
    break;
    case value2:
    statement;
    break;
    ...
    default:
    statement;
    }
    
    

    The program first looks for a label matching the value of expression and then executes the associated statement. If no matching label is found, the program looks for the optional default statement, and if found, executes the associated statement. If no default statement is found, the program continues execution at the statement following the end of switch.

    The optional
    break statement associated with each case label ensures that the program breaks out of switch once the matched statement is executed and continues execution at the statement following switch. If break is omitted, the program continues execution at the next statement in the switch statement.

    var expr="Bananas"
    switch (expr) {
    case "Oranges" :
    alert(‘Oranges’)
    break;
    case "Apples" :
    alert(‘Apples’)
    break;
    case "Bananas" :
    alert(‘Bananas’)
    break;
    default :
    alert(‘?’)
    }
    

    Using the For...In Loop

    for...in Statement

    The for...in statement iterates a specified variable over all the properties of an object. For each distinct property, JavaScript executes the specified statements. A for...in statement looks as follows:

    for (variable in object) {
    statements }
    

    The following function takes as its argument an object and the object's name. It then iterates over all the object's properties and returns a string that lists the property names and their values.

    For an object car with properties make and model

    car.make = "Ford"
    car.model = "Mustang"
    var result = ""
    for (var i in car) {
    result += i + "<BR>"
    }
    

    result would be:

    Ford
    Mustang


    Using the Break Statement

    break Statement

    The break statement can be used in a while, for and switch statement.

    • In a while, for or switch statement, break terminates the current loop and transfers control to the statement following the terminated loop.

    The following function has a break statement that terminates the while loop when i is three, and then returns the value 3 * x.

    var i = 0
    while (i < 6) {
    if (i == 3)
    break
    i++
    }
    

    Using the Continue Statement

    continue Statement

    The continue statement can be used in a while and for statements.

    • In a while or for statement, continue terminates the current loop and continues execution of the loop with the next iteration. In contrast to the break statement, continue does not terminate the execution of the loop entirely. In a while loop, it jumps back to the condition. In a for loop, it jumps to the increment-expression.

    The following example shows a while loop with a continue statement that executes when the value of i is 3. Thus, n takes on the values 1, 3, 7, and 12.

    i = 0
    n = 0
    while (i < 5) {
    i++
    if (i == 3)
    continue
    n += i
    }
    


    DISCLAIMER: The content provided in this article is not warranted or guaranteed by Developer Shed, Inc. The content provided is intended for entertainment and/or educational purposes in order to introduce to the reader key ideas, concepts, and/or product reviews. As such it is incumbent upon the reader to employ real-world tactics for security and implementation of best practices. We are not liable for any negative consequences that may result from implementing any information covered in our articles or tutorials. If this is a hardware review, it is not recommended to open and/or modify your hardware.

    More Web Development Articles
    More By Developer Shed

       

    WEB DEVELOPMENT ARTICLES

    - On Page SEO for New Domains
    - Improve Your Site`s Speed
    - Safari Books Online Review
    - Creating an Estore From the Ground Up
    - Most Common SEO Mistakes Developers Make
    - Making the Most of Your Titles and Meta Desc...
    - Five Ways Using Flash Can Damage Your Site
    - A Web Designer`s Guide to Colors
    - Use Webstarts to Create a Free Site
    - More Than Just Looks. How Your Web Design C...
    - How to Design Content Pages
    - Mint Review
    - Make Your WordPress Website Look Professional
    - How to Create a Mobile Web Site
    - Meta Tags: Still Useful?

    Developer Shed Affiliates

     



    © 2003-2018 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap