René's URL Explorer Experiment

{"@context":"https://schema.org","@graph":[{"@type":"Article","@id":"https://www.webcodegeeks.com/javascript/javascript-for-loop-example/#article","isPartOf":{"@id":"https://www.webcodegeeks.com/javascript/javascript-for-loop-example/"},"author":{"name":"Era Balliu","@id":"https://www.webcodegeeks.com/#/schema/person/c27ecf40c810e6396ba93ffb829c7b0e"},"headline":"JavaScript For Loop Example","datePublished":"2014-11-27T11:15:23+00:00","dateModified":"2018-06-20T13:59:18+00:00","mainEntityOfPage":{"@id":"https://www.webcodegeeks.com/javascript/javascript-for-loop-example/"},"wordCount":1035,"commentCount":2,"publisher":{"@id":"https://www.webcodegeeks.com/#organization"},"image":{"@id":"https://www.webcodegeeks.com/javascript/javascript-for-loop-example/#primaryimage"},"thumbnailUrl":"https://www.webcodegeeks.com/wp-content/uploads/2014/10/js-logo.jpg","articleSection":["JavaScript"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https://www.webcodegeeks.com/javascript/javascript-for-loop-example/#respond"]}]},{"@type":"WebPage","@id":"https://www.webcodegeeks.com/javascript/javascript-for-loop-example/","url":"https://www.webcodegeeks.com/javascript/javascript-for-loop-example/","name":"JavaScript For Loop Example - Web Code Geeks - 2026","isPartOf":{"@id":"https://www.webcodegeeks.com/#website"},"primaryImageOfPage":{"@id":"https://www.webcodegeeks.com/javascript/javascript-for-loop-example/#primaryimage"},"image":{"@id":"https://www.webcodegeeks.com/javascript/javascript-for-loop-example/#primaryimage"},"thumbnailUrl":"https://www.webcodegeeks.com/wp-content/uploads/2014/10/js-logo.jpg","datePublished":"2014-11-27T11:15:23+00:00","dateModified":"2018-06-20T13:59:18+00:00","description":"Interested to learn more about for loop in JS? Then check out our detailed Example where we explain every type of this loop in JavaScript!","breadcrumb":{"@id":"https://www.webcodegeeks.com/javascript/javascript-for-loop-example/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https://www.webcodegeeks.com/javascript/javascript-for-loop-example/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https://www.webcodegeeks.com/javascript/javascript-for-loop-example/#primaryimage","url":"https://www.webcodegeeks.com/wp-content/uploads/2014/10/js-logo.jpg","contentUrl":"https://www.webcodegeeks.com/wp-content/uploads/2014/10/js-logo.jpg","width":150,"height":150},{"@type":"BreadcrumbList","@id":"https://www.webcodegeeks.com/javascript/javascript-for-loop-example/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https://www.webcodegeeks.com/"},{"@type":"ListItem","position":2,"name":"JavaScript","item":"https://www.webcodegeeks.com/category/javascript/"},{"@type":"ListItem","position":3,"name":"JavaScript For Loop Example"}]},{"@type":"WebSite","@id":"https://www.webcodegeeks.com/#website","url":"https://www.webcodegeeks.com/","name":"Web Code Geeks","description":"Web Developers Resource Center","publisher":{"@id":"https://www.webcodegeeks.com/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https://www.webcodegeeks.com/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https://www.webcodegeeks.com/#organization","name":"Exelixis Media P.C.","url":"https://www.webcodegeeks.com/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https://www.webcodegeeks.com/#/schema/logo/image/","url":"https://www.webcodegeeks.com/wp-content/uploads/2022/06/exelixis-logo.png","contentUrl":"https://www.webcodegeeks.com/wp-content/uploads/2022/06/exelixis-logo.png","width":864,"height":246,"caption":"Exelixis Media P.C."},"image":{"@id":"https://www.webcodegeeks.com/#/schema/logo/image/"},"sameAs":["https://www.facebook.com/webcodegeeks","https://x.com/webcodegeeks"]},{"@type":"Person","@id":"https://www.webcodegeeks.com/#/schema/person/c27ecf40c810e6396ba93ffb829c7b0e","name":"Era Balliu","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https://www.webcodegeeks.com/#/schema/person/image/","url":"https://secure.gravatar.com/avatar/f6adddf7eada210f682608fea9d8159441369ec622998a5851a447e0a2bfa3f3?s=96&d=mm&r=g","contentUrl":"https://secure.gravatar.com/avatar/f6adddf7eada210f682608fea9d8159441369ec622998a5851a447e0a2bfa3f3?s=96&d=mm&r=g","caption":"Era Balliu"},"description":"Era is a Telecommunications Engineering student, with a great passion for new technologies. Up until now she has been coding with HTML/CSS, Bootstrap and other front-end coding languages and frameworks, and her recent love is Angular JS.","sameAs":["http://www.webcodegeeks.com/","https://www.facebook.com/era.balliu.7","https://www.instagram.com/eraballiu/","https://www.linkedin.com/in/eraballiu","https://www.pinterest.com/001r2gw0jt0ln6d/","https://x.com/BalliuEra","https://www.youtube.com/c/eraballiu"],"url":"https://www.webcodegeeks.com/author/era-balliu/"}]}

{"@context":"http:\/\/schema.org","@type":"BreadcrumbList","@id":"#Breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"item":{"name":"Home","@id":"https:\/\/www.webcodegeeks.com\/"}},{"@type":"ListItem","position":2,"item":{"name":"JavaScript","@id":"https:\/\/www.webcodegeeks.com\/category\/javascript\/"}}]}

{"@context":"http:\/\/schema.org","@type":"Article","dateCreated":"2014-11-27T13:15:23+02:00","datePublished":"2014-11-27T13:15:23+02:00","dateModified":"2018-06-20T16:59:18+03:00","headline":"JavaScript For Loop Example","name":"JavaScript For Loop Example","keywords":[],"url":"https:\/\/www.webcodegeeks.com\/javascript\/javascript-for-loop-example\/","description":"We hear a lot about loops, especially \" for loop \". So what, in fact, are they? They're just pieces of code that repeat the same commands several times, until you reach a desired conclusion, without g","copyrightYear":"2014","articleSection":"JavaScript","articleBody":"We hear a lot about loops, especially \" for loop \". So what, in fact, are they? They're just pieces of code that repeat the same commands several times, until you reach a desired conclusion, without getting you bored out of your mind, repeating your code. This is how we JavaScript guys do it.\r\n\r\n\r\nSyntax\r\nYou will definitely have to know the syntax of for loops and that goes like this:\r\n\r\n[js]\r\nfor ([initialization]; [condition]; [final-expression]) statement\r\n[\/js]\r\n\r\nYou'll see in the examples how each of these clauses is translated into code. So let's start right away.\r\nUsing simple for loops\r\nThe most typical way to use for loops is counting. You just need to tell the loop where to start, where to finish, and with what pace to count. This is how the code goes for counting and printing in the screen odd numbers from one to ten:\r\n\r\n[js]\r\nfor (var i = 1; i < 10; i+2) {\r\n    console.log(i);\r\n}\r\n[\/js]\r\n\r\nAccording to the syntax structure we gave you above, you can now easily distinguish that we have first declared and initialized the variable with the value 1. We have set the condition, which in our case is to not count odd numbers greater than 10, and the final one is the pace, and since the two closest odd numbers only differ by 2 the final expression is i+2. Notice that we start the loop with an odd number.\r\nRemoving for loop's clauses\r\nOne way to put for loops in good use would be to optimize them, by removing the expressions.Each one of them can be omitted, or you can even omit them all. We will be using the same code of the example above, only we'll modify it according to the thing we want to show you, so that you can draw the differences and understand it more. Firstly, we'll show you when and how can you remove the initialization expression. Have a look at the code to see how it changes:\r\n\r\n[js]\r\nvar i = 1;\r\nfor (; i < 10; i+2) {\r\n    console.log(i);\r\n}\r\n[\/js]\r\n\r\nYou will definitely notice that we have removed the initialization expression, but the variable is initialized outside the loop before we write the code for the loop. Also what's important here is that the place where the expression we removed was is still there, even though it's now empty. It's not correct to remove the semicolon saving that space.\r\n\r\nNow it's time to show you how to use a for loop with all three blocks removed. This is the code:\r\n\r\n[js]\r\ni=0;\r\nfor (;;) {\r\n    if (i > 3) break;\r\n    console.log(i);\r\n    i++;\r\n}\r\n[\/js]\r\n\r\nYou are obliged to declare an initialize the variable before writing the rest of the loop's code. If you don't want to put a condition or a way to get out of the loop, you would be building an infinite loop. But if this is not your intention then you will have to put a condition and an expression that changes the value of the variable, as we have done in the previous code snippet.\r\nfor loops and break;\r\nIf you were careful in watching the code snippets above you will see something that we did not explain: the expression break;. That expression is used to jump out of the loop, which means that it takes the command right after the loop, without executing the rest of it, but instead doing whatever code is next. Here's an example of how you can use it:\r\n\r\n[js]\r\nvar text = ""\r\nvar i;\r\nfor (i = 0; i < 10; i++) {\r\n\tif (i == 3) {break;}\r\n\ttext += "The number is " + i + "<br>";\r\n}\r\n[\/js]\r\n\r\nThis code snippet prints out the value of the i variable, and increments it by one. When the value of i reaches 3, it breaks out of the loop. That is how the break; expression operates.\r\nfor loops and continue;\r\nThe continue; expression is similar to break; only this one only breaks out of the current iteration, and into the next one, not necessarily out of the loop. Here's the modified example:\r\n\r\n[js]\r\nvar text = ""\r\nvar i;\r\nfor (i = 0; i < 10; i++) {\r\n    if (i == 3) {continue;}\r\n    text += "The number is " + i + "<br>";\r\n}\r\n[\/js]\r\n\r\nInstead of break; we have used  continue; and the difference is that the next iteration to be executed is not the one after the loop, it's the one after the iteration containing continue;.\r\nfor...in loops\r\nThe for...in loops are a way of iterating only the properties of different objects.It's sytax is like this:\r\n\r\n[js]\r\nfor (var variable in objectExpression) {statement}\r\n[\/js]\r\n\r\nAny expression that evaluates to an object can be used as objectExpression, and this object's properties are the ones to be iterated. On each iteration, the property names are assigned to variables, and then the statement is executed.See the example below:\r\n\r\n[js]\r\nvar myObj = {a: 1, b: 2, c: 3}, \r\n    myKeys = [];\r\n \r\nfor (var property in myObj) {\r\n    myKeys.push(property);\r\n}\r\n \r\nmyKeys; \r\n\r\n\/\/['a','b','c'];\r\n[\/js]\r\n\r\nNote that the properties' values are actually strings, so whatever action you want to do with, or on them in the statement block, you will have to think of them as such.\r\nUsing for with an empty statement\r\nThe awesome part about JavaScript is that almost every modification of the code leads you somewhere useful. That is the case with the following code, which we'd like you to see first and discuss later:\r\n\r\n[js]\r\nfunction showOffsetPos (sId) {\r\n\r\n    \/\/ initialization\r\n    var nLeft = 0, nTop = 0;\r\n\r\n    \/\/ condition\r\n    for (var oItNode = document.getElementById(sId);\r\n        \/\/ final-expression\r\n         oItNode;\r\n         nLeft += oItNode.offsetLeft,\r\n         nTop += oItNode.offsetTop,\r\n\r\n          \/\/ empty statement\r\n         oItNode = oItNode.offsetParent) ;\r\n\r\n    console.log("Offset position of \\"" + sId + "\\" element:\\n left: "\r\n        + nLeft + "px;\\n top: " + nTop + "px;");\r\n}\r\n\r\nshowOffsetPos("content");\r\n[\/js]\r\n\r\nThis loop calculates the offset position of a node in the final-expression section, therefore making the use of a statement block useless, so the empty statement is used instead.\r\nDownload the source code\r\nThis was an example of for loops in JavaScript.\r\nDownload\r\nYou can download the full source code of this example here: ForLoops","publisher":{"@id":"#Publisher","@type":"Organization","name":"Web Code Geeks","logo":{"@type":"ImageObject","url":"\/wp-content\/uploads\/2015\/12\/WebCodeGeeks-logo.png"},"sameAs":["http:\/\/feeds.feedburner.com\/WebCodeGeeks","https:\/\/www.facebook.com\/webcodegeeks","https:\/\/twitter.com\/webcodegeeks","https:\/\/www.youtube.com\/channel\/UCcJkBzpdp8TWzzu0bSjzikw","https:\/\/github.com\/webcodegeeks"]},"sourceOrganization":{"@id":"#Publisher"},"copyrightHolder":{"@id":"#Publisher"},"mainEntityOfPage":{"@type":"WebPage","@id":"https:\/\/www.webcodegeeks.com\/javascript\/javascript-for-loop-example\/","breadcrumb":{"@id":"#Breadcrumb"}},"author":{"@type":"Person","name":"Era Balliu","url":"https:\/\/www.webcodegeeks.com\/author\/era-balliu\/"},"image":{"@type":"ImageObject","url":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/js-logo.jpg","width":1200,"height":150}}