ASP Net Center.com
JavaScript
Introduction
Variables & Arrays
Functions
If Statements
Case Statements
Loop Statements
Alert
Form Processing
Date Objects
Window Objects

JavaScript If statment

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.


Here is a syntax for if statement:
if (condition)
{
 Action statement
}
This is a single if statment wich 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 conditon is true and alternative statements when when condition is not true. Notice parenthesis are used around the condition statement. Java scipt 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 zerro")
}
else
{
  alert("n is some thing else")
}
</script>
</body>
</html>
In this example, we created a variable n and initialized with zerro. Then we used if statement to see if n is equal to 0. We display n is zerro if the conditon is true and n is something else if the condition is not true.
In this case, the condition is true because n is equal 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 extention 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