Friday 22 June 2012

Part 6 - If and Loops in JavaScript

Introduction

In previous parts I have shown you how to declare a JavaScript, open windows and display information. In this part I will show you how to use two of JavaScripts most important functions, If and Loops.

If Condition in JavaScript

The if function allows you to check to see if something is true or false. For example you could check to see if text entered by a user matches a piece of text you already have (like a password). To show if in action click here.

As you can see this could be very useful for many sites. The code is as follows:

var guess = prompt("Please guess a number between 1 and 10","");
if(guess == 5)
{
alert('Correct! I was thinking of 5');
}
else
{
alert('Wrong! I was thinking of 5');
}

This code is made up of three main parts. The first part which gets the guess from the user, you have used before. This is followed by:

if(guess ==5)

Which is quite self explanitary. It checks to see if the variable guess is equal to 5. The if statement is followed by:

{
alert('Correct! I was thinking of 5');
}

The important part of this is the curly brackets round the alert command. These contain the code which should be executed if the if statement returns 'true' (in this example if guess equals 5). The final part is the:

else
{
alert('Wrong! I was thinking of 5');
}

This tells the browser that if the if statement does not return 'true' (in this example if guess does not equal 5) to execute the code between the curly brackets.

Together this code makes up the if statement.

More If

There are other conditions you can test with the if statement. Firstly, as well as using numbers you can compare variables or text:

if(variable == variable)

if(variable == "some text")

As well as doing this you can check to see if one variable is greater than another, less than another or not the same as another:

if(variable < othervariable)

If variable is less than othervariable

if(variable > othervariable)

If variable is greater than othervariable

if(variable <= othervariable)

If variable is less than or equal to othervariable

if(variable >= othervariable)

If variable is greater than or equal to othervariable

if(variable != othervariable)

If variable is not equal to other variable

These can be very useful in your web pages. You can also check to see if two conditions are true before executing code using &&:

if(variable1 == variable2) && (variable1 < variable3)

This will only execute its code if variable1 is equal to variable2 and is less than variable3. You can also run the code if one of the conditions is true:

if(variable1 == variable2) || (variable1 < variable3)

This will only execute its code if variable 1 is equal to variable to or is less than variable3.

While Loops in JavaScript

While loops are pieces of code which will repeat until the condition is met. This is very useful for things like passwords when you want to keep asking the user until they get it correct. For example this code will repeat until the user enters the word 'hello':

var password = 'hello';
var input = prompt('Please enter the password', '');
while(input != password)
{
var input= prompt('Please enter the password''');
}

This will continuously loop the code inside the { } until the test input does not equal password is false (the password is correct).

For Loops in JavaScript

For loops are used to do something a set number of times. For example:

for(loop=0; loop < 11; loop++)
{

document.writeln(loop);
}

This will start by setting the variable loop to 0, it will then loop, adding one to the value each time (using the loop++ code) as long as loop is less than 11. They take the form:

for(starting value; test; increment)

These have many uses.

Part 7

In part 7 I will show you how to manipulate HTML forms using JavaScript.

No comments:

Post a Comment