A function is a bit of code that can be used once or many times, and is made of statements to perform tasks.
Each function you create in your script needs to have a unique name so that they can be called in your script.
Below is a simple example of a function.
<script type="text/javascript">
|
|
If you take a look at the script you will see that a function is made by using the "function" keyword before the function name "myFunction", which is then followed by parentheses and an open brace. The statements for your function go on the next line, then finally you close the function with a brace. Pretty simple isn't it?
So, you have made your function, but how do you call it?
Easy, take the script above, when you call the function it will show an alert box displaying the message inside the quotes "hello world", now to call it, all you need to do is place "myFunction()" anywhere under it, placing it above the function will cause an error because the function hasn't loaded. A good way to avoid that is to place functions inside your
tags and then you can call them anywhere in your document. Take a look at the script below which shows you how I called the function "myFunction()".
<script type="text/javascript">
|
|
That's very basic way of calling the function, there are loads of other ways to go about calling them. A common way is to have the function run when the document has loaded, so to do this you could place the function inside your
tag using the event handler "onload", to understand what I mean take a look below.
<body onload="myFunction()">
|
|
Now when the document has loaded you will then receive the alert box displaying the message. That's pretty basic, functions aren't limited to the example I have shown.
we can also pass information back to the function, take a look at the example below.
<script type="text/javascript">
|
|
As you can see the function basically stays the same, only now the function "myFunction" has an added parameter "message", this is a function argument. Any information passed to the function is stored inside the "message" variable. To pass information to the function you just need to input some data. For this example we kept with "hello world", so if you look at myFunction("hello world"), all this is doing is passing "hello world" to the function which then gets alerted.
So, what's so great about passing information back to a function?
Many reasons why, and i'll show you an example.
<script type="text/javascript">
|
|
In the example above we have 2 buttons, each button is calling the same function but each button will display a different message when clicked on. We use the event handler "onclick", what this does is run the function when the button has been clicked on. So as you can see, with passing information back to a function like the example above you can have it perform a task, this saves having to write out the whole function again and again.
Just a brief tutorial on functions, there is a lot more to be learned about functions, but for now the basics will do.
| Discuss Tutorial: Introduction to Functions | 0 Comments |