Thursday, 28 February 2013

JavaScript : Statements


Description

Block statements are commonly used with control flow statements i.e. while, for, if etc. The block is delimited by a pair of curly brackets.

Syntax

{
statement_1
statement_2
. . .
statement_n
}

Parameters

statement_1, statement_2, .... , statement_n
Where statements are grouped within the block statement.

Example :

view plainprint?
  1. if x>10  
  2.  {  
  3.  y=12  
  4.  z=20  
  5.  }  
  6.  or while ( roll_no <= 40 )  
  7.  {  
  8.  roll_no++  
  9.  }  
JavaScript does not support block scope. In the following example output of the variable a will be 1 because var a statement within or before condition have same scope whereas in Java or C language the output of the same code will be 101.
view plainprint?
  1. var a = 101  
  2.  {  
  3.  a = 1;  
  4.  }  
  5.  alert(a)   
  6.  //output 1  


Conditional Statement

A conditional statement is a set of commands and the commands execute if a specified condition is true. There are two conditional statements in JavaScript : if...else and switch.

JavaScript if...else statement

Executes a group of statements if a logical condition is true. Use the optional else clause to execute another group of statements.

Syntax

For single statement :
if (condition)
statement_1
[else
statement_2]

Example :

In the following example if else statement check whether a input marks is greater than 50 or not.

HTML Code

view plainprint?
  1. <!DOCTYPE html>  
  2. <html lang="en">  
  3. <head>  
  4. <meta charset=utf-8>  
  5. <title>JavaScript if  else statement :  Example-1</title>  
  6. </head>  
  7. <body>  
  8. <h1 style="color: red">JavaScript : if else statement</h1>  
  9. <h3>Here the if  else statement check whether the input marks is greater than 50 or not.</h3>  
  10. <hr />  
  11. <form name="form1" action ="#">  
  12. Input the marks<input type="text" name="text1" value=" " />  
  13. <input type="button" value="Marks check"  
  14. onclick='marksgrade()' />  
  15. </form>  
  16. <script src="if-else-example1.js"></script>  
  17. </body>  
  18. </html>  

JS Code

view plainprint?
  1. function marksgrade()  
  2. {  
  3. if (document.form1.text1.value>50)  
  4. alert('Marks is greater than 50.');  
  5. else  
  6. alert('Marks is less than or equal to 50.');  
  7. }  

Practice the example online

JavaScript if...else if statement

For multiple conditions we can use else if.

Syntax

if (condition_1)
statement_1
[else if (condition_2)
statement_2]
...
[else if (condition_n_1)
statement_n_1]
[else
statement_n]

Parameters

condition_1, condition_2 : Can be any JavaScript expression that evaluates to true or false. Parentheses are required around the condition. If condition evaluates to true, the statements in statement_1 is executed, otherwise statement_2 is executed.
statements_1, statements_2 : Can be any JavaScript statements, including further nested if statements.
It is a good practice to use a block statement ( {....}) to execute multiple statements. See the following syntax :

Syntax

if (condition_1)
{
statements_1
}
else
if (condition_2)
{
statements_2
}

Example :

Here the if else if.. statement checks the grade of Math. on some conditions.

HTML Code

view plainprint?
  1. <!DOCTYPE html>  
  2. <html lang="en">  
  3. <head>  
  4. <meta charset=utf-8>  
  5. <title>JavaScript if  else if... statement :  Example-1</title>  
  6. </head>  
  7. <body>  
  8. <h1 style="color: red">JavaScript : if else if statement</h1>  
  9. <h3>Here the if  else if.. statement check the grade of Math. with following condition : </h3>  
  10. <hr />  
  11. <p style="color:green;font-weight:bold">A+ (marks>=90) : A (marks>=80 and marks<90) : B+ (marks>=70 and marks<80) : B (marks>=60   
  12. and marks<70) : C (marks<60) </p>  
  13. <form name="form1" action ="#">  
  14. Input the Math. marks<input type="text" name="text1" value=" " />  
  15. <br /><br />  
  16. <input type="button" value="Marks check"  
  17. onclick='marksgrade()' />  
  18. </form>  
  19. <script src="if-else-if-example1.js"></script>  
  20. </body>  
  21. </html>  

JS Code

view plainprint?
  1. function marksgrade()  
  2. {  
  3. if (document.form1.text1.value >=90)  
  4. alert('Grade A+');  
  5. else  
  6. if (document.form1.text1.value >=80 && document.form1.text1.value <90)  
  7. {  
  8. alert('Grade A');  
  9. }  
  10. else  
  11. if (document.form1.text1.value >=70 && document.form1.text1.value <80)  
  12. {  
  13. alert('Grade B+');  
  14. }  
  15. else  
  16. if (document.form1.text1.value >=60 && document.form1.text1.value <70)  
  17. {  
  18. alert('Grade B');  
  19. }  
  20. else  
  21. alert('Grade C');  
  22. }  

Practice the example online

JavaScript nesting if statements

Putting one if statement inside another if statement is called nesting. See the following syntax:

Syntax

if (condition)
{
    if (condition)
    {
        if (condition)
        {
            statement_1
        }
        else
        {
            statement_2
        }
    }
}
else
{
statement_3
}
Posted by at

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)