Programming & Scripting Tutorials

Javascript: Events and Functions

Events

Events are actions that can be detected by Javascript and are an extremely core concept to the language. Unfortunately, events aren't very easy to implement in external Javascript – so to detect an event on an element in this tutorial, we are simply going to use different inline Javascript "event attributes".

There are a hell of a lot of events in Javascript – most of which pretty much just require playing around with and are useful in different circumstances. There are so many, we aren't going to cover them all in these tutorials – but you can easily look up a list online if you so choose.
A list of some of the most common events we can use inline are as follows:



We can use any of the above as an attribute on an HTML element, and if Javascript is enabled – the code inside the attribute value will be executed.
For example:

<strong onMouseOver="javascript:alert('Hi');">Hover over me</strong>


The best way to learn and become experienced with these is simply to play around with them and try different events out.
I personally really prefer dealing with all my event handling externally though, which is why I really like using jQuery instead of traditional Javascript whenever I do any real event handling (although sometimes, it's not worth including the whole jQuery library). And if you don't know what the hell I was just talking about with the J-cloth or whatever I just said – try a quick Google for "jQuery" (or if I've started publishing them by the time you're reading this, check out my jQuery tutorials).

Functions

We can also call functions from inside an event attribute value (as we can from any piece of Javascript if the function exists). Functions are essentially just named pieces of code (which may or may not need pieces of data, called parameters, to function) and are a fundamental of nearly any programming/scripting language.
You can create a function in Javascript by first writing the 'function' keyword followed by the function name, then providing some empty brackets (we have to do these as we'll put things in these brackets if/when we need parameters to be passed to the function), and then specifying the piece of code we want to be executed in curly brackets.
So something like this:

function TestFunction()
{
	//Function code here
}


So if you wanted a function that outputs an alert box that says "Test!" every time you execute it, you might want to do something like this:

function AlertHello()
{
	alert('Test!');
}


We can then do what's called "calling" a function (executing it's code) whenever we like after we've defined the function by simply writing it's name, followed by some empty brackets (these will be populated if the function requires parameters) and then a semi-colon. So if we wanted to actually implement this function into a .js file of some kind, we might do something like this:

function AlertHello()
{
	alert('Test!');
}

var uInput = prompt('Enter a value to see an alert box!');
AlertHello();


Functions are extremely useful as they stop repetition of code (so if we wanted to call "AlertHello()" various times during our program) and make everything neater.
Functions become even more useful when we can pass parameters to them! We can specify that a function needs parameters by simply writing the variable declarations we want inside of the function's brackets (separated by commas). So if we wanted a function that added two numbers together, we'd want something like this:

function AddTwoNumbers(var one, var two)
{
	//Code to add the values together
}


We could then pass values to the function by simply putting them in the brackets when we call the function (again, separated by commas). It's worth noting that you must get the exact function name right, and also give the function the right number of parameters for it to work.
So if we wanted to call "AddTwoNumbers" with 5 and 10, we would do this:

AddTwoNumbers(5, 10);


So how do we actually get the function to add the two values together?
Well while we are coding for the function, we can access the values that have been passed to the function by simply specifying the names we specified in the function declaration. From here there are some different ways we can go.
You can either get the function to output the result for you, in something like this:

function AddTwoNumbers(var one, var two)
{
	alert(one+two);
}


But then what would we do if we wanted to prepend something to this? And isn't the name "AddTwoNumbers" now slightly misleading since it actually outputs the addition and doesn't just add them?

Well we can get the function to "return" a value if we want. Writing 'return' followed by the value you want to return and then a semicolon means that wherever the function is called, the value the function returned will essentially be in it's place. So if our "AddTwoNumbers" function returned the addition of the two numbers, we could put it in a variable assignment or if statement and it would work just as if we were adding the numbers right there.
For example:

function AddTwoNumbers(var one, var two)
{
	return one+two;
}

var uInput = prompt('Enter a number');
alert('Number + 5 is: ' + AddTwoNumbers(uInput, 5));


Notice how we nested the functions there – we put our AddTwoNumbers function inside of the Alert function and it worked absolutely fine!

Functions are extremely useful in Javascript and remember that you can put pretty much any Javascript you like inside one and then call that code (and make use of any values) whenever you like!

And going back to events for a little bit, if we want to call a function when an event triggers – we can quite simply call the function (as long as we've defined the function before we call it):

JS:
function AlertHello()
{
	alert('Test!');
}


HTML:
<div onMouseOver="javascript:AlertHello();">Hover over me!</div>


This Javascript tutorial was written by


Back to Javascript

What's Hot?

What's New?

Advertisement: