1. Fluency with Information Technology INFO100 and CSE100 Katherine Deibel 2012-02-10Katherine Deibel, Fluency in Information Technology1

2.  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-02-10Katherine Deibel, Fluency in Information Technology2 Functions are the basis for most programming languages

3. 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-02-10Katherine Deibel, Fluency in Information Technology3

4.  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-02-10Katherine Deibel, Fluency in Information Technology4

5.  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-02-10Katherine Deibel, Fluency in Information Technology5

6.  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-02-10Katherine Deibel, Fluency in Information Technology6

7.  If the function has no parameters: Math.random()  If the function has parameters: shareOfCost(91.40, 5) 2012-02-10Katherine Deibel, Fluency in Information Technology7 Calling a function always requires the parentheses!

8. 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-02-10Katherine Deibel, Fluency in Information Technology8

9. 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-02-10Katherine Deibel, Fluency in Information Technology9

10. 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-02-10Katherine Deibel, Fluency in Information Technology10

11. 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-02-10Katherine Deibel, Fluency in Information Technology11

12. The experience will be worth your weight in gold 2012-02-10Katherine Deibel, Fluency in Information Technology12

13.  If someone is worth their weight in gold, how much are they really worth  Facts:  Gold sold for $1732.40 / troy oz. on Thursday, Feb 9, 2011  There are 12 troy oz. in a pound 2012-02-10Katherine Deibel, Fluency in Information Technology13

14.  We need to write the three components of a function:  function ( ) { } 2012-02-10Katherine Deibel, Fluency in Information Technology14

15.  The inputs:  1732.40 dollars / troy oz  The person's weight in lbs  The computation:  Convert the person's weight in troy oz  Multiply that by the 1732.40  worth = 1732.40 *12*weight in pounds 2012-02-10Katherine Deibel, Fluency in Information Technology15 Notice how we did this in one statement. We could have broken this up, but this is rather efficient.

16.  We need to write the three components of a function:  function ( ) { return 1732.40 * 12 * weight in pounds; } 2012-02-10Katherine Deibel, Fluency in Information Technology16

17.  We need to write the three components of a function:  function ( ) { return 1732.40 * 12 * weight in pounds; } 2012-02-10Katherine Deibel, Fluency in Information Technology17 weight in pounds is not a valid variable 

18.  We replace weight in pounds with a parameter variable: weightInPounds  function (weightInPounds) { return 1732.40 * 12 * weightInPounds; } 2012-02-10Katherine Deibel, Fluency in Information Technology18

19.  We will call the function: worthInGold function worthInGold(weightInPounds) { return 1732.40 * 12 * weightInPounds; } 2012-02-10Katherine Deibel, Fluency in Information Technology19

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

21. 2012-02-10Katherine Deibel, Fluency in Information Technology21 function worthInGold(weightInPounds) { return 1732.40 * 12 * weightInPounds; } alert("An average baby is worth $"+worthInGold(7.47)+" in gold.");

22.  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-02-10Katherine Deibel, Fluency in Information Technology22 function roundNumber(n, d) { return n.fixed(d); } function worthInGold(weightInPounds) { return roundNumber(1732.40 * 12 * weightInPounds, 2); }

23. 2012-02-10Katherine Deibel, Fluency in Information Technology23 Better, but gold won't always be $1732.40 / troy oz.

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

25. 2012-02-10Katherine Deibel, Fluency in Information Technology25 alert("If gold is sold at $1000/oz, an average baby is worth$" + worthInGold(1000, 7.47) + ".");

26.  Functions package computation, allowing us to create applications easily 2012-02-10Katherine Deibel, Fluency in Information Technology26

27.  Create the basic HTML structure  Add a form  Add the scripts  Add the event handlers 2012-02-10Katherine Deibel, Fluency in Information Technology27

28. <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-02-10Katherine Deibel, Fluency in Information Technology28

29. 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-02-10Katherine Deibel, Fluency in Information Technology29

30.  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-02-10Katherine Deibel, Fluency in Information Technology30

31.  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-02-10Katherine Deibel, Fluency in Information Technology31

32.  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-02-10Katherine Deibel, Fluency in Information Technology32

33.  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-02-10Katherine Deibel, Fluency in Information Technology33

34. 2012-02-10Katherine Deibel, Fluency in Information Technology34

35.  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-02-10Katherine Deibel, Fluency in Information Technology35