NOTE: There are an awful lot of synonyms for "function" "routine, map [ ], procedure, [ ], subroutine, [ ], subprogram, [ ], function"

Size: px

Start display at page:

Download "NOTE: There are an awful lot of synonyms for "function" "routine, map [ ], procedure, [ ], subroutine, [ ], subprogram, [ ], function""

Nicholas Hunter
5 years ago
Views:

1 Functions

2 Basic Functions NOTE: There are an awful lot of synonyms for "function" "routine, map [ ], procedure, [ ], subroutine, [ ], subprogram, [ ], function" From Also "Method Method and function are not precise synonyms. Methods operate on data contained in a class; functions receive and return data. 2

3 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 3

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

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

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

7 1 3 4 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) 7

8 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!"); } 5 $(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 8

9 5 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(); 5 $("#normal").click( MyNamedFunction ); // Note that there are NO ()'s at the end of the name!!! 6 6 #6: This is another example of an anonymous function. 9

10 Work on Exercise #1 for this part of this lecture 10

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

12 1 2 4 <script type="text/javascript"> // 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"; 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 3 Local_Vs_Global_Vars.html 1. w and x are globals because they're inside the <script> 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 of the script then 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 (really, it gets re-created from scratch). 12

13 Functions: Parameters and Return Values 13

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

15 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 15

16 1 2 Params_Return_Values.html: Parameters and return values $(document).ready( function() { $("#functiondemo").click( function() { var smaller = parsefloat( $("#num1").val() ); var larger = parsefloat( $("#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 parsefloat() = then convert that to a number. var smaller = = then assign that to a newly created variable 16

17 3 4 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 17

18 5 6 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 18

19 7 8 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; 9 } 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 19

20 Functions: Using the accumulator pattern Let's look at Functions_Accumulator.html 21

21 Accumulator Pattern 22

22 How to accumulate a complete string of output $("#accumulatorexample").click( function (){ // string starts out empty var outputstring = ""; var input = $("#name").val(); // Add the start & end tags for "bold" element outputstring += "Your name: " + input + " \n"; input = $("#flavor").val(); outputstring += "Favorite flavor:" + input + " "; // for debugging (troubleshooting) purposes: alert(outputstring); $("#output").html( outputstring ); This will get the user's input for both their name and their favorite ice cream flavor, and then display those results on the page 23

23 How to accumulate a complete string of output $("#accumulatorexample").click( function (){ // string starts out empty 1) var outputstring = ""; Value of outputstring 1 "" 2) var input = $("#name").val(); // Add the start & end tags for "bold" element 3) outputstring += "Your name: " + input + " \n"; 4) input = $("#flavor").val(); 5) outputstring += "Favorite flavor:" + input + " "; // for debugging (troubleshooting) purposes: 6) alert(outputstring); 7) $("#output").html( outputstring ); Step #1 Create a new string variable, and make sure that it starts out empty var outputstring = ""; 24

24 How to accumulate a complete string of output $("#accumulatorexample").click( function (){ // string starts out empty 1) var outputstring = ""; 2) var input = $("#name").val(); // Add the start & end tags for "bold" element 3) outputstring += "Your name: " + input + " \n"; Accumulate the user s input (and some formatting): var input = $("#name").val(); = Get the user's input Value of outputstring 1 "" 2 "" 3 "Your name: mike \n" (I'm going to assume that Mike was typed into the text box) outputstring += "Your name: " + input + " \n"; = glue the next blob of text onto the ouputstring variable. Make sure to use the += operator X += 2 is the same as X = x

25 How to accumulate a complete string of output $("#accumulatorexample").click( function (){ // string starts out empty 1) var outputstring = ""; 2) var input = $("#name").val(); // Add the start & end tags for "bold" element Value of outputstring 3 "Your name: mike \n" 4 "Your name: mike \n" 3) outputstring += "Your name: " + input + " \n"; (I'm going to assume that Mint was typed into the text box) 4) input = $("#flavor").val(); 5) outputstring += "Favorite flavor:" + input + " "; 5 "Your name: mike \nfavorite flavor:mint " Again accumulate the user s input (and some formatting): input = $("#flavor").val(); = Get the user's input outputstring += "Favorite flavor:" + input + " "; = glue the next blob of text onto the ouputstring variable. 26

26 How to accumulate a complete string of output $("#accumulatorexample").click( function (){ // string starts out empty var outputstring = ""; var input = $("#name").val(); // Add the start & end tags for "bold" element outputstring += "Your name: " + input + " \n"; 7 input = $("#flavor").val(); 5) outputstring += "Favorite flavor:" + input + " "; // for debugging (troubleshooting) purposes: 6) alert(outputstring); 7) $("#output").html( outputstring ); Value of outputstring Last Steps alert(outputstring); = display the text in an alert, so that we can see exactly what the string looks like 27 $("#output").html( outputstring ); = Display on page 5 6 "Your name: mike \nfavorite flavor:mint " "Your name: mike \nfavorite flavor:mint " "Your name: mike \nfavorite flavor:mint "

27 Work on Exercise #3 for this part of this lecture 28

28 Functions: Using Functions In The Branching Adventure First we'll look at one version of this, then you'll modify a slightly different one Chances are good that we won t make it this far in the lecture 29

29 Work on Exercise #4, 5 for this part of this lecture 30

Why Use A JavaScript Library?

Using JQuery 4 Why Use A JavaScript Library? Okay, first things first. Writing JavaScript applications from scratch can be difficult, time-consuming, frustrating, and a real pain in the, ahem, britches.