Introduction to Programming (in JavaScript)

1. Introduction to Programming(in JavaScript) David Stotts Computer Science Department UNC Chapel Hill

2. The Big Six(6) Data Abstraction 0. data (types, simple information) 1. data storage (variables, assignment) 2. data retrieval (expressions, evaluation) 3. repetition (loops) 4. decision making (conditionals) 5. procedure abstraction (functions) 6. data abstraction (arrays) 7. objects: all-the-above, wrapped up

14. Capsule Hotel

18. Pigeonhole Principle “Musical chairs”

19. Start with “linear” Collections

20. Good Mental Model for Now

21. Data Abstraction Arrays • Sometimes we need to access a collection of data values as a group, or systematically • We create a name for the entire collection (this is the abstraction) • We access items in the collection by number (called an index ) along with the name • Call this collection an Array

22. 4 Seasons Bora Bora Hut #2 “The Smiths want some papaya juice” “Go to Hut #2 and toss in some papaya juice”

23. Arrays Think of an array as a contiguous set of memory slots with one name for the whole var bbHuts = new Array( ); 0 1 Smith 2 bbHuts 3 4 Each slot can hold a data value Each slot sort of like a variable . . . n

24. Assigning to an Array k 5 3 4 6 Jackson var bbHuts = new Array( ); var k = 3 ; bbHuts[0] = “Jackson” ; bbHuts[1] = “Miller” ; bbHuts[2] = “Smith” ; bbHuts[ k ] = “Olafdottir” ; k++ ; // increments k bbHuts[ k ] = “Evans” ; k++ ; bbHuts[ k++ ] = “Xerxes” ; bbHuts[ k] = “Wilson” ; 0 Miller 1 Smith 2 Olafdottir 3 Evans 4 Xerxes 5 Wilson 6 7 . . . bbHuts

25. Using Array Values Wilson tmp k 5 3 4 6 Jackson alert( bbHuts[ k ] ) ; // prints “Wilson” bbHuts[ k+1 ] = bbHuts[ 2 ] + “-Jones” ; // does not change k // k+1 is NOT k++ if (bbHuts[ k-1 ] > bbHuts[ k ] ) { // a swap var tmp = bbHuts[ k ] ; bbHuts[ k ] = bbHuts[ k-1 ] ; bbHuts[ k-1 ] = tmp ; } 0 Miller 1 Smith 2 Olafdottir 3 Evans 4 Wilson Xerxes 5 Xerxes Wilson 6 Smith-Jones 7 . . . bbHuts

26. Arrays: Initializing, Indexing var x = 4; // arrays can be initialized similarly var colors = [ “red”, ”blue”, ”green”, ”yellow”, “orange”, “purple”, “rose”, “umber”, “mauve”, “chartreuse” ]; alert(colors[1]); // prints blue alert(colors.length); // prints 10, indexes go 0 to 9 alert(colors.indexOf(“rose”); // prints 6

27. Arrays: Initializing, Indexing var words = [ ] ; // common alternative to new Array( ); var songs = new Array(n) ; // alternative also, says make songs have n slots // doesn’t do much, but other languages do this // JS arrays grow longer as needed words[143] = “splendiferous” ; alert(words[0]) ; // prints undefined alert(words[142]) ; // prints undefined alert(words[-1]) ; // prints undefined alert(words.length) ; // prints 144

28. Arrays Organize Data • Can store data related to some common conceptin one array, and then get at the component values systematically • for loop is commonly used to get to all array elements one-at-a-time • Example: keep all student names in one array, so the array represents the entire course • Example: keep all student grades in an array, so the array represents the entire course

29. a “student”, student 2 Common Index grades names Jackson 99.1 0 0 86.3 Miller 1 1 74.1 2 Smith 2 2 2 Olafdottir 91.7 3 3 Evans 56.9 4 4 Xerxes 83.7 5 5 Wilson 71.2 k = 2; // grades[k] and names[k] // select all the information // about person k 6 6 89.8 Smith-Jones 7 7

30. Example: Course of Students function myProg ( ) { size = Number(prompt(“how many students?”)); var students = new Array( size ); for (var sn=0; sn<size; sn++) { students[ sn ] = prompt(“student name?”); } var grades = new Array(size); for (var i=0; i<size; i++) { grades[i] = getGoodGrade( ); // data validation in the function } for (var k=0; k<size; k++) { alert(student[k ] + “ has grade “ + grades[ k ]); } }

31. Example: Course of Students function getGoodGrade ( ) { // get a grade and return it after validation var num; num= Number(prompt(“what is the grade?”)); // now validate the input while ( num < 0 || num > 100) { alert(“grade must be between 0 and 100”); num = Number(prompt(“what is the grade?”)); } return num ; }

32. Course of Students • Now compute the average grade from the stored array of grades • Then go through the array of grades and find the largest grade • Also print the name of the student who had the highest grade