Syntax- Defining Function in Javascript |
There are certain elements that need to be defined for a function to work.
Syntax
function nameoffunction (var1, var2 ...........)
{
Code to be executed
}
Lets look at each of those parts
- First comes the reserve word 'function' .this is to tell the interpreter/browser that we are defining a function and the following code is part of this function. NOTE : If you recall lessons on basics- javascript is a case sensitive language, so writing it Function or FUNCTION will cause errors.
- Give the function a name ex. 'myresults' or any other suitable name that also gives some meaning to the purpose of the function i.e. the task it performs.
- Variables- values of these variables are generally provided by the user on the page where function is called.
- Curly Braces { } to mark the start and end of the executable code.
- Code- Instructions on what to do with those variable values and how to display the results.
Example- JS Function
Functions are used in a variety of places in the website, most commonly with JS events. We will study events in detail in later lessons. First, lets look at a simpler example.
Step 1- Declare the function
We declared a function and named it 'contact'. This contains our lenghty contact info, we wish to display it multiple times on our page. NOTE- the example is to explain the concept to you in simple terms.(Real world application- you wish to display the info at end of every page- function kept in external JS file
- We declared a funciton in the head section of the page and named it 'contact'.
- No variables were required for this simple operation, so the ( ) are empty.
- In the Curly Braces, we wrote instructions on what to do when the function is called by its name from anywhere in the page.
- Where the function is called, javascript write a message on screen.
Step 2- Call the Function
Call the function by its name where it is required.
- We wished to call the function in the body tag, where we wanted it to display the contact info.
- Then we called the function again, no repitition of the lenghty message.
Result
Example 2- Defining Function and using with Events
This is the most common use of functions. The function is called to execute its code, when a certain event occurs. Like when you click the buttons in the example below, it will display a JS Confirm message.
Step 1- Declare the function
- We declared a funciton in the head section of the page and named it 'welcome'.
- No variables were required for this simple operation, so the ( ) are empty.
- In the Curly Braces, we wrote instructions on what to do when the function is called by its name from anywhere in the page.
- When the function is called, javascript should popup a 'Confirm Box' displaying a particular message.
Step 2- Call the Function
Call the function by its name where it is required.
- We created some form buttons within the body and associated a mouse event with them.
- Whenever these buttons are clicked (JS onclick event), browser should run the function called 'welcome'.
Note- in the example above, we have used the function thrice while the code is written in the head section of the page only once. This saves repitition and enforces consistency.
