BIT116: Scripting Functions

Upcoming Next Monday, December 11th, 2016: FINAL EXAM!!! Next class (Wednesday): Exam Prep, Material Review Next Monday, December 11th, 2016: FINAL EXAM!!! Final Class (Wednesday – Dec 14th) : AngularJS and/or BIT 142 jump-start and/or Advice/discussion about how to navigate four-year colleges to get a technology-related degree

From Bing.com on Nov 28. 2017

Array Patterns We’re going to look at some common patterns / algorithms for using an array The idea is that you first understand these Then you can apply them elsewhere And modify them to suit

Arrays – Patterns: 1 Item At A Time

Array Pattern: 1-at-a-time Some array problems can be solved by considering each item, one by one, without thinking about the rest of the array Examples: Print each item Find a particular item in the array (or determine that it's not present) This uses the 'iterate through the array’ pattern Let’s start with an overview of what each line of code is supposed to do

Here's what the 'main' / on click handler looks like for the ‘FindInArray’ logic: $("#findInArray").click( function() { (1) var cars = ["Saab", "Volvo", "BMW"]; (2) var target = $("#findTarget").val(); // Now convert the array to being a string so we can print it out onto the page: for (i in cars) { if( cars[i] == target) { $("#findOutput").html( "Found " + target + " at array slot " + i ); return; // stop searching, otherwise we'll print the 'not found' message // after the loop } $("#findOutput").html( "Did NOT find " + target + " in the array"); }); Start by defining an array (1), then get the string the user wants to search for (2).

(1) The for loop walks through all the indeces in the array (0, 1, 2) Here's what the 'main' / on click handler looks like for the ‘FindInArray’ logic: $("#findInArray").click( function() { var cars = ["Saab", "Volvo", "BMW"]; var target = $("#findTarget").val(); // Now convert the array to being a string so we can print it out onto the page: (1) for (i in cars) { (2) if( cars[i] == target) { (3) $("#findOutput").html( "Found " + target + " at array slot " + i ); (4) return; // stop searching, otherwise we'll print the 'not found' message // after the loop } $("#findOutput").html( "Did NOT find " + target + " in the array"); }); (1) The for loop walks through all the indeces in the array (0, 1, 2) (2) If the current slot is the one that we’re looking for (3) Display a message on the page (4) And then stop

(1) If none of the elements match then we’ll end up here Here's what the 'main' / on click handler looks like for the ‘FindInArray’ logic: $("#findInArray").click( function() { var cars = ["Saab", "Volvo", "BMW"]; var target = $("#findTarget").val(); // Now convert the array to being a string so we can print it out onto the page: for (i in cars) { if( cars[i] == target) { $("#findOutput").html( "Found " + target + " at array slot " + i ); return; // stop searching, otherwise we'll print the 'not found' message // after the loop } (1) $("#findOutput").html( "Did NOT find " + target + " in the array"); }); (1) If none of the elements match then we’ll end up here

Let’s try finding something that’s absent

i cars[i] “Saab” target “absent” 1 2 Here's what the 'main' / on click handler looks like for the ‘FindInArray’ logic: $("#findInArray").click( function() { var cars = ["Saab", "Volvo", "BMW"]; (1) var target = $("#findTarget").val(); (2) // Now convert the array to being a string so we can print it out onto the page: for (i in cars) { if( cars[i] == target) { $("#findOutput").html( "Found " + target + " at array slot " + i ); return; // stop searching, otherwise we'll print the 'not found' message } $("#findOutput").html( "Did NOT find " + target + " in the array"); }); i cars[i] “Saab” target “absent” Done Current Future “Saab” “Volvo” “BMW” 1 2

i 1 cars[i] “Volvo” target “absent” 1 2 Here's what the 'main' / on click handler looks like for the ‘FindInArray’ logic: $("#findInArray").click( function() { var cars = ["Saab", "Volvo", "BMW"]; (1) var target = $("#findTarget").val(); (2) // Now convert the array to being a string so we can print it out onto the page: for (i in cars) { if( cars[i] == target) { $("#findOutput").html( "Found " + target + " at array slot " + i ); return; // stop searching, otherwise we'll print the 'not found' message } $("#findOutput").html( "Did NOT find " + target + " in the array"); }); i 1 cars[i] “Volvo” target “absent” Done Current Future “Saab” “Volvo” “BMW” 1 2

i 2 cars[i] “BMW” target “absent” 1 2 Here's what the 'main' / on click handler looks like for the ‘FindInArray’ logic: $("#findInArray").click( function() { var cars = ["Saab", "Volvo", "BMW"]; (1) var target = $("#findTarget").val(); (2) // Now convert the array to being a string so we can print it out onto the page: for (i in cars) { if( cars[i] == target) { $("#findOutput").html( "Found " + target + " at array slot " + i ); return; // stop searching, otherwise we'll print the 'not found' message } $("#findOutput").html( "Did NOT find " + target + " in the array"); }); i 2 cars[i] “BMW” target “absent” Done Current Future “Saab” “Volvo” “BMW” 1 2

i - cars[i] target “absent” 1 2 Here's what the 'main' / on click handler looks like for the ‘FindInArray’ logic: $("#findInArray").click( function() { var cars = ["Saab", "Volvo", "BMW"]; (1) var target = $("#findTarget").val(); (2) // Now convert the array to being a string so we can print it out onto the page: for (i in cars) { if( cars[i] == target) { $("#findOutput").html( "Found " + target + " at array slot " + i ); return; // stop searching, otherwise we'll print the 'not found' message }   $("#findOutput").html( "Did NOT find " + target + " in the array"); }); i - cars[i] target “absent” Done “Saab” “Volvo” “BMW” 1 2

Let’s try finding something that’s present

i cars[i] “Saab” target “Volvo” 1 2 Here's what the 'main' / on click handler looks like for the ‘FindInArray’ logic: $("#findInArray").click( function() { var cars = ["Saab", "Volvo", "BMW"]; (1) var target = $("#findTarget").val(); (2) // Now convert the array to being a string so we can print it out onto the page: for (i in cars) { if( cars[i] == target) { $("#findOutput").html( "Found " + target + " at array slot " + i ); return; // stop searching, otherwise we'll print the 'not found' message } $("#findOutput").html( "Did NOT find " + target + " in the array"); }); i cars[i] “Saab” target “Volvo” Done Current Future “Saab” “Volvo” “BMW” 1 2

i 1 cars[i] “Volvo” target 1 2 Here's what the 'main' / on click handler looks like for the ‘FindInArray’ logic: $("#findInArray").click( function() { var cars = ["Saab", "Volvo", "BMW"]; (1) var target = $("#findTarget").val(); (2) // Now convert the array to being a string so we can print it out onto the page: for (i in cars) { if( cars[i] == target) { $("#findOutput").html( "Found " + target + " at array slot " + i ); return; // stop searching, otherwise we'll print the 'not found' message } $("#findOutput").html( "Did NOT find " + target + " in the array"); }); i 1 cars[i] “Volvo” target Done Current Future “Saab” “Volvo” “BMW” 1 2

Do In-Class Exercises ICE #1: Parsons’ problems: Finding something in an array ICE #2: Use this pattern to write new code – printing everything in an array that matches a given criteria

Pattern: Accumulate state Some array problems need to consider all the elements of the array, even though we see each one individually Examples: Find min/max calculate average concatenating / joining

Start by defining an array (1) Here's what the 'main' / on click handler looks like for the ‘FindInArray’ logic: $("#findMinimum").click( function() { (1) var nums = [10, 20, 2, -4, -2, 4] (2) var minimumIdx = 0; (3) var minimumVal = nums[0]; // check each element of the array to see if it's what we're looking for for (i in nums) { if( nums[i] < minimumVal) { minimumIdx = i; minimumVal = nums[i]; } $("#findMinimumOutput").html( "Smallest value is " + nums[minimumIdx]+ " (located at slot " + minimumIdx + " in the array)"); }); Start by defining an array (1) We’re going to look at the very first element first. Having only looked at the first element that means it must be the smallest that we’ve seen so far. We’re going to remember the smallest that we’ve seen so far is at index 1 (2) We’re going to remember the smallest value that we’ve seen so far (3)

(1) We’ll go through every slot in the array Here's what the 'main' / on click handler looks like for the ‘FindInArray’ logic: $("#findMinimum").click( function() { var nums = [10, 20, 2, -4, -2, 4] var minimumIdx = 0; var minimumVal = nums[0]; // check each element of the array to see if it's what we're looking for (1) for (i in nums) { (2) if( nums[i] < minimumVal) { (3) minimumIdx = i; (4) minimumVal = nums[i]; } $("#findMinimumOutput").html( "Smallest value is " + nums[minimumIdx]+ " (located at slot " + minimumIdx + " in the array)"); }); (1) We’ll go through every slot in the array (2) If the slot we’re currently looking at is less than the smallest value that we’ve seen so far (3) Then remember this index (4) And remember this value, which is now the NEW smallest value that we’ve seen so far

(1) Lastly, display the output on the page Here's what the 'main' / on click handler looks like for the ‘FindInArray’ logic: $("#findMinimum").click( function() { var nums = [10, 20, 2, -4, -2, 4] var minimumIdx = 0; var minimumVal = nums[0]; // check each element of the array to see if it's what we're looking for for (i in nums) { if( nums[i] < minimumVal) { minimumIdx = i; minimumVal = nums[i]; } (1) $("#findMinimumOutput").html( "Smallest value is " + nums[minimumIdx]+ " (located at slot " + minimumIdx + " in the array)"); }); (1) Lastly, display the output on the page

Let’s try finding the minimum

10 i 1 3 4 D o n e Current Future 10 20 2 -4 -2 Here's what the 'main' / on click handler looks like for the ‘findMinimum’ logic: $("#findMinimum").click( function() { var nums = [10, 20, 2, -4, -2] var minimumIdx = 0; var minimumVal = nums[0]; for (i in nums) { if( nums[i] < minimumVal) { minimumIdx = i; minimumVal = nums[i]; } $("#findMinimumOutput").html( "Smallest value is " + nums[minimumIdx]+ " (located at slot " + minimumIdx + " in the array)"); }); minimumIdx minimumVal 10 i D o n e Current Future 10 20 1 2 -4 3 -2 4

False 10 i 1 3 4 D o n e Current Future 10 20 2 -4 -2 Here's what the 'main' / on click handler looks like for the ‘findMinimum’ logic: $("#findMinimum").click( function() { var nums = [10, 20, 2, -4, -2] var minimumIdx = 0; var minimumVal = nums[0]; for (i in nums) { if( nums[i] < minimumVal) { minimumIdx = i; minimumVal = nums[i]; } $("#findMinimumOutput").html( "Smallest value is " + nums[minimumIdx]+ " (located at slot " + minimumIdx + " in the array)"); }); minimumIdx minimumVal 10 i False D o n e Current Future 10 20 1 2 -4 3 -2 4

False 10 i 1 1 3 4 Done Current Future 10 20 2 -4 -2 Here's what the 'main' / on click handler looks like for the ‘findMinimum’ logic: $("#findMinimum").click( function() { var nums = [10, 20, 2, -4, -2] var minimumIdx = 0; var minimumVal = nums[0]; for (i in nums) { if( nums[i] < minimumVal) { minimumIdx = i; minimumVal = nums[i]; } $("#findMinimumOutput").html( "Smallest value is " + nums[minimumIdx]+ " (located at slot " + minimumIdx + " in the array)"); }); minimumIdx minimumVal 10 i 1 False Done Current Future 10 20 1 2 -4 3 -2 4

True 10 i 2 1 3 4 Done Current Future 10 20 2 -4 -2 Here's what the 'main' / on click handler looks like for the ‘findMinimum’ logic: $("#findMinimum").click( function() { var nums = [10, 20, 2, -4, -2] var minimumIdx = 0; var minimumVal = nums[0]; for (i in nums) { if( nums[i] < minimumVal) { minimumIdx = i; minimumVal = nums[i]; } $("#findMinimumOutput").html( "Smallest value is " + nums[minimumIdx]+ " (located at slot " + minimumIdx + " in the array)"); }); minimumIdx minimumVal 10 i 2 True Done Current Future 10 20 1 2 -4 3 -2 4

2 i 1 3 4 Done Current Future 10 20 2 -4 -2 Here's what the 'main' / on click handler looks like for the ‘findMinimum’ logic: $("#findMinimum").click( function() { var nums = [10, 20, 2, -4, -2] var minimumIdx = 0; var minimumVal = nums[0]; for (i in nums) { if( nums[i] < minimumVal) { minimumIdx = i; minimumVal = nums[i]; } $("#findMinimumOutput").html( "Smallest value is " + nums[minimumIdx]+ " (located at slot " + minimumIdx + " in the array)"); }); minimumIdx 2 minimumVal i Done Current Future 10 20 1 2 -4 3 -2 4

True 2 i 3 1 3 4 Done Current Future 10 20 2 -4 -2 Here's what the 'main' / on click handler looks like for the ‘findMinimum’ logic: $("#findMinimum").click( function() { var nums = [10, 20, 2, -4, -2] var minimumIdx = 0; var minimumVal = nums[0]; for (i in nums) { if( nums[i] < minimumVal) { minimumIdx = i; minimumVal = nums[i]; } $("#findMinimumOutput").html( "Smallest value is " + nums[minimumIdx]+ " (located at slot " + minimumIdx + " in the array)"); }); minimumIdx 2 minimumVal i 3 True Done Current Future 10 20 1 2 -4 3 -2 4

3 -4 i 1 3 4 Done Current Future 10 20 2 -4 -2 Here's what the 'main' / on click handler looks like for the ‘findMinimum’ logic: $("#findMinimum").click( function() { var nums = [10, 20, 2, -4, -2] var minimumIdx = 0; var minimumVal = nums[0]; for (i in nums) { if( nums[i] < minimumVal) { minimumIdx = i; minimumVal = nums[i]; } $("#findMinimumOutput").html( "Smallest value is " + nums[minimumIdx]+ " (located at slot " + minimumIdx + " in the array)"); }); minimumIdx 3 minimumVal -4 i Done Current Future 10 20 1 2 -4 3 -2 4

False 3 -4 i 4 1 3 4 Done Current Future 10 20 2 -4 -2 Here's what the 'main' / on click handler looks like for the ‘findMinimum’ logic: $("#findMinimum").click( function() { var nums = [10, 20, 2, -4, -2] var minimumIdx = 0; var minimumVal = nums[0]; for (i in nums) { if( nums[i] < minimumVal) { minimumIdx = i; minimumVal = nums[i]; } $("#findMinimumOutput").html( "Smallest value is " + nums[minimumIdx]+ " (located at slot " + minimumIdx + " in the array)"); }); minimumIdx 3 minimumVal -4 i 4 False Done Current Future 10 20 1 2 -4 3 -2 4

Do In-Class Exercises ICE #3: More Parsons’ problems ICE #4: Use this pattern to write new code