![Page 1: JavaScript Functions P icking out a dress, corsage, limo, as many abstractions](https://reader035.vdocuments.mx/reader035/viewer/2022062218/5681604b550346895dcf760e/html5/thumbnails/1.jpg)
JavaScript FunctionsPicking out a dress, corsage, limo, as many abstractions
Fluency with Information Technology
INFO100 and CSE100
Katherine Deibel
2012-02-10 Katherine Deibel, Fluency in Information Technology 1
![Page 2: JavaScript Functions P icking out a dress, corsage, limo, as many abstractions](https://reader035.vdocuments.mx/reader035/viewer/2022062218/5681604b550346895dcf760e/html5/thumbnails/2.jpg)
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
2012-02-10 Katherine Deibel, Fluency in Information Technology 2
Functions are the basis for most programming
languages
![Page 3: JavaScript Functions P icking out a dress, corsage, limo, as many abstractions](https://reader035.vdocuments.mx/reader035/viewer/2022062218/5681604b550346895dcf760e/html5/thumbnails/3.jpg)
Declaring a Function in JSFunction 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 definition2012-02-10 Katherine Deibel, Fluency in Information Technology 3
![Page 4: JavaScript Functions P icking out a dress, corsage, limo, as many abstractions](https://reader035.vdocuments.mx/reader035/viewer/2022062218/5681604b550346895dcf760e/html5/thumbnails/4.jpg)
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)2012-02-10 Katherine Deibel, Fluency in Information Technology 4
![Page 5: JavaScript Functions P icking out a dress, corsage, limo, as many abstractions](https://reader035.vdocuments.mx/reader035/viewer/2022062218/5681604b550346895dcf760e/html5/thumbnails/5.jpg)
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>: _____________
2012-02-10 Katherine Deibel, Fluency in Information Technology 5
![Page 6: JavaScript Functions P icking out a dress, corsage, limo, as many abstractions](https://reader035.vdocuments.mx/reader035/viewer/2022062218/5681604b550346895dcf760e/html5/thumbnails/6.jpg)
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);
2012-02-10 Katherine Deibel, Fluency in Information Technology 6
![Page 7: JavaScript Functions P icking out a dress, corsage, limo, as many abstractions](https://reader035.vdocuments.mx/reader035/viewer/2022062218/5681604b550346895dcf760e/html5/thumbnails/7.jpg)
Calling Examples
If the function has no parameters:Math.random()
If the function has parameters:shareOfCost(91.40, 5)
2012-02-10 Katherine Deibel, Fluency in Information Technology 7
Calling a function always requires the parentheses!
![Page 8: JavaScript Functions P icking out a dress, corsage, limo, as many abstractions](https://reader035.vdocuments.mx/reader035/viewer/2022062218/5681604b550346895dcf760e/html5/thumbnails/8.jpg)
function shareOfCost( bill, numEaters ) { /* Add in an 18% tip */ return (1.18 * bill) / numEaters;}
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)
2012-02-10 Katherine Deibel, Fluency in Information Technology 8
![Page 9: JavaScript Functions P icking out a dress, corsage, limo, as many abstractions](https://reader035.vdocuments.mx/reader035/viewer/2022062218/5681604b550346895dcf760e/html5/thumbnails/9.jpg)
function shareOfCost( bill, numEaters ) { /* Add in an 18% tip */ return (1.18 * bill) / numEaters;}
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( 91.40, 5 ) { /* Add in an 18% tip */ return (1.18 * bill) / numEaters;}
2012-02-10 Katherine Deibel, Fluency in Information Technology 9
![Page 10: JavaScript Functions P icking out a dress, corsage, limo, as many abstractions](https://reader035.vdocuments.mx/reader035/viewer/2022062218/5681604b550346895dcf760e/html5/thumbnails/10.jpg)
function shareOfCost( bill, numEaters ) { /* Add in an 18% tip */ return (1.18 * bill) / numEaters;}
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( 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;}
2012-02-10 Katherine Deibel, Fluency in Information Technology 10
![Page 11: JavaScript Functions P icking out a dress, corsage, limo, as many abstractions](https://reader035.vdocuments.mx/reader035/viewer/2022062218/5681604b550346895dcf760e/html5/thumbnails/11.jpg)
function shareOfCost( bill, numEaters ) { /* Add in an 18% tip */ return (1.18 * bill) / numEaters;}
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( 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
2012-02-10 Katherine Deibel, Fluency in Information Technology 11
![Page 12: JavaScript Functions P icking out a dress, corsage, limo, as many abstractions](https://reader035.vdocuments.mx/reader035/viewer/2022062218/5681604b550346895dcf760e/html5/thumbnails/12.jpg)
Writing a FunctionThe experience will be worth your weight in gold
2012-02-10 Katherine Deibel, Fluency in Information Technology 12
![Page 13: JavaScript Functions P icking out a dress, corsage, limo, as many abstractions](https://reader035.vdocuments.mx/reader035/viewer/2022062218/5681604b550346895dcf760e/html5/thumbnails/13.jpg)
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
2012-02-10 Katherine Deibel, Fluency in Information Technology 13
![Page 14: JavaScript Functions P icking out a dress, corsage, limo, as many abstractions](https://reader035.vdocuments.mx/reader035/viewer/2022062218/5681604b550346895dcf760e/html5/thumbnails/14.jpg)
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>}
2012-02-10
![Page 15: JavaScript Functions P icking out a dress, corsage, limo, as many abstractions](https://reader035.vdocuments.mx/reader035/viewer/2022062218/5681604b550346895dcf760e/html5/thumbnails/15.jpg)
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
2012-02-10 Katherine Deibel, Fluency in Information Technology 15
Notice how we did this in one statement. We couldhave broken this up, but this is rather efficient.
![Page 16: JavaScript Functions P icking out a dress, corsage, limo, as many abstractions](https://reader035.vdocuments.mx/reader035/viewer/2022062218/5681604b550346895dcf760e/html5/thumbnails/16.jpg)
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;
}
2012-02-10
![Page 17: JavaScript Functions P icking out a dress, corsage, limo, as many abstractions](https://reader035.vdocuments.mx/reader035/viewer/2022062218/5681604b550346895dcf760e/html5/thumbnails/17.jpg)
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;
}
2012-02-10
weight in pounds is not a valid variable
![Page 18: JavaScript Functions P icking out a dress, corsage, limo, as many abstractions](https://reader035.vdocuments.mx/reader035/viewer/2022062218/5681604b550346895dcf760e/html5/thumbnails/18.jpg)
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;
}
2012-02-10
![Page 19: JavaScript Functions P icking out a dress, corsage, limo, as many abstractions](https://reader035.vdocuments.mx/reader035/viewer/2022062218/5681604b550346895dcf760e/html5/thumbnails/19.jpg)
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;
}
2012-02-10
![Page 20: JavaScript Functions P icking out a dress, corsage, limo, as many abstractions](https://reader035.vdocuments.mx/reader035/viewer/2022062218/5681604b550346895dcf760e/html5/thumbnails/20.jpg)
Implementation Functions can be put anywhere
where scripts are For easy testing, we just embed it in
the body of a page
2012-02-10 Katherine Deibel, Fluency in Information Technology 20
<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>
![Page 21: JavaScript Functions P icking out a dress, corsage, limo, as many abstractions](https://reader035.vdocuments.mx/reader035/viewer/2022062218/5681604b550346895dcf760e/html5/thumbnails/21.jpg)
Try It Out (version 1)
2012-02-10 Katherine Deibel, Fluency in Information Technology 21
<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>
![Page 22: JavaScript Functions P icking out a dress, corsage, limo, as many abstractions](https://reader035.vdocuments.mx/reader035/viewer/2022062218/5681604b550346895dcf760e/html5/thumbnails/22.jpg)
Fixing The Cents 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-10 Katherine Deibel, Fluency in Information Technology 22
function roundNumber(n, d) { return n.fixed(d);}
function worthInGold(weightInPounds) { return roundNumber(1732.40 * 12 * weightInPounds, 2);}
![Page 23: JavaScript Functions P icking out a dress, corsage, limo, as many abstractions](https://reader035.vdocuments.mx/reader035/viewer/2022062218/5681604b550346895dcf760e/html5/thumbnails/23.jpg)
Try It Out (version 2)
2012-02-10 Katherine Deibel, Fluency in Information Technology 23
Better, but gold won't always be $1732.40 / troy oz.
![Page 24: JavaScript Functions P icking out a dress, corsage, limo, as many abstractions](https://reader035.vdocuments.mx/reader035/viewer/2022062218/5681604b550346895dcf760e/html5/thumbnails/24.jpg)
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
2012-02-10
function worthInGold(pricePerTroyOz, weightInPounds) { return roundNumber(pricePerTroyOz * 12 * weightInPounds, 2);}
![Page 25: JavaScript Functions P icking out a dress, corsage, limo, as many abstractions](https://reader035.vdocuments.mx/reader035/viewer/2022062218/5681604b550346895dcf760e/html5/thumbnails/25.jpg)
Try It Out (version 3)
2012-02-10 Katherine Deibel, Fluency in Information Technology 25
alert("If gold is sold at $1000/oz, an average baby is worth$"
+ worthInGold(1000, 7.47) + ".");
![Page 26: JavaScript Functions P icking out a dress, corsage, limo, as many abstractions](https://reader035.vdocuments.mx/reader035/viewer/2022062218/5681604b550346895dcf760e/html5/thumbnails/26.jpg)
Building An Application! Functions package computation, allowing
us to create applications easily
2012-02-10 Katherine Deibel, Fluency in Information Technology 26
![Page 27: JavaScript Functions P icking out a dress, corsage, limo, as many abstractions](https://reader035.vdocuments.mx/reader035/viewer/2022062218/5681604b550346895dcf760e/html5/thumbnails/27.jpg)
The Building Process Create the basic HTML structure Add a form Add the scripts Add the event handlers
2012-02-10 Katherine Deibel, Fluency in Information Technology 27
![Page 28: JavaScript Functions P icking out a dress, corsage, limo, as many abstractions](https://reader035.vdocuments.mx/reader035/viewer/2022062218/5681604b550346895dcf760e/html5/thumbnails/28.jpg)
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>
2012-02-10 Katherine Deibel, Fluency in Information Technology 28
![Page 29: JavaScript Functions P icking out a dress, corsage, limo, as many abstractions](https://reader035.vdocuments.mx/reader035/viewer/2022062218/5681604b550346895dcf760e/html5/thumbnails/29.jpg)
The Form: onchange eventNotice the onchange Event HandlerIt’s like onclick, but it “applies” after user data is entered in the window
<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>
Regarding the onchange Event Handler It’s like onclick, but it “applies” after
user data is entered in the window
2012-02-10 Katherine Deibel, Fluency in Information Technology 29
![Page 30: JavaScript Functions P icking out a dress, corsage, limo, as many abstractions](https://reader035.vdocuments.mx/reader035/viewer/2022062218/5681604b550346895dcf760e/html5/thumbnails/30.jpg)
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>
2012-02-10 Katherine Deibel, Fluency in Information Technology 30
![Page 31: JavaScript Functions P icking out a dress, corsage, limo, as many abstractions](https://reader035.vdocuments.mx/reader035/viewer/2022062218/5681604b550346895dcf760e/html5/thumbnails/31.jpg)
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
2012-02-10 Katherine Deibel, Fluency in Information Technology 31
![Page 32: JavaScript Functions P icking out a dress, corsage, limo, as many abstractions](https://reader035.vdocuments.mx/reader035/viewer/2022062218/5681604b550346895dcf760e/html5/thumbnails/32.jpg)
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;"
onchange="weightPounds=document.forms[0].weightBox.value;"
Similarly after the weight is filled in, we save it to the variable weightPounds
2012-02-10 Katherine Deibel, Fluency in Information Technology 32
![Page 33: JavaScript Functions P icking out a dress, corsage, limo, as many abstractions](https://reader035.vdocuments.mx/reader035/viewer/2022062218/5681604b550346895dcf760e/html5/thumbnails/33.jpg)
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);"
2012-02-10 Katherine Deibel, Fluency in Information Technology 33
![Page 34: JavaScript Functions P icking out a dress, corsage, limo, as many abstractions](https://reader035.vdocuments.mx/reader035/viewer/2022062218/5681604b550346895dcf760e/html5/thumbnails/34.jpg)
Try it out!
2012-02-10 Katherine Deibel, Fluency in Information Technology 34
![Page 35: JavaScript Functions P icking out a dress, corsage, limo, as many abstractions](https://reader035.vdocuments.mx/reader035/viewer/2022062218/5681604b550346895dcf760e/html5/thumbnails/35.jpg)
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
2012-02-10 Katherine Deibel, Fluency in Information Technology 35