Java Script Arrays Loops and Conditional Statements Tutorial

Java. Script Arrays, Loops and Conditional Statements Tutorial 12

Sec. 12. 1 Creating an array Populating an array Storing and retrieving values from an array Array methods 2

Creating an Array An array is a collection of data organized under a single name Each individual data value (element) is identified by an index. The index is enclosed in brackets [] To create an array: var array = new Array(length); Creates an array named month. Name with 12 elements. month. Name[0] would be the first element Specifying a length is optional, but should be done if the length is known. 3 300_pg-673 -array-intro. htm Creates an array without specifying a length, and then

Creating and populating an array at the same time var array-name = new Array (values); Creates an array named month. Name and populates it with 12 values. The length of the array will be 12. The index numbers will be 0 -11. var array-name = [values]; 4 This technique is called an “Array literal, ” it creates and 305_pg-674 -array-populate. htm populates an array without using the keywords “new Array”

Specifying Array Length To add more items to an array, run the command: array[i] = value; Where i is an element number: 0, 1, 2 etc. To determine the size of an array, use the property: array. length To remove items from an array, run the command: array. length = value; 310_pg-675 -array-length. htm 5

Array Length The size of an array is found in the array’s “length” property: array. length This statement creates an array with length = 4. The elements are indexed 0 -3. 6 This statement adds 2 more elements to the web. Students array but elements [4] and [5] contain Null until they are populated with

Array Length A common use of the length attribute is to determine how many times a loop should be performed. For instance, if we have an array of cities and we want to create a table heading for each city: var cities = new Array("New York", "Paris", "London"); for (i = 0; i < cities. length; i++) { document. write("<th>" + cities[i] + "</th>"); } This loop uses the length property of the cities array to determine when to end the loop. 315_use-length-to-loop. htm We will look at the for loop in more detail in the next 7

Using Array Methods 8

Slice We can create a subarray by extracting elements from one array using the slice or splice methods. Slice is like a copy, Splice is like a cut but the parameters work differently) array. slice(start, stop) Where start is the index of the array item at which slicing starts, and stop is the index of the array item before where slicing ends. Assume an array named: month. Name that contains the name of 9 the 12 months and assume that we want to extract just the summer months: June, July, August summer. Months = month. Name. slice(5, 8); This will start extracting at the 5 th element (zero relative) which is June and stop at the 7 th element, August (one less than the

Splice We can create a subarray by extracting elements from one array using the slice or splice methods Slice is like a copy, Splice is like a cut but the parameters work differently) array. splice(start, stop) Where start is the index of the array item at which slicing starts, and stop is the number of items to be cut Assume an array named: month. Name that contains the name of 10 the 12 months and assume that we want to extract just the summer months: June, July, August summer. Months = month. Name. splice(5, 8); This will start extracting at the 5 th element (zero relative) which is June and cut out 8 elements, if there are not enough elements to cut, splice will cut out as many as it can in this case Jun - Dec 320_pg-681 -slice-array. htm

Scroll We don’t get to the DOM (Document Object Module) until Tutorial 13, but I wanted to cover one technique using slice that will allow you to create a scroll in the status bar. The DOM will allow you to access all parts of a window. You’ve already used the DOM when you use document. write “document” is one object in the DOM, so we are saying: “write to the DOM object called document. ” The active window is another part of the DOM, as is the Status bar in the active window. We can change what the status bar says with the following: window. status=("message"); 321_message-in-status-bar. htm Taking it one step further, we can cause the message to scroll using the slice method. 11 322_scroll-message-in-status-bar. htm

Sec. 12. 2 for loops while loops Loop through the contents of an array if, if. . . else, and multiple conditional statements 12

Program Loops - Overview A program loop is a set of commands that is executed repeatedly until a stopping condition has been met There are several different kinds of loops in any programming language. While some kinds of loops are somewhat better suited for a certain kind of task, for the most part the type of looping construct you choose is a matter of personal preference. A counter variable may be used to track the number of 13 times a set of commands is run. The collection of commands that is run each time through a loop is collectively known as a command block. The block is designated with the curly braces: {……. . } Loops are designed for situations where the commands

for Loops To create a for loop, use the syntax: for (start; continue; command block update) { } Historically, the variable i has been used in looping. This is not a requirement, just a convention that dates back to very early programming languages when it was a requirement. Remember, the first element in an array is number 14 325_pg-685 -for-loop. htm 0.

for Loops for loops are often used to cycle through the different values contained within an array day. Name. length=7. loop executes 7 times 0, 1, 2, 3, 4, 5, 6 326_pg-685 -for-loop 2. htm 15

for Loops - Nested It’s not unusual to have more than one loop running at once. In which case we often nest the loops, one inside of the other. For instance, what if you wanted to create a table that had four columns and three rows You would start an outer loop that went from 1 to 3 Nested would be an inner loop going from 1 to 4 327_pg-687 -for-loops-nested. htm 16

while Loops A while loop does not depend on the value of a counter variable; it runs as long as a specific condition is met. To create a while loop, use the following syntax: while (continue-test) { command block } Your choice of what kind of loop you use is to 17 some degree a matter of personal preference. For instance, we could use a while loop to add all the numbers between 1 and 1000 as we did with the 330_pg-689 -while-loops. htm for loop

Conditional Statements A conditional statement is a statement that runs a command or command block only when certain circumstances are met. Here we will determine if a year is a leap year or not. Conditional statements are well suited where the test 18 condition is more complex than something like “x < 10” or where the command block only needs to

if Statements To test a single condition, use the construction: if (condition) { commands Curly braces mark the beginning and end of the command block } Where condition is in the format: Expression operator expression Where operator is: < <= == > >= Note that the equal test requires two equal signs since one equal sign is the assignment statement 19 332_pg-690 -if-loop. htm

if Statements To test a single condition, use the construction: if (condition) { commands } 20 Where the statement is one-line and simple, curly braces may be omitted.

if … else Statements To test between two conditions, use the following construction: if (condition) { commands if condition is true } else { commands if otherwise } A more pedestrian example: 335_pg-695 -if-else. htm 21

Working with Conditional Statements To test multiple conditions, use the construction: if (condition 1) { first command block } else if (condition 2) { second command block } else if (condition 3) { third command block } else { default command block } 340_pg-696 -if-else-if. htm 22

switch Statement To create a Switch statement to test for different values of an expression, use the structure: switch (expression) { case label 1: commands 1 break; case label 2: commands 2 break; case label 3: commands 3 break; . . . default: default commands } 345_pg-697 -case-switch 23 If credit. Type==0 If credit. Type==1 etc. . .

Sec. 12. 3 Using a program loop to create a table The break command The continue command 24

break; The break command terminates any program loop. For instance, if searching for a particular item in an array, there’s no point to continuing the search once the item is found. The syntax for the break command is: 25 break; var student. Id = new Array(123, 234, 345, 456, 457, 678, 789); for (i = 0; i < student. Id. length; i++) { if (student. Id[i] == 345) { document. write(" Found student: 345 - stop processing"); break; // stop processing the for loop } else { document. write(" Found student: " + student. Id[i] ); document. write("Continue looping until 345 is found"); 350_pg-709 -break. htm } } // on break control is transferred to this statement.

continue; The continue command stops processing the commands in the current iteration of the loop and jumps to the next iteration. Sometimes instead of stopping the loop with break, you just want to bypass processing of a particular element in the array. In this case you use the continue command var student. Id = new Array; student. Id[0] = 123; student. Id[1] = 234; // We have not set element 2, so it is null student. Id[3] = 456; student. Id[4] = 567; student. Id[5] = 678; for (i = 0; i < student. Id. length; i++) { if (student. Id[i] == null) continue; // bypass this iteration of loop - continue with next element document. write(" Found student: " + student. Id[i] ); document. write("Continue processing"); } 26 350_pg-709 -break. htm

The End 27