1. JavaScript 101 Lesson 6: Introduction to Functions

2. Lesson Topics What is a function Why functions are useful How to declare a function How to use a function How functions are used with event handlers

3. What is a Function As programs grow in size, they are easier to manage if they are split up into smaller pieces JavaScript uses the term function or method to describe these smaller pieces

4. Functions cont. A function (or method) is a unit of code that performs a specific, well defined task Programming languages come with built-in functions used to perform common tasks Examples of JavaScript built-in functions: document.write – writes text to a Web document alert– displays a message inside a small window with an OK button prompt– asks the user a question and stores the answer in a variable

5. Why Functions are useful Give structure and organization to your code Make programming easier Instead of repeating and rewriting similar code again and again, you can place the code and use the function repeatedly Often used as event handlers in JavaScript

6. Function Declaration Just like variables, functions need to be declared or defined Function declaration usually put in head section The function declaration includes the function name, its parameters, and the statements that will execute Function declaration syntax: function functionname() { JavaScript statements go here }

7. Parameters and Functions Functions solve specialized problems or carry out specific tasks Often information relevant to the task is needed by the function This information made available to functions through the use of parameters

8. Parameters Parameters are special variables used with functions Examples of parameters: alert(“This is the parameter!”); Information inside ( ) is the parameter for alert method

9. Parameters and Functions A function may have zero or more parameters (called the parameter list) Each parameter name must be a legal variable name and must be unique in the parameter list The syntax for a function with parameters is: function functionname(parameter1, parameter2,…)

10. Return Statements and Functions Functions perform some kind of calculation Special feature of functions allows the result of a calculation to be sent back to the main part of a program Similar to way functions in Excel display the answer in a cell

11. Return Statements and Functions This is accomplished by using the keyword return inside a function The syntax for the return statement is: return variablename;

12. How to use a Function Using a function is referred to as function call The syntax for function call with no parameters: functionname(); A function call for function with parameters: functionname(parameter1, parameter2,…) The function call must include the exact number of parameters found in function declaration

13. Function Call and Event Handlers Functions are often used in conjunction with event handlers to respond to user events Using a function makes an event handler code looks cleaner and easier to understand

14. In the lab You will write a function that works with the onClick event handler for a button Your function will display an alert box and change the background color Open Notepad and create a new HTML document named lesson0601.html Enter code from p. 6-10 exactly as you see it Save the file and open it using either Internet Explorer or Netscape

15. Student Modifications Modify the code on p. 6-11 as follows: Change the colors used by the function Add a second button and a second function that use different colors and a different message

16. Adding a parameter Save your work from the previous exercise With this example you will write a function that has a parameter Start a new html document, then enter the code on p. 6-12 exactly as written

17. Student modifications Modify the code on p. 6-12 as follows: Add another button for another famous quote, be sure to use the existing function, just change the value of the parameter Modify the function by adding a second parameter Use the second parameter in a second alert box to display the author of the quote

18. Lesson Summary Programs are organized and structured by breaking them into smaller pieces In JavaScript, these smaller pieces are called functions or methods A function is a set of statements that carries out a specific task You create own functions in JavaScript writing a function declaration in the head of your Web document

19. Lesson Summary (cont.) The function declaration includes the function name, its parameters, and the statements that will execute You write a function call to use the function The function call consists of the function name plus any required parameters Functions are often used with event handlers to organize and simplify a Web page’s response to a user event