Programming Control Structures with JavaScript (Part 2) MIS Konstantin Bauman. Department of MIS Fox School of Business Temple University

Transcription

1 Programming Control Structures with JavaScript (Part 2) MIS 2402 Konstantin Bauman Department of MIS Fox School of Business Temple University

2 Exam 1 Date: 10/02/18 two weeks from now JavaScript: Conditional Statements, Arrays, Loops, Objects, Functions, Events 1 hour 20 minutes Use class workstations You can use Google Preparations: Read Book Do exercises and challenges

3 Let s talk about Chapter 3 What are the three kinds of loops described in chapter 3? What is a loop good for? What are some physical things could you represent with an array? 3

4 Agenda Syntax for writing loops in JavaScript The while loop The do while loop The for loop Introduction to arrays 4

5 The syntax of a while loop while ( condition ) { statements; A while loop that adds the numbers from 1 through 5 var sumofnumbers = 0; var numberofloops = 5; var counter = 1; while (counter <= numberofloops) { sumofnumbers += counter; // adds counter // to sumofnumbers // adds 1 to counter counter++; alert(sumofnumbers); // displays 15 5

6 The syntax of a while loop A while loop that adds the numbers from 1 through 5 var sumofnumbers = 0; var numberofloops = 5; var counter = 1; while (counter <= numberofloops) { sumofnumbers += counter; // adds counter // to sumofnumbers // adds 1 to counter counter++; alert(sumofnumbers); // displays 15 Another way of doing the calculations sumofnumbers = sumofnumbers + counter; counter = counter + 1; // add one to counter 6

7 The syntax of a do-while loop do { statements; while ( condition ); A do-while loop that adds the numbers from 1 through 5 var sumofnumbers = 0; var numberofloops = 5; var counter = 1; do { sumofnumbers += counter; // adds counter // to sumofnumbers // adds 1 to counter counter++; while (counter <= numberofloops); alert(sumofnumbers); // displays 15 7

8 Another do-while loop example do { var investment = prompt("enter investment amount as xxxxx.xx", 10000); investment = parsefloat(investment); if ( isnan(investment) ) { alert("investment must be a number"); while ( isnan(investment) ); DISCUSS what, in your own words, is this code saying? If you wanted to describe these 9 lines of code with a comment, what would the comment be? 8

9 The syntax of a for loop for (counter initialization; condition; increment expression ) { statements; A for loop that adds the numbers from 1 through 5 var sumofnumbers = 0; var numberofloops = 5; for (var counter=1; counter<=numberofloops; counter++ ) { sumofnumbers += counter; alert(sumofnumbers); 9

10 Another example of a for loop var investment = 10000; var annualrate = 7.0; var years = 10; var futurevalue = investment; for ( var i = 1; i <= years; i++ ) { futurevalue += futurevalue * annualrate / 100; alert (futurevalue); // displays Other ways that the future value calculation could be coded futurevalue = futurevalue + (futurevalue * annualrate / 100); futurevalue = futurevalue * (1 + (annualrate / 100)) Let s see some loops at work! (see rocket.zip) 10

11 What is an array? An array is a data type that can contain one or more items called elements. Each element stores a value that you can refer to with an index. The length of the array indicates the number of elements that it contains. In short, an array is a structure that allows us to store multiple pieces of similar data.

12 The syntax for creating an array Two ways to create an array in JavaScript Using the new keyword with the Array object name var arrayname = new Array(length); Using an array literal var arrayname = []; Example: a statement that creates an array var totals = []; 12

13 How to add values to an array totals[0] = ; totals[1] = ; totals[2] = 411; This number, inside the square brackets, is the index to the array. It indicates what piece of the array we are going to add a value to. QUESTION: What is the index of the first value in the above array? Careful! JavaScript arrays are zero-based and that is often a source of trouble for first-time coders. Now that the totals array exist, and some values have been assigned to it, I can use totals[2], totals[1] and totals[0] like any other primitive variable. 13

14 How big is the array? JavaScript arrays have a length property arrayname.length QUESTION: Using the totals array from the last slide, what number would this command display? alert(totals.length); A statement that gets the length of an array var count = totals.length; //put the size of the array //in a variable named count How to add a value to the end of an array totals[totals.length] = ; 14

15 Putting arrays to work Put numbers 1 through 10 into an array var numbers = []; for (var i = 0; i < 10; i++) { numbers[i] = i + 1; Code that displays the numbers in the array var numbersstring = ""; for (var i = 0; i < numbers.length; i++) { numbersstring += numbers[i] + " "; alert (numbersstring); The message that s displayed 15

16 Putting arrays to work(2) Code that puts four values into an array var totals = []; totals[0] = ; totals[1] = ; totals[2] = 411; totals[3] = ; Code that sums the values in the array var sum = 0; for (var i = 0; i < totals.length; i++) { sum += totals[i]; // what s next? QUESTION: Using the JavaScript covered in this lecture, what one line of code here could you add after what s next that would alert the user and display the average of totals? 16

17 Code that displays the totals and the sum // assuming that totals array already exists var totalsstring = ""; for (var i = 0; i < totals.length; i++) { totalsstring += totals[i] + "\n"; alert ("The totals are:\n" + totalsstring + "\n" + "Sum: " + sum); The message that s displayed 17

18 Next time Next time we meet we will work through exercises 3-1 and 3-2 in your textbook. We ll get more practice with loops and arrays! 18