JavaScript III Functions and Abstraction

2 JavaScript so far statements assignment function calls data types numeric string boolean expressions variables operators function calls

Review by Example From W3Schools JavaScript Examples 3

4 Review by Example tempInFahr = prompt("Enter temperature (in Fahrenheit):", "32"); tempInFahr = parseFloat(tempInFahr); tempInCelsius = (5/9) * (tempInFahr - 32); document.write("You entered " + tempInFahr + " degrees Fahrenheit. "); document.write("That's equivalent to " + tempInCelsius + " degrees Celsius.");

5 Abstraction JavaScript has built-in functions document.write Math.sqrt Benefit of abstraction we don't have to write these we don't have to know how they work Fundamental idea in computer science

6 User-defined functions Our own abstractions FahrToCelsius Benefits code once, use often fix/enhance in one place add structure to large programs groups and names chunks of computation

7 Function Calls When a we use a function in the body of a program, it is a “function call” Use the name of the function along with values for its parameters. Function call acts as a black box & returns a value. The returned value can be stored in some variable. Example tempInFahr = prompt("Enter temp. (in Fahrenheit):", "32"); tempInFahr = parseFloat(tempInFahr);

8 Function Call Syntax prompt ( "Enter a number", "0") return value, in this case is a string containing the user input function nameparameter #1 parameter #2 parameter list

9 Function definition example function FahrToCelsius (tempInFahr) { return (5/9) * (tempInFahr – 32); } declaration start function nameparameter names function body start of body end of body

10 Function Definitions Format of a function definition function function-name ( parameter-list ) { declarations and statements } Function name any valid identifier Parameter list names of variables that will receive arguments Must have same number as function call May be empty Declarations and statements Function body (“block” of code)

11 return statement Math.sqrt returns a value document.write does not If a return statement exists function will return a value what value? If not no value

12 return statement Returning control return statement Can return either nothing, or a value return expression ; No return statement same as return; Not returning a value when expected is an error Example Math.sqrt returns a value document.write does not

13 Example: User-Defined Functions convert.html

14 Documentation Functions are self-contained meant to be used elsewhere eventually by others Documentation very important function FahrToCelsius (tempInFahr) // Assumes: tempInFahr is a temperature in Fahrenheit // Returns: the equivalent temperature in Celsius { return (5/9) * (tempInFahr – 32); }

15 Scope of variables With functions different levels of interpretation Local what happens inside of a function Global what happens outside of the function

16 Local Variables All variables declared in function are called local Do not exist outside current function Parameters Also local variables Promotes reusability Keep short Name clearly

17 Local/Global Variable Example taxes.html

18 Libraries We can define a group of functions usually related Separate file.js extension Load using script tag Call functions from page

19 Examples of Using Libraries convert.js convert2.html In Class Practice: ftok.html