CIT 261 JavaScript - Loops, Conditional Statements, Functions, Arrays | Ali Cope

Lesson 1 - JavaScript - Loops, Conditional Statements, Functions,
Arrays, Associative Arrays

Functions, Variables and Parameters

Functions are the smallest part of a program that perform an action. There are many different types of functions. On this page you will see functions used to showcase understanding of Loops, Conditional Statements, and Arrays. Before we get too far into functions we need to explain variables and parameters. All programs use variables and parameters to contain values that the program will need.

Variable - we are used to thinking about variables in math as a letter substituting for a number. In programming it is a little broader than that. A variable is basically a box that contains something. It could be a number, text, or something else. We can define a variable using this format.
var variableName = "value";
The keyword var lets the computer know we are creating a new box. The = means that we are putting something in the box. If you think about variables like this it will be easier when we define variables with functions, strings, or even lists.

Parameters - are used to identify which variables will be used in the function. Think about variables as doors into a function. The doors are labeled. Once information goes through the door it can be used in the function. It also lets the program pass information into the function.

All functions follow the same format and have the same basic parts.

function functionName(parameter1, parameter2,...){
statements;
return value;
}

function keyword - this lets the computer know you are starting a function
functionName - this unique identifier is used to call (or run) the function.
parameter list - this is used to identify what variables (information) will be fed into the function. when the function is called using its name, the value of the parameters can be assigned.
statements - this is where all the work of the function is done.
return value - this is the result of the function or what comes out of it. It is returned to the part of the program that called the function (or made it run)

Now lets show some functions at work!

Loops

Loops refer to a function where the statments are run multiple times while a certian condition applys. For our example we are going to do a loop that will display a times table. The user will input which times table they want to see and how large they would like it. When the user pushes the button, the computer will call the function to run. The statements inside the function will calculate the times table and add each times table to what will be the output, until the table size that the user specified is met. When the size is met the program will send the total table to the computer for it to display. The code for this loop looks like this:

function timesTable(timesTableNum, tableSize){

var timesTableNum = parseInt(document.getElementById("timesTableNumInput").value);
var tableSize = parseInt(document.getElementById("timesTableSizeInput").value);
var ans = 0;
var i = 0;
var output = "";
while (i<=tableSize) {
ans = timesTableNum*i; output += timesTableNum + " x " + i + " = " + ans + <br>;
i++;}
document.getElementById("timesTableDiv").innerHTML = output; }

Loops Example - Times Tables

Please enter which times table you want to see
(example "5" for a 5 times table or "10" for 10 times table)
Please enter the size of table you would like to see. This will be the last times table you will see.
(example for a table that goes from 5x0 -> 5x10 enter "10")
Results:

Conditional Statements

Conditional Statements ask the computer to evaluate if a condition or series of conditions are met. We go though this in our lives as well. For example, in order to go on space mountain by yourself you have to be at least 7 years old and 40 inches tall. We can write a function to ask the user for their age and height to determine if they can ride alone. If the rider is over 40 inches but not yet 7 they can still ride with another rider who is over 14. The function would look like this.

function canRide(age,height){
var age = parseInt(document.getElementById("riderAge").value);
var height = parseInt(document.getElementById("riderHeight").value);
var output = "";

if (age >= 7 && height >= 40){

output = "Hooray! You can ride Space Mountain by yourself!";
}
else if (height >= 40){

output = "Not quite old enough, but don't give up! You can still ride with another rider who is 14 or older!";
}
else {

output = "I am sorry you must be over 40 inches to ride, and 7 or older to ride by yourself";
}
document.getElementById("rideDiv").innerHTML = output; }

Lets give it a try!

Conditional Statement Example

Space Mountain is one of the all time best rides at Disneyland. Even if no one else wants to go, it is a must do ride. Lets find out if you can ride by yourself.
How old are you?
How tall are you in inches?
Can you ride?
Results:

Arrays

Arrays are a speccial kind of variable that can hold more than one value. This allows us to store lists in one variable. Here are a few important things to understand about arrays.
Syntax - vararray_name = [item1, item2, item3,...]
Creating an Array - To create a new array we use "new" like in following example:

var rides = new Array[Space Mountain, Dumbo, Star Tours, Splash Mountain, Jungle Cruise]

Each item seperated by a comma is stored in a spot in the array. Each spot is numbered starting with 0. You can see any item in an array by using its number.

For example: rides[0] = Space Mountain, rides[3]= Splash Mountain

You can add new items to an existing array by "pushing" into the list.

For example: rides.push(teacups) would add "Teacups" to the last spot in our array.

Array Length - All arrays have a special property called "length" this tells us how many items are in the array.

For example: var rides = [Space Mountain, Dumbo, Star Tours, Splash Mountain, Jungle Cruise, Teacups]; rides.length = 5

Lets do some fun examples using the array we have already created.
Add another disneyland ride to the array
Here is the new list of rides we plan to go on during our next vacation:

We just found out that the Jungle Cruise ride will be closed for rennovations. Too bad! Lets change it to "Pirates" since the Pirates ride is fun too.
Here is our updated list of rides:

Associative Arrays

Associative Arrays are arrays that use names instead of numbers as an index. This can cause all sorts of problems. JavaScript does not accept named arrays, instead use an Object.
An associative array would look like this:

var rideArray [name: "Space Mountain", location: "Tomorrowland", type: "Thrill", heightReq: "40"];

To access the information we could search with the named location instead of having to know the number in the array.

rideArray[type] = "Thrill";
rideArray[location] = "Tomorrowland";

Again, this type of Array is not supported in JavaScript. You can only use numbered Arrays.

Lesson 1 - JavaScript - Loops, Conditional Statements, Functions, Arrays, Associative Arrays