1 The Information School of the University of Washington Oct 30fit100-15-review Programming Review INFO/CSE 100, Fall 2006 Fluency in Information Technology

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/


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


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”!


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?


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?


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 = ?????;


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


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


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


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


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


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


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>


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.


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>


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 ...


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>


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.


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.


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.


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


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


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?


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?


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];

Documents

1 The Information School of the University of Washington Oct 30fit100-15-review Programming Review INFO/CSE 100, Fall 2006 Fluency in Information Technology