BIT116: Scripting

Functions

2

Today Assignment #2 is now due on Wednesday, Nov 25th

(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

3

Midterm: Quick notes 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

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:

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

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 functionalert("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

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 functionalert("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

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 functionalert("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

Basic functions: Basic_JS_Function.html: Named functionsfunction 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

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 functionalert("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

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.

56

6

5

12

Functions: Local vs. Global Variables

Let's look at Local_Vs_Global_Vars.html

13

Local_Vs_Global_Vars.html<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"; // 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 <script> element but OUTSIDE any functions

2. Y is local because it is INSIDE a functionNote 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 error4. 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

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.

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

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

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

Params_Return_Values.html: Parameters and return values…var output = "";

output += "Output starts here: <br/>";output += result + "<br/>";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

Params_Return_Values.html: Parameters and return valuesfunction 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

Do Exercises Work on Exercise #1 for this part of this lecture

22

Functions: Using the accumulator pattern

Let's look at Functions_Accumulator.html

23

Do Exercises Work on Exercise #2 for this part of this lecture

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

Do Exercises Work on Exercise #3 for this part of this lecture