{"id":316,"date":"2011-12-07T14:41:17","date_gmt":"2011-12-07T14:41:17","guid":{"rendered":"http:\/\/javascript-tutor.net\/index.php\/"},"modified":"2017-11-18T05:41:53","modified_gmt":"2017-11-18T05:41:53","slug":"lesson-8-looping","status":"publish","type":"page","link":"https:\/\/javascript-tutor.net\/index.php\/lesson-8-looping\/","title":{"rendered":"JavaScript Lesson 8: Looping"},"content":{"rendered":"<h4 align=\"center\"><a href=\"http:\/\/javascript-tutor.net\/index.php\/lesson-7conditional-operators\/\">&lt;Lesson 7&gt;<\/a> <a href=\"http:\/\/javascript-tutor.net\/index.php\/tutorial\/\">[Contents]<\/a> <a href=\"http:\/\/javascript-tutor.net\/index.php\/lesson-9-objects-part-1-date-object\/\">&lt;Lesson 9&gt;<\/a><\/h4>\n<p>Another kind of decision-making procedure in JavaScript is looping. Looping is a procedure whereby the execution is repetitive and will only terminate until a certain condition is met. There are two types of loops, the for loop and the while loop.<\/p>\n<h3><strong>8.1 The for Loop<\/strong><\/h3>\n<p>The for loop lets JavaScript executes the statements repeatedly until it meets a certain condition. The syntax is:<\/p>\n<pre style=\"font-size: 110%;\">for (initial expression; condition expression; loop expression)\r\n\r\n{ Statements}<\/pre>\n<p><script async src=\"\/\/pagead2.googlesyndication.com\/pagead\/js\/adsbygoogle.js\"><\/script><br \/>\n<ins class=\"adsbygoogle\"\n     style=\"display:block; text-align:center;\"\n     data-ad-layout=\"in-article\"\n     data-ad-format=\"fluid\"\n     data-ad-client=\"ca-pub-3033628290023372\"\n     data-ad-slot=\"5669011038\"><\/ins><br \/>\n<script>\n     (adsbygoogle = window.adsbygoogle || []).push({});\n<\/script><\/p>\n<h4><strong>Example 8.1<\/strong><\/h4>\n<pre style=\"font-size: 110%;\">&lt;html&gt;\r\n&lt;head&gt;\r\n&lt;title&gt;For Loop&lt;\/title&gt;\r\n&lt;\/head&gt;\r\n&lt;body&gt;\r\n&lt;script language='javascript'&gt;\r\nvar sum=0\r\nfor (n=0; n&lt;11; n++)\r\n { sum+=n\u00a0\u00a0 }\r\n document.write(\"sum=\"+sum)\r\n&lt;\/script&gt;\r\n&lt;\/body&gt;\r\n<\/pre>\n<p>In the above example, the initial expression is n=0, the condition expression is n&lt;11 and the loop expression is n++. It means the loop will stop only when n is more than 11. The statement sum+=n means n is added to the sum in every repetition. Finally, the browser will display the final value of the sum, which is 55 in this example.<\/p>\n<h3><strong>8.2 The for in Loop<\/strong><\/h3>\n<p>The for in loop is a special loop that is used to retrieve the properties of JavaScript objects. The syntax to retrieve the object is<\/p>\n<pre style=\"font-size: 110%; width: 50%;\">for (property in object) {statements}\r\n<\/pre>\n<p>&nbsp;<\/p>\n<h4><strong>Example 8.2: Retrieving the properties of document <\/strong><\/h4>\n<pre style=\"font-size: 110%;\">&lt;html&gt;\r\n&lt;head&gt;\r\n&lt;title&gt;For...In Loop 1&lt;\/title&gt;\r\n&lt;\/head&gt;\r\n&lt;body&gt;\r\n&lt;script type=\"text\/javascript\"&gt;\r\nfor (property in document)\r\n { document.write(property)\r\n document.write('&lt;br&gt;')\r\n}\r\n&lt;\/script&gt;\r\n&lt;\/body&gt;\r\n<\/pre>\n<p>The above JavaScript code will display the properties of the document object in the browser window.<\/p>\n<h3><strong>8.3 The While Loop<\/strong><\/h3>\n<p>The while statement allows us to control the number of times a procedure is performed. It is important to make that the repetition is not endless. I will illustrate the algorithm using the example bellow. The program will produce a pop-up dialog box 8 times prompting the user to enter the marks 8 times, then it will add up the marks and show the average mark.:<\/p>\n<h4><strong>Example 8.3<\/strong><\/h4>\n<pre style=\"font-size: 110%;\">&lt;html&gt;\r\n&lt;head&gt;\r\n&lt;meta http-equiv=\"Content-Language\" content=\"zh-cn\"&gt;\r\n&lt;meta http-equiv=\"Content-Type\" content=\"text\/html; charset=gb2312\"&gt;\r\n&lt;title&gt;Sample JavaScript using While&lt;\/title&gt;\r\n&lt;script&gt;\r\n\r\nvar sum,\r\nmark1,\r\nmark2,\r\ncounter,\r\navg;\r\n\r\nsum=0;\r\ncounter=1;\r\n\r\nwhile(counter&lt;=8) {\r\n\r\nmark1=window.prompt(\"Enter your mark\",\"0\");\r\nmark2=parseInt(mark1);\r\nsum=sum+mark2;\r\ncounter=counter+1;\r\n}\r\navg=sum\/8;\r\ndocument.writeln(\"&lt;H2&gt; Average mark is \"+avg+\"&lt;\/H2&gt;\");\r\n\r\n&lt;\/script&gt;\r\n&lt;\/head&gt;\r\n\r\n&lt;body&gt;\r\n\r\n&lt;h2 align=\"center\"&gt;&lt;font face=\"Arial\"&gt;Sample JavaScript using While&lt;\/font&gt;&lt;\/h2&gt;\r\n\r\n&lt;\/body&gt;\r\n\r\n&lt;\/html&gt;\r\n<\/pre>\n<p>Click on the\u00a0<a href=\"http:\/\/javascript-tutor.net\/java_tutor\/java_sample7.htm\">testing page<\/a><br \/>\n<script async src=\"\/\/pagead2.googlesyndication.com\/pagead\/js\/adsbygoogle.js\"><\/script><br \/>\n<ins class=\"adsbygoogle\"\n     style=\"display:block; text-align:center;\"\n     data-ad-layout=\"in-article\"\n     data-ad-format=\"fluid\"\n     data-ad-client=\"ca-pub-3033628290023372\"\n     data-ad-slot=\"5669011038\"><\/ins><br \/>\n<script>\n     (adsbygoogle = window.adsbygoogle || []).push({});\n<\/script><\/p>\n<h4 align=\"center\"><a href=\"http:\/\/javascript-tutor.net\/index.php\/lesson-7conditional-operators\/\">&lt;Lesson 7&gt;<\/a> <a href=\"http:\/\/javascript-tutor.net\/index.php\/tutorial\/\">[Contents]<\/a> <a href=\"http:\/\/javascript-tutor.net\/index.php\/lesson-9-objects-part-1-date-object\/\">&lt;Lesson 9&gt;<\/a><\/h4>\n","protected":false},"excerpt":{"rendered":"<p>&lt;Lesson 7&gt; [Contents] &lt;Lesson 9&gt; Another kind of decision-making procedure in JavaScript is looping. Looping is a procedure whereby the execution is repetitive and will only terminate until a certain condition is met. There are two types of loops, the for loop and the while loop. 8.1 The for Loop The for loop lets JavaScript &hellip; <a href=\"https:\/\/javascript-tutor.net\/index.php\/lesson-8-looping\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> &#8220;JavaScript Lesson 8: Looping&#8221;<\/span><\/a><\/p>\n","protected":false},"author":35895,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-316","page","type-page","status-publish","hentry"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v25.1 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Looping in javascript<\/title>\n<meta name=\"description\" content=\"This javascript lesson shows how to use loops in javascript\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"http:\/\/javascript-tutor.net\/jstutor\/jstutor_lesson8.html\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Looping in javascript\" \/>\n<meta property=\"og:description\" content=\"This javascript lesson shows how to use loops in javascript\" \/>\n<meta property=\"og:url\" content=\"http:\/\/javascript-tutor.net\/jstutor\/jstutor_lesson8.html\" \/>\n<meta property=\"og:site_name\" content=\"Learn JavaScript Online | Free Interactive JavaScript Tutorials\" \/>\n<meta property=\"article:modified_time\" content=\"2017-11-18T05:41:53+00:00\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/javascript-tutor.net\/index.php\/lesson-8-looping\/\",\"url\":\"http:\/\/javascript-tutor.net\/jstutor\/jstutor_lesson8.html\",\"name\":\"Looping in javascript\",\"isPartOf\":{\"@id\":\"https:\/\/javascript-tutor.net\/#website\"},\"datePublished\":\"2011-12-07T14:41:17+00:00\",\"dateModified\":\"2017-11-18T05:41:53+00:00\",\"description\":\"This javascript lesson shows how to use loops in javascript\",\"breadcrumb\":{\"@id\":\"http:\/\/javascript-tutor.net\/jstutor\/jstutor_lesson8.html#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"http:\/\/javascript-tutor.net\/jstutor\/jstutor_lesson8.html\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"http:\/\/javascript-tutor.net\/jstutor\/jstutor_lesson8.html#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/javascript-tutor.net\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"JavaScript Lesson 8: Looping\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/javascript-tutor.net\/#website\",\"url\":\"https:\/\/javascript-tutor.net\/\",\"name\":\"Learn JavaScript Online | Free Interactive JavaScript Tutorials\",\"description\":\"Master JavaScript with free, interactive tutorials for beginners and experienced coders. Practice live coding and visualize how JavaScript works step by step.\",\"inLanguage\":\"en-US\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Looping in javascript","description":"This javascript lesson shows how to use loops in javascript","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"http:\/\/javascript-tutor.net\/jstutor\/jstutor_lesson8.html","og_locale":"en_US","og_type":"article","og_title":"Looping in javascript","og_description":"This javascript lesson shows how to use loops in javascript","og_url":"http:\/\/javascript-tutor.net\/jstutor\/jstutor_lesson8.html","og_site_name":"Learn JavaScript Online | Free Interactive JavaScript Tutorials","article_modified_time":"2017-11-18T05:41:53+00:00","twitter_misc":{"Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/javascript-tutor.net\/index.php\/lesson-8-looping\/","url":"http:\/\/javascript-tutor.net\/jstutor\/jstutor_lesson8.html","name":"Looping in javascript","isPartOf":{"@id":"https:\/\/javascript-tutor.net\/#website"},"datePublished":"2011-12-07T14:41:17+00:00","dateModified":"2017-11-18T05:41:53+00:00","description":"This javascript lesson shows how to use loops in javascript","breadcrumb":{"@id":"http:\/\/javascript-tutor.net\/jstutor\/jstutor_lesson8.html#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["http:\/\/javascript-tutor.net\/jstutor\/jstutor_lesson8.html"]}]},{"@type":"BreadcrumbList","@id":"http:\/\/javascript-tutor.net\/jstutor\/jstutor_lesson8.html#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/javascript-tutor.net\/"},{"@type":"ListItem","position":2,"name":"JavaScript Lesson 8: Looping"}]},{"@type":"WebSite","@id":"https:\/\/javascript-tutor.net\/#website","url":"https:\/\/javascript-tutor.net\/","name":"Learn JavaScript Online | Free Interactive JavaScript Tutorials","description":"Master JavaScript with free, interactive tutorials for beginners and experienced coders. Practice live coding and visualize how JavaScript works step by step.","inLanguage":"en-US"}]}},"_links":{"self":[{"href":"https:\/\/javascript-tutor.net\/index.php\/wp-json\/wp\/v2\/pages\/316","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/javascript-tutor.net\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/javascript-tutor.net\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/javascript-tutor.net\/index.php\/wp-json\/wp\/v2\/users\/35895"}],"replies":[{"embeddable":true,"href":"https:\/\/javascript-tutor.net\/index.php\/wp-json\/wp\/v2\/comments?post=316"}],"version-history":[{"count":20,"href":"https:\/\/javascript-tutor.net\/index.php\/wp-json\/wp\/v2\/pages\/316\/revisions"}],"predecessor-version":[{"id":2477,"href":"https:\/\/javascript-tutor.net\/index.php\/wp-json\/wp\/v2\/pages\/316\/revisions\/2477"}],"wp:attachment":[{"href":"https:\/\/javascript-tutor.net\/index.php\/wp-json\/wp\/v2\/media?parent=316"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}