Arrays and Control Structures

Arrays and Control Structures CST 200 – JavaScript 2 – 25 - 13

Objectives • Learn how to store data in arrays • Use if statements, if...else statements, and switch statements to make decisions • Nest one if statement in another • Use while statements, do . . . while statements, and for statements to repeatedly execute code • Use continue statements to restart a looping statement

Storing Data in Arrays • So far, we have seen how to declare and use variables to store single pieces of information varcellPhone = "Samsung Epic"; • There are times, however, when we want to store groups or lists of information in one place • An array is used to represent a group, or list of information by a single variable name • An array is like a collection of variables stored in one variable

Declaring and Initializing Arrays • JavaScript represents arrays with the Array object • The Array object contains a special constructor named Array() • A constructor is a special type of function used to create a new object • Each item in stored in an array is called an element • Syntax for creating an array vararrayName= newArray(number of elements);

Declaring and Initializing Arrays (cont) • Examples: • Create an array named cellPhones varcellPhones = new Array(); • Create an array named cellPhones having 10 elements varcellPhones = new Array(10); • Index • Element’s numeric position within the array • Array element numbering • Starts with index number of zero (0)

Declaring and Initializing Arrays (cont) • Example: Create an array named cellPhones having 10 elements var cellPhones = new Array(10); Number of elements to be stored in array Array( ) constructor keyword new

Declaring and Initializing Arrays (cont) • After declaring an array, we can then assign values to individual elements of the array • Include the array index for an individual element • Example: • Assign values to first three elements of the cellPhones array cellPhones[0] = "BlackBerry Storm 9530"; // first element cellPhones[1] = "LG VX8360"; // second element cellPhones[2] = "Motorola MOTO W755"; // third element Notice: the first array element has the index 0

Declaring and Initializing Arrays (cont) • When we first create an array, we don't have to specify the number of elements • We can then add new elements to the array as necessary, and the array size will change dynamically varcellPhones = new Array(); cellPhones[0] = "BlackBerry Storm 9530"; cellPhones[1] = "LG VX8360";

Declaring and Initializing Arrays (cont) • We can also assign values to an array when the array is created varcellPhones = new Array( "BlackBerry Storm 9530", "LG VX8360", "Motorola MOTO W755");

Declaring and Initializing Arrays (cont) • Basic rule of thumb when creating arrays • Only declare number of array elements if exact number of elements the array will store is known • In JavaScript each element on an array can contain a value with a different data type Example: varmyData = new Array(); myData[0] = "Seth"; // string value myData[1] = 89; // numeric value myData[2] = true; // boolean value

Accessing Element Information • To get or set the value of an array element, we use the array name followed by the element index in brackets • To assign or modify array values: cellPhones[0] = "LG UX5500"; cellPhones[1] = "LG L55C"; • To get array element values: document.write( cellPhones[0] ); document.write( cellPhones[1] ); index

Determining the Number of Elements in an Array • The Array class has a length property that stores the number of elements in an array • Syntax array_name.length; • Example: varshopList = new Array( ); shopList[0] = "eggs"; shopList[1] = "bread"; shopList[2] = "cheese"; shopList[3] = "apple juice"; document.write("shopList array size: " + shopList.length );

Exercise – Web Console • Use Web Console to type the following statements and expressions (one at a time, press Enter after each): varfavCities = new Array(); favCities[0] = "Boston"; favCities[1] = "NYC"; favCities[2] = "Houston"; favCities[0]; "I love going to " + favCities[1] + " and " + favCities[2]; favCities[6] = "San Diego"; favCities; favCities[4] favCities.length;

Array Review #1 • Practice creating and assigning values to an array: • Write a separate statement to perform each action below: • Declare an array named myFriends • Assign a string value of your friends name to the first array element (ex: "Jim Perkins" ) • Assign another friend to the second array element • Assign another friend to the third array element

Array Review #2 • Practice creating and assigning values to an array, and printing the values of an array: • Write a separate statement to perform each action below: • Declare an array called questions • Assign a string value of a question into the first array element (ex: "What is your name?" ) • Assign another question to the second array element • Use the document.write( ) method to output the second array element value • Use the window.alert( ) method to output the first array element value

Making Decisions • All programming languages contain control structures to dictate the control flow of a program • Decision-making control structures enable programs to make decisions, and perform different actions based on the decisions • We will use the if, if-else, switch, while, do while and forstatements to make decisions and modify control flow

if Statements • Used to execute specific programming code if conditional expression evaluates to true • Syntax if (conditional expression) statement; • After the if statement executes: • Any subsequent code executes normally

if Statements (cont) Note the special == equivalence operator var age = 25; if ( age == 25) window.alert("The var age is 25"); // do something else

if...else Statements (cont) • Can use command blocks to specify multiple statements should be executed within if...else statement • Syntax if (conditional expression) { statements; } else{ statements; }

if Statements (cont) • Use a command block to specify multiple statements should be executed if condition evaluates to true • Curly brackets { } identify start and end of command block var age = 25; if ( age == 25) { window.alert("The var age is 25"); window.alert("25 is a good age"; window.alert("25 is the new 18"); } // do something else

If Review • Practice writing an if statement: • Assume the statement: var age = prompt("Enter age:"); • Write an if – else statement to test whether age is >= 16 and output "you are driving age" or "you are NOT driving age"

if...else Statements • Executes one action if the condition is true and a different action if the condition is false • Syntax for an if . . . else statement if (conditional expression) statement; else statement;

if...else Statements (cont) • Example: var today = "Tuesday" if (today == "Monday") document.write("Today is Monday"); else document.write("Today is not Monday");

If – else Review • Practice writing an if – else statement: • Assume the statement: var rating = prompt("Enter rating:"); • Write an if – else statement to test whether rating is <= 50 and output "not good", else if grade is <= 75 output "ok" else output "great job"

Nested if and if...else Statements • We can nest decision-making structures, or place one decision-making statement inside another decision-making statement • Nested if statement • An if statement contained within an if statement or within an if...else statement • Nested if...else statement • An if...else statement contained within an if statement or within an if...else statement

Nested if and if...else Statements (cont) • Example: var salesTotal = prompt("What is the sales total?"); if(salesTotal > 50){ if(salesTotal < 100) { alert("The sales total is between 50 and 100."); } }

switch Statements • Controls program flow by executing a specific set of statements based on the value of an expression • Compares expression value to one or more values contained within case labels

switch Statements (cont) • Syntax switch(expression) { caselabel: statement(s); caselabel: statement(s); . . . default: statement(s); }

switch Statements (cont) • Example: varage= prompt("Please enter age: "); switch( age ) { case 25: alert("25 is a good age"); alert("lots of fun"); case "thirty": alert("Thirty is a good age"); case 40: alert("40 is a great age"); default: alert("that is a good age"); }

switch Statements (cont) • When a switch statement executes: • Value returned by the expression is compared to each case label in the order in which it is encountered • default label • Executes when the value returned by the switch statement expression does not match a case label • break statement • Used to exit a control structure JavaScript, Fifth Edition

switch Statements (cont) functioncity_location(americanCity) { switch (americanCity) { case "Boston": return "Massachusetts"; break; case "Chicago": return "Illinois"; break; case "Los Angeles": return "California"; break; case "New York": return "New York"; break; default: return "United States"; } }

switch Review • Practice writing a switch statement: • Assume the statement: var cheese = prompt(“Enter fav cheese:”); • Use the table below to write a switch statement that displays the message on the right, based on the input:

Repeating Code • We use loop statement to repeatedly execute a statement or a series of statements • While a specific condition is true or until a specific condition becomes true • Three types of loop statements • while statements • do...whilestatements • for statements

while Statements • while statement repeats a statement or series of statements as long as a given conditional expression evaluates to true • Syntax while(conditional expression) { statement(s); } • Each repetition of a looping statement is called an iteration

while Statements (cont’d.) • When using a loop we need a special variable called a counter, to increment (increase) or decrement (decrease) within each loop iteration • Examples: • while statement using an increment operator • while statement using a decrement operator • while statement using the *= assignment operator

while Statements (cont) var x = 1; while ( x <= 5) { document.write( x + " "); ++x; } document.write("You have printed 5 numbers."); Note the special ++ increment operator ++ increment operator adds 1 to the variable

while Statements (cont) var count = 10; while (count > 0) { document.write(count + " "); --count; } document.write("We have liftoff."); Note the special -- decrement operator -- decrement operator subtracts 1 from the variable

while Statements (cont) var count = 1; while (count <= 100) { document.write(count + " "); count *= 2; } Note the special *= multiplication assignment operator count *= 2 is the same as count = count * 2

while Statements (cont) • If we are not careful, we can program in infinite loop, a loop statement that never ends • The loop will never end if the conditional expression never evaluates to false • Example (do NOT try): var count = 1; while (count <= 10) { window.alert("The number is " + count + "."); } What is wrong with the loop?

while Review • Practice writing a while statement: • Write a while statement that displays the numbers 1 through 50

do...while Statements • do...while statement • Executes a statement or statements once • Then repeats the execution as long as a given conditional expression evaluates to true • Syntax • do { • statement(s); • } while (conditional expression);

do...while Statements (cont) • Example: var count = 0; do { document.write("The count is: " + count ); ++count; } while (count < 5);

for Statements • for statement • Repeats a statement or series of statements as long as a given conditional expression evaluates to true • Can also include code that initializes a counter and changes its value with each iteration • Syntax for(counter declaration and initialization; condition; update statement) { statement(s); }

for Statements (cont) • The steps the JavaScript interpreter performs when it encounters a for loop 1. Declare and initialize counter variable 2. Evaluate for loop condition 3. If condition evaluation in Step 2 returns true: • for loop statements executes, Step 4 occurs, and the process starts over again with Step 2 If condition evaluation in Step 2 returns value of false: • for statement ends • Next statement following the for statement executes 4. Perform update statement in the for statement

for Statements (cont’d.) • Example: vardaysOfWeek = new Array(); daysOfWeek[0] = "Monday"; daysOfWeek[1] = "Tuesday"; daysOfWeek[2] = "Wednesday"; daysOfWeek[3] = "Thursday"; daysOfWeek[4] = "Friday"; daysOfWeek[5] = "Saturday"; daysOfWeek[6] = "Sunday"; for (var count = 0; count < daysOfWeek.length; ++count) { document.write(daysOfWeek[count] + " "); }

for Review #1 • Practice working with for statements: • What is output by the following for statement? for (varx = 0; x < 5; ++x) { document.write( x * 5 ); }

for Review #2 • Practice working with for statements: • What is output by the following for statement? for (vary = 9; y > 4; --y) { document.write( y - 5 ); }

Using CONTINUE Statements to Restart Execution • continue statement • Halts a looping statement, and restarts the loop with a new iteration • Used to stop a loop for the current iteration • Examples: • for loop with a continue statement • for loop with a break statement

for Statements (cont) varbrightStars = new Array(); brightStars[0] = "Sirius"; brightStars[1] = "Canopus"; brightStars[2] = "Arcturus"; brightStars[3] = "Rigel"; brightStars[4] = "Vega"; for (var count = 0; count < brightStars.length; ++count) { document.write(brightStars[count] + " "); }

Using CONTINUE Statements to Restart Execution (cont’d.) for (var count = 1; count <= 5; ++count) { if (count == 3) continue; document.write("" + count + ""); }

Arrays and Control Structures