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
declaring a Javascript function
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.
calling javascript function
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
function 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
declare 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.
js calling function
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.
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
declaring a Javascript function
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.
calling javascript function
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
function 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
declare 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.
js calling function
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.
Aucun commentaire:
Enregistrer un commentaire