1. BIT116: Scripting
Functions

2. 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

3. From Bing.com on Nov

4. 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

5. Arrays – Patterns: 1 Item At A Time

6. 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

7. 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).

8. (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

9. (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

10. Let’s try finding something that’s absent

11. 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

12. 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

13. 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

14. 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

15. Let’s try finding something that’s present

16. 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

17. 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

18. 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

19. 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

20. 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)

21. (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

22. (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

23. Let’s try finding the minimum

24. 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

25. 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

26. 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

27. 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

28. 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

29. 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

30. 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

31. 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

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