JavaScript Loops - Learn Online

JavaScript Loops

Lesson Details:
October 21, 2020


I: Introduction

1. In todays world there are many programming languages that can be used to create a website. Each of these languages has it's own syntax and certain applications. The language that I will be discussing in this article is Javascript.

2. Javascript is a very popular language used for web development. It can be used to create games, interactive websites and even apps for mobile devices. It is a great programming language because it allows users to create their own applications with little to no knowledge of programming. These applications can then be installed on a users computer or phone and used to perform various tasks.

3. In this article I will discuss the history, syntax and applications of JavaScript as well as some tips for getting started with the language.

II: Body

A: Javascript Loops

1. One of the first things I learned when I began learning how to program in javascript was the use of loops. If you have taken a class in any high school or college level programming courses you know what loops are and how they work. Loops allow programmers to repeat a task over and over again until a certain condition is met. There are different types of loops as well as different ways to use them, but this article will focus on the while loop and the do while loop as well as how to use them to perform common tasks such as creating an auto complete drop down list using drop down menu maker.

a. The while loop:

Syntax: while ( condition ) { statement } The while loop can be used to repeatedly execute a statement until a condition is met. This condition must be true before the statement is executed otherwise the loop will not execute at all. If we wanted to use a while loop to make an application that would change the background color of a webpage depending on the day of the week we could write something like this:


while ( day == "Monday" ){ document .getElementById( "bgcolor" ).style.backgroundColor = "#ff0000"; }

In this example we ask if the variable day equals Monday (we could also use any other day of the week) if it does execute the statement which changes the bgcolor style of our webpage by setting its value equal to red (#ff0000). If the condition is not true, in this case if day doesn't equal Monday, then nothing will happen. This continues until day equals Monday at which point our code will run again.

b. The do while loop:

Syntax: do { statement } while ( condition ); While the while loop executes our statement each time our condition is met, the do while loop executes our statement once before executing our condition. So if we wanted to use a do while loop to change our background color based on which day of the week it is we could write something like this:


do { document .getElementById( "bgcolor" ).style.backgroundColor = "#ff0000"; } while ( day != "Monday" );

In this example we ask if day does not equal Monday before changing our document's bgcolor style to red if it does not equal Monday then it will go back and check again until day equals Monday at which point our code will run again. So what is the difference between these two types of loops? The difference lies in how they are executed. While loops are executed each time before checking if our condition is true, but do while loops are executed once before executing our condition. If you are confused about how these loops are executed go ahead and read one of our javascript tutorials on control flow operators.

c. Using loops for data validation: Creating an auto complete drop down list using drop down menu maker


1. One of my favorite uses for loops in javascript is data validation. Data validation is used to ensure that your data meets certain criteria before inserting it into your database or displaying it to your users. For example lets say that you have a form on your website where users enter their birth date so you can calculate their age, but you want to ensure that they enter a valid date so you implement some data validation on your form so that if they enter anything other than a valid date you don't store it in your database, instead you give them feedback about what they did wrong so that next time they can fix their mistake before trying again.. This is where loops come into play..


2. Lets say that our start date needs to be in YYYY-MM-DD format, leading zeros are required and if it contains any spaces then it needs to have dashes in place of any spaces. Our end date should be in MM-DD-YYYY format with no leading zeros, no spaces and no dashes (if there are any leading zeros or spaces then it needs to be in MM-DD-YY format). We can use a simple for loop like this:


for ( var i=0; i < startDate xss=removed startDate[i]= "-" startDate[i]= "" i=0; xss=removed endDate[i]= "-" endDate[i]= ""> Auto Complete Example

Enter your birthday
[removed] var days = [ 'Sun','Mon','Tue','Wed','Thu','Fri','Sat' ]; function validateStart(){ var error = true; var startDay = document.getElementById("birthday").value; var dateRegex = /^d{4}-d{2}-d{2}$/; for (var i=0; i < days xss=removed xss=removed xss=removed xss=removed xss=removed xss=removed i=0; xss=removed xss=removed xss=removed xss=removed xss=removed>
Enter your birthday:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38

loader
Course content