1 the information school of the university of washington oct 30fit100-15-review programming review...
Post on 19-Dec-2015
215 views
TRANSCRIPT
Oct 30 fit100-15-review 1
Th
e I
nfo
rmati
on
Sch
ool
of
the U
niv
ers
ity o
f W
ash
ing
ton
Programming Review
INFO/CSE 100, Fall 2006
Fluency in Information Technology
http://courses.washington.edu/info100/
Oct 30 fit100-15-review 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
• Chapters 9, 11 18-22
Oct 30 fit100-15-review 3
Th
e I
nfo
rmati
on
Sch
ool
of
the U
niv
ers
ity o
f W
ash
ing
tonVariables In Real Life
• A variable is a "container" for information you want to store» The name of the variable stays the same, but the value
associated with that name can changeThat’s why it’s called a “variable”!
Oct 30 fit100-15-review 4
Th
e I
nfo
rmati
on
Sch
ool
of
the U
niv
ers
ity o
f W
ash
ing
ton
Variables In Programming• Program variables have names and values
» Names (also called identifiers) • What are the “rules” for variable names?
» Values• Can they change?• What are some valid variable types?
Oct 30 fit100-15-review 5
Th
e I
nfo
rmati
on
Sch
ool
of
the U
niv
ers
ity o
f W
ash
ing
ton
Variable Declarations
How do you?
Declare variable myName as undefined?
Declare variable myName and give it a value (initialize it)?
Declare variable myName and give it an empty value (initialize empty)?
Change variable myName to new value?
Oct 30 fit100-15-review 6
Th
e I
nfo
rmati
on
Sch
ool
of
the U
niv
ers
ity o
f W
ash
ing
ton
Basic Data Types in Javascript
Numbers:var gasPrice = ?????;
Stringsvar eyeColor = ?????;
Booleanvar isMonday = ?????;
Oct 30 fit100-15-review 7
Th
e I
nfo
rmati
on
Sch
ool
of
the U
niv
ers
ity o
f W
ash
ing
ton
Expressions
• The right-hand side of an assignment statement can be any valid expression
• Expressions are “formulas” saying how to manipulate existing values to compute new values
• How?» Subtract 5.25 from myBalance and save it as
myBalance» Save numDaysOld as myAge X 365» Save isFreezing by evaluating currentTemp
less than 32.» Set welcomeMessage as Welcome myName
Oct 30 fit100-15-review 8
Th
e I
nfo
rmati
on
Sch
ool
of
the U
niv
ers
ity o
f W
ash
ing
ton
OperatorsUse operators to build expressions
» Numeric operators+ - * / mean add, subtract, multiply, divide
answer = 7 + 3;
» String operator+ means concatenate strings
answer = "8" + "2";
» Relational operators< <= == != >= > mean less than, less than or equal to, equal to, not equal to, greater than or equal to, greater than
» Boolean operators&& || ! mean and, or, not
Oct 30 fit100-15-review 9
Th
e I
nfo
rmati
on
Sch
ool
of
the U
niv
ers
ity o
f W
ash
ing
ton
FunctionsWhat is a function?
What do the parts of the function layout do?» <name>» <parameter list>» <statements>
function <name> ( <parameter list> ) { <statements>}
Oct 30 fit100-15-review 10
Th
e I
nfo
rmati
on
Sch
ool
of
the U
niv
ers
ity o
f W
ash
ing
ton
Write a Function
Write a simple function to return the number of days given a number of weeks.(example: input = 3 weeks / return = 21 days)
function <name> ( <parameter list> ) { <statements>}
template
Oct 30 fit100-15-review 11
Th
e I
nfo
rmati
on
Sch
ool
of
the U
niv
ers
ity o
f W
ash
ing
ton
Calling a Function
function daysInWeeks(weeks) { return 7 * weeks;}
// call the functionvar numWeeks = ;
// another function calldocument.write( );
function calls
Oct 30 fit100-15-review 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
// Calculate Percentage of Study Hours/Week // time in hours// returns hoursvar days = 7;function calculateStudyHrs(time) { var totalHrs = 24 * days; var funcTotal = time/totalHrs; return funcTotal;}var total = calculateStudyHrs(4);alert(“Total: “ + total);
Oct 30 fit100-15-review 13
Th
e I
nfo
rmati
on
Sch
ool
of
the U
niv
ers
ity o
f W
ash
ing
ton
Layout of the GUI
• The layout of the page is controlled with HTML in the body of the page
• What HTML tag is used to encompass all of the GUI input elements?
• What are some valid HTML GUI element tags we have learned?
<body> HTML form layout and specification</body></html>
Oct 30 fit100-15-review 14
Th
e I
nfo
rmati
on
Sch
ool
of
the U
niv
ers
ity o
f W
ash
ing
ton
A simple example
This GUI has several simple controls. What are they?
1.
2.
3.
4.
Oct 30 fit100-15-review 15
Th
e I
nfo
rmati
on
Sch
ool
of
the U
niv
ers
ity o
f W
ash
ing
ton
Form Controls
<form><button type="button" onclick="setResults('good results')">Good Results</button><button type="button" onclick="setResults('bad results')">Bad Results</button><b>Result:</b><input type="text" value="nada" readonly id="resultField"><br><input type="radio" name="case" id="radioLC" checked onclick="setResults(document.getElementById('resultField').value)">Lowercase<input type="radio" name="case" id="radioUC" onclick="setResults(document.getElementById('resultField').value)">Uppercase<br><button type="reset">Reset</button></form>
Oct 30 fit100-15-review 16
Th
e I
nfo
rmati
on
Sch
ool
of
the U
niv
ers
ity o
f W
ash
ing
tonEvents Cause Processing
• After drawing a page, the browser sits idle waiting for something to happen … when we give input, we cause events
• Processing events is the task of a block of code called an event handler» The code to execute is identified in the tag using
the appropriate attribute» There are many event types
• onClick, onChange, onMouseOver ...
Oct 30 fit100-15-review 17
Th
e I
nfo
rmati
on
Sch
ool
of
the U
niv
ers
ity o
f W
ash
ing
tonsetResults(resultString)
parameter variable, local variable, if/else statement, field reference, call to toLowerCase() function
<script type="text/javascript">function setResults(resultString) { var tempString = resultString; if (document.getElementById("radioLC").checked) { tempString = tempString.toLowerCase(); } else if (document.getElementById("radioUC").checked) { tempString = tempString.toUpperCase(); } document.getElementById("resultField").value = tempString;}</script>
Oct 30 fit100-15-review 18
Th
e I
nfo
rmati
on
Sch
ool
of
the U
niv
ers
ity o
f W
ash
ing
ton
The if / else statementWhat are the parts? When do they get evaluated / executed?
if (<something>) { <something>} else { <something>}
1.
2.
3.
Oct 30 fit100-15-review 19
Th
e I
nfo
rmati
on
Sch
ool
of
the U
niv
ers
ity o
f W
ash
ing
ton
More if/else Statements
if (cashInPocket < 25.00) {if (parkingTicket == "Expensive") {
alert("No more money for me."); }}
Convert to one if statement.
Oct 30 fit100-15-review 20
Th
e I
nfo
rmati
on
Sch
ool
of
the U
niv
ers
ity o
f W
ash
ing
ton
The for loop
What do the different parts do?
for (something; something; something) { something;}
1. 2. 3.
4.
Oct 30 fit100-15-review 21
Th
e I
nfo
rmati
on
Sch
ool
of
the U
niv
ers
ity o
f W
ash
ing
ton
i++• What does x =
• var x = 0;for (i=0; i < 100; i++) { x++;}
Oct 30 fit100-15-review 22
Th
e I
nfo
rmati
on
Sch
ool
of
the U
niv
ers
ity o
f W
ash
ing
ton
body of loop may not execute at all
• Notice that depending on the values of the control variables, it is quite possible that the body of the loop will not execute at all
var itemCount = 0;...for (var i=0; i < itemCount; i++) { document.writeln("<br>..processing item "+i);}
check for limit conditionitemCount is 0 when we get here, so i<itemCount is immediately false and
the loop body is skipped completely
Oct 30 fit100-15-review 23
Th
e I
nfo
rmati
on
Sch
ool
of
the U
niv
ers
ity o
f W
ash
ing
ton
Arrays• What is an array?
• 3 Ways to create an array?
• How can we tell how many items in array?
Oct 30 fit100-15-review 24
Th
e I
nfo
rmati
on
Sch
ool
of
the U
niv
ers
ity o
f W
ash
ing
ton
JavaScript Indexed Arrays
• What is the value of the first index on an Array?
• What is the JavaScript code that will give us the index number of the last element in an Array?
Oct 30 fit100-15-review 25
Th
e I
nfo
rmati
on
Sch
ool
of
the U
niv
ers
ity o
f W
ash
ing
tonArray Element Access
var myArray = [“one”, “three”, “two”, “seven”, “zero”];
How many elements?
What is myArray[3]?
What is myArray[1];