Loops are used to perform some action or block of code a certain amount of times. Loops simplify code by reducing the amount of repitition which makes it easier to read and understand. There are three main types of loops; the for loop, the while loop, and the do/while loop.

For Loop

This is best used when you know exactly how many times you need to execute a loop.

Each loop has conditions that tell the code where to start (initialize), how often it should be repeated (evaluate), and what it should count by (increment) each time.

This is the basic layout:

Example

Say you needed to output a list of years from a certain time period.

i=1990 - starts the year count at 1990.

i < 2000 - everytime the loop is run, it will check to see that each loop is less than 2000.

i++ - will add 1 to the year each time the loop finishes.

The output would be:

The 90's consist of the years:
1990
1991
1992
1993
1994
1995
1996
1997
1998
1999

Test code here

While Loop

The While loop will execute a block of code, as long as the condition is true. The condition is tested before executing the block of code.

This is the basic layout:

Example

Using the same example, we will list the dates of a certain time period.

This time, the loop will first test to see if the condition "i < 30" is true. If it is true, the block of code below will output the value of i, then increase the value of i by 1.

The output would be:

The 20's consist of the years:
1920
1921
1922
1923
1924
1925
1926
1927
1928
1929

Test code here

Do/While Loop

The Do/While Loop is similar to the While Loop, however it will run the block of code once before it checks to see if the condition is true.

This is the basic format:

Example

We will stick with the time period example one last time.

In this example, the block of code inside of do{} will be executed first. It will output the value of i, then increase the valy of i by 1. Then it will check if the while() condition is true. If it is not true, the code will stop.

The output would be:

The 60's consist of the years:
1960
1961
1962
1963
1964
1965
1966
1967
1968
1969

Test code here

Resources

Conditional statements are useful when comparing one thing against another and you need the code to perform an action based on certain conditions. The three different statements are the if statement, if else statement, and else if statement.

Conditional statements use comparison operators when comparing values against one another.

If Statement

In an if statement, if the comparison is true, the block of code will be executed. If it is false, nothing will happen. In layman's terms: if true, do this. If false, do nothing.

Example

The easiest example that helps me understand conditional statements is by comparing age to complete some action. For this example, we can imagine that the user is purchasing tickets for an event. When they select their age, the corresponding price will be shown. We will say that our user is 25 years old.

The if statement includes the comparison between the user's age entry and the number 19. If the user's entry is greater than or equal to 19, it will display the cost of $35.00. If it is less than 19, nothing will occur and the default text in the paragraph will remain. It doesn't make a lot of sense to approach it this way, so we will move on to the if else statement.

If Else Statement

The if else statement will compare some values and if the comparison is true, the block of code will be executed. If the comparison is false, it will move on to the next block of code under else. In layman's terms: if true, do this. If false, do that.

Example

We can change our example to include two different prices for two different age groups depending on our comparison statement. We will remove the $0.00 so that it says nothing when the user enters the page. Ages 0-18 will cost $25 and ages 19-100 will cost $35.

Since the price range for 0-18 year olds is $25, the comparison statement says if the user's entry is less than 19, display the cost of $25. Else, display the price of $35. This comes in handy when you need to do different actions for two different values.

Else If Statement

Finally, the else if statement allows us to provide multiple conditions if the previous one is false. You can include as many else if statements as needed as long as it ends with an else statement. In layman's terms: if true, do this. Else if this condition is true, do this thing. Else do this thing because all of the above are false.

Example

It is very likely that there would be more than 2 age groups for selling tickets. We can't forget the senior citizens! So now the prices will be $25 for ages 0-18, $35 for ages 19-55, and $20 for ages 56 and above.

This example is self explanatory, so no detailed explanation is needed. Moral of the if/if else/else if story is that these can be useful for many reasons. Especially when there is a need for multiple outcomes based on set conditions.

Resources

Functions are frequently used in JavaScript to perform a certain task. A function is a block of code that performs the task. The function will only run if it is called in another location. This is especially useful for tasks that require an action from the user first.

Function Syntax

To define a function, you must first use the "function" keyword which is then folllowed by a unique name for the function. It is best to give a function a descriptive name. Names can use letters, numbers, underscores, and dollar signs, but no spaces. Instead of spaces you can use camel case (thisIsAFunction).

Following the function name, parameters will be placed in parentheses. There can be more than one parameter as long as they are seperated by commas. The actual function or code to be executed is placed inside of curly brackets.

Example

Resources

Variables are where data values are held stored. To declare a variable, you first use "var" followed by the variable name, then "=" and the value to be held in the variable.

Example

The value that will be stored in "var z= x + y" will be 5.

Naming Variables

Making sure a variable's name is precise will help in the long run. For more complex variables other than the ones in the example above, you should give them descriptive names and be consistent in the style of variable names. The rules for naming variables are:

• Cannot contain spaces
• Must begin with a letter, underscore, or dollar sign
• Can only contain letters, underscores, or dollar signs
• Variables are case-sensitive
• Make sure your variable is not a reserved word.

Resources

As you may have noticed earlier, parameters are used in functions to get additional information that is needed in order for the function to work. Declaring these parameters allows you to use them throughout the function's block of code. The parameters are placed in parentheses after the function name.

Example

In this example, the function "greeting" has two parameters: "firstName and" "lastName". The code block within this function writes a welcome message to the user using a concatenated string and the parameter names. Below this function, the two values for the parameters are set. "firstName" is set to "Hannah" and "lastName" is set to "Taylor". The code would then pass in these values for the parameters to write the message "Welcome, Hannah Taylor!".

Resources

Arrays allow you to store more than one value witin a variable. The best use of an array is for when you have a list of items. This simplifies the code by allowing you to store the entire list, no matter how big, into one variable.

To access an item within an array, you use its index number. The index number tells what place the item is. To count the index number, you always need to start at 0. For example, if I have an array of 3 items "apples", "oranges", "bananas", the index count will be "0", "1", "2".

Example

In this example, an array called "names" with 5 items is created. First, it selects the 4th name from the array using the index number 3. It also selects all items in the list by simply calling the name of the array.

Resources

The associative array is somewhat confusing at first. I have read in some places that associative arrays are not supported in JavaScript, and some resources that say they are just objects.

The clearest definition that I found was on this website which says that "every JavaScript object is an associative array...An associative array is simply a set of key value pairs. The value is stored in association with its key and if you provide the key the array will return the value."

Arrays and Objects

According to w3schools, "In JavaScript, arrays use numbered indexes" and "objects use named indexes."

Example

An associative array could be used to store a list of student ID's. It would store the student name with their associated ID number.

An object called "studentId" was created. Inside of this object is a list of names associated with their student ID. When you click on Result in the JSFiddle, an alert pops up and displays the value stored in the key "jill".

Resources

Week 4 Teaching Video

My teaching presentation starts at 0:00 and ends at 16:20.