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.

If we enclose that inside HTML script tags, it will look like this:

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 when the user clicks on a particular 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.

When you use JavaScript like this, you don't need to use script tags (like we did above). Simply place your JavaScript within the event handler and it will work.

<input type="button" onClick="alert('Hey, remember to tell your friends about QHMit.com!');" value="Click Me!">

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.

<input type="button" onDblClick="alert('Hey, remember what I said!');" value="Double Click Me!" />

There are plenty of other event handlers you can use within your JavaScript/HTML code. 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.