1. Functions

2.  Assignment #2 is now due on Wednesday, Nov 25 th  (No Quiz)  Go over the midterm  Backtrack and re-cover the question about tracing the loop  I've added stuff to the Loops lecture that we'll look at after the midterm  Functions 2

3.  Point total on Midterm was 182, not 150.  You'll notice that your total is listed. If you got X points, you'll see: X / 182 = Y% * 150  FINAL POINTS  Question 8 wasn't as good as I'd hoped  Let's go over that now, and then backtrack to the (newly updated) Lecture #12 on loops 3

4. 4 Basic Functions  NOTE: There are an awful lot of synonyms for "function"  "routine, map […], procedure, […], subroutine, […], subprogram, […], function"  From http://www.synonyms.net/synonym/function:http://www.synonyms.net/synonym/function  Also "Method"

5. Basic_JS_Function.html  The UI (User interface) is pretty straight-forward: when you click on the first button two alert boxes pop up. Clicking the second button pops just one alert.  The HTML is pretty much just boilerplate code 5

6. 6 Basic functions: Basic_JS_Function.html: Named functions function MyNamedFunction () { alert("You clicked on a button, and this\nNAMED\nfunction was run to handle the event!"); } $(document).ready( function () { // note that this is an anonymous function $("#anon").click( function () { // this is another anonymous function alert("You clicked on a button, and this\nANONYMOUS\nfunction was run to handle the event!"); MyNamedFunction(); }); $("#normal").click( MyNamedFunction ); // Note that there are NO ()'s at the end of the name!!! }); Arrow #1: This will define a new function, with the name MyNamedFunction function MyNamedFunction() { = Function = This is how we tell JavaScript that we want to create a new function MyNamedFunction = We chose this name for our function () = These are required { } = These mark the start and end of the function 1

7. 7 Basic functions: Basic_JS_Function.html: Named functions function MyNamedFunction () { alert("You clicked on a button, and this\nNAMED\nfunction was run to handle the event!"); } $(document).ready( function () { // note that this is an anonymous function $("#anon").click( function () { // this is another anonymous function alert("You clicked on a button, and this\nANONYMOUS\nfunction was run to handle the event!"); MyNamedFunction(); }); $("#normal").click( MyNamedFunction ); // Note that there are NO ()'s at the end of the name!!! }); #2: The body of the function goes here. When the function is called the body is executed, and then execution returns to whichever line called the function. If there's more than 1 line then we go from top to bottom In this case it's just a single line: alert 2

8. 8 Basic functions: Basic_JS_Function.html: Named functions function MyNamedFunction () { alert("You clicked on a button, and this\nNAMED\nfunction was run to handle the event!"); } $(document).ready( function () { // note that this is an anonymous function $("#anon").click( function () { // this is another anonymous function alert("You clicked on a button, and this\nANONYMOUS\nfunction was run to handle the event!"); MyNamedFunction (); }); $("#normal").click( MyNamedFunction ); // Note that there are NO ()'s at the end of the name!!! }); #3: This is where we call the function The program should jump from #3 to the definition ( #1 ), execute the body of the function from top to bottom, and then return here to #3 MyNamedFunction (); = We list the name of the function ( MyNamedFunction ) and then MUST include the parentheses ( () ). The semi-colon ( ; ) is optional but normally it is listed. 3 1

9. 9 Basic functions: Basic_JS_Function.html: Named functions function MyNamedFunction() { alert("You clicked on a button, and this\nNAMED\nfunction was run to handle the event!"); } $(document).ready( function () { // note that this is an anonymous function $("#anon").click( function () { // this is another anonymous function alert("You clicked on a button, and this\nANONYMOUS\nfunction was run to handle the event!"); MyNamedFunction(); }); $("#normal").click( MyNamedFunction ); // Note that there are NO ()'s at the end of the name!!! }); #4: This is where we tell jQuery to use the function as the event handler Note that we are NOT calling it here – we're just telling jQuery to use it $("#normal").click( … ); = We set up the jQuery event handler for the button being clicked, like you've seen before MyNamedFunction = name of the function to use. NOTE: We do NOT put parentheses here. We put parentheses next to the function when defining it ( #1) or calling it (#3) 3 1 4

10. 10 Basic functions: Basic_JS_Function.html: ANONYMOUS functions function MyNamedFunction () { alert("You clicked on a button, and this\nNAMED\nfunction was run to handle the event!"); } $(document).ready( function () { // note that this is an anonymous function $("#anon").click( function () { // this is another anonymous function alert("You clicked on a button, and this\nANONYMOUS\nfunction was run to handle the event!"); MyNamedFunction (); } ); $("#normal").click( MyNamedFunction ); // Note that there are NO ()'s at the end of the name!!! }); #5: This is one example of an anonymous function. Note that it's basically the same as the named function except with the name of the function left out (because there is no name of the function). The key part is: function () { … } = Where … is the body of the function 5

11. 11 Basic functions: Basic_JS_Function.html: ANONYMOUS functions function MyNamedFunction () { alert("You clicked on a button, and this\nNAMED\nfunction was run to handle the event!"); } $(document).ready( function () { // note that this is an anonymous function $("#anon").click( function () { // this is another anonymous function alert("You clicked on a button, and this\nANONYMOUS\nfunction was run to handle the event!"); MyNamedFunction (); } ); $("#normal").click( MyNamedFunction ); // Note that there are NO ()'s at the end of the name!!! } ); #6: This is another example of an anonymous function. 5 6 6 5

12. 12 Functions: Local vs. Global Variables  Let's look at Local_Vs_Global_Vars.html

13. 13 Local_Vs_Global_Vars.html // … Stuff left out to make this all fit on the slide w = 1; var x = 1; function Vars(){ var y = 1; if (x == 1) { z = 1; // global on purpose // z is create here, but is ACTUALLY GLOBAL!!! alert("Creating z"); } alert("the current value of w is: " + w + "\nthe current value of x is: " + x + "\nThe current value of y is: " + y + "\nThe current value of z is: " + z); w = w + 1; x = x + 1; y += 1; // same as "y = y + 1"; // similar operators exist for -=, *=, etc alert("AFTER:\nthe current value of w is: " + w + "\nthe current value of x is: " + x + "\nThe current value of y is: " + y + "\nThe current value of z is: " + z); z++; // increases z by one; z-- decreases z by one } 1 2 1.w and x are globals because they're inside the element but OUTSIDE any functions 2.Y is local because it is INSIDE a function Note that we can access global variables (like x) inside the function 3.We just start using the 'z' variable without using the keyword var first. This will create 'z' as a global variable. If we put the "use strict" at the top the browser would flag this as an error 4.Note that we change both the w and x global variables and the y local variable. When we click the button again you'll see that the globals have kept their value from last time, while the local variable gets reset. 3 4

14. 14 Functions: Parameters and Return Values

15. Params_Return_Values.html  The page uses a straightforward AddTwoNumbers function which takes two numbers, adds them together, and returns the result to the event handler  The function provides no error handling, etc, whatsoever. 15

16. 16 Params_Return_Values.html: Parameters and return values The HTML is pretty straightforward We'll first look at the event handler… …then look at the new function

17. 17 Params_Return_Values.html: Parameters and return values $(document).ready( function() { $("#functionDemo").click( function() { // var smaller = parseFloat( $("#num1").val() ); // var larger = parseFloat( $("#num2").val() ); var smaller = Number( $("#num1").val() ); var larger = Number( $("#num2").val() ); #1: Notice that we're setting up anonymous functions to react to the document being ready, and to handle the button click #2: $("#num1").val() = We're going to get whatever the user typed into the textbox Number() = then convert that to a number. This has the same effect as parseFloat var smaller = = then assign that to a newly created variable 1 2

18. 18 Params_Return_Values.html: Parameters and return values … var result; if( isNaN(smaller) || isNaN(larger) ) { result = "Error! Either " + smaller + " or " + larger + " is not a number (or both aren't!)"; } else { //result = smaller + larger; result = AddTwoNumbers( smaller, larger ); } #3: If the user didn't give us valid input then provide an error message: var result; = Create a new variable named result isNaN(smaller) || isNaN(larger) = check if either one (or both) aren't numbers if(…) { result = "Error! Either " + smaller + " or " + larger + " is not a number (or both aren't!)"; } = If either isn't a number then build up that error message to use as our result #4: Otherwise call the function AddTwoNumbers( … ) = Call the function smaller, larger = send smaller and larger into the function, so that the function can use it result = = Whatever the function returns, assign that to the result variable 3 4

19. 19 Params_Return_Values.html: Parameters and return values … var output = ""; output += "Output starts here: "; output += result + " "; output += "That's all, folks!"; $("#output").html( output ); }); #5: Use the 'accumulator' pattern to build up the output string #6: Display the output string on the web page Next, let's look at the function itself 5 6

20. 20 Params_Return_Values.html: Parameters and return values function AddTwoNumbers( numA, numB ) { // Note that because this "result" is local to this function // it is a DIFFERENT variable that the "result" used in the // "click" function, below // alert( numB ); var result = numA + numB; return result; // could be done more compactly as: // return numA + numB; } #7: This is mostly the same as the prior 'named function' example. What's new is that this one has parameters function AddTwoNumbers( numA, numB ) { = Whatever's listed first on the calling side is refered to as numA here, whatever's listed second is listed at numb #8: Add the two numbers together, and store them into a local variable named result Note that this is completely separate from the variable named "result" in the event handler #9: This tells JS which value to return from the function 7 8 9

21.  Work on Exercise #1 for this part of this lecture 21

22. 22 Functions: Using the accumulator pattern  Let's look at Functions_Accumulator.html

23.  Work on Exercise #2 for this part of this lecture 23

24. 24 Functions: Using Functions In The Branching Adventure  First we'll look at one version of this, then you'll modify a slightly different one

25.  Work on Exercise #3 for this part of this lecture 25