1.  Labs next week:  Both labs will be posted on Monday  Both will be due the following Monday  Your decision on which to do first ▪ Web App Design Lab is more abstract and general (no programming) ▪ Coin Flipping Lab has you program  If you find one lab confusing, it might be better to switch to the other one 2012-05-04Katherine Deibel, Fluency in Information Technology1

2.  Project 1 Competition  Section Competitions will go up over the weekend  To enter, your hoax page must be at the correct location as given in the instructions  You can only vote in your section  You will vote twice but must vote for two DIFFERENT pages  You can vote for your own… once 2012-05-04Katherine Deibel, Fluency in Information Technology2

3. Fluency with Information Technology INFO100 and CSE100 Katherine Deibel 2012-05-04Katherine Deibel, Fluency in Information Technology3

4.  A function is a set of statements separate from the main program code  Performs a specific task / algorithm  Called by the main program or other functions  May involve parameters passed to it  May return a value back to where it was called  Functions promote  Code re-use  Cleaner, simpler code 2012-05-04Katherine Deibel, Fluency in Information Technology4 Functions are the basis for most programming languages

5.  You have been using functions already  You just were not calling them that 2012-05-04Katherine Deibel, Fluency in Information Technology5

6.  JavaScript already contains many predefined functions  mathematic: abs(), ceil(), pow(), etc.  string: toLowercase(), indexOf(), etc.  But the real power comes from being able to write your own functions  This also helps you understand what exactly a function is 2012-05-04Katherine Deibel, Fluency in Information Technology6

7.  Declaring a function is writing a function  Tells JS what the computation will do  Does not tell JS to compute the function  A function only runs when called 2012-05-04Katherine Deibel, Fluency in Information Technology7

8. Function declaration syntax: function ( ) { }  is the function's identifier  is a list of input variables that are separated by commas  is the program code Note the brackets around the definition 2012-05-04Katherine Deibel, Fluency in Information Technology8

9.  Many different standards of practice but share common goals  Readable  Memorable  Consistent  My approach  Start with a lowercase letter, then make each subsequent word start with an uppercase letter  Use whole words except for common shorthand: e.g., numOf (number of) or per (percent) 2012-05-04Katherine Deibel, Fluency in Information Technology9

10.  Dinner with Friends: Compute total with an 18% tip and return the amount everyone owes split equally function shareOfCost( bill, numEaters ) { /* Add in an 18% tip */ return (1.18 * bill) / numEaters; } function shareOfCost( bill, numEaters ) { /* Add in an 18% tip */ return (1.18 * bill) / numEaters; }  :_____________ 2012-05-04Katherine Deibel, Fluency in Information Technology10

11.  Dinner with Friends: Compute total with an 18% tip and return the amount everyone owes split equally function shareOfCost( bill, numEaters ) { /* Add in an 18% tip */ return (1.18 * bill) / numEaters; } function shareOfCost( bill, numEaters ) { /* Add in an 18% tip */ return (1.18 * bill) / numEaters; }  :_____________ 2012-05-04Katherine Deibel, Fluency in Information Technology11

12.  return is a special keyword in JS  Used to tell a function to stop and return to where the function was called from  Otherwise, a function ends when the last } in the function definition is reached  return can be used in two ways  return;  exits the function  return x;  returns the value of x 2012-05-04Katherine Deibel, Fluency in Information Technology12

13.  When you write the code: var some_x = Math.random();  r is calculated and returned to where the function was called 2012-05-04Katherine Deibel, Fluency in Information Technology13 function random() { var r; some fancy mathematics return r; } function random() { var r; some fancy mathematics return r; }

14.  Declaring a function  Tells JS what the computation will do  Does not tell JS to compute the function  A function only runs when called  Calling a function  Run the function at a specific point in the code  Calling is simple: (parameters); 2012-05-04Katherine Deibel, Fluency in Information Technology14

15.  If the function has no parameters: Math.random()  If the function has parameters: shareOfCost(91.40, 5) 2012-05-04Katherine Deibel, Fluency in Information Technology15 Calling a function always requires the parentheses!

16.  When we pass on values to a function think of them as being assigned to the assigned to the parameters as in shareOfCost(91.40, 5) 2012-05-04Katherine Deibel, Fluency in Information Technology16

17. function shareOfCost( bill, numEaters ) { /* Add in an 18% tip */ return (1.18 * bill) / numEaters; } function shareOfCost( bill, numEaters ) { /* Add in an 18% tip */ return (1.18 * bill) / numEaters; }  When we pass on values to a function think of them as being assigned to the assigned to the parameters as in shareOfCost(91.40, 5) 2012-05-04Katherine Deibel, Fluency in Information Technology17

18. function shareOfCost( bill, numEaters ) { /* Add in an 18% tip */ return (1.18 * bill) / numEaters; } function shareOfCost( bill, numEaters ) { /* Add in an 18% tip */ return (1.18 * bill) / numEaters; }  When we pass on values to a function think of them as being assigned to the assigned to the parameters as in shareOfCost(91.40, 5) function shareOfCost( 91.40, 5 ) { /* Add in an 18% tip */ return (1.18 * bill) / numEaters; } function shareOfCost( 91.40, 5 ) { /* Add in an 18% tip */ return (1.18 * bill) / numEaters; } 2012-05-04Katherine Deibel, Fluency in Information Technology18

19. function shareOfCost( bill, numEaters ) { /* Add in an 18% tip */ return (1.18 * bill) / numEaters; } function shareOfCost( bill, numEaters ) { /* Add in an 18% tip */ return (1.18 * bill) / numEaters; }  When we pass on values to a function think of them as being assigned to the assigned to the parameters as in shareOfCost(91.40, 5) function shareOfCost( 91.40, 5 ) { /* Add in an 18% tip */ return (1.18 * bill) / numEaters; } function shareOfCost( 91.40, 5 ) { /* Add in an 18% tip */ return (1.18 * bill) / numEaters; } function shareOfCost( 91.40, 5 ) { /* Add in an 18% tip */ return (1.18 * 91.40) / 5; } function shareOfCost( 91.40, 5 ) { /* Add in an 18% tip */ return (1.18 * 91.40) / 5; } 2012-05-04Katherine Deibel, Fluency in Information Technology19

20. function shareOfCost( bill, numEaters ) { /* Add in an 18% tip */ return (1.18 * bill) / numEaters; } function shareOfCost( bill, numEaters ) { /* Add in an 18% tip */ return (1.18 * bill) / numEaters; }  When we pass on values to a function think of them as being assigned to the assigned to the parameters as in shareOfCost(91.40, 5) function shareOfCost( 91.40, 5 ) { /* Add in an 18% tip */ return (1.18 * bill) / numEaters; } function shareOfCost( 91.40, 5 ) { /* Add in an 18% tip */ return (1.18 * bill) / numEaters; } function shareOfCost( 91.40, 5 ) { /* Add in an 18% tip */ return (1.18 * 91.40) / 5; } function shareOfCost( 91.40, 5 ) { /* Add in an 18% tip */ return (1.18 * 91.40) / 5; } returns 21.5704 2012-05-04Katherine Deibel, Fluency in Information Technology20

21.  Functions can call other functions  return just returns you to where the function was called  Totally valid examples:  Math.abs( Math.random() );  function doSomething(x, y) { var z = doSomethingMore(x+y); return z*z + z*x; } 2012-05-04Katherine Deibel, Fluency in Information Technology21

22.  This is called recursion, an advanced programming technique  Must be careful to avoid infinite callings  Also the source of a great geek joke: google 'recursion' factorial(3) = 3 * factorial(2) = 3 * 2 * factorial(1) = 3 * 2 * 1 * factorial(0) = 3 * 2 * 1 * 1 2012-05-04Katherine Deibel, Fluency in Information Technology22 function factorial(n) { if( n == 0) return 1; else return n * factorial(n-1); } function factorial(n) { if( n == 0) return 1; else return n * factorial(n-1); }

23. The experience will be worth your weight in gold 2012-05-04Katherine Deibel, Fluency in Information Technology23

24.  If someone is worth their weight in gold, how much are they really worth?  Facts:  Gold sold for $1635.37 / troy oz. at noon on Thursday, May 3, 2012  There are 12 troy ounces in a pound 2012-05-04Katherine Deibel, Fluency in Information Technology24

25.  We need to write the three components of a function:  function ( ) { } 2012-05-04Katherine Deibel, Fluency in Information Technology25

26.  The inputs:  1635.37 dollars / troy ounce  The person's weight in lbs  The computation:  Convert the person's weight to troy ounces  Multiply that by the 1635.37 worth = 1635.37 *12*weight in pounds 2012-05-04Katherine Deibel, Fluency in Information Technology26 Notice how we did this in one statement. We could have broken this up, but this is rather efficient.

27.  We need to write the three components of a function:  function ( ) { return 1635.37 * 12 * weight in pounds; } 2012-05-04Katherine Deibel, Fluency in Information Technology27

28.  We need to write the three components of a function:  function ( ) { return 1635.37 * 12 * weight in pounds; } 2012-05-04Katherine Deibel, Fluency in Information Technology28 weight in pounds is not a valid variable 

29.  We replace weight in pounds with a parameter variable: weightInPounds  function (weightInPounds) { return 1635.37 * 12 * weightInPounds; } 2012-05-04Katherine Deibel, Fluency in Information Technology29

30.  We will call the function: worthInGold function worthInGold(weightInPounds) { return 1635.37 * 12 * weightInPounds; } 2012-05-04Katherine Deibel, Fluency in Information Technology30

31.  Functions can be put anywhere where scripts are  For easy testing, we just embed it in the body of a page 2012-05-04Katherine Deibel, Fluency in Information Technology31 function worthInGold(weightInPounds) { return 1635.37 * 12 * weightInPounds; } alert("An average baby is worth $"+worthInGold(7.47)+" in gold.");

32. 2012-05-04Katherine Deibel, Fluency in Information Technology32 function worthInGold(weightInPounds) { return 1635.37 * 12 * weightInPounds; } alert("An average baby is worth $"+worthInGold(7.47)+" in gold.");

33.  To make the dollar format correct, we will add a new function, roundNumber, for rounding and use it in worthInGold  roundNumber may seem complex, but returns n rounded to d decimal places 2012-05-04Katherine Deibel, Fluency in Information Technology33 function roundNumber(n, d) { return n.fixed(d); } function worthInGold(weightInPounds) { return roundNumber(1635.37 * 12 * weightInPounds, 2); }

34. 2012-05-04Katherine Deibel, Fluency in Information Technology34 Better, but gold won't always be $1635.37 / troy oz.

35.  We remove the fixed price and edit worthInGold to use a new parameter pricePerTroyOz 2012-05-04Katherine Deibel, Fluency in Information Technology35 function worthInGold(pricePerTroyOz, weightInPounds) { return roundNumber(pricePerTroyOz * 12 * weightInPounds, 2); }

36. 2012-05-04Katherine Deibel, Fluency in Information Technology36 alert("If gold is sold at $1000/oz, an average baby is worth$" + worthInGold(1000, 7.47) + ".");

37.  Functions package computation, allowing us to create applications easily 2012-05-04Katherine Deibel, Fluency in Information Technology37

38.  Create the basic HTML structure  Add a form  Add the scripts  Add the event handlers 2012-05-04Katherine Deibel, Fluency in Information Technology38

39. <input type="text" id="rateBox" size="15" onchange="" /> Price of gold in dollars/troy ounce <input type="text" id="weightBox" size="15" onchange="" /> Your weight in pounds Worth in gold! <input type="button" value="Calculate" style="margin-left:-2px" onclick=""/> 2012-05-04Katherine Deibel, Fluency in Information Technology39

40. Notice the onchange Event Handler It’s like onclick, but it “applies” after user data is entered in the window Notice the onchange Event Handler It’s like onclick, but it “applies” after user data is entered in the window <input type="text" id="rateBox" size="15" onchange="" /> Price of gold in dollars/troy ounce <input type="text" id="weightBox" size="15" onchange="" /> Your weight in pounds Worth in gold! <input type="button" value="Calculate" style="margin-left:-2px" onclick=""/>  Regarding the onchange Event Handler  It’s like onclick, but it “applies” after user data is entered in the window 2012-05-04Katherine Deibel, Fluency in Information Technology40

41.  First, the code in the … var goldRate=0, weightPounds=0; function roundNumber(n, d) { return n.toFixed(d); } function worthInGold(pricePerTroyOz, weightInPounds) { return roundNumber(pricePerTroyOz * 12 * weightInPounds, 2); } 2012-05-04Katherine Deibel, Fluency in Information Technology41

42.  First, the code in the … var goldRate=0, weightPounds=0; function roundNumber(n, d) { return n.toFixed(d); } function worthInGold(pricePerTroyOz, weightInPounds) { return roundNumber(pricePerTroyOz * 12 * weightInPounds, 2); }  Notice two new declared variables  goldRate and weightPounds  We will use these to store the values from the two text fields 2012-05-04Katherine Deibel, Fluency in Information Technology42

43.  After the price is filled in, we save the value from the rateBox input to the variable goldRate onchange="goldRate = document.forms[0].rateBox.value;" onchange="weightPounds=document.forms[0].weightBox.value;"  Similarly after the weight is filled in, we save it to the variable weightPounds 2012-05-04Katherine Deibel, Fluency in Information Technology43

44.  We want to call the worthInGold() function and display the result in the answer window as in onclick="document.forms[0].resultBox.value ='$' + worthInGold(goldRate, weightPounds);" 2012-05-04Katherine Deibel, Fluency in Information Technology44

45. 2012-05-04Katherine Deibel, Fluency in Information Technology45

46.  Functions are among the most powerful ideas in computing  We will keep using them throughout the term, even beyond JavaScript  Learning the vocabulary is helpful because the concepts can occasionally be confusing 2012-05-04Katherine Deibel, Fluency in Information Technology46