JavaScript Functions P icking out a dress, corsage, limo, as many abstractions

1. INFO100 and CSE100 Fluency with Information Technology JavaScript FunctionsPicking out a dress, corsage, limo, as many abstractions Katherine Deibel Katherine Deibel, Fluency in Information Technology

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

3. Declaring a Function in JS Function declaration syntax: function <name> ( <parameter list> ) {<definition>} • <name> is the function's identifier • <parameter list> is a list of input variables that are separated by commas • <definition> is the program code Note the brackets around the definition Katherine Deibel, Fluency in Information Technology

4. Naming Variables & Functions • 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) Katherine Deibel, Fluency in Information Technology

5. A Sample Function • 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; • } • <name>: _____________ • <parameter list>:_____________ • <definition>: _____________ Katherine Deibel, Fluency in Information Technology

6. Declaring vs Calling a Function • 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: <name>(parameters); Katherine Deibel, Fluency in Information Technology

7. Calling Examples • If the function has no parameters:Math.random() • If the function has parameters:shareOfCost(91.40, 5) Calling a function always requires the parentheses! Katherine Deibel, Fluency in Information Technology

8. How Parameters Work • 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( bill, numEaters ) { • /* Add in an 18% tip */ • return (1.18 * bill) / numEaters; • } Katherine Deibel, Fluency in Information Technology

9. How Parameters Work • 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( bill, numEaters ) { • /* 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; • } Katherine Deibel, Fluency in Information Technology

10. How Parameters Work • 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( bill, numEaters ) { • /* 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; • } Katherine Deibel, Fluency in Information Technology

11. How Parameters Work • 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( bill, numEaters ) { • /* 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; • } returns 21.5704 Katherine Deibel, Fluency in Information Technology

12. Writing a Function The experience will be worth your weight in gold Katherine Deibel, Fluency in Information Technology

13. Weight in Gold Function • 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 Katherine Deibel, Fluency in Information Technology

14. What we need • We need to write the three components of a function: • <name> • <parameters> • <definition> function <name> ( <parameter list> ) { <definition> } Katherine Deibel, Fluency in Information Technology

15. Let's think more generally • 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 Notice how we did this in one statement. We could have broken this up, but this is rather efficient. Katherine Deibel, Fluency in Information Technology

16. Progress so far… • We need to write the three components of a function: • <name> • <parameters> <definition> function <name> ( <parameter list> ) { return 1732.40 * 12 * weight in pounds; }  Katherine Deibel, Fluency in Information Technology

17. But It Is Not Valid JavaScript • We need to write the three components of a function: • <name> • <parameters> <definition> function <name> ( <parameter list> ) { return 1732.40 * 12 * weight in pounds; } weight in pounds is not a valid variable   Katherine Deibel, Fluency in Information Technology

18. Adding in the Parameters • We replace weight in pounds with a parameter variable: weightInPounds • <name> <parameters> <definition> function <name> (weightInPounds) { return 1732.40 * 12 * weightInPounds; }   Katherine Deibel, Fluency in Information Technology

19. Giving it a Name • We will call the function: worthInGold <name> <parameters> <definition> function worthInGold(weightInPounds) { return 1732.40 * 12 * weightInPounds; }    Katherine Deibel, Fluency in Information Technology

20. Implementation • Functions can be put anywhere where scripts are • For easy testing, we just embed it in the body of a page <body> <script type="text/javascript"> function worthInGold(weightInPounds) { return 1732.40 * 12 * weightInPounds; } alert("An average baby is worth $"+worthInGold(7.47)+" in gold."); </script> Katherine Deibel, Fluency in Information Technology

21. Try It Out (version 1) <body> <script type="text/javascript"> function worthInGold(weightInPounds) { return 1732.40 * 12 * weightInPounds; } alert("An average baby is worth $"+worthInGold(7.47)+" in gold."); </script> Katherine Deibel, Fluency in Information Technology

22. Fixing The Cents • To make the dollar format correct, we will add a new function, roundNumber, for rounding and use it in worthInGold • roundNumbermay seem complex, but returns n rounded to d decimal places function roundNumber(n, d) { return n.fixed(d); } function worthInGold(weightInPounds) { return roundNumber(1732.40 * 12 * weightInPounds, 2);} Katherine Deibel, Fluency in Information Technology

23. Try It Out (version 2) Better, but gold won't always be $1732.40 / troy oz. Katherine Deibel, Fluency in Information Technology

24. Adding a New Parameter • We remove the fixed price and edit worthInGold to use a new parameter pricePerTroyOz function worthInGold(pricePerTroyOz, weightInPounds) { return roundNumber(pricePerTroyOz* 12 * weightInPounds, 2);} Katherine Deibel, Fluency in Information Technology

25. Try It Out (version 3) alert("If gold is sold at $1000/oz, an average baby is worth$" + worthInGold(1000, 7.47) + "."); Katherine Deibel, Fluency in Information Technology

26. Building An Application! • Functions package computation, allowing us to create applications easily Katherine Deibel, Fluency in Information Technology

27. The Building Process • Create the basic HTML structure • Add a form • Add the scripts • Add the event handlers Katherine Deibel, Fluency in Information Technology

28. The Form <form><p> <input type="text" id="rateBox" size="15" onchange="" /> <label for="rateBox">Price of gold in dollars/troy ounce</label> <br/> <input type="text" id="weightBox" size="15" onchange="" /> <label for="weightBox">Your weight in pounds</label> <br/> <input type="text" id="resultBox" size="15" readonly="readonly" /> <label for="resultBox">Worth in gold!</label> <br/> <input type="button" value="Calculate" style="margin-left:-2px" onclick=""/> </p></form> Katherine Deibel, Fluency in Information Technology

29. The Form: onchange event <form><p> <input type="text" id="rateBox" size="15" onchange="" /> <label for="rateBox">Price of gold in dollars/troy ounce</label> <br/> <input type="text" id="weightBox" size="15" onchange="" /> <label for="weightBox">Your weight in pounds</label> <br/> <input type="text" id="resultBox" size="15" readonly="readonly" /> <label for="resultBox">Worth in gold!</label> <br/> <input type="button" value="Calculate" style="margin-left:-2px" onclick=""/> </p></form> Notice the onchange Event Handler It’s like onclick, but it “applies” after user data is entered in the window • Regarding the onchange Event Handler • It’s like onclick, but it “applies” after user data is entered in the window Katherine Deibel, Fluency in Information Technology

30. JavaScript • First, the code in the <head></head> <head> … <script type="text/javascript"> var goldRate=0, weightPounds=0; function roundNumber(n, d) { return n.toFixed(d); } function worthInGold(pricePerTroyOz, weightInPounds) { return roundNumber(pricePerTroyOz * 12 * weightInPounds, 2); } </script> </head> Katherine Deibel, Fluency in Information Technology

31. JavaScript • First, the code in the <head></head> <head> … <script type="text/javascript"> var goldRate=0, weightPounds=0; function roundNumber(n, d) { return n.toFixed(d); } function worthInGold(pricePerTroyOz, weightInPounds) { return roundNumber(pricePerTroyOz * 12 * weightInPounds, 2); } </script> </head> • Notice two new declared variables • goldRate and weightPounds • We will use these to store the values from the two text fields Katherine Deibel, Fluency in Information Technology

32. onchange Event Handlers • 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;" • Similarly after the weight is filled in, we save it to the variable weightPounds onchange="weightPounds=document.forms[0].weightBox.value;" Katherine Deibel, Fluency in Information Technology

33. onclick Event Handlers • 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);" Katherine Deibel, Fluency in Information Technology

34. Try it out! Katherine Deibel, Fluency in Information Technology

35. Summary • 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 Katherine Deibel, Fluency in Information Technology