Free Webmaster Resources .info | Javascript Tutorials

JavaScript Tutorial for Programmers - Statements

Good practice suggests that each JavaScript statements should be terminated with a semicolon (;). This is often not strictly necessary, as a new line also serves to separate statements, but when multiple statements reside on the same line the semicolon delimiter is mandatory.

A set of statements that is surrounded by braces is called a block. Blocks of statements are used, for example, in functions and conditionals.

Normally statements are executed sequentially: x = 1; y = 2; z = x + y; but this can be altered by some statements which test a condition and branch or loop according to the result.

Conditionals

Conditional statements direct program flow in specified directions depending upon the outcomes of specified conditions. These tests are a major influence on the order of execution in a program.

if...else

As seen in many programming languages, if the condition evaluates to true then the block of statements1 is executed. Optionally, an else clause specifies a block of statements2 which are executed otherwise. You may omit the else clause if there are no statements which need to be executed if the condition is false.

if (condition) 
 { statements1; }

else    
 { statements2; }

switch (Netscape & MSIE 4)

Commonly known as a "case statement," switch matches an expression with a specified case, and executes the statements defined for that case. In essence, the switch statement is a sort of shorthand for combining many implied if statements together.

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

For example, imagine that you wanted to execute different sets of statements depending on whether favoritePet was "dog," "cat," or "iguana." Note that the break; statement prevents any cases below the match from being executed. The default case is matched if none of the cases match the expression. 

switch (favoritePet){
   case "dog" : 
      statements;
      break;
   case "cat" : 
      statements;
      break;
   case "iguana" :
      statements;
      break;
   default : statements;
}

Loops

for

The venerable for loop repeatedly cycles through a block of statements until a test condition is false. Typically, the number of times a loop is repeated depends on a counter. The JavaScript for syntax incorporates the counter and its increments:

for (initial-statement; test; increment) 
 { statements; }

The initial-statement is executed first, and once only. Commonly, this statement is used to initialize a counter variable. Then the test is applied and if it succeeds then the statements are executed. The increment is applied to the counter variable and then the loop starts again. For instance, consider a loop which executes 10 times:

for (i=0; i<10; i++) 
 { statements; }

do...while (Netscape & MSIE 4)

Another loop, a do...while statement executes a block of statements repeatedly until a condition becomes false. Due to its structure, this loop necessarily executes the statement at least once.

do 
 { statements;} 
while (condition)

while

In similar fashion as the do...while statement, the while statement executes its statement block as long as the condition is true. The main difference between while and do...while, aside from the fact that only while is supported in all JavaScript versions, is that a while loop may not execute the statements even once if the condition is initially false.

while (condition) 
 { statements; }

break and continue

Both of these statements may be used to "jump the tracks" of an iterating loop. When used within the statement block of a loop, each statement behaves slightly differently:

break	Aborts execution of the loop, drops out of loop to the next statement following the loop.
continue	Aborts this single iteration of the loop, returns execution to the loop control, meaning the condition specified by the loop statement. Loop may execute again if condition is still true.

Object manipulation

for...in

The sometimes confusing for...in statement is used to cycle through each property of an object or each element of an array. The idea is that you may want to execute a statement block which operates on every property or element.

for (variable in object) 
 { statements; }

Imagine, for example, that an object named wine1 has five properties: vineyard, year, varietal, alcohol, and color. You want to output the value of each property, as if producing a record from a database.

var record = "Wine 1<br><br>"
for (var prop in wine1)
 {record += prop + " = " + wine1[prop] + "<BR>"}
record += "<br>"
document.write(record)

with

The with statement serves as a sort of shorthand, allowing you to execute a series of statement who all assume a specified object as the reference. In other words, the object specified in the with statement is used as the default object whenever a property is encountered with no object specified.

with (object) 
 { statements; }

Comments

Despite the fact that comments are purely optional, they can easily be a crucial part of your program. Comments can explain the action, like a color commentary, which can be a great help in understanding the code. Whether as a teaching tool or to simply remind yourself what the code does, comments are best sprinkled liberally throughout a program. Remember, comments are for humans, so write them that way!

Comments can also be used for debugging -- you can comment "out" sections of code to prevent them from being executed. In doing so you may learn more about why a certain problem is occurring in your program.

Because JavaScript must ignore comments, there is an appropriate syntax for demarcating text as a comment. For single line comments, simply precede the line with two backslashes. For multi-line comment blocks, begin the comment with /* and close with */.

//A lonely ol' single line comment

/* A dense thicket of commentary, spanning many 
captivating lines
of explanation and intrigue. */