Understanding JavaScript Functions and Abstraction: A Comprehensive Guide

1. JavaScript III Functions and Abstraction

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

3. Review by Example From W3Schools • JavaScript Examples

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

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 parameter #2 function name parameter #1 parameter list

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

10. Function Definitions • Format of a function definition functionfunction-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 returnexpression; • 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 • <script type="text/javascript" src="random.js" /> • Call functions from page

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