PHP Developers

Tuesday, August 28, 2012

JavaScript While Loop

While Loops execute a block of code as long as a specified condition is true.

The while Loop

The while loop loops through a block of code while a specified condition is true.

Syntax

while (variable<endvalue)
  {
  code to be executed
  }

Note: The < could be any comparing operator.

Example

The example below defines a loop that starts with i=0. The loop will continue to run as long as i is less than 5. i will increase by 1 each time the loop runs:

Example

while (i<5)
  {
  x=x + "The number is " + i + "<br />";
  i++;
  }

Try it yourself »

Note: Do not forget to increase the i variable used in the condition, otherwise i will always be less than 5, and the loop will never end!

The do...while Loop

The do...while loop is a variant of the while loop. This loop will execute the block of code once, before checking if the condition is true, then it will repeat the loop as long as the condition is true.

Syntax

do
  {
  code to be executed
  }
while (variable<endvalue);

Example

The example below uses a do...while loop. The do...while loop will always be executed at least once, even if the condition is false, because the statements are executed before the condition is tested:

Example

do
  {
  x=x + "The number is " + i + "<br />";
  i++;
  }
while (i<5);

Try it yourself »

Note: Do not forget to increase the i variable used in the condition, otherwise i will always be less than 5, and the loop will never end!

JavaScript For Loop

For Loops will execute a block of code a specified number of times.

JavaScript Loops

Often when you write code, you want the same block of code to run over and over again in a row. Instead of adding several almost equal lines in a script we can use loops to perform a task like this.

In JavaScript, there are two different kind of loops:

for - loops through a block of code a specified number of times
while - loops through a block of code while a specified condition is true

The for Loop

The for loop is used when you know in advance how many times the script should run.

Syntax

for (variable=startvalue;variable<endvalue;variable=variable+increment)
  {
  code to be executed
  }

Example

The example below defines a loop that starts with i=0. The loop will continue to run as long as i is less than 5. i will increase by 1 each time the loop runs.

Note: The increment parameter could also be negative, and the < could be any comparing statement.

Example

for (i=0; i<5; i++)
  {
  x=x + "The number is " + i + "<br />";
  }

Try it yourself »

The while loop

The while loop will be explained in the next chapter.

More Examples

Looping through HTML headings
Loop through the six different HTML headings.

JavaScript Popup Boxes

JavaScript has three kind of popup boxes: Alert box, Confirm box, and Prompt box.

Alert Box

An alert box is often used if you want to make sure information comes through to the user.

When an alert box pops up, the user will have to click "OK" to proceed.

Syntax

alert("sometext");

Example

<!DOCTYPE html>
<html>
<head>
<script>
function myFunction()
{
alert("I am an alert box!");
}
</script>
</head>
<body>

<input type="button" onclick="myFunction()" value="Show alert box" />

</body>
</html>

Try it yourself »

Confirm Box

A confirm box is often used if you want the user to verify or accept something.

When a confirm box pops up, the user will have to click either "OK" or "Cancel" to proceed.

If the user clicks "OK", the box returns true. If the user clicks "Cancel", the box returns false.

Syntax

confirm("sometext");

Example

var r=confirm("Press a button");
if (r==true)
  {
  x="You pressed OK!";
  }
else
  {
  x="You pressed Cancel!";
  }

Try it yourself »

Prompt Box

A prompt box is often used if you want the user to input a value before entering a page.

When a prompt box pops up, the user will have to click either "OK" or "Cancel" to proceed after entering an input value.

If the user clicks "OK" the box returns the input value. If the user clicks "Cancel" the box returns null.

Syntax

prompt("sometext","defaultvalue");

Example

var name=prompt("Please enter your name","Harry Potter");
if (name!=null && name!="")
  {
  x="Hello " + name + "! How are you today?";
  }

Try it yourself »

Line Breaks

To display line breaks inside a popup box, use a back-slash followed by the character n.

Example

alert("Hello\nHow are you?");

Try it yourself »

Monday, August 27, 2012

JavaScript Switch Statement

The switch statement is used to perform different action based on different conditions.

The JavaScript Switch Statement

Use the switch statement to select one of many blocks of code to be executed.

Syntax

switch(n)
{
case 1:
  execute code block 1
  break;
case 2:
  execute code block 2
  break;
default:
  code to be executed if n is different from case 1 and 2
}

This is how it works: First we have a single expression n (most often a variable), that is evaluated once. The value of the expression is then compared with the values for each case in the structure. If there is a match, the block of code associated with that case is executed. Use break to prevent the code from running into the next case automatically.

Example

Display today's weekday-name. Note that Sunday=0, Monday=1, Tuesday=2, etc:

var day=new Date().getDay();
switch (day)
{
case 0:
  x="Today it's Sunday";
  break;
case 1:
  x="Today it's Monday";
  break;
case 2:
  x="Today it's Tuesday";
  break;
case 3:
  x="Today it's Wednesday";
  break;
case 4:
  x="Today it's Thursday";
  break;
case 5:
  x="Today it's Friday";
  break;
case 6:
  x="Today it's Saturday";
  break;
}

The result of x will be:

Today it's Monday

Try it yourself »

The default Keyword

Use the default keyword to specify what to do if there is no match:

Example

If it is NOT Saturday or Sunday, then write a default message:

var day=new Date().getDay();
switch (day)
{
case 6:
  x="Today it's Saturday";
  break;
case 0:
  x="Today it's Sunday";
  break;
default:
  x="Looking forward to the Weekend";
}

The result of x will be:

Looking forward to the Weekend

Try it yourself »