Please style sheet are not equal in internet explorer browser Firefox, Chrome, Safari, Apple and Opera browser please visit this website.

Thank for Visit My Site and Please sent me Shayari, Status and Quotes post request.

JavaScript - Condition Checking, Looping, Function

Condition Checking
 
If statement
 

We can use this statement if we want to execute a set of code in case the given condition is true. Let us say if today is Sunday go to market.

 

syntax (How it is written):

  if (condition)

{

job to be done if condition is found true

}

 
Example
 

<html>

<head>

</head>

<body>

<script type="text/javascript">

var a,b;

a=100

b=50

document.write("<br>Value of a "+a);

document.write("<br>Value of b "+b);

if (a>b)

{

document.write("<br>value of a is greater than b ");

}

</script>

</body>

</html>

 
Understanding program :
Value of a is 100 and value of b is 50. In if statement, we are checking that if a is greater than b then the message should be printed.
 
Output:
 
Value of a 100
Value of b 50
value of a is greater than b
 
 
 
if - - else statement
 

We can use this statement if we want to execute a set of code in case the given condition is true and other code in case of given condition is false. For example:

 

if today is Sunday

go to market

else go to office

 
syntax (How to write):
 

if (condition)

{

job to be done if condition is found true

}

else

{

job to be done if condition is found false

}

 
 
Example
 

<html>

<head>

</head>

<body>

<script type="text/javascript">

var a,b;

a=parseInt(prompt("Enter value for a",""))

b=parseInt(prompt("Enter value for b",""))

document.write("<br>Value of a "+a);

document.write("<br>Value of b "+b);

if (a>b)

{

document.write("<br>value of a is greater than b ");

}

else

{

document.write("<br>value of a lesser than or equal to b ");

}

</script>

</body>

</html>

 
Understanding program :
In the above program we have used prompt method which is used to accept input from user , we learnt this in dialog box section, parseInt function will convert the accepted value to number type because the value returned by the prompt method will be of string type and we can not compare or perform any arithmetic calculation with a string value, so we used parseInt method.
 
Output:
 
Value of a 25
Value of b 45
value of a lesser than or equal to b
 
 
Explanation
If the value of a is entered greater than value of b then the above output will be shown else the below output will be shown.
 
Value of a 50
Value of b 20
value of a is greater than b
 
 
 
Switch statement
 

We can use this statement if we want to execute a block of code for a situation, out of many blocks of codes for different situations. For example

 
syntax (How to write) :
 

switch(variablename)

{

case 1 :

code to be executed

break

case 2 :

code to be executed

break

case 3 :

code to be executed

break

default :

code to be executed if non of the above give cases are found

}

 
Example
 

<html>

<head>

</head>

<body>

<script type="text/javascript">

var day

a=parseInt(prompt("Enter Weekday please",""))

switch(a)

{

case 1:

document.write("<br> It is Sunday ");

document.write("<br> Enjoy...");

break

case 2:

document.write("<br> It is Monday ");

document.write("<br> go to College ");

break

case 3:

document.write("<br> It is Tuesday ");

document.write("<br> go to College ");

break

case 4:

document.write("<br> It is Wednesday ");

document.write("<br> go to College ");

break

case 5:

document.write("<br> It is Thrusday ");

document.write("<br> go to College ");

break

case 6:

document.write("<br> It is Friday ");

document.write("<br> go to College ");

break

case 7:

document.write("<br> It is Saturday ");

document.write("<br> go to College ");

break

default :

document.write("<br> Invalid weekday enter value from 1-7")

}

 </script>

</body>

</html>

 
Understanding program :
In the above program, we have used prompt method which is used to accept input from user , we learnt this in dialog box section, parseInt function will convert the accepted value to number type because the value returned by the prompt method will be of string type and we can not compare or perform any arithmetic calculation with a string value, so we used parseInt method.
 
The output of the above program will depend on the value entered by the user, for different values different block of statements will be executed and break command will make it to jump out of switch scope.
 
Output:
I If the weekday entered by user is 4 then output will be
It is Wednesday
go to College
 
If the weekday entered by user is 1 then output will be
It is Sunday
Enjoy...
 
 
 
Looping
 
while
 

This loop continues while the given condition is found true else the loop gets terminated. The variable meets the condition at the gate of while loop if the variable do not fulfill the condition then the loop will not be executed for even a single time.

 
syntax:
 

While (condition )

{

code to be executed

}

 
Example
 

<html>

<head>

</head>

<body>

<script type="text/JavaScript">

var a=0;

while(a<10)

{

document.write("\t "+a); a++

}

</script>

</body>

</html>

 
Understanding program :
value of a is initially 0, the condition with loop is while a is less than 10 the statements typed should be executed. a++ means a=a+1, so the a will get incremented with 1 every time. As soon as a becomes 10 the loop gets terminated.
 
Output:
0 1 2 3 4 5 6 7 8 9
 
 
 
do - while
 

This loop continues while the given condition is found true else the loop gets terminated, the difference in this and while looping is even the condition is false but this loop gets executed at least once but while loop gets terminated at initial level if condition is not satisfying.

 
syntax:
 

do

{

code to be executed

}

While (condition )

 
Example
 

</head>

<body>

<script type="text/javascript">

var a=1;

do

{

document.write(" "+a);

a+=2

}

while(a<20)

</script>

</body>

</html>

 
Understanding program :
Value of a is initially 1 , the condition with loop is while a is less than 20 the statements typed should be executed. a+=2 means a=a+2, so the a will get incremented with 2 every time. As soon as a becomes 20 the loop gets terminated.
 
Output:
1 3 5 7 9 11 13 15 17 19
 
 
 
for
 

This loop contains the initial value, termination value , increment/decrement value in a single line, which in on other looping are used in separate line, the scope of a for loop is inside the curly brackets used with it. The initialization segment is executed only once at the start of the loop and termination and increment/decrement segments are executed every time till the condition remains true.

 
syntax:
 

for(initialization; termination; increment/decrement)

{

code to be executed

}

 
Example
 

<html>

<head>

</head>

<body>

<script type="text/javascript">

var a;

for(a=100;a>0;a-=5)

{

document.write(" "+a)

}

</script>

</body>

</html>

 
Understanding program :
Value of a is initially 100 , the condition with for loop is while a is greater 0 the statements typed should be executed. a-=5 means a=a-5, so the a will get decremented with 5 every time. As soon as a becomes 0 the loop gets terminated.
 
Output:
100 95 90 85 80 75 70 65 60 55 50 45 40 35 30 25 20 15 10 5
 
 
 
break and continue
 

These statements are used with in a loop. Break as the name suggests is used to break or terminate the loop in between & continue is to continue the loop breaking it for current loop value.

 
break:
This statement breaks the loop & shifts the control out of the loop.
 
continue:
This statement breaks the loop for current value and resumes the loop with new value.
 
 
Example for break:
 

<html>

<head>

</head>

<body>

<script type="text/javascript">

var count;

for(count=0;count<100;count++)

{

if (count>10)

{

break

}

document.write(" "+count)

}

</script>

</body>

</html>

 
 
Understanding program:
The loop gets terminated because we have kept a condition that if the count is more than 10 than break, break statement will end the loop at that point.
 
Output is:
0 1 2 3 4 5 6 7 8 9 10
 
Example for continue:
 

<html>

<head>

</head>

<body>

<script type="text/javascript">

var count;

for(count=0;count<20;count++)

{

if (count==10)

{

continue

}

document.write(" "+count)

}

</script>

</body>

</html>

 
Understanding program:
As soon as the value of count becomes equals to 10 , the loop gets terminated for this value and the loop resumes with new value.
 
Output is:
0 1 2 3 4 5 6 7 8 9 11 12 13 14 15 16 17 18 19
 
 
 
for - - in
 

This loop is used with arrays and objects , to access their elements and properties respectively.

In for..in looping the variable starts from zero and increases itself with one until it reach to the length of array.

 
Syntax:
 

for( variablename in objectname)

{

lines to be executed

}

 
Example:
 

<html>

<head>

</head>

<body>

<script type="text/javascript">

var color;

var shop=new Array()

shop[0]="Red"

shop[1]="Blue"

shop[2]="Green"

shop[3]="Yellow"

shop[4]="Magenta"

for(color in shop)

{

document.write("<br> "+shop[color]);

}

</script >

</body>

</html>

 
Understanding program:
Color is a undefined variable and shop is an array, when color is kept as a subscript of array shop then the color variable becomes of number type and from 0 to 4 gets incremented by for - in loop. It is increased up to 4 only because shop array have 5 elements and an array start from 0 position.
 
Output is:
Red
Blue
Green
Yellow
Magenta
 
 
 
Function
 
User defined simple functions
 

Function is a set of statements recognized by a name and can be used as and when required (it is reusable). In JavaScript functions can be created inside the JavaScript tag only. "function" is a reserve word after which we type the name of the function to be created and then brackets. The code from where the function starts and where ends is kept in side curly braces.

 
Syntax:
 

function functionname()

{

lines to be kept under this name

}

 
Example:
 

<html>

<head>

</head>

<body>

<script type="text/javascript">

function ff()

{

document.write("Have a nice day");

}

  function pp()

{

document.write("Try again");

}

var a

a=parseInt(prompt("Enter value",""));

if(a>10)

{

ff()

}

else

{

pp()

}

</script>

</body>

</html>

 
Understanding program:
In the above program ff function is being called if the value entered is more than 10 else pp function is called. Function ff contains a line showing a message "have a nice day" and function pp contains a line showing messages "Try again " , so which function will be called depends on the value entered.
 
Output is:
If value entered is more than 10 then
Have a nice day
Else
Try again
 
Example
 

<html>

<head>

</head>

<body>

<script type="text/JavaScript">

function ff()

{

document.bgColor="red";

}

</script >

<input type="Button" value=" Hit me" name="b1" onClick="ff()">

</body>

</html>

 
 
Understanding program:
We created a button and onclick event of that button we called the function ff() , in which we have typed that the background color of the document should be turned to red.
 
 
 
Parameterized functions
 

Function is a set of statements recognized by a name and can be used as and when required (it is reusable).

A function can accept parameters and can used those accepted values for his purpose. A function can accept many parameters to which we can manage or use as per requirement in the code of that function.

 
Syntax:
 

function functionname(var1, var2,..)

{

lines to be kept under this name

}

 
Example:
 

<html>

<head>

</head>

<body>

<script type="text/javascript">

function ff(f1)

{

var a,b,c

a=parseInt(f1.t1.value)

b=parseInt(f1.t2.value)

c=parseInt(f1.t3.value)

if (a>b && a>c)

{

f1.t4.value="First Value is greatest"

}

if (b>a && b>c)

{

f1.t4.value="Second Value is greatest"

} if(c>a && c>b)

{

f1.t4.value="Third Value is greatest"

}

}

</script >

<form name = "f1">

Enter first Value<input type="text" name="t1"><br>

Enter Second Value<input type="text" name="t2"> <br>

Enter Third Value<input type="text" name="t3"> <br>

<input type="Button" value=" Hit me" name="b1" onClick="ff(f1)"><br>

Result<input type="text" name="t4"> <br>

<input type="reset">

</form>

</body>

</html>

 
Understanding program:
In the above program we type numeric values in top three textboxes and on clicking on hit me button we get result in fourth textbox which one value is greater.
 
Example:
 

<html>

<head>

</head>

<body>

<script type="text/javascript">

function ff(f1)

{

document.bgColor=f1.t1.value;

}

</script >

<form name = "f1">

Enter the Background Color you want<input type="text" name="t1"> <br>

<input type="Button" value=" Hit me" name="b1" onClick="ff(f1)">

</form>

</body>

</html>

 
 
Understanding program:
we created a button and onclick event of that button we called the function ff() , to which we passed the function name (f1), this f1 (form) contains a textbox named t1, the value of t1 on form f1 can be accessed by f1.t1.value to which we are assigning to the background color of document so whatever color you will type in the text box will appear on the background.
 
 
 
Functions Returning Values
 

Function is a set of statements recognized by a name and can be used as and when required (it is reusable).

A function can accept parameters and can return a value back to the calling position. The parameters accepted by a function can be used in the code of that function.

 
Syntax:
 

function functionname(var1, var2,..)

{

lines to be kept under this name return(variablename)

}

 
Example:
 

<html>

<head>

</head>

<body>

<script type="text/javascript">

function max(m)

{

var x,y

y=m[0];

for(x=0;x<m.length;x++)

{

if(m[x]>y)

{

y=m[x]

}

}

return(y)

}

var m=new Array()

m[0]=50

m[1]=12

m[2]=99

m[3]=45

m[4]=120

m[5]=110

m[6]=22

m[7]=106

i=max(m)

document.write("Maximum Value is "+i)

</script>

</body>

</html>

 
Understanding program:
An array is passed to the function and the greatest value is searched in the array and returned back, at calling position a provision to keep the returned value is kept in form of a variable, means whatever value the function will return, will be kept in i variable.
 
 
 
Recursive Functions
 

A function which calls itself, is called a recursive function. When A function calls itself it gets repeated again and again until the desired condition meets. Recursive functions are such type of functions which calls themselves. A provision to escape from indefinite loop is made in the program.

 
Example:
 

<html>

<head>

</head>

<body onclick="recur()">

<h1 align=center> Click on me please </h1>

<script type="text/javascript">

var a,sum a=sum=0   function recur()

{

if(a<101)

{

sum=sum+a a++ recur()

}

else

{

document.write("Sum of counts from 0-100 is "+sum)

}

}

</script>

</body>

</html>

 
Syntax:
 

function functionname(var1, var2,..)

{

lines to be kept under this name return(variablename)

}

 
Example:
 

<html>

<head>

</head>

<body>

<script type="text/javascript">

function max(m)

{

var x,y

y=m[0];

for(x=0;x<m.length;x++)

{

if(m[x]>y)

{

y=m[x]

}

}

return(y)

}

var m=new Array()

m[0]=50

m[1]=12

m[2]=99

m[3]=45

m[4]=120

m[5]=110

m[6]=22

m[7]=106

i=max(m)

document.write("Maximum Value is "+i)

</script>

</body>

</html>

 
Understanding program:
In the above given program we have declared two variables named a and sum a function is there name recur which is being called onclick event (discussed in events section), when user clicks on the web page this function will be called this function is adding the incremented value of a to sum variable and calling again the recur function which again adds the new value of a to sum a condition check is there to check the value of a. when it will become 101 the statement typed under else scope will get executed.
 
Output is:
Sum of counts from 0-100 is 5050
 
Example:
 

<html>

<head>

</head>

<body onclick="recur()">

<h1 align=center> Click on me please </h1>

<script type="text/javascript">

var a=5 fact=1

function recur()

{

if(a>0)

{

fact=fact*a a-- recur()

}

else

{

document.write("<br> Factorial of "+a+" is "+ fact)

}

}

</script>

</body>

</html>

 
Output is:
Factorial of 0 is 120
 
 
 
Scope of a variable
 

Any variable in a function is local to that function & the variables declared outside the function are called a global variables , the local variables can be accessed within the function only, while global variables can be accessed anywhere in the program.

 
Example:
 

<html>

<head>

</head>

<body onclick="pp()">

<script>

var global=75

function pp()

{

var local=45

document.write("<br>This is value of a local variable "+local);

document.write("<br>This is value of a global variable being accessed inside the function "+global)

}

document.write("<br>This is value of a global variable "+global)

document.write("<br> If we tried to print or access local variable's value here it will generate an error for non declaration of variable ")

document.write("<br>Click in The white area to view the value of local variable ")

</script>

</body >

</html>

 
Understanding program:
In the above given program we have declared two variables named global and local, global variable is declared outside the function so it is a global variable means could be accessed in the function as well outside the function also, while local variable is declared inside the function pp so it can be accessed within the function in which it is declared , if we tried to access or print it outside the function an error will generate showing the message that the variable is not declared, because the local variable do not have that scope where we are accessing it so it requires a separate declaration.
 
Output is:
This is value of a local variable 45
This is value of a global variable being accessed inside the function 75
 
Example:
 

<html>

<head>

</head>

<body onclick="mm()">

<script type="text/javascript">

var global =75

function mm()

{

var local local=45

document.write("<br>local variable's Value inside mm function "+local);

document.write("<br>Global Variable's Value inside mm function "+global) pp();

}

function pp()

{

local=12 document.write("<br> local variable's Value inside pp function "+local);

document.write("<br>Global Variable's Value inside pp function"+global)

}

document.write("<br>Global Variable's Value outside function "+global)

document.write("<br><h1 align=center>Click on Me</h1>");

</script>

</body>

</html>

 
Output is:
local variable's Value inside mm function 45

Global Variable's Value inside mm function 75

local variable's Value inside pp function 12

Global Variable's Value inside pp function75
 
 
 

SHARE THIS PAGE

0 Comments:

Post a Comment

Circle Me On Google Plus

Subject

Follow Us