the information school of the university of washington oct 23 fit100-12-functions 1 functions / if...
Post on 20-Dec-2015
214 views
TRANSCRIPT
Oct 23 fit100-12-functions 1
Th
e I
nfo
rmati
on
Sch
ool
of
the U
niv
ers
ity o
f W
ash
ing
ton
Functions / If Else
INFO/CSE 100, Fall 2006
Fluency in Information Technology
http://courses.washington.edu/info100/
Oct 23 fit100-12-functions 2
Th
e I
nfo
rmati
on
Sch
ool
of
the U
niv
ers
ity o
f W
ash
ing
ton
Readings and References
• Reading» Fluency with Information Technology
• Chapter 20, Abstraction and Functions
• Other References» W3Schools JavaScript tutorial
http://www.w3schools.com/js/default.asp
» W3Schools JavaScript HTML DOM Objectshttp://www.w3schools.com/js/js_obj_htmldom.asp
» Mozilla Browserhttp://www.mozilla.org/
Oct 23 fit100-12-functions 3
Th
e I
nfo
rmati
on
Sch
ool
of
the U
niv
ers
ity o
f W
ash
ing
ton
FunctionsA function is a way to bundle a set of instructions and give them a
name so that you can reuse them easilyFunctions have a specific layout
» <name> the function name is an identifier
» <parameter list> list of input variables for the function
» <statements> the statements do the work
function <name> ( <parameter list> ) { <statements>}
Oct 23 fit100-12-functions 4
Th
e I
nfo
rmati
on
Sch
ool
of
the U
niv
ers
ity o
f W
ash
ing
ton
Example Function
Write a simple function to compute the Body Mass Index when the inputs are in English units (ie, US units)
function <name> ( <parameter list> ) { <statements>}
// Calculate Body Mass Index in English units // weight in pounds// height in inches// returns body mass index
function bmiE(weightLBS, heightIN) { var heightFt = heightIn / 12; // convert to feet return 4.89 * weightLBS / (heightFt * heightFt);}
template
example
Oct 23 fit100-12-functions 5
Th
e I
nfo
rmati
on
Sch
ool
of
the U
niv
ers
ity o
f W
ash
ing
ton
Develop the function
// Calculate Body Mass Index in English units // weight in pounds// height in inches// returns body mass index
function name(parameter list) {
statements
}
First, make sure you understand what you want the function to do and how it will accomplish the task.
Oct 23 fit100-12-functions 6
Th
e I
nfo
rmati
on
Sch
ool
of
the U
niv
ers
ity o
f W
ash
ing
ton
Pick a name for the functionFunction names are identifiers
» start with a letter» should have a fairly obvious meaning» should not be one of the Javascript reserve words
// Calculate Body Mass Index in English units // weight in pounds// height in inches// returns body mass index
function bmiE(parameter list) {
statements
}
Oct 23 fit100-12-functions 7
Th
e I
nfo
rmati
on
Sch
ool
of
the U
niv
ers
ity o
f W
ash
ing
ton
Pick the parametersParameter names are also identifiers
» these are the variable names that your function will use when it is performing its calculations
» should have a fairly obvious meaning
// Calculate Body Mass Index in English units // weight in pounds// height in inches// returns body mass index
function bmiE(weightLBS, heightIN) {
statements;
}
Oct 23 fit100-12-functions 8
Th
e I
nfo
rmati
on
Sch
ool
of
the U
niv
ers
ity o
f W
ash
ing
ton
Functions without Parameters!
• Function do not have to have parameters» But we still need to include the parentheses
// Print out Greeting // Typical Greeting is "Hello World"
function giveGreeting() {
document.write("Hello World!");
}
Oct 23 fit100-12-functions 9
Th
e I
nfo
rmati
on
Sch
ool
of
the U
niv
ers
ity o
f W
ash
ing
tonWrite the function body
The function body includes whichever statements are required to implement the desired capability.
// Calculate Body Mass Index in English units // weight in pounds// height in inches// returns body mass index
function bmiE(weightLBS, heightIN) { var heightFt = heightIn / 12; // convert to feet return 4.89 * weightLBS / (heightFt * heightFt);}
Oct 23 fit100-12-functions 10
Th
e I
nfo
rmati
on
Sch
ool
of
the U
niv
ers
ity o
f W
ash
ing
ton
A Simple Testing Template<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><title>Body Mass Index</title><script type="text/javascript">// Figure Body Mass Index in English unitsfunction bmiE( weightLBS, heightIn ) { var heightFt = heightIn / 12; // Change to feet return 4.89 * weightLBS / (heightFt * heightFt);}</script></head><body><p>This page provides a simple body mass index calculator.Normal weight corresponds to a BMI of 18.5-24.9</p><script type="text/javascript">document.writeln("<br>bmiE(100,72): "+bmiE(100,72));document.writeln("<br>bmiE(150,72): "+bmiE(150,72));document.writeln("<br>bmiE(175,72): "+bmiE(175,72));document.writeln("<br>bmiE(200,72): "+bmiE(200,72));</script></body></html>
The new function
Test statements
Oct 23 fit100-12-functions 11
Th
e I
nfo
rmati
on
Sch
ool
of
the U
niv
ers
ity o
f W
ash
ing
ton
Try the function and see how it works
Oct 23 fit100-12-functions 12
Th
e I
nfo
rmati
on
Sch
ool
of
the U
niv
ers
ity o
f W
ash
ing
ton
Global or Local?!?• Scope of a variable describes where and when it can
be referenced» Local variables are only known inside of a function
(curly braces)» Global variables are know by all the Javascript inside of
<script> </script> pairs
// Calculate Percentage of Study Hours/Week // time in hours// returns hoursvar days = 7;function calculateStudyHrs(time) { var totalHrs = 24 * days; return time/totalHrs;}
Oct 23 fit100-12-functions 13
Th
e I
nfo
rmati
on
Sch
ool
of
the U
niv
ers
ity o
f W
ash
ing
ton
The if / else statementThe if statement is a conditional statement
» a conditional expression is evaluated as being true or false• the expression is a boolean expression (ie, returns true or false)
» if the condition is true, then one set of statements is executed» if the statement is false, then a different set of statements is executed
if (<boolean expression>) { <statements>} else { <statements>}
Oct 23 fit100-12-functions 14
Th
e I
nfo
rmati
on
Sch
ool
of
the U
niv
ers
ity o
f W
ash
ing
ton
Examples
if (count == 0) { ready = false;} else { ready = true; count = count-1;}
What is the conditional expression?
What statements are part of the true block?
Which statements are part of the false block?
What happens when count is 21? 0? -1?
if (pageCount >= 100) { alert("This may take a few minutes.");}
Which statements are part of the false block?
What happens when pageCount is 21? 100? 200?
What is the conditional expression?
What statements are part of the true block?
Oct 23 fit100-12-functions 15
Th
e I
nfo
rmati
on
Sch
ool
of
the U
niv
ers
ity o
f W
ash
ing
ton
Brian’s Black Cup Extended
• A Walk through…
Oct 23 fit100-12-functions 16
Th
e I
nfo
rmati
on
Sch
ool
of
the U
niv
ers
ity o
f W
ash
ing
ton
Comments on Debugging
• Debugging JavaScript can be hard» The browsers all implement things a little
differently, particularly old browsers• upgrade if you are using something old!
QuickTime™ and aTIFF (Uncompressed) decompressor
are needed to see this picture.
QuickTime™ and aTIFF (Uncompressed) decompressor
are needed to see this picture.
QuickTime™ and aTIFF (Uncompressed) decompressorare needed to see this picture.
Oct 23 fit100-12-functions 17
Th
e I
nfo
rmati
on
Sch
ool
of
the U
niv
ers
ity o
f W
ash
ing
ton
Use the W3Schools TryIt Editor
Oct 23 fit100-12-functions 18
Th
e I
nfo
rmati
on
Sch
ool
of
the U
niv
ers
ity o
f W
ash
ing
ton
Display results using alert(...)
Use the alert("This is a message") function
Oct 23 fit100-12-functions 19
Th
e I
nfo
rmati
on
Sch
ool
of
the U
niv
ers
ity o
f W
ash
ing
ton
Use an editor that helps you
The jEdit editor helps you by doing syntax highlighting.
QuickTime™ and aTIFF (Uncompressed) decompressor
are needed to see this picture.
Oct 23 fit100-12-functions 20
Th
e I
nfo
rmati
on
Sch
ool
of
the U
niv
ers
ity o
f W
ash
ing
ton
Display results using writeln(...)
<body><script type="text/javascript">document.writeln("someVariable: "+someVariable);</script></body>
Oct 23 fit100-12-functions 21
Th
e I
nfo
rmati
on
Sch
ool
of
the U
niv
ers
ity o
f W
ash
ing
ton
Use a browser that helps you
• All browsers try to be forgiving of errors, which means that they generally don't produce a lot of error messages» use a browser that helps you debug like Mozilla
Oct 23 fit100-12-functions 22
Th
e I
nfo
rmati
on
Sch
ool
of
the U
niv
ers
ity o
f W
ash
ing
ton
enable Mozilla JavaScript Console
The Mozilla JavaScript console helps you by showing good error messages.
Oct 23 fit100-12-functions 24
Th
e I
nfo
rmati
on
Sch
ool
of
the U
niv
ers
ity o
f W
ash
ing
ton
Homework 3
Found on Website
Due: Oct 30 in class