JavaScript and HTML

In previous lessons, we've learned about the syntax of JavaScript, but we haven't yet learned how to "attach" the JavaScript to our HTML elements. That's what I'll show you in this lesson.

Standalone JavaScript

First, let's look at what a standalone piece of JavaScript looks like.

<script type="text/javascript">
<!--
	alert('Hey, remember to tell your friends about Quackit.com!');
-->
</script>

If we place the above JavaScript between the 'head' tags (or 'body' tags), it will run as soon as we load the page.

Now this is fine - as long as you want it to run as soon as the page loads!

But, what if you don't want it to run as soon as the page loads? What if you only want it to run when a user clicks on a button?

Easy! This is where you need to use an "event handler".

What's an Event Handler?

In JavaScript/HTML, an event handler allows you to attach your JavaScript to your HTML elements.

Event handlers allow your web page to detect when a given "event" has occurred, so that it can run some JavaScript code. An example of an "event" could be say, a click on an HTML element.

In your code, an event handler is simply a special attribute that you add to your HTML element. For example, to run some JavaScript when the user clicks on an element, you add the onClick attribute to the element.

The examples below demonstrate this for you.

Adding JavaScript to an HTML Element

Here's a basic example of adding JavaScript to an HTML element. In this case, when the user clicks on our button, a JavaScript alert box is displayed. This is done by adding an onClick attribute and placing the JavaScript alert box code into it.

Code:

Result:

JavaScript "On Double Click"

You could just have easily used another event to trigger the same JavaScript. For example, you could run JavaScript only when the double clicks the HTML element. We can do this using the onDblClick event handler.

Code:

Result:

There are plenty of other event handlers you can use within your JavaScript/HTML code. In total, there are 18 event handlers (as listed by the W3C). We'll cover these in more detail later.

Complex Code

Once you become well versed in JavaScript, you'll be able to write some complex programs using lots of code. When this happens, you'll want to place your code into a "function". We'll cover functions later but, for now, understand that you'll be able to call your function just like we call the JavaScript alert() function in the above examples - using event handlers.

• << Previous
• Next Lesson >>