the information school of the university of washington oct 23 fit100-12-functions 1 functions / if...
Post on 20-Dec-2015
214 views
TRANSCRIPT
![Page 1: The Information School of the University of Washington Oct 23 fit100-12-functions 1 Functions / If Else INFO/CSE 100, Fall 2006 Fluency in Information](https://reader036.vdocuments.us/reader036/viewer/2022062516/56649d435503460f94a1f49e/html5/thumbnails/1.jpg)
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/
![Page 2: The Information School of the University of Washington Oct 23 fit100-12-functions 1 Functions / If Else INFO/CSE 100, Fall 2006 Fluency in Information](https://reader036.vdocuments.us/reader036/viewer/2022062516/56649d435503460f94a1f49e/html5/thumbnails/2.jpg)
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/
![Page 3: The Information School of the University of Washington Oct 23 fit100-12-functions 1 Functions / If Else INFO/CSE 100, Fall 2006 Fluency in Information](https://reader036.vdocuments.us/reader036/viewer/2022062516/56649d435503460f94a1f49e/html5/thumbnails/3.jpg)
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>}
![Page 4: The Information School of the University of Washington Oct 23 fit100-12-functions 1 Functions / If Else INFO/CSE 100, Fall 2006 Fluency in Information](https://reader036.vdocuments.us/reader036/viewer/2022062516/56649d435503460f94a1f49e/html5/thumbnails/4.jpg)
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
![Page 5: The Information School of the University of Washington Oct 23 fit100-12-functions 1 Functions / If Else INFO/CSE 100, Fall 2006 Fluency in Information](https://reader036.vdocuments.us/reader036/viewer/2022062516/56649d435503460f94a1f49e/html5/thumbnails/5.jpg)
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.
![Page 6: The Information School of the University of Washington Oct 23 fit100-12-functions 1 Functions / If Else INFO/CSE 100, Fall 2006 Fluency in Information](https://reader036.vdocuments.us/reader036/viewer/2022062516/56649d435503460f94a1f49e/html5/thumbnails/6.jpg)
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
}
![Page 7: The Information School of the University of Washington Oct 23 fit100-12-functions 1 Functions / If Else INFO/CSE 100, Fall 2006 Fluency in Information](https://reader036.vdocuments.us/reader036/viewer/2022062516/56649d435503460f94a1f49e/html5/thumbnails/7.jpg)
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;
}
![Page 8: The Information School of the University of Washington Oct 23 fit100-12-functions 1 Functions / If Else INFO/CSE 100, Fall 2006 Fluency in Information](https://reader036.vdocuments.us/reader036/viewer/2022062516/56649d435503460f94a1f49e/html5/thumbnails/8.jpg)
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!");
}
![Page 9: The Information School of the University of Washington Oct 23 fit100-12-functions 1 Functions / If Else INFO/CSE 100, Fall 2006 Fluency in Information](https://reader036.vdocuments.us/reader036/viewer/2022062516/56649d435503460f94a1f49e/html5/thumbnails/9.jpg)
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);}
![Page 10: The Information School of the University of Washington Oct 23 fit100-12-functions 1 Functions / If Else INFO/CSE 100, Fall 2006 Fluency in Information](https://reader036.vdocuments.us/reader036/viewer/2022062516/56649d435503460f94a1f49e/html5/thumbnails/10.jpg)
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
![Page 11: The Information School of the University of Washington Oct 23 fit100-12-functions 1 Functions / If Else INFO/CSE 100, Fall 2006 Fluency in Information](https://reader036.vdocuments.us/reader036/viewer/2022062516/56649d435503460f94a1f49e/html5/thumbnails/11.jpg)
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
![Page 12: The Information School of the University of Washington Oct 23 fit100-12-functions 1 Functions / If Else INFO/CSE 100, Fall 2006 Fluency in Information](https://reader036.vdocuments.us/reader036/viewer/2022062516/56649d435503460f94a1f49e/html5/thumbnails/12.jpg)
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;}
![Page 13: The Information School of the University of Washington Oct 23 fit100-12-functions 1 Functions / If Else INFO/CSE 100, Fall 2006 Fluency in Information](https://reader036.vdocuments.us/reader036/viewer/2022062516/56649d435503460f94a1f49e/html5/thumbnails/13.jpg)
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>}
![Page 14: The Information School of the University of Washington Oct 23 fit100-12-functions 1 Functions / If Else INFO/CSE 100, Fall 2006 Fluency in Information](https://reader036.vdocuments.us/reader036/viewer/2022062516/56649d435503460f94a1f49e/html5/thumbnails/14.jpg)
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?
![Page 15: The Information School of the University of Washington Oct 23 fit100-12-functions 1 Functions / If Else INFO/CSE 100, Fall 2006 Fluency in Information](https://reader036.vdocuments.us/reader036/viewer/2022062516/56649d435503460f94a1f49e/html5/thumbnails/15.jpg)
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…
![Page 16: The Information School of the University of Washington Oct 23 fit100-12-functions 1 Functions / If Else INFO/CSE 100, Fall 2006 Fluency in Information](https://reader036.vdocuments.us/reader036/viewer/2022062516/56649d435503460f94a1f49e/html5/thumbnails/16.jpg)
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.
![Page 17: The Information School of the University of Washington Oct 23 fit100-12-functions 1 Functions / If Else INFO/CSE 100, Fall 2006 Fluency in Information](https://reader036.vdocuments.us/reader036/viewer/2022062516/56649d435503460f94a1f49e/html5/thumbnails/17.jpg)
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
![Page 18: The Information School of the University of Washington Oct 23 fit100-12-functions 1 Functions / If Else INFO/CSE 100, Fall 2006 Fluency in Information](https://reader036.vdocuments.us/reader036/viewer/2022062516/56649d435503460f94a1f49e/html5/thumbnails/18.jpg)
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
![Page 19: The Information School of the University of Washington Oct 23 fit100-12-functions 1 Functions / If Else INFO/CSE 100, Fall 2006 Fluency in Information](https://reader036.vdocuments.us/reader036/viewer/2022062516/56649d435503460f94a1f49e/html5/thumbnails/19.jpg)
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.
![Page 20: The Information School of the University of Washington Oct 23 fit100-12-functions 1 Functions / If Else INFO/CSE 100, Fall 2006 Fluency in Information](https://reader036.vdocuments.us/reader036/viewer/2022062516/56649d435503460f94a1f49e/html5/thumbnails/20.jpg)
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>
![Page 21: The Information School of the University of Washington Oct 23 fit100-12-functions 1 Functions / If Else INFO/CSE 100, Fall 2006 Fluency in Information](https://reader036.vdocuments.us/reader036/viewer/2022062516/56649d435503460f94a1f49e/html5/thumbnails/21.jpg)
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
![Page 22: The Information School of the University of Washington Oct 23 fit100-12-functions 1 Functions / If Else INFO/CSE 100, Fall 2006 Fluency in Information](https://reader036.vdocuments.us/reader036/viewer/2022062516/56649d435503460f94a1f49e/html5/thumbnails/22.jpg)
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
![Page 23: The Information School of the University of Washington Oct 23 fit100-12-functions 1 Functions / If Else INFO/CSE 100, Fall 2006 Fluency in Information](https://reader036.vdocuments.us/reader036/viewer/2022062516/56649d435503460f94a1f49e/html5/thumbnails/23.jpg)
The Mozilla JavaScript console helps you by showing good error messages.
![Page 24: The Information School of the University of Washington Oct 23 fit100-12-functions 1 Functions / If Else INFO/CSE 100, Fall 2006 Fluency in Information](https://reader036.vdocuments.us/reader036/viewer/2022062516/56649d435503460f94a1f49e/html5/thumbnails/24.jpg)
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