Readings and References Functions INFO/CSE 100, Autumn 2004 Fluency in Information Technology http://www.cs.washington.edu/100 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 Objects http://www.w3schools.com/js/js_obj_htmldom.asp» Mozilla Browser http://www.mozilla.org/ 27-Oct-2004 cse100-12-functions 2004 University of Washington 1 27-Oct-2004 cse100-12-functions 2004 University of Washington 2 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» <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> Example Function function <name> ( <parameter list> ) { <statements> Write a simple function to compute the Body Mass Index when the inputs are in English units (ie, US units) var heightft = heightin / 12; // convert to feet 27-Oct-2004 cse100-12-functions 2004 University of Washington 3 27-Oct-2004 cse100-12-functions 2004 University of Washington 4
Develop the function First, make sure you understand what you want the function to do and how it will accomplish the task. function name(parameter list) { statements Pick a name for the function Function names are identifiers» start with a letter» should have a fairly obvious meaning function bmie(parameter list) { statements 27-Oct-2004 cse100-12-functions 2004 University of Washington 5 27-Oct-2004 cse100-12-functions 2004 University of Washington 6 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 statements Write the function body The function body includes whichever statements are required to implement the desired capability. var heightft = heightin / 12; // convert to feet 27-Oct-2004 cse100-12-functions 2004 University of Washington 7 27-Oct-2004 cse100-12-functions 2004 University of Washington 8
A Simple Testing Template Try the function and see how it works <!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> // Figure Body Mass Index in English units function bmie( weightlbs, heightin ) { var heightft = heightin / 12; // Change to feet </head> <body> <p>this page provides a simple body mass index calculator. Normal weight corresponds to a BMI of 18.5-24.9</p> 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)); </body> </html> The new function Test statements 27-Oct-2004 cse100-12-functions 2004 University of Washington 9 27-Oct-2004 cse100-12-functions 2004 University of Washington 10 Fancy Function Features <head> <title>body Mass Index</title> var heightft = heightin / 12; // convert to feet </head> <script> in <head> location, comments, keywords, formal parameters, curly brackets, parentheses, operators, expressions, assignment statement, return statement, semi-colon 27-Oct-2004 cse100-12-functions 2004 University of Washington 11 Using Fancy Functions <body> <p>this page provides a simple body mass index calculator. Normal weight corresponds to a BMI of 18.5-24.9</p> 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)); </body> <script> in <body> location, document, writeln function call, strings, string concatenation, bmie function call, arguments (aka actual parameters) 27-Oct-2004 cse100-12-functions 2004 University of Washington 12
Comments on Debugging Use the W3Schools TryIt Editor Debugging JavaScript can be hard» The browsers all implement things a little differently, particularly old browsers upgrade if you are using something old! 27-Oct-2004 cse100-12-functions 2004 University of Washington 13 27-Oct-2004 cse100-12-functions 2004 University of Washington 14 Display results using alert(...) Use an editor that helps you Use the alert("this is a message") function The TextPad editor helps you by doing syntax highlighting. 27-Oct-2004 cse100-12-functions 2004 University of Washington 15 27-Oct-2004 cse100-12-functions 2004 University of Washington 16
Display results using writeln(...) Use a browser that helps you <body> document.writeln("somevariable: "+somevariable); </body> 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 27-Oct-2004 cse100-12-functions 2004 University of Washington 17 27-Oct-2004 cse100-12-functions 2004 University of Washington 18 enable Mozilla JavaScript Console The Mozilla JavaScript console helps you by showing good error messages. 27-Oct-2004 cse100-12-functions 2004 University of Washington 19
By the way... Why don't these pages have a <META> tag with the charset attribute? <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1"> Because there's another way to fix the encoding issue. 1. Create a file named.htaccess in your public_html directory on dante. 2. Put the following text in that file using pico: AddType 'text/html; charset=iso-8859-1' html 27-Oct-2004 cse100-12-functions 2004 University of Washington 21