javascript functions p icking out a dress, corsage, limo, as many abstractions

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

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

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

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

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

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

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!

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

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

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

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

Writing a FunctionThe experience will be worth your weight in gold

2012-02-10 Katherine Deibel, Fluency in Information Technology 12

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

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

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.

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

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

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

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

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>

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>

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);}

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.

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);}

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) + ".");

Building An Application! Functions package computation, allowing

us to create applications easily

2012-02-10 Katherine Deibel, Fluency in Information Technology 26

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

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

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

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

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

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

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

Try it out!

2012-02-10 Katherine Deibel, Fluency in Information Technology 34

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