{"id":4457,"date":"2016-03-02T10:49:47","date_gmt":"2016-03-02T10:49:47","guid":{"rendered":"http:\/\/www.hostingnotes.com\/?p=4457"},"modified":"2017-10-09T14:22:00","modified_gmt":"2017-10-09T14:22:00","slug":"understanding-javascript-for-loop","status":"publish","type":"post","link":"https:\/\/www.webdevelopersnotes.com\/understanding-javascript-for-loop","title":{"rendered":"Understanding JavaScript for Loop"},"content":{"rendered":"<p>The main strength of any programming language is its ability to process blocks of code repeatedly. Computers are especially adept at performing repeated calculations. JavaScript, like other programming languages, provides us with loop. Statements placed inside loops are executed a set number of times&#8230; or even infinitely.<\/p>\n<p>We&#8217;ll look at the <strong><em>for<\/em><\/strong> loop in this session. The <strong><em>while<\/em><\/strong> and <strong><em>do&#8230;while<\/em><\/strong> will be explained in the next session.<\/p>\n<p>Here is the format of a <em>for<\/em> loop:<\/p>\n<pre class=\"small-text\">\r\nfor (Initialization statements; Condition; Updation statements)\r\n   {\r\n   ...\r\n   statements\r\n   ...\r\n   }\r\n<\/pre>\n<p>When the JavaScript interpreter comes across a <em>for<\/em> loop, it executes the initialization statements and then checks the condition. Only when the condition returns &#8216;true&#8217;, the interpreter enters the loop. After the first iteration, the updation statements are executed and then the condition is evaluated again. This continues till the condition returns &#8216;false&#8217; and the loop stops.<\/p>\n<div class=\"clr\"><\/div>\n<div class=\"bottom-ads\">\n<h4>Sponsored Links<\/h4>\n<script async src=\"\/\/pagead2.googlesyndication.com\/pagead\/js\/adsbygoogle.js\"><\/script>\n<!-- Inner Page Top - Non Responsive -->\n<ins class=\"adsbygoogle\"\n     style=\"display:inline-block;width:336px;height:280px\"\n     data-ad-client=\"ca-pub-1043128618639037\"\n     data-ad-slot=\"5670477364\"><\/ins>\n<script>\n(adsbygoogle = window.adsbygoogle || []).push({});\n<\/script>\n<\/div>\n<div class=\"clr\"><\/div>\n<h2>Some important points to not for the JavaScript &#8220;for&#8221; loop<\/h2>\n<ul class=\"withbullets\">\n<li>The initialization statements are executed once; only when the <em>for<\/em> loop is encountered.<\/li>\n<li>After execution of initialization statements, the condition is evaluated.<\/li>\n<li>After every iteration, the updation statements are executed and then the condition is checked.<\/li>\n<\/ul>\n<p>We can use a <em>for<\/em> loop to print digits 1 to 10 in an alert box.<\/p>\n<pre class=\"small-text\">\r\nvar msg = \"\";\r\n\r\nfor (var x = 1; x &lt;= 10; x++)\r\n   {\r\n   msg = msg + x + \"\\n\";\r\n   }\r\n\r\nalert(msg);\r\n<\/pre>\n<p><a href=\"javascript:void(0)\" onclick=\"var msg = '';for (var x = 1; x &lt;= 10; x++){msg = msg + x + '\\n';}alert(msg);\">Click here for results<\/a><\/p>\n<p>First, the variable <strong>x<\/strong> is initialized to 1, the condition is then evaluated. Since x is less than equal to 10, the statements inside the <em>for<\/em> loop are executed. The JavaScript interpreter then runs the updation statement that adds 1 to variable <strong>x<\/strong>. The condition is again checked. This goes on till the value of <strong>x<\/strong> becomes larger than 10. At this point, the statement immediately following the <em>for<\/em> loop is executed.<\/p>\n<h2>Displaying the 12 times table in an alert box<\/h2>\n<pre class=\"small-text\">\r\nvar msg = \"\";\r\nvar res = \"0\";\r\n\r\nfor (var x = 1; x &lt;= 12; x++)\r\n   {\r\n   res = 12 * x;\r\n   msg = msg + \"12 X \" + x + \" = \" + res + \"\\n\";\r\n   }\r\n\r\nalert(msg);\r\n<\/pre>\n<p><a href=\"javascript:void(0)\" onclick=\"var msg = '';var res = '0';for (var x = 1; x &lt;= 12; x++){res = 12 * x;msg = msg + '12 X ' + x + ' = ' + res + '\\n';}alert(msg);\">Click here for results<\/a><\/p>\n<div class=\"pagenav\">\n<ul>\n<li><a href=\"\/\/www.webdevelopersnotes.com\/global-and-local-variables-in-javascript-functions\" title=\"Global and local variable scopes in Javascript functions\">&lt; Back<\/a><\/li>\n<li><a href=\"\/\/www.webdevelopersnotes.com\/javascript-tutorial\" title=\"JavaScript tutorial\">1<\/a><\/li>\n<li>&#8230;<\/li>\n<li><a href=\"\/\/www.webdevelopersnotes.com\/javascript-event-handlers-part-1\" title=\"Javascript onmouseover and javascript onmouseout event handlers\">10<\/a><\/li>\n<li>&#8230;<\/li>\n<li><a href=\"\/\/www.webdevelopersnotes.com\/javascript-if-statement\" title=\"Javascript IF statement\">20<\/a><\/li>\n<li>&#8230;<\/li>\n<li><a href=\"\/\/www.webdevelopersnotes.com\/understanding-javascript-for-loop\" title=\"Understanding javascript loops - the FOR loop\" class=\"thispage\">27<\/a><\/li>\n<li>&#8230;<\/li>\n<li><a href=\"\/\/www.webdevelopersnotes.com\/changing-images-on-mouseover-using-javascript\" title=\"Changing images on mouseover using Javascript\">30<\/a><\/li>\n<li>&#8230;<\/li>\n<li><a href=\"\/\/www.webdevelopersnotes.com\/javascript-while-loop\" title=\"The Javascript while loop\">Next &gt;<\/a><\/li>\n<\/ul>\n<\/div>\n","protected":false},"excerpt":{"rendered":"The main strength of any programming language is its ability to process blocks of code repeatedly. Computers are especially adept at performing repeated calculations. JavaScript, like other programming languages, provides us with loop. Statements placed inside loops are executed a set number of times&#8230; or even infinitely. We&#8217;ll look at the for loop in this [&hellip;]","protected":false},"author":1,"featured_media":9467,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[56],"tags":[],"class_list":["post-4457","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-javascript"],"acf":[],"_links":{"self":[{"href":"https:\/\/www.webdevelopersnotes.com\/wp-json\/wp\/v2\/posts\/4457","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.webdevelopersnotes.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.webdevelopersnotes.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.webdevelopersnotes.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.webdevelopersnotes.com\/wp-json\/wp\/v2\/comments?post=4457"}],"version-history":[{"count":0,"href":"https:\/\/www.webdevelopersnotes.com\/wp-json\/wp\/v2\/posts\/4457\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.webdevelopersnotes.com\/wp-json\/wp\/v2\/media\/9467"}],"wp:attachment":[{"href":"https:\/\/www.webdevelopersnotes.com\/wp-json\/wp\/v2\/media?parent=4457"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.webdevelopersnotes.com\/wp-json\/wp\/v2\/categories?post=4457"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.webdevelopersnotes.com\/wp-json\/wp\/v2\/tags?post=4457"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}