JavaScript and HTML - V

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.

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.

Code:

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

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:

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

Result:

There are plenty of other event handlers you can use within your JavaScript/HTML code.

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".