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