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 Katherine Deibel, Fluency in Information Technology1
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 Katherine Deibel, Fluency in Information Technology2
Fluency with Information Technology INFO100 and CSE100 Katherine Deibel Katherine Deibel, Fluency in Information Technology3
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 Katherine Deibel, Fluency in Information Technology4 Functions are the basis for most programming languages
You have been using functions already You just were not calling them that Katherine Deibel, Fluency in Information Technology5
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 Katherine Deibel, Fluency in Information Technology6
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 Katherine Deibel, Fluency in Information Technology7
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 Katherine Deibel, Fluency in Information Technology8
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 Technology9
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; } :_____________ Katherine Deibel, Fluency in Information Technology10
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; } :_____________ Katherine Deibel, Fluency in Information Technology11
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 Katherine Deibel, Fluency in Information Technology12
When you write the code: var some_x = Math.random(); r is calculated and returned to where the function was called Katherine Deibel, Fluency in Information Technology13 function random() { var r; some fancy mathematics return r; } function random() { var r; some fancy mathematics return r; }
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); Katherine Deibel, Fluency in Information Technology14
If the function has no parameters: Math.random() If the function has parameters: shareOfCost(91.40, 5) Katherine Deibel, Fluency in Information Technology15 Calling a function always requires the parentheses!
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) Katherine Deibel, Fluency in Information Technology16
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) Katherine Deibel, Fluency in Information Technology17
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; } Katherine Deibel, Fluency in Information Technology18
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; } Katherine Deibel, Fluency in Information Technology19
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 Katherine Deibel, Fluency in Information Technology20
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; } Katherine Deibel, Fluency in Information Technology21
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 * Katherine 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); }
The experience will be worth your weight in gold Katherine Deibel, Fluency in Information Technology23
If someone is worth their weight in gold, how much are they really worth? Facts: Gold sold for $ / troy oz. at noon on Thursday, May 3, 2012 There are 12 troy ounces in a pound Katherine Deibel, Fluency in Information Technology24
We need to write the three components of a function: function ( ) { } Katherine Deibel, Fluency in Information Technology25
The inputs: dollars / troy ounce The person's weight in lbs The computation: Convert the person's weight to troy ounces Multiply that by the worth = *12*weight in pounds Katherine Deibel, Fluency in Information Technology26 Notice how we did this in one statement. We could have broken this up, but this is rather efficient.
We need to write the three components of a function: function ( ) { return * 12 * weight in pounds; } Katherine Deibel, Fluency in Information Technology27
We need to write the three components of a function: function ( ) { return * 12 * weight in pounds; } Katherine Deibel, Fluency in Information Technology28 weight in pounds is not a valid variable
We replace weight in pounds with a parameter variable: weightInPounds function (weightInPounds) { return * 12 * weightInPounds; } Katherine Deibel, Fluency in Information Technology29
We will call the function: worthInGold function worthInGold(weightInPounds) { return * 12 * weightInPounds; } Katherine Deibel, Fluency in Information Technology30
Functions can be put anywhere where scripts are For easy testing, we just embed it in the body of a page Katherine Deibel, Fluency in Information Technology31 function worthInGold(weightInPounds) { return * 12 * weightInPounds; } alert("An average baby is worth $"+worthInGold(7.47)+" in gold.");
Katherine Deibel, Fluency in Information Technology32 function worthInGold(weightInPounds) { return * 12 * weightInPounds; } alert("An average baby is worth $"+worthInGold(7.47)+" in gold.");
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 Katherine Deibel, Fluency in Information Technology33 function roundNumber(n, d) { return n.fixed(d); } function worthInGold(weightInPounds) { return roundNumber( * 12 * weightInPounds, 2); }
Katherine Deibel, Fluency in Information Technology34 Better, but gold won't always be $ / troy oz.
We remove the fixed price and edit worthInGold to use a new parameter pricePerTroyOz Katherine Deibel, Fluency in Information Technology35 function worthInGold(pricePerTroyOz, weightInPounds) { return roundNumber(pricePerTroyOz * 12 * weightInPounds, 2); }
Katherine Deibel, Fluency in Information Technology36 alert("If gold is sold at $1000/oz, an average baby is worth$" + worthInGold(1000, 7.47) + ".");
Functions package computation, allowing us to create applications easily Katherine Deibel, Fluency in Information Technology37
Create the basic HTML structure Add a form Add the scripts Add the event handlers Katherine Deibel, Fluency in Information Technology38
<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=""/> Katherine Deibel, Fluency in Information Technology39
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 Katherine Deibel, Fluency in Information Technology40
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); } Katherine Deibel, Fluency in Information Technology41
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 Katherine Deibel, Fluency in Information Technology42
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 Katherine Deibel, Fluency in Information Technology43
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 Technology44
Katherine Deibel, Fluency in Information Technology45
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 Technology46