Javascript 101: Function Fundamentals (Part 5)

Functions are the bread and butter of any programming language, these are reusable sections of script which can execute on an event, condition or user input.

In this tutorial we will look at functions, allowing us to create scripts which are far more complex and interactive, adding real benefit to your web design projects.

Building a Javascript Function

Take a look at a basic function below:

function MyFunctionName ()
{
    alert(“Welcome To Our web Design Project”);
}

This function will not run when the page loads and the script is executed. This is because although the script has run, the function has not actually been called. For a function to execute, you would need to call it from some place else within the script, or from an event in your HTML. See below:

function MyFunctionName ()
{
    alert(“Welcome To Our web Design Project”);
}

MyFunctionName ();

This is the simplest method, and is called when the script is executed.

Consider calling the function from a HTML button?

Click Me Please

This is achieved by calling the JavaScript function directly from the “onclick” event in the HTML see below:

<button onclick="JavaScript:MyFunctionName ();">Click Me Please</button>

Whats Next

In the next post we will look at combining the last two posts: variables and function fundamental. Using these two together we will push your scripts 1 step further.