DAY - 7
JavaScript - Loops
Ø Loops are used to run the same code over and over
again, each time with a different value.
Ø JavaScript supports different kinds of loops:
1.
For loop
2.
For/ In loop – through the
properties of an object.
3.
While loop
4.
Do while loop
1.FOR LOOP
Ø The 'for'
loop is the most compact form of looping. It includes the following three important
parts −
·The loop
initialization where we initialize our counter to a starting value.
The initialization statement is executed before the loop begins.
·The test
statement which will test if a given condition is true or not. If the
condition is true, then the code given inside the loop will be executed,
otherwise the control will come out of the loop.
·The iteration
statement where you can increase or decrease your counter.
Ø Flow Chart
Ø Syntax
for(initialization; test condition; iteration statement){
Statement(s) to be executed if test condition istrue
}
Ø Example
<html>
<body>
<scripttype="text/javascript">
<!--
var count;
document.write("Starting Loop"+"<br />");
for(count =0; count <10; count++){
document.write("Current Count : "+ count );
document.write("<br />");
}
document.write("Loop stopped!");
//-->
</script>
<p>Set the variable to
different value and then try...</p>
</body>
</html>
Output
Starting Loop
Current Count : 0
Current Count : 1
Current Count : 2
Current Count : 3
Current Count : 4
Current Count : 5
Current Count : 6
Current Count : 7
Current Count : 8
Current Count : 9
2. FOR IN LOOP
Ø The for...in loop
is used to loop through an object's properties.
Ø Syntax
for(variablenameinobject){
statementor block to execute
}
In each iteration, one
property from object is
assigned to variablename and
this loop continues till all the properties of the object are exhausted.
Example
Try the following example
to implement ‘for-in’ loop. It prints the web browser’s Navigator object.
<html>
<body>
<scripttype="text/javascript">
<!--
varaProperty;
document.write("Navigator Object
Properties<br /> ");
for(aProperty in navigator){
document.write(aProperty);
document.write("<br />");
}
document.write("Exiting from the
loop!");
//-->
</script>
<p>Set the variable to
different object and then try...</p>
</body>
</html>
Output
Navigator Object Properties
serviceWorker
webkitPersistentStorage
webkitTemporaryStorage
geolocation
doNotTrack
onLine
languages
language
userAgent
product
platform
appVersion
appName
appCodeName
hardwareConcurrency
maxTouchPoints
vendorSub
vendor
productSub
cookieEnabled
mimeTypes
plugins
javaEnabled
getStorageUpdates
getGamepads
webkitGetUserMedia
vibrate
getBattery
sendBeacon
registerProtocolHandler
unregisterProtocolHandler
Exiting from the loop!
3. THE WHILE LOOP
Ø The purpose of a while loop is to execute a statement or code block repeatedly
as long as an expression is
true. Once the expression becomes false, the
loop terminates.
Ø Flow Chart
Ø Syntax
while(expression){
Statement(s) to be executed if expression istrue
}
Ø Example
<html>
<body>
<scripttype="text/javascript">
<!--
var count =0;
document.write("Starting Loop ");
while(count <10){
document.write("Current Count : "+ count +"<br />");
count++;
}
document.write("Loop stopped!");
//-->
</script>
<p>Set the variable to
different value and then try...</p>
</body>
</html>
Output
Starting Loop
Current Count : 0
Current Count : 1
Current Count : 2
Current Count : 3
Current Count : 4
Current Count : 5
Current Count : 6
Current Count : 7
Current Count : 8
Current Count : 9
Loop stopped!
4. The do...while Loop
Ø The do...while loop
is similar to the while loop
except that the condition check happens at the end of the loop.
Ø This means that the loop will always be executed at
least once, even if the condition is false.
Ø Flow Chart
Ø Syntax
do{
Statement(s) to be executed;
}while(expression);
Note − Don’t miss the semicolon used at the end of the do...while
loop.
Ø Example
<html>
<body>
<scripttype="text/javascript">
<!--
var count =0;
document.write("Starting Loop"+"<br />");
do{
document.write("Current Count : "+ count +"<br />");
count++;
}
while(count <5);
document.write("Loop stopped!");
//-->
</script>
<p>Set the variable to
different value and then try...</p>
</body>
</html>
Output
Starting Loop
Current Count : 0
Current Count : 1
Current Count : 2
Current Count : 3
Current Count : 4
Loop Stopped!
No comments:
Post a Comment
Give your valuable feedback