Performing an action with a function

To create a function, first decide what exactly you want the function to do. For now, we will start with a simple JavaScript function that will print a message to the screen. Remember the idea behind using functions is to reuse and organize your code. That should start to make sense as follow examples shown on this page.

Suppose we have the following function definition:

function DisplayMessage () {
document.write ("Learn JavaScript from the Scripting Master!");

The name of this function is DisplayMessage. Anytime we want to use this function, we will use the function name we listed between the keyword function and parentheses. When we say we want to use or call a function, we are saying we want the function to run the code inside function. Recall the code inside the curly braces is called command block. In the DisplayMessage function, our command block only consists of a statement that will print a message using the document.write method.

Note that our function takes no parameters. Recall parameters are listed inside the parenthesis. To call the DisplayMessage function, we will simply write

DisplayMessage ()

Now, let's use this example to show you how to use a function in JavaScript:

<script language="javascript">
function DisplayMessage () {
document.write ("Learn JavaScript from the Scripting Master!");
document.write ("Calling the function....<br>");
DisplayMessage ();
document.write ("<br>..Done!");

The execution of this script will begin on line 5 and that prints the "Calling the function....." Remember that a function is executed only when you call the function. We call the function on line 6. When the function is called, the code inside the function will be executed. So after line 6, line 2 will be executed that states the name of the function and indicates that it takes no parameters because of the empty parentheses. Next, line 3 will be executed to print the "Learn JavaScript from the Scripting Master!" Line 4 ends our function. Finally, line 7 will be executed to print "..Done!" The following shows the output of the above JavaScript code:

As you may have noticed, when we use functions we are changing the order in which the statements in our scripts are executed. In other words, your statements may not run in the order they are listed in your program. This type of control structure is referred to as non-linear (non-sequential) execution. In our JavaScript code above, lines 2, 3, and 4 were executed after line 6.

With this one example, don't feel that functions make you write extra code. Remember the idea behind using functions is to reuse code. For instance, let's say we wanted to print a long welcome message in 5 different places of our program. For that example, we would define a function that contains our welcome message. Anytime we need to print that message we just simply call the function. You don't have to write 5 different document.write () methods for the welcome message at five different locations in your program!