| JavaScript If statement tutorial, basic syntax, and examples
Using if statement, javascript has the ability to make distinctions between
different possibilities.
For example, you might have a script that checks if Boolean value is true or
false, if variable contains number or string value, if an object is empty or
populated, or even check type and version of the visitors browser properties.
Here is a syntax for if statement:
if (condition)
{
Action statement
}
This is a single if statement which responds on one condition and executes statements
inside the curly braces {} when the condition is true.
if (condition)
{
Action statement
}
else
{
Alternative action statement
}
-This executes the statements inside the curly braces when
condition is true and
alternative statements when condition is not true. Notice parenthesis
are used around the condition statement. Javascipt if statement uses parenthesis
and is case sensitive.
Here is an example of if statement.
<html>
<body>
<script type="text/javascript">
var n=0
if (n==0)
{
alert("n is zero")
}
else
{
alert("n is some thing else")
}
</script>
</body>
</html>
|
In this example, we created a variable n and initialized
with zero. Then we used if statement to see if n is equal to 0.
We display n is zero if the condition is true and
n is something else if the condition is not true.
In
this case, the condition is true since n is already set to 0 so the first message
is alerted. Notice that == is used for comparison.
You cannot use = to compare two values.
|
The following is if statement example that checks many conditions in sequence.
<html>
<body>
<script type="text/javascript">
var n=prompt("Enter number between 1 to 4","1")
if (n==1)
{alert("n is one")}
else if(n==2)
{alert("n is two")}
else if(n==3)
{alert("n is three")}
else if(n==4)
{alert("n is four")
}
else if(n>4)
{alert("You entered number greater than 4, please enter 1-4")}
else if(n<1)
{alert("You entered number less than 4, please enter 1-4")}
else
{alert("You did not enter a number!")}
</script>
</body>
</html>
| This example is extension of previous example. This time
we are using prompt box to get a number
from the user. Using if statement, we tested if the provided number is one, two,
three, or four alerting the user when a match is found.
If the provided number is not within this range, then we check if the number is
greater than 4 using > operator.
If the condition still false, then we checked if the
number is less than 1 using < operator. If none of the conditions are true
then else condition is true and it's alert message; You did not enter a
number.
Click the button bellow to see this example in action:
|
Boolean Operators
Three boolean operators are used in if statements.
The operator, && , allows you to combine two conditions so that both must be true
to satisfy the if condition. The operator , ||, which
combines two conditions such that the if statement is satisfied if either condition is
true. The third boolean operator Operator, !, which makes a condition that
returns true, false and vice versa.
Suppose you wanted the previous example to display a message for numbers 1 to 9,
10 to 19, 20 to 29, 30 to 39, and so on. Checking each number would take you
hundreds of pages of codes, thanks to the booleans operators. Using boolean operators
we can perform the operation in ranges.
The following example is modification of previous example using boolean operators:
<html>
<body>
<script type="text/javascript">
var n=prompt("Enter a number","1")
var enter="You entered a # between"
if (n>=1 && n<10)
{alert(enter+" 0 and 10")}
else if(n>=10 && n<20)
{alert(enter+" 9 and 20")}
else if(n>=20 && n<30)
{alert(enter+" 19 and 30")}
else if(n>=30 && n<40)
{alert(enter+" 29 and 40")}
else if(n>=40 && n<=100)
{alert(enter+" 39 and 100")}
else if(n<1 || n>100)
{alert("You entered a # less than 1 or greater than 100")}
else
{alert("You did not enter a number!")}
</script>
</body>
</html>
| Since the first portion of our alert
message is always the same, we created a variable that stores this portion
just to make the writing short.
We use an if statement to check the provided number in ranges.
For example:
if (n>=1 && n<10), in order this condition to be true, the number must be 1,2,3,4,5,6,7
, 8 or 9. If the number is 10, the condition will be false because n<10 means 10 is
less than 10 but not equal to. If the number is 1, then the condition will be true
because n>=1, means n is greater than or equal 1.
The operator || is used to check
unrelated rang of values and returns true value when one condition is satisfied.
For example:
if(n<1 || n>100), this condition will return true value when n is less than one, or n
is greater than 100 either way. It returns false value, when n is number between 1 and
100 inclusive. The rest of the code is same as previous.
Click the button bellow
to see this example in action:
|
Functions 
Case Statement
|
|| 
|| 
|| 
