{"id":26871145,"url":"https://github.com/codeadamca/javascript-for-loops","last_synced_at":"2025-03-31T07:18:37.814Z","repository":{"id":46328036,"uuid":"332517296","full_name":"codeadamca/javascript-for-loops","owner":"codeadamca","description":"A basic example of using JavaScript loops to repeat blocks of code.","archived":false,"fork":false,"pushed_at":"2025-01-26T22:23:57.000Z","size":16,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-01-26T23:21:09.408Z","etag":null,"topics":["for-loops","javascript","learning-code"],"latest_commit_sha":null,"homepage":"","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/codeadamca.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2021-01-24T17:56:47.000Z","updated_at":"2025-01-26T22:24:01.000Z","dependencies_parsed_at":"2025-01-26T23:30:01.311Z","dependency_job_id":null,"html_url":"https://github.com/codeadamca/javascript-for-loops","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codeadamca%2Fjavascript-for-loops","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codeadamca%2Fjavascript-for-loops/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codeadamca%2Fjavascript-for-loops/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codeadamca%2Fjavascript-for-loops/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/codeadamca","download_url":"https://codeload.github.com/codeadamca/javascript-for-loops/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246429487,"owners_count":20775809,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["for-loops","javascript","learning-code"],"created_at":"2025-03-31T07:18:37.144Z","updated_at":"2025-03-31T07:18:37.787Z","avatar_url":"https://github.com/codeadamca.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"# A Basic Introduction to JavaScript and For Loops\n\nJavaScript `for` loops allow code to repeat a block of code. A typical `for` loop has the following structure:\n\n```javascript\nfor(define a counter variable; condition; increment)\n{\n  // Code to repeat as long as the condition is true\n}\n```\n\nThe code in between the open `(` and close `)` contains three pieces:\n\n1. Define a counter variable. This part of the `for` loop is executed once before the first iteration of the loop. This variable will be used to track which iteration the loop is currently executing. Typically this code creates a new variable (often called `i`) and sets it to zero. \n2. Define a condition. This part of the `for` loop is checked once before each iteration of the loop. This condition is structured much like a condition in an `if` statement. The loop will continue repeating as long as the condition is true. \n3. Set the increment. This part of the `for` loop is executed once after each iteration of the loop. This statement determines how the counter variable (defined in the first part of teh `for` loop) is changed each time the loop repeats. \n\nFor example, the folloing loop will repeat five times:\n\n```javascript\nfor(var i = 0; i \u003c 5; i ++)\n{\n  // Code to repeat as long as the condition is true\n}\n```\n\n## Loops and Arrays\n\nCombining loops with arrays makes displaying data from an array quite easy:\n\n```javascript\nvar colours = new Array();\ncolours[0] = \"Red\";\ncolours[1] = \"Blue\";\ncolours[2] = \"Green\";\n\nfor(var i = 0; i \u003c colours.length; i ++)\n{\n  document.write(\"\u003cp\u003eColour number \" + i + \" is \" + colours[i] + \"\u003c/p\u003e\");\n}\n```\n\n## Data\n\nOne of the most common coding tasks is iterating through a list of data and displaying the data using well formatted HTML. This could include lopping through a list of records from a MySQL database, looping through a JSON or XML document, or lopping through a list of data stored in an array. Here is a typical list of coding resources:\n\n\u003ctable\u003e\n\u003ctr\u003e\u003cth\u003eName\u003c/th\u003e\u003cth\u003eURL\u003c/th\u003e\u003cth\u003eDescription\u003c/th\u003e\u003c/tr\u003e\n\u003ctr\u003e\u003ctd\u003eW3Schools\u003c/td\u003e\u003ctd\u003ehttp://www.w3schools.com/\u003c/td\u003e\u003ctd\u003eW3Schools is a web developer information website, with tutorials and references relating to web development topics such as HTML, CSS, JavaScript and PHP.\u003c/td\u003e\u003c/tr\u003e\n\u003ctr\u003e\u003ctd\u003eCode Academy\u003c/td\u003e\u003ctd\u003ehttps://www.codecademy.com/\u003c/td\u003e\u003ctd\u003eCodecademy is an online interactive platform that offers free coding classes in 9 different programming languages.\u003c/td\u003e\u003c/tr\u003e\n\u003ctr\u003e\u003ctd\u003eW3\u003c/td\u003e\u003ctd\u003ehttp://www.w3.org/\u003c/td\u003e\u003ctd\u003eThe World Wide Web Consortium is the main international standards organization for the World Wide Web.\u003c/td\u003e\u003c/tr\u003e\n\u003c/table\u003e\n\nLet's place this data in a JavaScript array:\n\n```javascript\nvar links = [];\n\nlinks[0] = {\n  name: \"W3Schools\",\n  url: \"http://www.w3schools.com/\",\n  description: \"W3Schools is a web developer information website, with tutorials and references relating to web development topics such as HTML, CSS, JavaScript and PHP.\"\n};\nlinks[1] = {\n  name: \"Code Academy\",\n  url: \"https://www.codecademy.com/\",\n  description: \"Codecademy is an online interactive platform that offers free coding classes in 9 different programming languages.\"\n};\n\nlinks[2] = {\n  name: \"W3\",\n  url: \"http://www.w3.org/\",\n  description: \"The World Wide Web Consortium is the main international standards organization for the World Wide Web.\"\n}\n```\n\nNext, let's create a loop that runs once for each item in the `links` array:\n\n```javascript\nfor(var i = 0; i \u003c links.lengt; i ++)\n{\n}\n```\n\nAnd finally. in between the open `{` and close `}`, output the content from the array. Here is an example of a `document.write()` command outputting the link name:\n\n```javascript\ndocument.write(\"\u003ch2\u003e\" + links[i][\"name\"] + \"\u003c/h2\u003e\");\n```\n\n## Trying It Out\n\nContinue adding code to the `for` loop so all of the content from the array is displayed using well formatted HTML.\n\n\u003e Full tutorial URL:  \n\u003e https://codeadam.ca/learning/javascript-for-loops.html\n\n***\n\n## Repo Resources\n\n* [Visual Studio Code](https://code.visualstudio.com/)\n* [W3Schools - JavaScript](https://www.w3schools.com/js/)\n\n\u003cbr\u003e\n\u003ca href=\"https://codeadam.ca\"\u003e\n\u003cimg src=\"https://cdn.codeadam.ca/images@1.0.0/codeadam-logo-coloured-horizontal.png\" width=\"200\"\u003e\n\u003c/a\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcodeadamca%2Fjavascript-for-loops","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcodeadamca%2Fjavascript-for-loops","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcodeadamca%2Fjavascript-for-loops/lists"}