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

2 The Information School of the University of Washington Oct 30fit review Readings and References Reading »Fluency with Information Technology Chapters 9,

3 The Information School of the University of Washington Oct 30fit review Variables 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 change That’s why it’s called a “variable”!

4 The Information School of the University of Washington Oct 30fit review 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?

5 The Information School of the University of Washington Oct 30fit review 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?

6 The Information School of the University of Washington Oct 30fit review Basic Data Types in Javascript Numbers: var gasPrice = ?????; Strings var eyeColor = ?????; Boolean var isMonday = ?????;

7 The Information School of the University of Washington Oct 30fit review 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

8 The Information School of the University of Washington Oct 30fit review Operators Use 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

9 The Information School of the University of Washington Oct 30fit review Functions What is a function? What do the parts of the function layout do? » function ( ) { }

10 The Information School of the University of Washington Oct 30fit review 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 ( ) { } template

11 The Information School of the University of Washington Oct 30fit review Calling a Function function daysInWeeks(weeks) { return 7 * weeks; } // call the function var numWeeks = ; // another function call document.write( ); function calls

12 The Information School of the University of Washington Oct 30fit review 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 hours var days = 7; function calculateStudyHrs(time) { var totalHrs = 24 * days; var funcTotal = time/totalHrs; return funcTotal; } var total = calculateStudyHrs(4); alert(“Total: “ + total);

13 The Information School of the University of Washington Oct 30fit review 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? HTML form layout and specification

14 The Information School of the University of Washington Oct 30fit review A simple example This GUI has several simple controls. What are they?

15 The Information School of the University of Washington Oct 30fit review Form Controls <button type="button" onclick="setResults('good results')">Good Results <button type="button" onclick="setResults('bad results')">Bad Results Result: <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 Reset

16 The Information School of the University of Washington Oct 30fit review Events 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...

17 The Information School of the University of Washington Oct 30fit review setResults(resultString) parameter variable, local variable, if/else statement, field reference, call to toLowerCase() function 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; }

18 The Information School of the University of Washington Oct 30fit review The if / else statement What are the parts? When do they get evaluated / executed? if ( ) { } else { }

19 The Information School of the University of Washington Oct 30fit review More if/else Statements if (cashInPocket < 25.00) { if (parkingTicket == "Expensive") { alert("No more money for me."); } Convert to one if statement.

20 The Information School of the University of Washington Oct 30fit review The for loop What do the different parts do? for (something; something; something) { something; }

21 The Information School of the University of Washington Oct 30fit review i++ What does x = var x = 0; for (i=0; i < 100; i++) { x++; }

22 The Information School of the University of Washington Oct 30fit review 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("..processing item "+i); } check for limit condition itemCount is 0 when we get here, so i<itemCount is immediately false and the loop body is skipped completely

23 The Information School of the University of Washington Oct 30fit review Arrays What is an array? 3 Ways to create an array? How can we tell how many items in array?

24 The Information School of the University of Washington Oct 30fit review 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?

25 The Information School of the University of Washington Oct 30fit review Array Element Access var myArray = [“one”, “three”, “two”, “seven”, “zero”]; How many elements? What is myArray[3]? What is myArray[1];