The Information School of the University of Washington Oct 23 fit functions 1 Functions / If Else INFO/CSE 100, Fall 2006 Fluency in Information Technology
The Information School of the University of Washington Oct 23 fit functions 2 Readings and References Reading »Fluency with Information Technology Chapter 20, Abstraction and Functions Other References »W3Schools JavaScript tutorial »W3Schools JavaScript HTML DOM Objects »Mozilla Browser
The Information School of the University of Washington Oct 23 fit functions 3 Functions A function is a way to bundle a set of instructions and give them a name so that you can reuse them easily Functions have a specific layout » the function name is an identifier » list of input variables for the function » the statements do the work function ( ) { }
The Information School of the University of Washington Oct 23 fit functions 4 Example Function Write a simple function to compute the Body Mass Index when the inputs are in English units (ie, US units) function ( ) { } // 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
The Information School of the University of Washington Oct 23 fit functions 5 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.
The Information School of the University of Washington Oct 23 fit functions 6 Pick a name for the function Function 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 }
The Information School of the University of Washington Oct 23 fit functions 7 Pick the parameters Parameter 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; }
The Information School of the University of Washington Oct 23 fit functions 8 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!"); }
The Information School of the University of Washington Oct 23 fit functions 9 Write 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); }
The Information School of the University of Washington Oct 23 fit functions 10 A Simple Testing Template <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" " Body Mass Index // Figure Body Mass Index in English units function bmiE( weightLBS, heightIn ) { var heightFt = heightIn / 12; // Change to feet return 4.89 * weightLBS / (heightFt * heightFt); } This page provides a simple body mass index calculator. Normal weight corresponds to a BMI of document.writeln(" bmiE(100,72): "+bmiE(100,72)); document.writeln(" bmiE(150,72): "+bmiE(150,72)); document.writeln(" bmiE(175,72): "+bmiE(175,72)); document.writeln(" bmiE(200,72): "+bmiE(200,72)); The new function Test statements
The Information School of the University of Washington Oct 23 fit functions 11 Try the function and see how it works
The Information School of the University of Washington Oct 23 fit functions 12 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 pairs // Calculate Percentage of Study Hours/Week // time in hours // returns hours var days = 7; function calculateStudyHrs(time) { var totalHrs = 24 * days; return time/totalHrs; }
The Information School of the University of Washington Oct 23 fit functions 13 The if / else statement The 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 ( ) { } else { }
The Information School of the University of Washington Oct 23 fit functions 14 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?
The Information School of the University of Washington Oct 23 fit functions 15 Brian’s Black Cup Extended A Walk through…
The Information School of the University of Washington Oct 23 fit functions 16 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!
The Information School of the University of Washington Oct 23 fit functions 17 Use the W3Schools TryIt Editor
The Information School of the University of Washington Oct 23 fit functions 18 Display results using alert(...) Use the alert("This is a message") function
The Information School of the University of Washington Oct 23 fit functions 19 Use an editor that helps you The jEdit editor helps you by doing syntax highlighting.
The Information School of the University of Washington Oct 23 fit functions 20 Display results using writeln(...) document.writeln("someVariable: "+someVariable);
The Information School of the University of Washington Oct 23 fit functions 21 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
The Information School of the University of Washington Oct 23 fit functions 22 enable Mozilla JavaScript Console
The Mozilla JavaScript console helps you by showing good error messages.
The Information School of the University of Washington Oct 23 fit functions 24 Homework 3 Found on Website Due: Oct 30 in class